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

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

@ -12,6 +12,15 @@ a {
text-decoration: none; text-decoration: none;
} }
a.stretched:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header a:hover { header a:hover {
opacity: .5; 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; flex-shrink: 1;
} }
.print svg { .print {
background-color: white; background: none;
border: 1px solid currentColor; border: 1px solid currentColor;
padding: 4px; background-color: white;
padding: 0px;
}
.print svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
display: inline-block; display: inline-block;

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

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

8
templates/instruments.html
Unescape Escape View File

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

6
templates/patch.html
Unescape Escape View File

@ -43,6 +43,12 @@
{{panel|safe}} {% if patch['cables'] %} {{patch['cables']|safe}} {% endif %} {{panel|safe}} {% if patch['cables'] %} {{patch['cables']|safe}} {% endif %}
</div> </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"> <ul class="samples">
<li> <li>
<span>01</span> <span>01</span>

7
templates/patches.html
Unescape Escape View File

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

6
templates/workbook.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save