basta basta chiudi

static/css/patch.css

@@ -1,13 +1,24 @@
+h2,
+h3 {
+	font-weight: normal;
+	font-size: 32px;
+	margin: 0;
+}
+
 .instrument {
 	max-height: 100vh;
 	max-width: 100vw;
+	width: 100%;
 	object-fit: contain;
 	margin: 0 auto;
-	margin-top: 32px;
 	display: block;
 	position: relative;
 }
 
+.new-snippet {
+	display: flex;
+}
+
 .snippets {
 	width: 100%;
 	padding: 0;
@@ -80,16 +91,21 @@ main {
 	line-height: 1.2;
 }
 
-.meta {
-	display: inline-block;
+.meta > * {
 	border: 1px solid currentColor;
 	padding: 16px;
-	margin: 32px 0;
-	max-width: 40ch;
+}
+
+.meta h2 {
+	margin: 0;
+}
+
+.meta > * + * {
+	margin-top: 16px;
 }
 
 .meta .date {
-	margin-top: 8px;
+	margin-top: 16px;
 	opacity: 0.5;
 }
 
@@ -102,3 +118,15 @@ main {
 	background-color: rgba(200, 200, 200, 0.5);
 	max-width: 60ch;
 }
+
+.grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	gap: 16px;
+	align-items: flex-start;
+}
+
+.grid .instrument {
+	grid-column: 2 / span 2;
+	border: 1px solid currentColor;
+}

templates/patch.html

@@ -45,7 +45,24 @@
 
 		<main>
 			
-			<div>
+			<div class="grid">
+
+			<div class="meta">
+
+				<div class="title">
+					<h2>{{patch['name']}}</h2>
+				</div>
+
+				<div class="description">
+					{{patch['description']}}
+
+					<div class="date">
+						{{ patch['created']}}
+					</div>
+				</div>
+					
+			</div>
+
 				<div class="instrument">
 					<div id="panel-container">{{panel|safe}}</div>
 					
@@ -57,26 +74,23 @@
 					{% endif %}
 				</div>
 				
-				
-			<div class="meta">
-				<div class="description">
-					{{patch['description']}}
-				</div>
-					
-				<div class="date">
-					{{ patch['created']}}
 				</div>
-			</div>
 
 
-				
-				
-				<form method="POST" enctype="multipart/form-data">
-					<input type="text" class="description" name="description" />
-					<input type="file" name="snippet" accept="audio/*" />
-					<input type="submit" value="Upload" />
-				</form>
-				
+
+				<div class="new-snippet">
+
+					<h3>Snippets</h3>
+
+					<span>Add new <button>+</button></span>
+
+					<form method="POST" enctype="multipart/form-data">
+						<input type="text" class="description" name="description" />
+						<input type="file" name="snippet" accept="audio/*" />
+						<input type="submit" value="Upload" />
+					</form>
+				</div>
+
 				<ul class="snippets">
 					{% for snippet in snippets %}
 					<li>
@@ -100,24 +114,10 @@
 						/>
 					</svg>
 				</a>
-				<!-- <button class="play">
-					<svg
-					width="24"
-					height="27"
-					viewBox="0 0 24 27"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-					>
-					<path
-					d="M24 13.5L0.749999 26.9234L0.75 0.0766048L24 13.5Z"
-					fill="currentColor"
-					/>
-				</svg>
-			</button> -->
 		</li>
 		{% endfor %}
 	</ul>
-</div>
+
 
 <pre class="patch-text">
 {{patch['name']}}