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

renaming

Browse Source
master
km0 2 years ago
parent a08dbfd48f
commit 3c884f990d
10 changed files with 139 additions and 96 deletions
Show Stats Download Patch File Download Diff File

4
static/css/about.css
Unescape Escape View File

@ -1,5 +1,5 @@
html, body{
font-size: 24px;
line-height: 1.4;
}
@ -20,7 +20,7 @@ main {
.colophon {
grid-column: 3 / span 1;
color: #aaa;
color: gray;
font-size: 16px;
}

9
static/css/global.css
Unescape Escape View File

@ -12,6 +12,15 @@ a {
text-decoration: none;
}
a.stretched:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header a:hover {
opacity: .5;
}

35
static/css/home.css
Unescape Escape View File

@ -1,35 +0,0 @@
.homepanel .socket {
position: absolute;
}
.socket .plug {
display: inline-block;
width: 24px;
height: 24px;
border: 1px solid currentColor;
cursor: alias;
position: relative;
z-index: 50;
background: none;
user-select: none;
vertical-align: middle;
}
.plug.out {
border-radius: 50%;
}
.socket label {
text-transform: uppercase;
line-height: 1;
}
svg {
position: absolute;
top: 0;
left: 0;
/* border: 1px solid currentColor; */
width: 100%;
height: 100%;
}

65
static/css/instruments.css
Unescape Escape View File

@ -0,0 +1,65 @@
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;
position: relative;
}
.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;
}
}

10
static/css/patch.css
Unescape Escape View File

@ -50,10 +50,14 @@
flex-shrink: 1;
}
.print svg {
background-color: white;
.print {
background: none;
border: 1px solid currentColor;
padding: 4px;
background-color: white;
padding: 0px;
}
.print svg {
width: 32px;
height: 32px;
display: inline-block;

85
static/css/workbook.css
Unescape Escape View File

@ -1,63 +1,48 @@
main {
padding: 0 8px;
}
.list {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
.homepanel .socket {
position: absolute;
}
.card {
/* transform: skew(14deg); */
aspect-ratio: 1;
.plug {
display: inline-block;
width: 24px;
height: 24px;
border: 1px solid currentColor;
padding: 32px;
font-stretch: 50%;
cursor: alias;
position: relative;
z-index: 50;
background: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
text-align: center;
user-select: none;
vertical-align: middle;
}
.card:hover {
background-color: grey;
.plug.out {
border-radius: 50%;
}
.card > * {
/* transform: skew(-28deg); */
.socket label {
text-transform: uppercase;
line-height: 1;
}
.card svg {
width: 32px;
height: 32px;
svg {
position: absolute;
top: 0;
left: 0;
/* border: 1px solid currentColor; */
width: 100%;
height: 100%;
}
@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;
}
.how-to {
font-size: 24px;
color: gray;
position: absolute;
bottom: 16px;
left: 16px;
pointer-events: none;
}
.how-to > * {
margin: 0 4px;
}

8
templates/instruments.html
Unescape Escape View File

@ -5,7 +5,7 @@
<title>Workbook - Instruments</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/global.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/workbook.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/instruments.css') }}" />
</head>
<body>
<header>
@ -38,7 +38,7 @@
<main>
<ul class="instruments list">
<li class="card">
<a href="{{url_for('add_instrument')}}">
<a class="stretched" href="{{url_for('add_instrument')}}">
<svg
width="48"
height="48"
@ -68,7 +68,9 @@
{% for instrument in instruments %}
<li class="card">
<a href="{{url_for('patches', instrument=instrument['slug'])}}"
<a
class="stretched"
href="{{url_for('patches', instrument=instrument['slug'])}}"
>{{instrument['name']}}</a
>
</li>

6
templates/patch.html
Unescape Escape View File

@ -43,6 +43,12 @@
{{panel|safe}} {% if patch['cables'] %} {{patch['cables']|safe}} {% endif %}
</div>
<form>
<input type="text" class="description" name="description" />
<input type="file" name="snippet" accept="audio/*" />
<input type="submit" value="Upload" />
</form>
<ul class="samples">
<li>
<span>01</span>

7
templates/patches.html
Unescape Escape View File

@ -43,7 +43,7 @@
<main>
<ul class="instruments list">
<li class="card">
<a href="{{url_for('add_patch', instrument=instrument)}}">
<a class="stretched" href="{{url_for('add_patch', instrument=instrument)}}">
<svg
width="48"
height="48"
@ -73,7 +73,10 @@
{% for patch in patches %}
<li class="card">
<a href="{{url_for('patch', name=patch['slug'], instrument=instrument)}}">
<a
class="stretched"
href="{{url_for('patch', name=patch['slug'], instrument=instrument)}}"
>
<figure class="instrument">{{panel|safe}}{{patch['cables'] |safe}}</figure>
<div class="overlay">
<h3 class="title">{{patch['name']}}</h3>

6
templates/workbook.html
Unescape Escape View File

@ -7,7 +7,7 @@
type="text/css"
href="{{ url_for('static', filename='css/global.css') }}"
/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/workbook.css') }}" />
<script src="{{ url_for('static', filename='js/cables.js') }}" defer></script>
<title>Workbook</title>
</head>
@ -28,6 +28,10 @@
xml:space="preserve"
></svg>
<div class="how-to">
Connect <span class="plug out"></span> to <span class="plug in"></span>
</div>
<!-- OUT -->
<div class="socket" style="top: 10%; left: 10%">
<span class="plug out"></span>

Write Preview
Loading…
Cancel
Save