basta basta chiudi

db
km0 2 years ago
parent ed08dee35c
commit 44702f846f

@ -1,13 +1,24 @@
h2,
h3 {
font-weight: normal;
font-size: 32px;
margin: 0;
}
.instrument { .instrument {
max-height: 100vh; max-height: 100vh;
max-width: 100vw; max-width: 100vw;
width: 100%;
object-fit: contain; object-fit: contain;
margin: 0 auto; margin: 0 auto;
margin-top: 32px;
display: block; display: block;
position: relative; position: relative;
} }
.new-snippet {
display: flex;
}
.snippets { .snippets {
width: 100%; width: 100%;
padding: 0; padding: 0;
@ -80,16 +91,21 @@ main {
line-height: 1.2; line-height: 1.2;
} }
.meta { .meta > * {
display: inline-block;
border: 1px solid currentColor; border: 1px solid currentColor;
padding: 16px; padding: 16px;
margin: 32px 0; }
max-width: 40ch;
.meta h2 {
margin: 0;
}
.meta > * + * {
margin-top: 16px;
} }
.meta .date { .meta .date {
margin-top: 8px; margin-top: 16px;
opacity: 0.5; opacity: 0.5;
} }
@ -102,3 +118,15 @@ main {
background-color: rgba(200, 200, 200, 0.5); background-color: rgba(200, 200, 200, 0.5);
max-width: 60ch; max-width: 60ch;
} }
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
align-items: flex-start;
}
.grid .instrument {
grid-column: 2 / span 2;
border: 1px solid currentColor;
}

@ -45,7 +45,24 @@
<main> <main>
<div> <div class="grid">
<div class="meta">
<div class="title">
<h2>{{patch['name']}}</h2>
</div>
<div class="description">
{{patch['description']}}
<div class="date">
{{ patch['created']}}
</div>
</div>
</div>
<div class="instrument"> <div class="instrument">
<div id="panel-container">{{panel|safe}}</div> <div id="panel-container">{{panel|safe}}</div>
@ -57,26 +74,23 @@
{% endif %} {% endif %}
</div> </div>
<div class="meta">
<div class="description">
{{patch['description']}}
</div>
<div class="date">
{{ patch['created']}}
</div> </div>
</div>
<div class="new-snippet">
<form method="POST" enctype="multipart/form-data">
<input type="text" class="description" name="description" /> <h3>Snippets</h3>
<input type="file" name="snippet" accept="audio/*" />
<input type="submit" value="Upload" /> <span>Add new <button>+</button></span>
</form>
<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>
</div>
<ul class="snippets"> <ul class="snippets">
{% for snippet in snippets %} {% for snippet in snippets %}
<li> <li>
@ -100,24 +114,10 @@
/> />
</svg> </svg>
</a> </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> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
<pre class="patch-text"> <pre class="patch-text">
{{patch['name']}} {{patch['name']}}

Loading…
Cancel
Save