Design change.

This commit is contained in:
Magnus Åhall 2026-05-23 22:55:29 +02:00
parent 068e21c962
commit 21d93f0188
5 changed files with 124 additions and 160 deletions

View file

@ -19,6 +19,7 @@
h2 {
font-size: 1.25em;
margin-top: 32px;
margin-bottom: 0px;
color: var(--color1);
}
@ -29,6 +30,10 @@
color: var(--color1);
}
p {
line-height: 150%;
}
img {
max-width: var(--thumbnail-width);
max-height: var(--thumbnail-height);

View file

@ -52,18 +52,22 @@ html {
#tree {
grid-area: tree;
display: grid;
padding: 16px 0px 16px 16px;
color: #ddd;
background-color: #fafafa;
color: #444;
z-index: 100;
border-left: 2px solid #333;
border-right: 1px solid #ddd;
n2-tree {
border: 2px solid #333;
/*border: 2px solid #f8f8f8;*/
padding: 16px 48px 16px 24px;
}
&:focus-within {
n2-tree {
/*
border: 2px solid #fe5f55;
*/
}
}
@ -95,18 +99,20 @@ html {
.node {
display: grid;
grid-template-columns: 24px min-content;
grid-template-columns: 40px min-content;
grid-template-rows:
min-content 1fr;
margin-top: 12px;
align-items: center;
.expand-toggle {
user-select: none;
cursor: pointer;
justify-self: center;
img {
width: 16px;
height: 16px;
width: auto;
height: 18px;
}
}
@ -128,8 +134,8 @@ html {
.children {
padding-left: 24px;
margin-left: 8px;
border-left: 1px solid #444;
margin-left: 18px;
border-left: 1px solid #ddd;
grid-column: 1 / -1;
&.collapsed {
@ -141,9 +147,12 @@ html {
#tree-nodes {
padding: 16px 32px;
background-color: #333;
/*
border-radius: 8px;
*/
/*
box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
*/
}
#crumbs {

View file

@ -2,73 +2,49 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="399.99997"
height="399.99997"
viewBox="0 0 105.83332 105.83333"
width="24.999989"
height="20.000013"
viewBox="0 0 6.6145802 5.2916702"
version="1.1"
id="svg8"
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
id="svg1"
sodipodi:docname="collapsed.svg"
xml:space="preserve"
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
id="defs2" /><sodipodi:namedview
id="base"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="304.05591"
inkscape:cy="298.39905"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1916"
inkscape:window-height="1404"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="0"
inkscape:showpageshadow="true"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d6d6d6"
showborder="true" /><metadata
id="metadata5"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="4.8373092"
inkscape:cx="6.201795"
inkscape:cy="-12.40359"
inkscape:window-width="1916"
inkscape:window-height="1161"
inkscape:window-x="0"
inkscape:window-y="18"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showguides="false" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-42.756321,-24.613384)"><rect
style="color:#000000;overflow:visible;fill:#537979;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
id="rect5470"
width="105.83333"
height="105.83333"
x="42.756321"
y="24.613384"
rx="21.166666"
ry="21.166666" /><rect
style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
id="rect6360"
width="63.5"
height="18.520834"
x="63.922985"
y="68.26963"
rx="5.2916665"
ry="5.2916665" /><rect
style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
id="rect10171"
width="63.5"
height="18.520834"
x="-109.28004"
y="86.412567"
rx="5.2916665"
ry="5.2916665"
transform="rotate(-90)" /></g></svg>
transform="translate(-102.39375,-146.31458)">
<title
id="title1">folder-outline</title>
<path
d="m 108.34687,150.94479 h -5.29166 v -3.30729 h 5.29166 m 0,-0.66146 h -2.64584 l -0.66145,-0.66146 h -1.98437 c -0.36711,0 -0.66146,0.29435 -0.66146,0.66146 v 3.96875 a 0.66145729,0.66145729 0 0 0 0.66146,0.66146 h 5.29166 a 0.66145729,0.66145729 0 0 0 0.66146,-0.66146 v -3.30729 c 0,-0.36711 -0.29767,-0.66146 -0.66146,-0.66146 z"
id="path1"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#71c837;fill-opacity:1;stroke-width:0.330728;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

View file

@ -2,64 +2,43 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="399.99997"
height="399.99997"
viewBox="0 0 105.83332 105.83333"
width="26.499931"
height="20.000013"
viewBox="0 0 7.0114402 5.2916702"
version="1.1"
id="svg8"
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
id="svg1"
sodipodi:docname="expanded.svg"
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
xml:space="preserve"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
id="defs2" /><sodipodi:namedview
id="base"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="304.05591"
inkscape:cy="298.39905"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1916"
inkscape:window-height="1404"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="0"
inkscape:showpageshadow="true"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d6d6d6"
showborder="true" /><metadata
id="metadata5"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="11.17754"
inkscape:cx="20.845374"
inkscape:cy="26.929003"
inkscape:window-width="1916"
inkscape:window-height="1161"
inkscape:window-x="0"
inkscape:window-y="18"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-42.756321,-24.613384)"><rect
style="color:#000000;overflow:visible;fill:#537979;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
id="rect5470"
width="105.83333"
height="105.83333"
x="42.756321"
y="24.613384"
rx="21.166666"
ry="21.166666" /><rect
style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
id="rect6360"
width="63.5"
height="18.520834"
x="63.922985"
y="68.26963"
rx="5.2916665"
ry="5.2916665" /></g></svg>
transform="translate(-101.33542,-147.10833)"><title
id="title1">folder-open</title><title
id="title1-1">folder-open-outline</title><path
d="m 102.69141,149.0927 -0.69454,2.64584 v -3.30729 h 5.62239 a 0.6614573,0.6614573 0 0 0 -0.66146,-0.66146 h -2.3151 l -0.66146,-0.66146 h -1.98437 a 0.6614573,0.6614573 0 0 0 -0.66145,0.66146 v 3.96875 a 0.6614573,0.6614573 0 0 0 0.66145,0.66146 h 4.96093 c 0.29766,0 0.56224,-0.19844 0.62839,-0.4961 l 0.76067,-2.8112 h -5.65545 m 4.26639,2.64584 h -4.29947 l 0.52916,-1.98438 h 4.29948 z"
id="path1"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#71c837;fill-opacity:1;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" /></g></svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before After
Before After

View file

@ -2,56 +2,51 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="399.99997"
height="399.99997"
viewBox="0 0 105.83332 105.83333"
width="18"
height="18"
viewBox="0 0 4.7625 4.7625"
version="1.1"
id="svg8"
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
id="svg1"
sodipodi:docname="leaf.svg"
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
xml:space="preserve"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
id="defs2" /><sodipodi:namedview
id="base"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="303.34881"
inkscape:cy="297.69195"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1916"
inkscape:window-height="1404"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="0"
inkscape:showpageshadow="true"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d6d6d6"
showborder="true" /><metadata
id="metadata5"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="11.17754"
inkscape:cx="8.0965937"
inkscape:cy="22.903072"
inkscape:window-width="1916"
inkscape:window-height="1161"
inkscape:window-x="0"
inkscape:window-y="18"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showgrid="false" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-42.756321,-24.613384)"><rect
style="color:#000000;overflow:visible;fill:#555555;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
id="rect5470"
width="105.83333"
height="105.83333"
x="42.756321"
y="24.613384"
rx="21.166666"
ry="21.166666" /></g></svg>
transform="translate(-107.95,-148.16667)"><title
id="title1">folder-open</title><title
id="title1-1">folder-open-outline</title><title
id="title1-5">notebook-outline</title><title
id="title1-8">text-box-outline</title><path
d="m 108.47917,148.16667 c -0.29369,0 -0.52917,0.23548 -0.52917,0.52917 V 152.4 c 0,0.29369 0.23548,0.52917 0.52917,0.52917 h 3.70416 c 0.29369,0 0.52917,-0.23548 0.52917,-0.52917 v -3.70416 c 0,-0.29369 -0.23548,-0.52917 -0.52917,-0.52917 h -3.70416 m 0,0.52917 h 3.70416 V 152.4 h -3.70416 v -3.70416"
id="path1"
style="fill:#ababab;fill-opacity:1;stroke-width:0.264583"
sodipodi:nodetypes="cssssssscccccc" /><path
d="m 109.00833,149.225 v 0.52917 h 2.64584 V 149.225 h -2.64584 m 0,1.05834 v 0.52916 h 2.64584 v -0.52916 h -2.64584 m 0,1.05833 v 0.52917 h 1.85209 v -0.52917 z"
id="path2"
style="fill:#c7c7c7;fill-opacity:1;stroke-width:0.264583"
sodipodi:nodetypes="ccccccccccccccc" /></g></svg>

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After