From eed740431105f79e0289a70947383031420d9b0e Mon Sep 17 00:00:00 2001
From: supisara <supisara.bpc@gmail.com>
Date: Tue, 31 May 2022 19:11:32 +0200
Subject: [PATCH] patch

---
 assets/css/global.css     | 77 ++++++++++++++++++++++++++++++++++++++-
 assets/css/patch.css      | 25 +++++++++++++
 assets/css/workbook.css   | 66 ---------------------------------
 assets/icons/download.svg |  3 ++
 assets/icons/print.svg    |  3 ++
 patch.html                | 54 +++++++++++++++++++++++++++
 patches.html              | 54 +++++++++++++++++++++++----
 7 files changed, 206 insertions(+), 76 deletions(-)
 create mode 100644 assets/css/patch.css
 create mode 100644 assets/icons/download.svg
 create mode 100644 assets/icons/print.svg
 create mode 100644 patch.html

diff --git a/assets/css/global.css b/assets/css/global.css
index 150a1a6..2afa303 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -12,6 +12,79 @@ a {
 	text-decoration: none;
 }
 
-a:hover {
-	opacity: 0.5;
+header a:hover {
+	opacity: .5;
+}
+
+header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+    font-size: 32px;
+
+}
+
+header > * {
+    flex-shrink: 0;
+}
+
+
+
+header .title {
+ margin: 0;
+ margin-right: 32px;
+ font-size: 32px;
+ font-weight: normal;
+
+}
+
+.path-slash {
+    margin: 0 4px;
+}
+
+.parent {
+    /* color: rgb(147, 149, 161); */
+}
+
+
+.search {
+    position: relative;
+
+    display: inline-block;
+    height: 32px;
+    margin-left: auto;
+    overflow: hidden;
+    flex: 0 0 32px;
+    transition: flex 0.3s ease-in;
+}
+
+.search:hover{
+    transition: flex 0.6s ease-out;
+    flex: 1 0 auto;
+}
+
+.search svg {
+    width: 32px;
+    height: 32px;
+    padding: 4px;
+    margin: 0;
+}
+
+.search input {
+    border: none;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 32px;
+    outline: none;
+    border-bottom: 1px solid currentColor;
+
+    font-size: 32px;
+
+    padding: 0;
+    padding-left: 4px;
+
+    background: none;
 }
