Dark Theme support

Now when prefers-color-scheme is set to "dark", a dark theme will be used.
SVGs have been updated to allow for it, and also compressed to optimize.
This commit is contained in:
MassiveBox 2023-04-12 21:32:15 +02:00
parent 57b97d3ab5
commit 3ac161e740
7 changed files with 52 additions and 309 deletions

View file

@ -1,66 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" width="140" height="141.347"><g id="layer" class="bitcoin-svg"><circle cx="70" cy="70" r="66.589439" style="fill:none;stroke:#000;stroke-width:6.82112;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"/><ellipse cx="70" cy="70.672997" rx="54.561001" ry="55.102001" style="fill:none;stroke:#000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"/><path d="M 77.476,42.128 H 53.623 v 25.943 h 23.853 a 12.972,12.972 0 0 0 0,-25.943 z m 0,25.943 H 53.623 v 25.943 h 23.853 a 12.972,12.972 0 0 0 0,-25.943 z M 61.463,33.477 v 8.108 m 14.011,-8.108 v 8.108 m -14.011,53.26 v 8.109 m 14.011,-8.109 v 8.109 M 46.277,42.128 h 8.108 m -8.108,51.886 h 8.108" style="fill:none;stroke:#000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"/></g></svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="140"
height="141.347"
version="1.1"
id="svg10"
sodipodi:docname="bitcoin.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
<metadata
id="metadata16">
<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>
<defs
id="defs14" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1859"
inkscape:window-height="1017"
id="namedview12"
showgrid="false"
inkscape:zoom="2.1411258"
inkscape:cx="159.77411"
inkscape:cy="159.841"
inkscape:window-x="1341"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg10" />
<circle
cx="70"
cy="70"
id="ellipse2"
style="fill:none;stroke:#000000;stroke-width:6.82112;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
r="66.589439" />
<ellipse
cx="70"
cy="70.672997"
rx="54.561001"
ry="55.102001"
id="ellipse4"
style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
<path
d="M 77.476,42.128 H 53.623 v 25.943 h 23.853 a 12.972,12.972 0 0 0 0,-25.943 z m 0,25.943 H 53.623 v 25.943 h 23.853 a 12.972,12.972 0 0 0 0,-25.943 z M 61.463,33.477 v 8.108 m 14.011,-8.108 v 8.108 m -14.011,53.26 v 8.109 m 14.011,-8.109 v 8.109 M 46.277,42.128 h 8.108 m -8.108,51.886 h 8.108"
id="path6"
style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 916 B

View file

