From 740c0796cdb2e0bbb763c590a91848e38b2f0243 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus@ahall.se>
Date: Tue, 25 Jul 2023 13:04:28 +0000
Subject: [PATCH] Added support for background images

---
 images/backgrounds/gruvbox.png | Bin 0 -> 1078 bytes
 images/backgrounds/gruvbox.svg | 198 +++++++++++++++++++++++++++++++++
 js/app.js                      |   4 +-
 themes.yaml                    |   3 +-
 4 files changed, 202 insertions(+), 3 deletions(-)
 create mode 100644 images/backgrounds/gruvbox.png
 create mode 100644 images/backgrounds/gruvbox.svg

diff --git a/images/backgrounds/gruvbox.png b/images/backgrounds/gruvbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..820b2fbcc125e9892153b4bc48d8cac1ecef447e
GIT binary patch
literal 1078
zcmeAS@N?(olHy`uVBq!ia0vp^??9M?4M^I(vsMC9oCO|{#S9F5he4R}c>anMprB-l
zYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&3=GVNJzX3_D(1Ys8|XD9QKIc(
zc?nnRg^O%Ooa+><GV^uA9aAT1oS3*@ROQjhio>P3532q0ew@2^^?QE&^z*YnN2bl(
zefRO5_j1n#?B>opbM;%%w8&@Q>dg1o{oi<)&-&lv7e&Qpn`cF?4cmNoj%>=2GiRp1
zJ-X)l@z05S=dFI*DqD8rW7Fd1y*ztvUcCFRa9Zlj)W~NKpC|4+X>7dx`|iqH@6-SP
zu`w^_FT0U=oIC9L_3Nh(#<AZ!5-!=)!tHpdRpFu2gaSp69Reyb971|5oZ{pQXZ(%R
z%ekG{F1x<`3yk%AHIL)*=d-)zm#fRCM^4+hvwFsU|KH6#mACBsK~A^QyW~7!y%9zB
zVs(7?m$DmzcOEM3l`Uf_|DokP0VZI}@)O9Tl9%CD@ASxTmpv$}cj<PbdqF$ULvVpn
k?~#$lV39?q*!#=8b^U|wyn8OZ2j+POPgg&ebxsLQ00~%~-v9sr

literal 0
HcmV?d00001

diff --git a/images/backgrounds/gruvbox.svg b/images/backgrounds/gruvbox.svg
new file mode 100644
index 0000000..7c20f08
--- /dev/null
+++ b/images/backgrounds/gruvbox.svg
@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="257"
+   height="256"
+   viewBox="0 0 67.997915 67.733336"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   sodipodi:docname="gruvbox.svg"
+   inkscape:export-filename="gruvbox.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   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"
+     pagecolor="#282828"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="92.25"
+     inkscape:cy="114.25"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2190"
+     inkscape:window-height="1404"
+     inkscape:window-x="1463"
+     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:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="color:#000000;overflow:visible;fill:#282828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264584;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="rect40644"
+       width="67.733337"
+       height="67.73333"
+       x="0"
+       y="0" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 17.065625,0.1322915 V 67.601042"
+       id="path37309" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 8.5989583,0.1322915 V 67.601042"
+       id="path37610" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 25.532292,0.1322915 V 67.601042"
+       id="path37612" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 33.998959,0.1322915 V 67.601042"
+       id="path37616" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 42.465625,0.1322915 V 67.601042"
+       id="path37618" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 50.932292,0.1322915 V 67.601042"
+       id="path37620" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 59.398959,0.1322915 V 67.601042"
+       id="path37622" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 67.865626,0.1322915 V 67.601042"
+       id="path37626" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,50.932293 H 67.601042"
+       id="path43996" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,59.39896 H 67.601042"
+       id="path43998" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,42.465626 H 67.601042"
+       id="path44000" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,33.998959 H 67.601042"
+       id="path44002" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,25.532293 H 67.601042"
+       id="path44004" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,17.065626 H 67.601042"
+       id="path44006" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,8.598959 H 67.601042"
+       id="path44008" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,0.132292 H 67.601042"
+       id="path44010" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,55.165625 H 67.601042"
+       id="path44772" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,63.632292 H 67.601042"
+       id="path44774" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,46.698958 H 67.601042"
+       id="path44776" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,38.232291 H 67.601042"
+       id="path44778" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,29.765625 H 67.601042"
+       id="path44780" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,21.298958 H 67.601042"
+       id="path44782" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,12.832291 H 67.601042"
+       id="path44784" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,4.365624 H 67.601042"
+       id="path44786" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 12.832292,0.1322915 V 67.601042"
+       id="path44813" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 4.3656249,0.1322915 V 67.601042"
+       id="path44815" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 21.298959,0.1322915 V 67.601042"
+       id="path44817" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 29.765626,0.1322915 V 67.601042"
+       id="path44819" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 38.232292,0.1322915 V 67.601042"
+       id="path44821" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 46.698959,0.1322915 V 67.601042"
+       id="path44823" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 55.165626,0.1322915 V 67.601042"
+       id="path44825" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 63.632293,0.1322915 V 67.601042"
+       id="path44827" />
+  </g>
+</svg>
diff --git a/js/app.js b/js/app.js
index ed5f642..ad338ca 100644
--- a/js/app.js
+++ b/js/app.js
@@ -127,7 +127,7 @@ class App {
 	setTheme(theme) {//{{{
 		this.theme = theme
 		document.body.style.color = theme.colors.page.text
-		document.body.style.backgroundColor = theme.colors.page.background
+		document.body.style.background = theme.colors.page.background
 
 		let sectionClasses = document.getElementById('sections').classList
 		sectionClasses.remove('theme-brighter')
@@ -248,7 +248,7 @@ class Section {
 		)
 
 		return `
-			<div class="section" style="border: 4px solid ${color[0]}; background: ${theme.colors.section.background}">
+			<div class="section" style="border: 4px solid ${color[0]}; background: ${theme.colors.section.background}; box-shadow: ${theme.colors.section.shadow}">
 				<div class="name" style="background: ${color[0]}; color: ${color[1]}">${this.label}</div>
 				<div class="items" style="background: ${theme.colors.section.background}">
 					${itemHTML.join('')}
diff --git a/themes.yaml b/themes.yaml
index 7ed7f7d..37dc9e8 100644
--- a/themes.yaml
+++ b/themes.yaml
@@ -81,7 +81,7 @@ subdued:
 gruvbox:
   page:
     text: "#bdae93"
-    background: "#282828"
+    background: "#282828 url('/images/backgrounds/gruvbox.svg')"
     header: "#504945"
     footer:
       show: true
@@ -99,6 +99,7 @@ gruvbox:
 
   section:
     background: "#504945"
+    shadow: "10px 10px 15px 0px rgba(0, 0, 0, 0.25)"
     borders:
       - ["#fb4934", "#eee"]
       - ["#b8bb26", "#333"]