diff --git a/assets/css/patch.css b/assets/css/patch.css
new file mode 100644
index 0000000..4c1672d
--- /dev/null
+++ b/assets/css/patch.css
@@ -0,0 +1,25 @@
+.instrument {
+    max-height: 100vh;
+    max-width: 100vw;
+    object-fit: contain;
+    margin: 0 auto;
+    display: block;
+}
+
+.samples {
+    width: 100%;
+    padding: 0;
+}
+
+.samples li {
+    display: flex;
+    width: 100%;
+}
+
+.download {
+    margin-left: auto;
+}
+
+.samples .description {
+    margin: 0;
+}
\ No newline at end of file
diff --git a/assets/css/workbook.css b/assets/css/workbook.css
index e22de54..071d28b 100644
--- a/assets/css/workbook.css
+++ b/assets/css/workbook.css
@@ -1,70 +1,4 @@
-header {
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	padding: 8px;
-	font-size: 32px;
-}
-
-header > * {
-	flex-shrink: 0;
-}
-
-header .title {
-	margin: 0;
-	margin-right: 32px;
-	font-size: 32px;
-	font-weight: normal;
-}
-
-.path-slash {
-	margin: 0 4px;
-}
-
-.parent {
-	/* color: rgb(147, 149, 161); */
-}
-
-.search {
-	position: relative;
-
-	display: inline-block;
-	height: 32px;
-	margin-left: auto;
-	overflow: hidden;
-	flex: 0 0 32px;
-	transition: flex 0.3s ease-in;
-}
-
-.search:hover {
-	transition: flex 0.6s ease-out;
-	flex: 1 0 auto;
-}
-
-.search svg {
-	width: 32px;
-	height: 32px;
-	padding: 4px;
-	margin: 0;
-}
-
-.search input {
-	border: none;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 32px;
-	outline: none;
-	border-bottom: 1px solid currentColor;
-
-	font-size: 32px;
 
-	padding: 0;
-	padding-left: 4px;
-
-	background: none;
-}
 
 main {
 	padding: 0 8px;
diff --git a/assets/icons/download.svg b/assets/icons/download.svg
new file mode 100644
index 0000000..840b947
--- /dev/null
+++ b/assets/icons/download.svg
@@ -0,0 +1,3 @@
+<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>
diff --git a/assets/icons/print.svg b/assets/icons/print.svg
new file mode 100644
index 0000000..b3397a9
--- /dev/null
+++ b/assets/icons/print.svg
@@ -0,0 +1,3 @@
+<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>
diff --git a/patch.html b/patch.html
new file mode 100644
index 0000000..a6d1da8
--- /dev/null
+++ b/patch.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Bastl Kastle v1.5: Patch</title>
+    <link rel="stylesheet" href="assets/css/global.css">
+    <link rel="stylesheet" href="assets/css/patch.css">
+    <script type="text/javascript" src="js/main.js" defer></script>
+  </head>
+  <body>
+    <header>
+        <a href="index.html" class="parent">Home</a> 
+        <span class="path-slash">
+          / 
+        </span>
+        <a href="workbook.html">Workbook</a>
+        <span class="path-slash">
+          / 
+        </span>
+        <a href="patches.html">Bastl Kastle v1.5</a> 
+        <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>
+      </header>
+
+      <div>
+        <img class="instrument" src="assets/images/kastle-v1.5.svg" alt="Patch 1">
+        <ul class="samples">
+            <li>
+                <span>01</span>
+                <p class="description">Descriptiondd</p>
+                <button class="play">
+                    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>
+                <button class="download">
+                    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>
+
+            </li>
+        </ul>
+    </div>
\ No newline at end of file
diff --git a/patches.html b/patches.html
index f177b26..8c03dbf 100644
--- a/patches.html
+++ b/patches.html
@@ -38,14 +38,52 @@
         </li>
         
         
-        <li class="card"><a href="#patch1"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 1" width="300"></li>
-        <li class="card"><a href="#patch2"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 2" width="300"></li>
-        <li class="card"><a href="#patch3"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 3" width="300"></li>
-        <li class="card"><a href="#patch4"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 4" width="300"></li>
-        <li class="card"><a href="#patch5"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 5" width="300"></li>
-        <li class="card"><a href="#patch6"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 6" width="300"></li>
-        <li class="card"><a href="#patch7"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 7" width="300"></li>
-        <li class="card"><a href="#patch8"></a><img src="assets/images/kastle-v1.5.svg" alt="Patch 5" width="300"></li>
+        <li class="card">
+          <a href="#patch1">
+            <img src="assets/images/kastle-v1.5.svg" alt="Patch 1">
+            <div class="overlay">
+              <h3 class="title">Title</h3>
+            </div>
+          </a>
+        </li>
+
+        <li class="card">
+          <a href="#patch1">
+            <img src="assets/images/kastle-v1.5.svg" alt="Patch 1">
+            <div class="overlay">
+              <h3 class="title">Title</h3>
+            </div>
+          </a>
+        </li>
+
+        <li class="card">
+          <a href="#patch1">
+            <img src="assets/images/kastle-v1.5.svg" alt="Patch 1">
+            <div class="overlay">
+              <h3 class="title">Title</h3>
+            </div>
+          </a>
+        </li>
+
+        <li class="card">
+          <a href="#patch1">
+            <img src="assets/images/kastle-v1.5.svg" alt="Patch 1">
+            <div class="overlay">
+              <h3 class="title">Title</h3>
+            </div>
+          </a>
+        </li>
+
+        <li class="card">
+          <a href="#patch1">
+            <img src="assets/images/kastle-v1.5.svg" alt="Patch 1">
+            <div class="overlay">
+              <h3 class="title">Title</h3>
+            </div>
+          </a>
+        </li>
+        
+
 
 
       </ul>