patch

static/css/global.css

@@ -5,6 +5,7 @@
 html,
 body {
 	font-family: sans-serif;
+	margin: 0;
 }
 
 a {
@@ -29,7 +30,8 @@ header {
 	width: 100%;
 	display: flex;
 	justify-content: start;
-	padding: 8px;
+	padding: 0 16px;
+	margin: 16px 0;
 	font-size: 32px;
 }
 
@@ -44,6 +46,11 @@ header .title {
 	font-weight: normal;
 }
 
+main {
+	margin: 16px 0;
+	padding: 0 16px;
+}
+
 .path-slash {
 	margin: 0 4px;
 }

static/css/instruments.css

@@ -1,6 +1,4 @@
-main {
+
-	padding: 0 8px;
-}
 
 .list {
 	padding: 0;

static/css/patch.css

@@ -3,30 +3,31 @@
 	max-width: 100vw;
 	object-fit: contain;
 	margin: 0 auto;
+	margin-top: 32px;
 	display: block;
 	position: relative;
 }
 
-.samples {
+.snippets {
 	width: 100%;
 	padding: 0;
 }
 
-.samples li {
+.snippets li {
 	display: flex;
 	width: 100%;
 	font-size: 32px;
 	padding: 8px;
 }
 
-.samples li > * {
+.snippets li > * {
 	flex-shrink: 0;
 }
-.samples li:nth-child(even) {
+.snippets li:nth-child(even) {
 	background: #efefef;
 }
 
-.samples li button {
+.snippets li button {
 	background-color: white;
 	border: 1px solid currentColor;
 	padding: 4px;
@@ -35,7 +36,7 @@
 	display: inline-block;
 }
 
-.samples li button svg {
+.snippets li button svg {
 	width: 100%;
 	height: 100%;
 }
@@ -45,7 +46,7 @@
 	margin-right: 16px;
 }
 
-.samples .description {
+.snippets .description {
 	margin: 0 8px;
 	flex-shrink: 1;
 }
@@ -73,3 +74,21 @@ svg #sockets {
 	top: 0;
 	left: 0;
 }
+
+main {
+	font-size: 24px;
+	line-height: 1.2;
+}
+
+.meta {
+	display: inline-block;
+	border: 2px solid currentColor;
+	padding: 16px;
+	margin: 32px 0;
+	max-width: 40ch;
+}
+
+.meta .date {
+	margin-top: 8px;
+	opacity: 0.5;
+}

static/css/patches.css

@@ -12,9 +12,7 @@ a {
 	text-decoration: none;
 }
 
-main {
+
-	padding: 0 8px;
-}
 
 .list {
 	padding: 0;

templates/patch.html

@@ -43,9 +43,7 @@
 			</button>
 		</header>
 
-		<div class="meta">
+		<main>
-			<p class="description">{{patch['description']}}</p>
-		</div>
 			
 			<div>
 				<div class="instrument">
@@ -60,6 +58,16 @@
 				</div>
 				
 				
+			<div class="meta">
+				<div class="description">
+					{{patch['description']}}
+				</div>
+					
+				<div class="date">
+					{{ patch['created']}}
+				</div>
+			</div>
+
 
 				
 				
@@ -69,7 +77,7 @@
 					<input type="submit" value="Upload" />
 				</form>
 				
-			<ul class="samples">
+				<ul class="snippets">
 					{% for snippet in snippets %}
 					<li>
 						<span>{{ '%02d' % loop.index }}</span>
@@ -110,6 +118,7 @@
 		{% endfor %}
 	</ul>
 </div>
+</main>
 
 
 		<div id="data-params"