@ -23,4 +23,36 @@ h3 {
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
} }
.home-cards h3 { padding-top: 10px } .home-cards h3 { padding-top: 10px }
nav { border-bottom: 1px solid #aaa} nav { border-bottom: 1px solid #aaa}
svg { width: 100% }
@media (prefers-color-scheme: dark) {
html, body, nav, .card, .home-cards, input, select {
background: #181a1b;
color: #ffffff;
}
.dropimage, button, .button, [type=submit], .label, [data-tooltip]:after {
background: #00a440;
color: #ffffff;
}
.footnote {
color: rgba(255,255,255,0.7);
}
svg {
fill: white;
}
.washing-svg * {
fill: white !important;
}
.bitcoin-svg * {
fill: none;
stroke: white !important;
}
}

View file

@ -1,51 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100" height="100" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="layer"><path d="m 50,9.999 c -14.729,0 -26.667,11.937 -26.667,26.667 0,3.609 0.729,7.066 2.041,10.208 l 7.959,19.214 v 17.246 c 0.0011,3.681625 2.985375,6.665896 6.667,6.667 h 20 c 3.68254,0.0011 6.668105,-2.98446 6.667,-6.667 V 66.095 L 74.629,46.874 C 75.976041,43.639385 76.668717,40.169891 76.667,36.666 76.667,21.936 64.733,9.999 50,9.999 Z M 61.600263,84.933676 H 38.39974 v -13.19983 l 23.200523,0.007 z M 70.069872,44.322 60.812246,66.668 H 39.187758 L 29.925949,44.306 C 28.915097,41.885903 28.396706,39.288723 28.400314,36.666 28.400314,25.637 38.972,15.066327 50,15.066327 c 11.028,0 21.599872,10.570673 21.599872,21.599673 0,2.643 -0.515,5.215 -1.53,7.656 z" id="path2" style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"/><path d="m 44.167,24.999 -7.5,20 h 17.047 l -5,13.334 h 7.119 l 7.5,-20.001 H 46.286 l 5,-13.333 z" id="path4" style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"/></g></svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
width="100"
height="100"
xml:space="preserve"
id="svg6"
sodipodi:docname="light-bulb.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
id="metadata12"><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><defs
id="defs10" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1859"
inkscape:window-height="1017"
id="namedview8"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="6.052834"
inkscape:cx="70.074534"
inkscape:cy="47.818983"
inkscape:window-x="1341"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" /><g
id="g839"
transform="matrix(1.2499718,0,0,1.2499687,-12.498592,-12.498437)"
style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"><path
d="m 50,9.999 c -14.729,0 -26.667,11.937 -26.667,26.667 0,3.609 0.729,7.066 2.041,10.208 l 7.959,19.214 v 17.246 c 0.0011,3.681625 2.985375,6.665896 6.667,6.667 h 20 c 3.68254,0.0011 6.668105,-2.98446 6.667,-6.667 V 66.095 L 74.629,46.874 C 75.976041,43.639385 76.668717,40.169891 76.667,36.666 76.667,21.936 64.733,9.999 50,9.999 Z M 61.600263,84.933676 H 38.39974 v -13.19983 l 23.200523,0.007 z M 70.069872,44.322 60.812246,66.668 H 39.187758 L 29.925949,44.306 C 28.915097,41.885903 28.396706,39.288723 28.400314,36.666 28.400314,25.637 38.972,15.066327 50,15.066327 c 11.028,0 21.599872,10.570673 21.599872,21.599673 0,2.643 -0.515,5.215 -1.53,7.656 z"
id="path2"
style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
sodipodi:nodetypes="sscccccccccsccccccccccssc" /><path
d="m 44.167,24.999 -7.5,20 h 17.047 l -5,13.334 h 7.119 l 7.5,-20.001 H 46.286 l 5,-13.333 z"
id="path4"
style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" /></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -1 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 114.86"><defs><style>.cls-1{fill:#01a437;}</style></defs><title>leaves</title><path class="cls-1" d="M59.07,110.77C110.92,105,139.6,71.12,112.44,0c-21.29,14.9-50.39,24.6-65,44.55C57,52.94,64.89,62.23,67.08,74.37c13.19-16.08,27.63-30.72,35.23-47-7.79,39.07-20,53.84-38.78,73.81a93.64,93.64,0,0,1-4.46,9.62Zm-14.9,4C4,105-15.18,76.09,14.27,24.75c23.8,22.92,65.79,37.48,38.39,85.86a27.08,27.08,0,0,1-1.83,2.93C45.9,89.62,26.21,70.69,20.43,50.61,21.77,83.42,31.23,93,45.88,114.86c-.57,0-1.14-.06-1.71-.13Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 122.88 114.86"><path d="M59.07 110.77C110.92 105 139.6 71.12 112.44 0c-21.29 14.9-50.39 24.6-65 44.55C57 52.94 64.89 62.23 67.08 74.37c13.19-16.08 27.63-30.72 35.23-47-7.79 39.07-20 53.84-38.78 73.81a93.64 93.64 0 0 1-4.46 9.62Zm-14.9 4C4 105-15.18 76.09 14.27 24.75c23.8 22.92 65.79 37.48 38.39 85.86a27.08 27.08 0 0 1-1.83 2.93c-4.93-23.92-24.62-42.85-30.4-62.93 1.34 32.81 10.8 42.39 25.45 64.25-.57 0-1.14-.06-1.71-.13Z" style="fill:#01a437"/></svg>

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 526 B

View file

@ -1,47 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g id="layer"><path d="M59.767 6.07H4.233A3.237 3.237 0 0 0 1 9.304v40.895c0 1.431.942 2.635 2.233 3.059v2.593c0 1.146.934 2.079 2.082 2.079H16.29c1.148 0 2.08-.93 2.082-2.079v-2.419H45.63v2.419c0 1.146.932 2.079 2.079 2.079h10.978a2.081 2.081 0 0 0 2.078-2.079s-.347-2.52.42-3.245c.718-.678 1.108-1.002 1.771-1.322.812-.39 0-41.894 0-41.894.138-2.939-1.404-3.317-3.189-3.319ZM14.873 54.352c0 .04-.04.079-.082.079l-7.976-.001c-.043 0-.083-.037-.083-.079v-.919h8.141v.92zm42.394-.001a.08.08 0 0 1-.08.079H49.21a.08.08 0 0 1-.08-.079v-.919h8.136v.92zM59.5 48.7c.004 1.262-.554 1.233-1.234 1.233H5.733A1.235 1.235 0 0 1 4.5 48.7V10.617c0-.68.553-1.046 1.233-1.046h52.533c.68 0 1.234.365 1.234 1.046v38.082z"/><path d="M46.105 12.67H7.75a1 1 0 0 0-1 1v32.18a1 1 0 0 0 1 1h38.356a1 1 0 0 0 1-1V13.67a1 1 0 0 0-1-1zm-2.518 3.529-.06 11.11-33.277-.047V16.17ZM10.25 43.35V30.762h33.355V43.35Zm41.14-25.306h4.789c1.333 0 1.333-3.5 0-3.5H51.39c-1.333 0-1.333 3.5 0 3.5zm0 6.754h4.789c1.333 0 1.333-3.5 0-3.5H51.39c-1.333 0-1.333 3.5 0 3.5zm2.535 11.794a3.997 3.997 0 0 0-3.993 3.994 3.996 3.996 0 0 0 3.993 3.993 3.998 3.998 0 0 0 3.994-3.994 3.997 3.997 0 0 0-3.994-3.993zM51.39 31.81h4.789c1.333 0 1.333-3.5 0-3.5H51.39c-1.333 0-1.333 3.5 0 3.5z"/></g></svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64"
xml:space="preserve"
version="1.1"
id="svg6"
sodipodi:docname="oven.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
id="metadata12"><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><defs
id="defs10" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1859"
inkscape:window-height="1017"
id="namedview8"
showgrid="false"
inkscape:zoom="16"
inkscape:cx="22.304161"
inkscape:cy="16.24794"
inkscape:window-x="1085"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" /><path
d="M 59.767,6.07 H 4.233 C 2.4479872,6.072205 1.001653,7.5189866 1,9.304 v 40.895 c 0,1.431 0.942,2.635 2.233,3.059 v 2.593 c 0,1.146 0.934,2.079 2.082,2.079 H 16.29 c 1.148458,-5.49e-4 2.079795,-0.930544 2.082,-2.079 V 53.432 H 45.63 v 2.419 c 0,1.146 0.932,2.079 2.079,2.079 h 10.978 c 1.147352,-0.0017 2.076898,-0.931647 2.078,-2.079 V 53.258 C 62.06,52.834 63,51.63 63,50.198 V 9.305 C 62.998347,7.5199866 61.552013,6.073205 59.767,6.071 Z M 14.873,54.3515 c 0,0.041 -0.04,0.079 -0.082,0.079 L 6.815,54.43 c -0.043,-3e-6 -0.0825,-0.0375 -0.0825,-0.0785 V 53.432 h 8.1405 v 0.9205 z m 42.394,-5e-4 c -5.39e-4,0.0434 -0.0361,0.07846 -0.0795,0.079 H 49.21 c -0.0438,3e-6 -0.07995,-0.03471 -0.0805,-0.0785 V 53.432 h 8.137 v 0.9205 z M 59.5,48.7 c 0.0042,1.262449 -0.5545,1.233 -1.2335,1.233 H 5.7325 C 5.0525,49.932 4.4995,49.38 4.4995,48.7 V 10.617 c 0,-0.68 0.553,-1.046 1.233,-1.046 h 52.534 c 0.68,0 1.233,0.365 1.233,1.046 v 38.082 z"
id="path2"
style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
sodipodi:nodetypes="cccscssccccsscccsccccssscccccccccccccscssssscc" /><path
d="M 46.105,12.67 H 7.75 c -0.5522847,0 -1,0.447715 -1,1 v 32.18 c 0,0.552285 0.4477153,1 1,1 h 38.356 c 0.552285,0 1,-0.447715 1,-1 V 13.67 c 0,-0.552285 -0.447715,-1 -1,-1 z m -2.5,2 -5e-4,12.592 H 10.25 V 16.17 H 43.6055 Z M 10.25,43.35 V 30.762 H 43.6055 V 43.35 Z M 51.39,18.044 h 4.789 c 1.333333,0 1.333333,-3.5 0,-3.5 H 51.39 c -1.333333,0 -1.333333,3.5 0,3.5 z m 0,6.754 h 4.789 c 1.333333,0 1.333333,-3.5 0,-3.5 H 51.39 c -1.333333,0 -1.333333,3.5 0,3.5 z m 2.535,11.794 c -2.202,0 -3.993,1.791 -3.993,3.994 0,2.203 1.79,3.993 3.993,3.993 2.203,0 3.994,-1.791 3.994,-3.994 0,-2.203 -1.792,-3.993 -3.994,-3.993 z m 0,5.987 c -1.099,0 -1.993,-0.894 -1.993,-1.994 0,-1.1 0.894,-1.993 1.993,-1.993 1.1,0 1.994,0.894 1.994,1.993 0,1.099 -0.895,1.994 -1.994,1.994 z M 51.39,31.81 h 4.789 c 1.333333,0 1.333333,-3.5 0,-3.5 H 51.39 c -1.333333,0 -1.333333,3.5 0,3.5 z"
id="path4"
style="stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
sodipodi:nodetypes="cssssssssccccccccccccsssssssssssssssssssssssss" /></svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -1,137 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 64 64"><g id="layer" class="washing-svg"><path d="M31.94,21C22.05,21,14,29.05,14,38.94c0,9.89,8.05,17.94,17.94,17.94c9.89,0,17.94,-8.05,17.94,-17.94C49.87,29.05,41.83,21,31.94,21zM31.94,52.87C24.25,52.87,18,46.62,18,38.94c0,-7.68,6.25,-13.94,13.94,-13.94c7.69,0,13.94,6.25,13.94,13.94C45.88,46.62,39.63,52.87,31.94,52.87z" style="fill:#000"/><path d="M6,4v56c0,2,2,4,4,4h44c2,0,4,-2,4,-3.998983V3.9642939C58,2,56,0,54.031875,0H10C8,0,6,2,6,4zM54,4v10H10V4zM10,60v-42h44v42z" style="fill:#000;fill-opacity:1;stroke:none;stroke-opacity:1"/><rect x="40" y="7" width="10" height="4" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:7;stroke-opacity:1"/></g></svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0"
y="0"
viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64"
xml:space="preserve"
sodipodi:docname="washing.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
id="metadata12"><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><defs
id="defs10" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1859"
inkscape:window-height="1017"
id="namedview8"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="9.4575532"
inkscape:cx="40.40291"
inkscape:cy="11.162574"
inkscape:window-x="1341"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"><sodipodi:guide
position="6,64"
orientation="0,-1"
id="guide843" /><sodipodi:guide
position="6,0"
orientation="0,-1"
id="guide845" /><sodipodi:guide
position="10,50"
orientation="0,-1"
id="guide847" /><sodipodi:guide
position="10,46"
orientation="0,-1"
id="guide849" /><sodipodi:guide
position="10,4"
orientation="0,-1"
id="guide851" /><sodipodi:guide
position="10,60"
orientation="0,-1"
id="guide853" /><sodipodi:guide
position="6,64"
orientation="1,0"
id="guide855" /><sodipodi:guide
position="10,60"
orientation="1,0"
id="guide857" /><sodipodi:guide
position="54,60"
orientation="1,0"
id="guide859" /><sodipodi:guide
position="58,64"
orientation="1,0"
id="guide861" /><sodipodi:guide
position="8,64"
orientation="-1,0"
id="guide867"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="56,64"
orientation="-1,0"
id="guide869"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="6,62"
orientation="0,1"
id="guide871"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="58,2"
orientation="0,1"
id="guide875"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="54,57"
orientation="0,1"
id="guide886"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="61.943925,53"
orientation="0,1"
id="guide888"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="50,60"
orientation="-1,0"
id="guide890"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /><sodipodi:guide
position="40,60"
orientation="-1,0"
id="guide894"
inkscape:label=""
inkscape:locked="false"
inkscape:color="rgb(0,0,255)" /></sodipodi:namedview><style
id="style2">.st0{fill:#231f20}</style><path
id="XMLID_579_"
class="st0"
d="M 31.94,21 C 22.05,21 14,29.05 14,38.94 c 0,9.89 8.05,17.94 17.94,17.94 9.89,0 17.94,-8.05 17.94,-17.94 C 49.87,29.05 41.83,21 31.94,21 Z m 0,31.87 C 24.25,52.87 18,46.62 18,38.94 18,31.26 24.25,25 31.94,25 c 7.69,0 13.94,6.25 13.94,13.94 0,7.69 -6.26,13.93 -13.94,13.93 z"
style="fill:#000000" /><path
id="XMLID_575_"
class="st0"
d="m 6,4 v 56 c 0,2 2,4 4,4 h 44 c 2,0 4,-2 4,-3.998983 V 3.9642939 C 58,2 56,0 54.031875,0 H 10 C 8,0 6,2 6,4 Z M 54,4 V 14 H 10 V 4 Z M 10,60 V 18 h 44 v 42 z"
sodipodi:nodetypes="ccccccccccccccccccc"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1" /><rect
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:7;stroke-opacity:1"
id="rect896"
width="10"
height="4"
x="40"
y="7" /></svg>

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 782 B

View file

@ -13,7 +13,7 @@
<div class="home-cards card"> <div class="home-cards card">
<div> <div>
<h3>Energy usage per day</h3> <h3>Energy usage per day</h3>
<svg width="100%" height="50px" viewBox="0 0 80 15"> <svg height="50px" viewBox="0 0 80 15">
<text x="0" y="15">{{.PerDayUsage}} kWh</text> <text x="0" y="15">{{.PerDayUsage}} kWh</text>
</svg> </svg>
</div> </div>
@ -23,7 +23,7 @@
<div class="home-cards card"> <div class="home-cards card">
<div> <div>
<h3>Green energy %</h3> <h3>Green energy %</h3>
<svg width="100%" height="50px" viewBox="0 0 80 15"> <svg height="50px" viewBox="0 0 80 15">
<text x="0" y="15">{{.GreenEnergyPercent}} %</text> <text x="0" y="15">{{.GreenEnergyPercent}} %</text>
</svg> </svg>
</div> </div>
@ -38,19 +38,27 @@
<footer> <footer>
<div class="flex two four-600"> <div class="flex two four-600">
<div> <div>
<img src="assets/light-bulb.svg" alt="Lightbulb" style="width: 100%"> <svg viewBox="0 0 100 100">
<use href="assets/light-bulb.svg#layer" xlink:href="#layer" />
</svg>
<p><b>{{divide .PerDayUsage 0.072}} desk lights</b> running for a day</p> <p><b>{{divide .PerDayUsage 0.072}} desk lights</b> running for a day</p>
</div> </div>
<div> <div>
<img src="assets/washing.svg" alt="Air Conditioner" style="width: 100%"> <svg viewBox="0 0 64 64">
<use href="assets/washing.svg#layer" xlink:href="#layer" />
</svg>
<p><b>{{divide .PerDayUsage 0.66}} washing machines</b> completing a cycle</p> <p><b>{{divide .PerDayUsage 0.66}} washing machines</b> completing a cycle</p>
</div> </div>
<div> <div>
<img src="assets/oven.svg" alt="Oven" style="width: 100%"> <svg viewBox="0 0 64 64">
<use href="assets/oven.svg#layer" xlink:href="#layer"/>
</svg>
<p><b>{{divide .PerDayUsage 1.2}} electric ovens</b> baking a cake</p> <p><b>{{divide .PerDayUsage 1.2}} electric ovens</b> baking a cake</p>
</div> </div>
<div> <div>
<img src="assets/bitcoin.svg" alt="Bitcoin" style="width: 100%"> <svg viewBox="0 0 140 141.347">
<use href="assets/bitcoin.svg#layer" xlink:href="#layer" />
</svg>
<p><b>{{divide .PerDayUsage 1300}} Bitcoin transactions</b></p> <p><b>{{divide .PerDayUsage 1300}} Bitcoin transactions</b></p>
</div> </div>
</div> </div>