theming changes, theme testbed, placeholder landing page
sageclove
Sat, 04 Jan 2025 23:48:30 -0700
8 files changed,
600 insertions(+),
203 deletions(-)
M
assets/svg/logo-block-mono.svg
→
assets/svg/logo-block-mono.svg
@@ -26,8 +26,7 @@ style="display:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.76283;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:14.4;stroke-opacity:1;paint-order:fill markers stroke"
id="circle1" cx="67.733337" cy="37.041664" - r="16.933334" - d="M 84.666672,37.041664 A 16.933334,16.933334 0 0 1 67.733337,53.974998 16.933334,16.933334 0 0 1 50.800003,37.041664 16.933334,16.933334 0 0 1 67.733337,20.10833 16.933334,16.933334 0 0 1 84.666672,37.041664 Z" /> + r="16.933334" /> <path id="lpe_path-effect1" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.76283;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:14.4;stroke-opacity:1;paint-order:fill markers stroke"@@ -46,7 +45,7 @@ x="0"
y="0" ry="0.50714839" /> <circle - style="fill:#57574e;fill-opacity:1" + style="fill:#dcdccc;fill-opacity:1" id="background" r="67.733337" cy="67.733337"@@ -55,39 +54,39 @@ <g
id="border" style="fill:#fafaee;fill-opacity:1"> <path - style="color:#000000;display:inline;fill:#fafaee;fill-opacity:1;stroke-linecap:square;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;display:inline;fill:#464646;fill-opacity:1;stroke-linecap:square;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m -22.953125,28.068359 c -17.358855,-0.51678 -34.691796,5.967188 -47.599609,18.875 -20.652501,20.6525 -24.861335,52.629785 -10.257813,77.923831 14.603522,25.29404 44.401442,37.63746 72.6132814,30.07812 C 20.014574,147.38597 39.650391,121.79689 39.650391,92.589844 v -2.195313 h -4.394532 v 2.195313 c 0,27.239646 -18.27837,51.061186 -44.5898434,58.111326 C -35.645458,157.75131 -63.386039,146.2621 -77.005859,122.67188 -90.62568,99.081653 -86.706648,69.312116 -67.445312,50.050781 -48.183977,30.789447 -18.41444,26.870413 5.1757812,40.490234 L 7.078125,41.587891 9.2753906,37.783203 7.3730469,36.685547 C -2.1122192,31.209225 -12.537812,28.378428 -22.953125,28.068359 Z" id="path11" transform="rotate(-60)" /> <path - style="color:#000000;fill:#fafaee;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;fill:#464646;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m 26.986328,113.48047 a 1.5875001,1.5875001 0 0 0 -1.587891,1.58594 1.5875001,1.5875001 0 0 0 1.587891,1.58789 h 25.929688 a 1.5875001,1.5875001 0 0 0 1.58789,-1.58789 1.5875001,1.5875001 0 0 0 -1.58789,-1.58594 z" id="path28" /> <path - style="color:#000000;fill:#fafaee;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;fill:#464646;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m 82.550781,113.48047 a 1.5875001,1.5875001 0 0 0 -1.58789,1.58594 1.5875001,1.5875001 0 0 0 1.58789,1.58789 h 25.929689 a 1.5875001,1.5875001 0 0 0 1.58594,-1.58789 1.5875001,1.5875001 0 0 0 -1.58594,-1.58594 z" id="path29" /> <path - style="color:#000000;fill:#fafaee;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;fill:#464646;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m 78.316406,104.70898 a 1.5875001,1.5875001 0 0 0 -1.58789,1.5879 1.5875001,1.5875001 0 0 0 1.58789,1.58789 h 38.521484 a 1.5875001,1.5875001 0 0 0 1.58789,-1.58789 1.5875001,1.5875001 0 0 0 -1.58789,-1.5879 z" id="path30" /> <path - style="color:#000000;fill:#fafaee;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;fill:#464646;fill-opacity:1;stroke-linecap:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m 18.628906,104.70898 a 1.5875001,1.5875001 0 0 0 -1.58789,1.5879 1.5875001,1.5875001 0 0 0 1.58789,1.58789 h 38.521485 a 1.5875001,1.5875001 0 0 0 1.58789,-1.58789 1.5875001,1.5875001 0 0 0 -1.58789,-1.5879 z" id="path31" /> <g id="cactus" - style="display:inline;fill:#fafaee;fill-opacity:1;stroke-width:8.46667;stroke-dasharray:none"> + style="display:inline;fill:#464646;fill-opacity:1;stroke-width:8.46667;stroke-dasharray:none"> <path - style="color:#000000;fill:#fafaee;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;fill:#464646;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m 82.550781,46.505859 a 4.233335,4.233335 0 0 0 -4.234375,4.234375 V 63.5 H 67.732422 A 4.233335,4.233335 0 0 0 63.5,67.732422 a 4.233335,4.233335 0 0 0 4.232422,4.234375 h 14.818359 a 4.2337584,4.2337584 0 0 0 4.232422,-4.234375 V 50.740234 a 4.233335,4.233335 0 0 0 -4.232422,-4.234375 z" id="path6" /> <path - style="color:#000000;fill:#fafaee;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" + style="color:#000000;fill:#464646;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:14.4;-inkscape-stroke:none;paint-order:fill markers stroke" d="m 52.916016,57.150391 a 4.233335,4.233335 0 0 0 -4.232422,4.232421 v 31.78711 a 4.2337584,4.2337584 0 0 0 4.232422,4.232422 h 14.816406 a 4.233335,4.233335 0 0 0 4.234375,-4.232422 4.233335,4.233335 0 0 0 -4.234375,-4.234375 H 57.150391 V 61.382812 a 4.233335,4.233335 0 0 0 -4.234375,-4.232421 z" id="path7" /> <path - style="fill:#fafaee;fill-opacity:1" + style="fill:#464646;fill-opacity:1" d="M 67.734375,32.988281 A 4.233335,4.233335 0 0 0 63.5,37.220703 v 90.185547 a 4.233335,4.233335 0 0 0 4.234375,4.23242 4.233335,4.233335 0 0 0 4.232422,-4.23242 V 37.220703 a 4.233335,4.233335 0 0 0 -4.232422,-4.232422 z" id="path24" /> </g>@@ -96,18 +95,18 @@ <g
id="moons" style="fill:#fafaee;fill-opacity:1"> <path - style="fill:#fafaee;fill-opacity:1;stroke:none;stroke-width:2.76278;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:14.4;stroke-opacity:1;paint-order:fill markers stroke" + style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:2.76278;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:14.4;stroke-opacity:1;paint-order:fill markers stroke" id="path4" clip-path="url(#clipPath1)" d="M 84.666672,20.287312 A 16.933334,16.933334 0 0 1 67.733337,37.220646 16.933334,16.933334 0 0 1 50.800003,20.287312 16.933334,16.933334 0 0 1 67.733337,3.3539772 16.933334,16.933334 0 0 1 84.666672,20.287312 Z" /> <path id="ellipse12" - style="fill:#fafaee;fill-opacity:1;stroke-width:2.78336;stroke-linecap:square;stroke-dashoffset:14.4;paint-order:fill markers stroke" + style="fill:#464646;fill-opacity:1;stroke-width:2.78336;stroke-linecap:square;stroke-dashoffset:14.4;paint-order:fill markers stroke" transform="rotate(90)" d="m 15.805798,-91.01667 a 4.2332811,4.2333336 0 0 1 -2.116641,3.666174 4.2332811,4.2333336 0 0 1 -4.2332812,0 4.2332811,4.2333336 0 0 1 -2.1166405,-3.666174" /> <path id="path12" - style="fill:#fafaee;fill-opacity:1;stroke-width:2.78336;stroke-linecap:square;stroke-dashoffset:14.4;paint-order:fill markers stroke" + style="fill:#464646;fill-opacity:1;stroke-width:2.78336;stroke-linecap:square;stroke-dashoffset:14.4;paint-order:fill markers stroke" transform="matrix(0,1,1,0,0,0)" d="m 15.805798,44.450001 a 4.2332811,4.2333336 0 0 1 -2.116641,3.666174 4.2332811,4.2333336 0 0 1 -4.2332812,0 4.2332811,4.2333336 0 0 1 -2.1166405,-3.666174" /> </g>
M
index.html
→
index.html
@@ -1,12 +1,46 @@
<!DOCTYPE html> <html> - <head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width,initial-scale=1.0"> - <title>deserthorns</title> - </head> - <body> - <h1>deserthorns</h1> - </body> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <title>deserthorns</title> + <style> + :root { + --background: #464646; + --f_high: #DCDCCC; + --f_med: #DCA3A3; + --f_low: #7F9F7F; + --f_inv: #000D18; + --b_high: #262626; + --b_med: #333333; + --b_low: #3F3F3F; + --b_inv: #8FAF9F; + } + + html { + background: var(--background); + color: var(--f_high); + } + + .logo { + display: block; + margin: 5rem auto; + max-width: 15rem; + } + + h1 { + letter-spacing: 0.5rem; + font-family: monospace; + text-align: center; + color: var(--f_low); + } + </style> +</head> +<body> + <img class="logo" src="/assets/svg/logo-block-mono.svg"> + <h1>deserthorns</h1> +</body> + </html>
A
theme.html
@@ -0,0 +1,322 @@
+<!DOCTYPE html> +<html> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <title>theme</title> + <style> + html { + background: var(--background); + color: var(--f_high); + } + + a { + color: var(--f_high); + } + + .palette { + display: flex; + flex-direction: row; + } + + .palette { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 2rem; + justify-content: center; + max-width: 60rem; + + div { + border-radius: 50%; + width: 6rem; + height: 6rem; + margin: 0.5rem; + } + + span { + width: 3rem; + padding: 0.1rem; + padding-bottom: 2rem; + display: block; + font-family: monospace; + } + } + + .contrasts { + display: grid; + grid-template-columns: repeat(3, 1fr); + max-width: 60rem; + + div { + margin: 0.25rem; + + span { + padding: 1rem; + display: block; + text-align: center; + } + } + } + </style> + <script> + // https://github.com/hundredrabbits/Themes + function Theme(client) { + this.el = document.createElement('style') + this.el.type = 'text/css' + + this.active = {} + this.default = { + background: '#eeeeee', + f_high: '#0a0a0a', + f_med: '#4a4a4a', + f_low: '#6a6a6a', + f_inv: '#111111', + b_high: '#a1a1a1', + b_med: '#c1c1c1', + b_low: '#ffffff', + b_inv: '#ffb545' + } + + // Callbacks + this.onLoad = () => { } + + this.install = (host = document.body) => { + window.addEventListener('dragover', this.drag) + window.addEventListener('drop', this.drop) + host.appendChild(this.el) + } + + this.start = () => { + console.log('Theme', 'Starting..') + if (isJson(localStorage.theme)) { + const storage = JSON.parse(localStorage.theme) + if (isValid(storage)) { + console.log('Theme', 'Loading theme in localStorage..') + this.load(storage) + return + } + } + this.load(this.default) + } + + this.open = () => { + console.log('Theme', 'Open theme..') + const input = document.createElement('input') + input.type = 'file' + input.onchange = (e) => { + this.read(e.target.files[0], this.load) + } + input.click() + } + + this.load = (data) => { + const theme = this.parse(data) + if (!isValid(theme)) { console.warn('Theme', 'Invalid format'); return } + console.log('Theme', 'Loaded theme!') + this.el.innerHTML = `:root { + --background: ${theme.background}; + --f_high: ${theme.f_high}; + --f_med: ${theme.f_med}; + --f_low: ${theme.f_low}; + --f_inv: ${theme.f_inv}; + --b_high: ${theme.b_high}; + --b_med: ${theme.b_med}; + --b_low: ${theme.b_low}; + --b_inv: ${theme.b_inv}; + }` + localStorage.setItem('theme', JSON.stringify(theme)) + this.active = theme + if (this.onLoad) { + this.onLoad(data) + } + } + + this.reset = () => { + this.load(this.default) + } + + this.set = (key, val) => { + if (!val) { return } + const hex = (`${val}`.substr(0, 1) !== '#' ? '#' : '') + `${val}` + if (!isColor(hex)) { console.warn('Theme', `${hex} is not a valid color.`); return } + this.active[key] = hex + } + + this.get = (key) => { + return this.active[key] + } + + this.parse = (any) => { + if (isValid(any)) { return any } + if (isJson(any)) { return JSON.parse(any) } + if (isHtml(any)) { return extract(any) } + } + + // Drag + + this.drag = (e) => { + e.stopPropagation() + e.preventDefault() + e.dataTransfer.dropEffect = 'copy' + } + + this.drop = (e) => { + e.preventDefault() + const file = e.dataTransfer.files[0] + if (file.name.indexOf('.svg') > -1) { + this.read(file, this.load) + } + e.stopPropagation() + } + + this.read = (file, callback) => { + const reader = new FileReader() + reader.onload = (event) => { + callback(event.target.result) + } + reader.readAsText(file, 'UTF-8') + } + + // Helpers + + function extract(xml) { + const svg = new DOMParser().parseFromString(xml, 'text/xml') + try { + return { + background: svg.getElementById('background').getAttribute('fill'), + f_high: svg.getElementById('f_high').getAttribute('fill'), + f_med: svg.getElementById('f_med').getAttribute('fill'), + f_low: svg.getElementById('f_low').getAttribute('fill'), + f_inv: svg.getElementById('f_inv').getAttribute('fill'), + b_high: svg.getElementById('b_high').getAttribute('fill'), + b_med: svg.getElementById('b_med').getAttribute('fill'), + b_low: svg.getElementById('b_low').getAttribute('fill'), + b_inv: svg.getElementById('b_inv').getAttribute('fill') + } + } catch (err) { + console.warn('Theme', 'Incomplete SVG Theme', err) + } + } + + function isValid(json) { + if (!json) { return false } + if (!json.background || !isColor(json.background)) { return false } + if (!json.f_high || !isColor(json.f_high)) { return false } + if (!json.f_med || !isColor(json.f_med)) { return false } + if (!json.f_low || !isColor(json.f_low)) { return false } + if (!json.f_inv || !isColor(json.f_inv)) { return false } + if (!json.b_high || !isColor(json.b_high)) { return false } + if (!json.b_med || !isColor(json.b_med)) { return false } + if (!json.b_low || !isColor(json.b_low)) { return false } + if (!json.b_inv || !isColor(json.b_inv)) { return false } + return true + } + + function isColor(hex) { + return /^#([0-9A-F]{3}){1,2}$/i.test(hex) + } + + function isJson(text) { + try { JSON.parse(text); return true } catch (error) { return false } + } + + function isHtml(text) { + try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } + } + } + </script> +</head> + +<body> + <h1>Theme Testbed</h1> + <a href="https://github.com/hundredrabbits/Themes/tree/master"> 100r Themes project</a> + <hr> + <h2>Palette</h2> + <div class="palette"> + <div style="background-color: var(--f_high);"> + <span style="background-color: var(--f_high); color: var(--b_med);">f_high</span> + </div> + <div style="background-color: var(--f_med);"> + <span style="background-color: var(--f_med); color: var(--b_med);">f_med</span> + </div> + <div style="background-color: var(--f_low);"> + <span style="background-color: var(--f_low); color: var(--b_med);">f_low</span> + </div> + <div style="background-color: var(--f_inv);"> + <span style="background-color: var(--f_inv); color: var(--f_high);">f_inv</span> + </div> + <div style="background-color: var(--b_high);"> + <span style="background-color: var(--b_high); color: var(--f_high);">b_high</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="background-color: var(--b_med); color: var(--f_high);">b_med</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="background-color: var(--b_low); color: var(--f_high);">b_low</span> + </div> + <div style="background-color: var(--b_inv);"> + <span style="background-color: var(--b_inv); color: var(--f_inv);">b_inv</span> + </div> + </div> + <hr> + <h2>Contrast</h2> + <div class="contrasts"> + <div style="background-color: var(--b_high);"> + <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_high);"> + <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_high);"> + <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_inv); grid-column: 2;"> + <span style="color: var(--f_inv)">Lorem ipsum dolor sit amet</span> + </div> + </div> + <hr> + <h2>Text</h2> + <p style="color: var(--f_high)"> + <strong>High</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum + necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse + molestias. Maiores eos blanditiis repudiandae reprehenderit. + </p> + <p style="color: var(--f_med)"> + <strong>Medium</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum + necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse + molestias. Maiores eos blanditiis repudiandae reprehenderit. + </p> + <p style="color: var(--f_low)"> + <strong>Low</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum + necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse + molestias. Maiores eos blanditiis repudiandae reprehenderit. + </p> + <script> + const theme = new Theme(); + theme.install(document.body); + theme.start(); + </script> +</body> + +</html>
M
wiki/css/style.css
→
wiki/css/style.css
@@ -1,133 +1,134 @@
:root { - --col-white: #fafaee; - --col-gray: #dbdbc3; - --col-black: #57574e; - - --col-blue: #214d78; - --col-purple: #8f3268; - --col-green: #746724; - --col-orange: #c77d17; - - --col-blue-l: #2f6dab; - --col-purple-l: #c2438d; - --col-green-l: #a69433; - --col-orange-l: #fa9d1c; - - --col-blue-t: #abd0ba; - --col-purple-t: #e7c4a4; - --col-green-t: #dcd9b0; - --col-orange-t: #efe2a9; + --background: #464646; + --f_high: #DCDCCC; + --f_med: #DCA3A3; + --f_low: #7F9F7F; + --f_inv: #000D18; + --b_high: #262626; + --b_med: #333333; + --b_low: #3F3F3F; + --b_inv: #8FAF9F; } html { - background: var(--col-white); - color: var(--col-black); + background: var(--background); + color: var(--f_high); } body { - margin: 1rem; + margin: 1rem; + max-width: 60rem; } h1, h2 { - font-style: italic; + font-style: italic; } hr { - border: 1px solid var(--col-gray); + border: 1px solid var(--b_med); } a { - color: var(--col-blue-l); + color: var(--f_med); } -.txt-hl-blue { - background: var(--col-blue-t); - color: var(--col-blue); +pre, code { + color: var(--f_low); + background: var(--b_med); +} + +code { + padding: 0.1rem; +} + +pre { + padding: 1rem; +} + +.header { + display: flex; + flex-direction: row; +} + +.header .ident { + display: flex; + flex-direction: row; +} + +.header .ident .name.mobile { + display: none; + align-self: center; + margin-left: 1rem; +} + +.header .logo { + height: 5rem; +} + +.header .name { + font-weight: bold; + font-size: 1.2rem; + margin-left: 2rem; +} + +.header .links { + user-select: none; + width: 100%; +} + +.header ul { + padding: 0; + margin-left: 2rem; + margin-top: 0.5rem; +} + +.header li { + font-size: 1rem; + list-style: none; + margin-top: 0.25rem; +} + +.header li a { + padding: 0.1rem 0.25rem; + text-decoration: none; + color: var(--f_high); } -.txt-hl-purple { - background: var(--col-purple-t); - color: var(--col-purple); +.header li a:hover { + color: var(--f_high); + background: var(--b_high); + cursor: pointer; } -.txt-hl-green { - background: var(--col-green-t); - color: var(--col-green); +.header li.selected a { + color: var(--f_inv); + background: var(--b_inv); } -.txt-hl-orange { - background: var(--col-orange-t); - color: var(--col-orange); +.header .columns { + display: flex; + flex-direction: row; } -.header { - display: flex; - flex-direction: row; +@media screen and (max-width: 600px) { + .header { + flex-direction: column; } - .header .ident { - display: flex; - flex-direction: row; - } + .header .ident .name.mobile { - display: none; - align-self: center; - margin-left: 1rem; + display: block; } + .header .logo { - height: 5rem; + height: 3rem; } - .header .name { - font-weight: bold; - font-size: 1.2rem; - margin-left: 2rem; + + .header .links .name { + display: none; } - .header .links { - user-select: none; - width: 100%; + + .header .links .columns>ul:first-child { + margin-left: 0; } - .header ul { - padding: 0; - margin-left: 2rem; - margin-top: 0.5rem; - } - .header li { - font-size: 1rem; - list-style: none; - margin-top: 0.25rem; - } - .header li a { - padding: 0.1rem 0.25rem; - text-decoration: none; - color: var(--col-black); - } - .header li a:hover { - color: var(--col-white); - background: var(--col-black); - cursor: pointer; - } - .header li.selected a{ - color: var(--col-white); - background: var(--col-black); - } - .header .columns { - display: flex; - flex-direction: row; - } - @media screen and (max-width: 600px) { - .header { - flex-direction: column; - } - .header .ident .name.mobile { - display: block; - } - .header .logo { - height: 3rem; - } - .header .links .name { - display: none; - } - .header .links .columns>ul:first-child { - margin-left: 0; - } - }+}
M
wiki/pages/index.html
→
wiki/pages/index.html
@@ -2,7 +2,9 @@ {{ define "styles" }}
{{ end }} {{ define "content" }} -<h1>main</h1> +<h1>Home</h1> +<hr> +<p>What are you doing here? There's nothing here yet...</p> {{ end }} {{ define "scripts" }}
M
wiki/pages/style.html
→
wiki/pages/style.html
@@ -1,100 +1,137 @@
{{ define "styles" }} <style> -.palette { - display: flex; - flex-direction: row; -} -.palette > div { - width: 3rem; - height: 3rem; - border-radius: 50%; - margin: 0.5rem; -} -.stripes > div { - height: 1rem; -} -.box { - width: 3rem; - height: 3rem; - border: 1px solid; - margin: 1rem; -} -.box.blue { - border-color: var(--col-blue); - background-color: var(--col-blue-t); -} -.box.purple { - border-color: var(--col-purple); - background-color: var(--col-purple-t); -} -.box.green { - border-color: var(--col-green); - background-color: var(--col-green-t); -} -.box.orange { - border-color: var(--col-orange); - background-color: var(--col-orange-t); -} + .palette { + display: flex; + flex-direction: row; + } + + .palette { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 2rem; + justify-content: center; + max-width: 60rem; + + div { + border-radius: 50%; + width: 6rem; + height: 6rem; + margin: 0.5rem; + } + + span { + width: 3rem; + padding: 0.1rem; + padding-bottom: 2rem; + display: block; + font-family: monospace; + } + } + + .contrasts { + display: grid; + grid-template-columns: repeat(3, 1fr); + max-width: 60rem; + + div { + margin: 0.25rem; + + span { + padding: 1rem; + display: block; + text-align: center; + } + } + } </style> {{ end }} {{ define "content" }} <h1>Style</h1> -<h2>Colors - Dark</h2> -<strong>Uses:</strong> borders, highlighted text, decoration -<div class="palette"> - <div style="background: var(--col-blue);"></div> - <div style="background: var(--col-purple);"></div> - <div style="background: var(--col-green);"></div> - <div style="background: var(--col-orange);"></div> -</div> <hr> -<h2>Colors - Light</h2> -<strong>Uses:</strong> colored text +<h2>Palette</h2> +<p>Based on <a href="https://kippura.org/zenburnpage/">Zenburn</a>. Chosen due to its low-contrast, warm, and organic feel.</p> +<p>This particular verison was taken from the Hundred Rabbits <a href="https://github.com/hundredrabbits/Themes/tree/master">Themes</a> project, which has a number of great minimal themes (8 colors + background).</p> <div class="palette"> - <div style="background: var(--col-blue-l);"></div> - <div style="background: var(--col-purple-l);"></div> - <div style="background: var(--col-green-l);"></div> - <div style="background: var(--col-orange-l);"></div> + <div style="background-color: var(--f_high);"> + <span style="background-color: var(--f_high); color: var(--b_med);">f_high</span> + </div> + <div style="background-color: var(--f_med);"> + <span style="background-color: var(--f_med); color: var(--b_med);">f_med</span> + </div> + <div style="background-color: var(--f_low);"> + <span style="background-color: var(--f_low); color: var(--b_med);">f_low</span> + </div> + <div style="background-color: var(--f_inv);"> + <span style="background-color: var(--f_inv); color: var(--f_high);">f_inv</span> + </div> + <div style="background-color: var(--b_high);"> + <span style="background-color: var(--b_high); color: var(--f_high);">b_high</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="background-color: var(--b_med); color: var(--f_high);">b_med</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="background-color: var(--b_low); color: var(--f_high);">b_low</span> + </div> + <div style="background-color: var(--b_inv);"> + <span style="background-color: var(--b_inv); color: var(--f_inv);">b_inv</span> + </div> </div> <hr> -<h2>Colors - Tints</h2> -<strong>Uses:</strong> text highlights, contrast areas/cards -<div class="palette"> - <div style="background: var(--col-blue-t);"></div> - <div style="background: var(--col-purple-t);"></div> - <div style="background: var(--col-green-t);"></div> - <div style="background: var(--col-orange-t);"></div> +<h2>Contrast</h2> +<div class="contrasts"> + <div style="background-color: var(--b_high);"> + <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_high);"> + <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_high);"> + <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_med);"> + <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_low);"> + <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span> + </div> + <div style="background-color: var(--b_inv); grid-column: 2;"> + <span style="color: var(--f_inv)">Lorem ipsum dolor sit amet</span> + </div> </div> <hr> -<h2>Contrasts</h2> -<strong>Uses:</strong> text, structure, contrast areas/cards -<div class="palette"> - <div style="background: var(--col-black);"></div> - <div style="background: var(--col-gray);"></div> -</div> -<hr> -<div class="palette"> - <div class="box blue"></div> - <div class="box purple"></div> - <div class="box green"></div> - <div class="box orange"></div> -</div> -<p> - Text with <span style="color: var(--col-blue-l)">colors</span> and <span style="color: var(--col-purple-l)">colors</span> and <span style="color: var(--col-orange-l)">colors</span> and <span style="color: var(--col-green-l)">colors</span>. +<h2>Text</h2> +<p style="color: var(--f_high)"> + <strong>High</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse molestias. Maiores eos blanditiis repudiandae reprehenderit. +</p> +<p style="color: var(--f_med)"> + <strong>Medium</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse molestias. Maiores eos blanditiis repudiandae reprehenderit. +</p> +<p style="color: var(--f_low)"> + <strong>Low</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse molestias. Maiores eos blanditiis repudiandae reprehenderit. </p> <p> - Text with highlight <span class="txt-hl-blue">colors</span> and <span class="txt-hl-purple">colors</span> and <span class="txt-hl-green">colors</span> and <span class="txt-hl-orange">colors</span>. + Text with an <a href="https://deserthorns.net">inline link</a> in it. </p> <p> - Text with an <a href="https://deserthorns.net">inline link</a> in it. + Text with <code>inline code</code> in it. </p> <pre> -Preformatted text... -<span style="color: var(--col-orange)">...with color!</span> -</pre> -<pre style="background-color: var(--col-gray);"> // Code block public foo() { return "bar";
M
wiki/templates/header.html
→
wiki/templates/header.html
@@ -1,7 +1,9 @@
{{ define "header" }} <div class="header"> <div class="ident"> - <img class="logo" src="/assets/svg/logo-block-mono.svg"> + <a href="/wiki"> + <img class="logo" src="/assets/svg/logo-block-mono.svg"> + </a> <span class="name mobile">deserthorns</span> </div> <div class="links">