added patches page for kastle v1.5, cleaned files
parent
968bf7fb46
commit
a818c0d66c
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 56 KiB |
@ -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>
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.9 KiB |
@ -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>
|
||||
Loading…
Reference in New Issue