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

Compare commits

base: supisara:fa7a4d1bf57368ef03ea8759a1b3407ce39899a8
Branches Tags
supisara:main
supisara:wip
..
compare: supisara:a818c0d66c18bcc36e46021f467ad615912db62c
Branches Tags
supisara:main
supisara:wip

2 Commits
fa7a4d1bf5 ... a818c0d66c

Author SHA1 Message Date
supisara a818c0d66c added patches page for kastle v1.5, cleaned files 3 years ago
supisara 968bf7fb46 added patches page for kastle v1.5, cleaned files 3 years ago
10 changed files with 338 additions and 343 deletions
Show Stats

2
about.html
Unescape Escape View File

@ -9,11 +9,9 @@
<div class="topnav">
<!-- <a class="active" href="#home">Home</a> -->
<a href="./instruments.html">Instruments</a>
<a href="./sessions.html">Sessions</a>
<a href="./index.html">Home</a>
</div>
<h1>About</h1>
<h2>Things you can do with this workbook:</h2>
</body>
<script type="text/javascript" src="js/main.js"></script>

110
assets/css/instruments.css
Unescape Escape View File

@ -1,110 +0,0 @@
.topnav {
overflow: hidden;
}
.topnav a {
float: right;
color: black;
display: block;
text-decoration: none;
text-align: center;
font-size: 20px;
border: 1px solid black;
padding: 2px;
margin: 2px;
}
.topnav a:hover {
background-color: grey;
color: black;
}
.topnav ul{
padding: 2;
margin: 2;
list-style: none;
position: relative;
}
.topnav ul li{
display: inlne-block;
background-color: grey;
}
body{
font:20px/1.1em arial, sans-serif;
background:white;
}
.center {
max-inline-size: 100%;
block-size: auto;
height: auto;
padding: 5px 50px 50px;
}
table, th, td {
border: 1px solid;
text-align: center;
table-layout: auto;
}
.img-patch {
max-inline-size: 100%;
block-size: auto;
height: auto;
width:auto;
}
h1{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
text-decoration: none;
color: black;
}
h2{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
.search-container {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
ul{
list-style-type: none;
margin: 0;
padding: 2px;
width: 100%;
display: inline-block;
font-size: 20px;
background-color: white;
top: 0;
}
li {
display: inline-block;
padding: 2px;
}
li a{
color: black;
display: inline-block;
text-decoration: none;
border: 1px solid black;
padding: 2px;
}
li:hover {
background-color: grey;
}
form button{
border: 1px solid black;
padding: 2px;
font: 20px;
}

155
assets/css/main.css
Unescape Escape View File

@ -1,155 +0,0 @@
.topnav {
overflow: hidden;
}
.topnav a {
float: right;
color: black;
display: block;
text-decoration: none;
text-align: center;
font-size: 20px;
border: 1px solid black;
padding: 2px;
margin: 2px;
}
.topnav a:hover {
background-color: grey;
color: black;
}
.topnav ul{
padding: 2;
margin: 2;
list-style: none;
position: relative;
}
.topnav ul li{
display: inlne-block;
background-color: grey;
}
body {
font:20px/1.1em arial, sans-serif;
background:white;
}
h1 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
h2 {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
.search-container {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 2px;
width: 100%;
display: inline-block;
font-size: 20px;
background-color: white;
top: 0;
}
li {
display: inline-block;
padding: 2px;
}
li a {
color: black;
display: inline-block;
text-decoration: none;
border: 1px solid black;
padding: 2px;
}
li:hover {
background-color: grey;
}
form button {
border: 1px solid black;
padding: 2px;
font: 20px;
}
/* navbar container */
.navbar {
overflow: hidden;
background-color: white;
font-family: Arial;
}
/* links inside the navbar */
.navbar a{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 2px;
text-decoration: none;
}
/* dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* dropdown button */
.dropdown .dropbtn {
font-size: 20px;
border: 1px solid black;
color: black;
padding: 2px;
background-color: inherit;
font-family: inherit;
}
/* add a grey background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn{
background-color: grey;
}
/* dropdown content ("hidden by default"--why?) */
.dropdown-content a {
float: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
}
/* links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 2px;
text-decoration: none;
display: block;
text-align: left;
}
/* add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: grey;
}
/* show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

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

@ -0,0 +1,168 @@
* {
box-sizing: border-box;
}
html, body {
font-family: sans-serif;
}
a {
color: currentColor;
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;
}
main {
padding: 0 8px;
}
.list {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.card {
/* transform: skew(14deg); */
aspect-ratio: 1;
border: 1px solid currentColor;
padding: 32px;
font-stretch: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
text-align: center;
}
.card:hover {
background-color: grey;
}
.card > * {
/* transform: skew(-28deg); */
}
.card svg {
width: 32px;
height: 32px;
}
@media (max-width: 767px){
header {
display: block;
font-size: 28px;
}
header .title {
display: inline;
font-size: 28px;
}
.search {
margin-top: 16px;
display: block;
}
.search input {
font-size: 28px;
}
}

95
assets/images/kastle-v1.5.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

18
index.html
Unescape Escape View File

@ -3,28 +3,14 @@
<head>
<meta charset="utf-8" />
<title>workbook</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
</head>
<body>
<div class="topnav">
<a href="./instruments.html">Instruments</a>
<a href="./sessions.html">Sessions</a>
<a href="./instruments.html">Workbook</a>
<a href="./about.html">About</a>
</div>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Instruments
<i class="instruments-down"></i>
</button>
<div class="dropdown-content">
<a href="./instruments-add.html">Add</a>
<a href="./instruments-view.html">View</a>
<a href="./instruments-search.html">Search</a>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>

49
instruments-bastl-kastle-v1.5.html
Unescape Escape View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Kastle v1.5</title>
<link rel="stylesheet" type="text/css" href="css/instruments.css" />
</head>
<body>
<div class="topnav">
<a href="./instruments.html">Instruments</a>
<a href="./sessions.html">Sessions</a>
<a href="./about.html">About</a>
</div>
<h1><a href="./instruments.html">Instruments</a> / BASTL Kastle v1.5</h1>
<img src="kastle-outline.svg" class="center">
<table style="width:100%">
<tr>
<th>Date</th>
<th>Title</th>
<th>Description</th>
<th>Patch</th>
<th>Audio</th>
</tr>
<tr>
<td>26/03/22</td>
<td>Het Park</td>
<td>minimal but memorable</td>
<th><img src="kastle-outline.svg" class="img-patch"></th>
<td>01 02</td>
</tr>
<tr>
<td>01/04/22</td>
<td>Mariniersweg</td>
<td>a jam</td>
<th><img src="kastle-outline.svg" class="img-patch"></th>
<td>01</td>
</tr>
</table>
</li>
</ul>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>

1
kastle-outline.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

63
kastle-v.1.5-patches.html
Unescape Escape View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bastl Kastle v1.5: Patches</title>
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/patches.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="workbook.html">Bastl Kastle v1.5</a>
<span class="path-slash">
/
</span>
<h2 class="title">Patches</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>
<main>
<ul class="instruments list">
<li class="card"><a href="new-instrument.html">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="25" y1="4.37114e-08" x2="25" y2="48" stroke="currentColor" stroke-width="3"/>
<line x1="48" y1="25" x2="-8.74228e-08" y2="25" stroke="currentColor" stroke-width="3"/>
</svg>
</a>
</li>
<li class="card"><a href="patches.html">All</a></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>
</ul>
</main>
</body>
</html>

20
workbook.html
Unescape Escape View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>workbook</title>
<title>Workbook</title>
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/workbook.css" />
<script type="text/javascript" src="js/main.js" defer></script>
@ -32,17 +32,17 @@
</svg>
</a>
</li>
<li class="card"><a href="patches.html">All</a></li>
<li class="card"><a href="#all">All</a></li>
<li class="card"><a href="patches.html">Bastl Drum</a></li>
<li class="card"><a href="patches.html">Bastl Kastle</a></li>
<li class="card"><a href="#kastledrum">Bastl Kastle Drum</a></li>
<li class="card"><a href="kastle-v.1.5-patches.html">Bastl Kastle v1.5</a></li>
<li class="card"><a href="patches.html">Bastl Microgranny 2</a></li>
<li class="card"><a href="patches.html">Vellman Signal Generator</a></li>
<li class="card"><a href="patches.html">Microkorg</a></li>
<li class="card"><a href="patches.html">Breadboard synth</a></li>
<li class="card"><a href="patches.html">Coil</a></li>
<li class="card"><a href="patches.html">Jian</a></li>
<li class="card"><a href="#microgranny">Bastl Microgranny 2</a></li>
<li class="card"><a href="#vellman.html">Vellman Signal Generator</a></li>
<li class="card"><a href="#microkorg.html">Microkorg</a></li>
<li class="card"><a href="#breadboard.html">Breadboard synth</a></li>
<li class="card"><a href="#coil.html">Coil</a></li>
<li class="card"><a href="#jian.html">Jian</a></li>
</ul>

Write Preview
Loading…
Cancel
Save