From 26686c7f8cf47d1e773ded31bfd0cbb621e4fbd8 Mon Sep 17 00:00:00 2001
From: supisara <supisara.bpc@gmail.com>
Date: Tue, 31 May 2022 21:16:58 +0200
Subject: [PATCH] patch

---
 assets/css/patch.css |  30 +++++++-
 patch.html           | 160 +++++++++++++++++++++++++++++++++++++------
 2 files changed, 166 insertions(+), 24 deletions(-)

diff --git a/assets/css/patch.css b/assets/css/patch.css
index 4c1672d..6804286 100644
--- a/assets/css/patch.css
+++ b/assets/css/patch.css
@@ -14,12 +14,38 @@
 .samples li {
     display: flex;
     width: 100%;
+    font-size: 32px;
+    padding: 8px;
+}
+
+.samples li > * {
+    flex-shrink: 0;
+}
+.samples li:nth-child(even) {
+    background:#efefef;
+    }
+
+.samples li button{
+    background-color: white;
+    border: 1px solid currentColor;
+    padding: 4px;
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+}
+
+.samples li button svg{
+    width: 100%;
+    height: 100%;
 }
 
 .download {
     margin-left: auto;
+    margin-right: 16px;
 }
 
 .samples .description {
-    margin: 0;
-}
\ No newline at end of file
+    margin: 0 8px;
+    flex-shrink: 1;
+
+}
diff --git a/patch.html b/patch.html
index 2ec7fe5..e58c647 100644
--- a/patch.html
+++ b/patch.html
@@ -16,27 +16,11 @@
 			<span class="path-slash"> / </span>
 			<h2 class="title">Patch title</h2>
 
-			<div class="search">
-				<svg
-					class="icon"
-					width="31"
-					height="33"
-					viewBox="0 0 31 33"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<line
-						x1="20.0607"
-						y1="22.9393"
-						x2="29.0607"
-						y2="31.9393"
-						stroke="currentColor"
-						stroke-width="3"
-					/>
-					<circle cx="13" cy="13" r="11.5" stroke="currentColor" stroke-width="3" />
-				</svg>
-				<input type="text" name="search" id="search" />
-			</div>
+			<button class="print">
+				<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.55547 16.0312H12.6562V8.4375C12.6562 8.21372 12.7451 7.99911 12.9034 7.84088C13.0616 7.68264 13.2762 7.59375 13.5 7.59375H40.5C40.7238 7.59375 40.9384 7.68264 41.0966 7.84088C41.2549 7.99911 41.3438 8.21372 41.3438 8.4375V16.0312H44.4445C46.9125 16.0312 48.9375 17.9297 48.9375 20.25V37.125C48.9375 37.3488 48.8486 37.5634 48.6904 37.7216C48.5321 37.8799 48.3175 37.9688 48.0938 37.9688H41.3438V46.4062C41.3438 46.63 41.2549 46.8446 41.0966 47.0029C40.9384 47.1611 40.7238 47.25 40.5 47.25H13.5C13.2762 47.25 13.0616 47.1611 12.9034 47.0029C12.7451 46.8446 12.6562 46.63 12.6562 46.4062V37.9688H5.90625C5.68247 37.9688 5.46786 37.8799 5.30963 37.7216C5.15139 37.5634 5.0625 37.3488 5.0625 37.125V20.25C5.0625 17.9297 7.0875 16.0312 9.55547 16.0312ZM39.6562 9.28125H14.3438V16.0312H39.6562V9.28125ZM14.3438 45.5625H39.6562V32.9062H14.3438V45.5625ZM6.75 36.2812H12.6562V32.0625C12.6562 31.8387 12.7451 31.6241 12.9034 31.4659C13.0616 31.3076 13.2762 31.2188 13.5 31.2188H40.5C40.7238 31.2188 40.9384 31.3076 41.0966 31.4659C41.2549 31.6241 41.3438 31.8387 41.3438 32.0625V36.2812H47.25V20.25C47.25 18.8578 45.9844 17.7188 44.4445 17.7188H9.55547C8.01563 17.7188 6.75 18.8578 6.75 20.25V36.2812ZM12.6562 24.4688C12.6562 24.8025 12.7552 25.1288 12.9406 25.4063C13.1261 25.6838 13.3896 25.9001 13.698 26.0278C14.0063 26.1555 14.3456 26.1889 14.673 26.1238C15.0003 26.0587 15.301 25.898 15.537 25.662C15.773 25.426 15.9337 25.1253 15.9988 24.798C16.0639 24.4706 16.0305 24.1313 15.9028 23.823C15.7751 23.5146 15.5588 23.2511 15.2813 23.0656C15.0038 22.8802 14.6775 22.7812 14.3438 22.7812C13.8962 22.7812 13.467 22.959 13.1505 23.2755C12.834 23.592 12.6562 24.0212 12.6562 24.4688Z" fill="currentColor"/>
+                </svg>                    
+			</button>
 		</header>
 
 		<div>
