riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 14 Activity

netcanv: organise commands in UI demo

Browse source
This commit is contained in:
りき萌 2025-08-31 14:33:31 +02:00
parent 431c3cd6a7
commit 0577d72707
2 changed files with 39 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

55
content/netcanv.dj
View file

@ -228,6 +228,9 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
position: relative;
&>svg {
max-width: 100%;
object-fit: contain;
& g.stack {
--ease: var(--ease-out-quintic);
@ -253,14 +256,25 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
}
&>.controls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
display: grid;
gap: 0.8rem;
grid-template-columns: auto auto;
align-items: center;
&>p {
padding: 0;
padding-right: 0.8rem;
text-align: right;
}
&>.category {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.8rem;
}
& hr {
display: block;
margin: 0;
width: 0;
align-self: stretch;
@ -292,21 +306,28 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
</noscript>
<div id="netcanv:ui-example">
<svg width="320" height="240" xmlns="http://www.w3.org/2000/svg">
<svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
</svg>
<div class="controls">
<button name="reset">Reset</button>
<hr>
<button name="push-h">Push Horizontal</button>
<button name="push-v">Push Vertical</button>
<button name="pop">Pop</button>
<hr>
<button name="space">Space</button>
<button name="pad">Pad</button>
<button name="fit">Fit</button>
<hr>
<button name="fill">Fill</button>
<p>Stack</p>
<div class="category">
<button name="push-h">Push Horizontal</button>
<button name="push-v">Push Vertical</button>
<button name="pop">Pop</button>
<hr>
<button name="reset">Reset</button>
</div>
<p>Rectangle</p>
<div class="category">
<button name="space">Space</button>
<button name="pad">Pad</button>
<button name="fit">Fit</button>
</div>
<p>Drawing</p>
<div class="category">
<button name="fill">Fill</button>
</div>
</div>
<div class="no-script">

2
static/css/main.css
View file

@ -425,7 +425,7 @@ button {
color: var(--text-color);
box-shadow: 0 1px 2px var(--border-1);
border-radius: 100px;
border-radius: 0.75lh;
transition:
background-color var(--transition-duration) var(--ease-out-quintic),