supisara
/
workbook-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: supisara:e87503f568f8e203c7826194ff75a17b111d97eb
Branches Tags
supisara:main
supisara:wip
...
compare: supisara:eed740431105f79e0289a70947383031420d9b0e
Branches Tags
supisara:main
supisara:wip

2 Commits
e87503f568 ... eed7404311

Author SHA1 Message Date
supisara eed7404311 patch 3 years ago
supisara 49711404b6 patch 3 years ago
9 changed files with 238 additions and 150 deletions
Show Stats

77
assets/css/global.css
Unescape Escape View File

@ -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;
}

25
assets/css/patch.css
Unescape Escape View File

@ -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;
}

103
assets/css/patches.css
Unescape Escape View File

@ -13,82 +13,8 @@ a {
text-decoration: none;
}
a:hover {
opacity: 0.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;
}
@ -119,6 +45,7 @@ main {
display: flex;
justify-content: center;
align-items: center;
position: relative;
@ -140,6 +67,34 @@ main {
height: 32px;
}
.card img {
width: 100%;
height: 100%;
object-fit: contain;
}
.card .overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
opacity: 0;
}
.card .overlay:hover {
opacity: 1;
}
.card .title {
font-weight: normal;
}
@media (max-width: 767px){

66
assets/css/workbook.css
Unescape Escape View File

@ -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;

3
assets/icons/download.svg
Unescape Escape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

3
assets/icons/play.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 185 B

3
assets/icons/print.svg
Unescape Escape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

54
patch.html
Unescape Escape View File

@ -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>

54
patches.html
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save