@@ -44,7 +28,139 @@
 			<ul class="samples">
 				<li>
 					<span>01</span>
-					<p class="description">Descriptiondd</p>
+					<p class="description">Description skjdflkajsdkfLabore aliqua ut sit consequat veniam ut do ad nulla.Ad labore mollit ut cillum cillum est. In ex nostrud esse sit fugiat elit qui. Enim do laboris irure in sint deserunt irure culpa ad officia eu est non. Officia reprehenderit labore excepteur non. Exercitation aliqua commodo exercitation quis deserunt exercitation esse eiusmod excepteur sint consectetur fugiat nisi dolore. Eiusmod adipisicing aliqua veniam eu ullamco anim duis labore commodo cupidatat voluptate nisi mollit. Tempor fugiat in enim culpa ut veniam veniam.</p>
+					<button class="download">
+						<svg
+							width="24"
+							height="30"
+							viewBox="0 0 24 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M10.9393 29.5607C11.5251 30.1464 12.4749 30.1464 13.0607 29.5607L22.6066 20.0147C23.1924 19.4289 23.1924 18.4792 22.6066 17.8934C22.0208 17.3076 21.0711 17.3076 20.4853 17.8934L12 26.3787L3.51472 17.8934C2.92893 17.3076 1.97918 17.3076 1.3934 17.8934C0.807611 18.4792 0.807611 19.4289 1.3934 20.0147L10.9393 29.5607ZM10.5 0.5L10.5 28.5L13.5 28.5L13.5 0.5L10.5 0.5Z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+					<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>
+
+                <li>
+					<span>02</span>
+					<p class="description">Description</p>
+					<button class="download">
+						<svg
+							width="24"
+							height="30"
+							viewBox="0 0 24 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M10.9393 29.5607C11.5251 30.1464 12.4749 30.1464 13.0607 29.5607L22.6066 20.0147C23.1924 19.4289 23.1924 18.4792 22.6066 17.8934C22.0208 17.3076 21.0711 17.3076 20.4853 17.8934L12 26.3787L3.51472 17.8934C2.92893 17.3076 1.97918 17.3076 1.3934 17.8934C0.807611 18.4792 0.807611 19.4289 1.3934 20.0147L10.9393 29.5607ZM10.5 0.5L10.5 28.5L13.5 28.5L13.5 0.5L10.5 0.5Z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+					<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>
+
+                <li>
+					<span>03</span>
+					<p class="description">Description</p>
+					<button class="download">
+						<svg
+							width="24"
+							height="30"
+							viewBox="0 0 24 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M10.9393 29.5607C11.5251 30.1464 12.4749 30.1464 13.0607 29.5607L22.6066 20.0147C23.1924 19.4289 23.1924 18.4792 22.6066 17.8934C22.0208 17.3076 21.0711 17.3076 20.4853 17.8934L12 26.3787L3.51472 17.8934C2.92893 17.3076 1.97918 17.3076 1.3934 17.8934C0.807611 18.4792 0.807611 19.4289 1.3934 20.0147L10.9393 29.5607ZM10.5 0.5L10.5 28.5L13.5 28.5L13.5 0.5L10.5 0.5Z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+					<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>
+
+                <li>
+					<span>04</span>
+					<p class="description">Description</p>
+					<button class="download">
+						<svg
+							width="24"
+							height="30"
+							viewBox="0 0 24 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M10.9393 29.5607C11.5251 30.1464 12.4749 30.1464 13.0607 29.5607L22.6066 20.0147C23.1924 19.4289 23.1924 18.4792 22.6066 17.8934C22.0208 17.3076 21.0711 17.3076 20.4853 17.8934L12 26.3787L3.51472 17.8934C2.92893 17.3076 1.97918 17.3076 1.3934 17.8934C0.807611 18.4792 0.807611 19.4289 1.3934 20.0147L10.9393 29.5607ZM10.5 0.5L10.5 28.5L13.5 28.5L13.5 0.5L10.5 0.5Z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+					<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>
+
+                <li>
+					<span>05</span>
+					<p class="description">Description</p>
 					<button class="download">
 						<svg
 							width="24"