km0 2 years ago
parent b8834cc88e
commit 2a6b2af146

@ -5,6 +5,7 @@
html,
body {
font-family: sans-serif;
margin: 0;
}
a {
@ -29,7 +30,8 @@ header {
width: 100%;
display: flex;
justify-content: start;
padding: 8px;
padding: 0 16px;
margin: 16px 0;
font-size: 32px;
}
@ -44,6 +46,11 @@ header .title {
font-weight: normal;
}
main {
margin: 16px 0;
padding: 0 16px;
}
.path-slash {
margin: 0 4px;
}

@ -1,6 +1,4 @@
main {
padding: 0 8px;
}
.list {
padding: 0;

@ -3,30 +3,31 @@
max-width: 100vw;
object-fit: contain;
margin: 0 auto;
margin-top: 32px;
display: block;
position: relative;
}
.samples {
.snippets {
width: 100%;
padding: 0;
}
.samples li {
.snippets li {
display: flex;
width: 100%;
font-size: 32px;
padding: 8px;
}
.samples li > * {
.snippets li > * {
flex-shrink: 0;
}
.samples li:nth-child(even) {
.snippets li:nth-child(even) {
background: #efefef;
}
.samples li button {
.snippets li button {
background-color: white;
border: 1px solid currentColor;
padding: 4px;
@ -35,7 +36,7 @@
display: inline-block;
}
.samples li button svg {
.snippets li button svg {
width: 100%;
height: 100%;
}
@ -45,7 +46,7 @@
margin-right: 16px;
}
.samples .description {
.snippets .description {
margin: 0 8px;
flex-shrink: 1;
}
@ -73,3 +74,21 @@ svg #sockets {
top: 0;
left: 0;
}
main {
font-size: 24px;
line-height: 1.2;
}
.meta {
display: inline-block;
border: 2px solid currentColor;
padding: 16px;
margin: 32px 0;
max-width: 40ch;
}
.meta .date {
margin-top: 8px;
opacity: 0.5;
}

@ -12,9 +12,7 @@ a {
text-decoration: none;
}
main {
padding: 0 8px;
}
.list {
padding: 0;

@ -43,80 +43,89 @@
</button>
</header>
<div class="meta">
<p class="description">{{patch['description']}}</p>
</div>
<div>
<div class="instrument">
<div id="panel-container">{{panel|safe}}</div>
{% if patch['cables'] %}
<img
<main>
<div>
<div class="instrument">
<div id="panel-container">{{panel|safe}}</div>
{% if patch['cables'] %}
<img
class="cables"
src="{{url_for('static', filename='cables/{}'.format(patch['cables']))}}"
/>
{% endif %}
/>
{% endif %}
</div>
<div class="meta">
<div class="description">
{{patch['description']}}
</div>
<div class="date">
{{ patch['created']}}
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="text" class="description" name="description" />
<input type="file" name="snippet" accept="audio/*" />
<input type="submit" value="Upload" />
</form>
<ul class="samples">
{% for snippet in snippets %}
<li>
<span>{{ '%02d' % loop.index }}</span>
<p class="description">{{snippet['description']}}</p>
<a
<form method="POST" enctype="multipart/form-data">
<input type="text" class="description" name="description" />
<input type="file" name="snippet" accept="audio/*" />
<input type="submit" value="Upload" />
</form>
<ul class="snippets">
{% for snippet in snippets %}
<li>
<span>{{ '%02d' % loop.index }}</span>
<p class="description">{{snippet['description']}}</p>
<a
href="{{url_for('static', filename='snippets/{}_{}_{}'.format(instrument['slug'], patch['slug'], snippet['filename']) )}}"
target="_blank"
class="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>
</a>
<!-- <button class="play">
<svg
width="24"
height="27"
viewBox="0 0 24 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="30"
viewBox="0 0 24 30"
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> -->
</li>
{% endfor %}
</ul>
</div>
<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>
</a>
<!-- <button class="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> -->
</li>
{% endfor %}
</ul>
</div>
</main>
<div id="data-params"
{% for param in params %}
data-{{param['param_name']}}="{{param['value']}}"
{% endfor %}
></div>
<div id="data-params"
{% for param in params %}
data-{{param['param_name']}}="{{param['value']}}"
{% endfor %}
></div>
</body>
</body>
</html>

Loading…
Cancel
Save