Added support for background images
This commit is contained in:
parent
cb6654aeee
commit
740c0796cd
BIN
images/backgrounds/gruvbox.png
Normal file
BIN
images/backgrounds/gruvbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
198
images/backgrounds/gruvbox.svg
Normal file
198
images/backgrounds/gruvbox.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@ -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('')}
|
||||
|
||||
@ -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"]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user