commit d047077eab5701ca4edf092750d0f129f2f45bbb
parent 78e7585e658a86232eebd3bf853cc1d8a84990b7
Author: oscarbenedito <oscar@obenedito.org>
Date:   Mon, 25 Nov 2019 00:10:47 +0100

New favicon and dark theme for composer

Diffstat:
MREADME.md | 3+++
Dassets/css/composer.css | 36------------------------------------
Aassets/css/composer.scss | 70++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Massets/img/favicon.min.svg | 2+-
Massets/img/favicon.svg | 71++++++++++++++++++++++++++++-------------------------------------------
Massets/js/composer.js | 20+++++++++++++++++++-
Mlayouts/composer/single.html | 5+++--
7 files changed, 124 insertions(+), 83 deletions(-)

diff --git a/README.md b/README.md @@ -1,6 +1,9 @@ # Personal website This repository is the source code for my [personal website](https://obenedito.org). +## Personal notes +The font used for the logo is "Libre Baskerville" in bold. + ## License The contents of this repositories are licensed under the [GNU Affero General Public License version 3](https://www.gnu.org/licenses/agpl-3.0.html) or (at your option) any later version. diff --git a/assets/css/composer.css b/assets/css/composer.css @@ -1,36 +0,0 @@ -:root { - --font-family: serif; - --nav-height: 2.25em; -} -textarea { - line-height: 1.4em; - font-family: 'var(--font-family)'; - padding: 1em calc((100% - 720px)/2); - background-color: #fff; - color: #000; - margin: 0; - height: calc(100% - var(--nav-height)); - font-size: 1.2em; - box-sizing: border-box; - resize: none; - right: 0; - top: 2.25em; - bottom: 0; - left: 0; - width: 100%; - position: fixed; - border: 0; - outline: 0; -} -nav { - text-align: center; - height: var(--nav-height); - line-height: var(--nav-height); - font-size: 1.2em; - opacity: 0; - transition-duration: .4s; - color: #777; -} -nav:hover { - opacity: 1; -} diff --git a/assets/css/composer.scss b/assets/css/composer.scss @@ -0,0 +1,70 @@ +@mixin lightcolors { +--text-color: #000; +--bg-color: #fff; +--nav-color: #767676; +} +@mixin darkcolors { +--text-color: #eee; +--bg-color: #222; +--nav-color: #8f8f8f; +} +:root { + --font-family: serif; + --nav-height: 3em; + + @include lightcolors; + @media (prefers-color-scheme: dark) { + @include darkcolors; + } +} +.dark { + @include darkcolors; +} +html { + background-color: var(--bg-color); + transition-duration: .4s; +} +textarea { + line-height: 1.4em; + font-family: 'var(--font-family)'; + padding: 1em calc((100% - 720px)/2); + background-color: var(--bg-color); + color: var(--text-color); + transition-duration: .4s; + margin: 0; + height: calc(100% - var(--nav-height)); + font-size: 1.2em; + box-sizing: border-box; + resize: none; + right: 0; + top: var(--nav-height); + bottom: 0; + left: 0; + width: 100%; + position: fixed; + border: 0; + outline: 0; +} +nav { + text-align: center; + height: var(--nav-height); + line-height: var(--nav-height); + font-size: 1.2em; + opacity: 0; + transition-duration: .4s; + color: var(--nav-color); + background-color: var(--bg-color); + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1; + a { + color: var(--nav-color); + text-decoration: none; + cursor: pointer; + } +} +nav:hover { + opacity: 1; +} diff --git a/assets/img/favicon.min.svg b/assets/img/favicon.min.svg @@ -1 +1 @@ -<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(0.94802076,0,0,0.94802076,1.679926,-217.32207)" style="stroke-width:0.26458001"><path d="m 14.783,256.36 q 3.048,0 5.7404,1.0668 2.7432,1.016 4.7752,2.8448 2.0828,1.8288 3.2512,4.3688 1.2192,2.4892 1.2192,5.4864 0,3.0988 -1.2192,5.6896 -1.1684,2.5908 -3.2512,4.4704 -2.032,1.8796 -4.7752,2.9464 Q 17.831,284.3 14.783,284.3 11.7858,284.3 9.0934,283.284 6.401,282.2172 4.369,280.3376 2.337,278.458 1.1686,275.8672 2e-4,273.2256 2e-4,270.1268 q 0,-2.9972 1.1684,-5.5372 1.1684,-2.54 3.2004,-4.3688 2.032,-1.8288 4.7244,-2.8448 2.6924,-1.016 5.6896,-1.016 z m 0,2.9464 q -1.524,0 -2.794,0.8128 -1.27,0.762 -2.1844,2.1844 -0.8636,1.4224 -1.3716,3.4544 -0.4572,1.9812 -0.4572,4.4196 0,2.54 0.4572,4.572 0.508,2.032 1.3716,3.4544 0.9144,1.4224 2.1336,2.2352 1.27,0.762 2.8448,0.762 1.5748,0 2.8448,-0.762 1.3208,-0.8128 2.2352,-2.2352 0.9144,-1.4732 1.4224,-3.5052 0.508,-2.032 0.508,-4.5212 0,-2.4384 -0.508,-4.4196 -0.508,-1.9812 -1.4224,-3.4036 -0.9144,-1.4732 -2.2352,-2.2352 -1.27,-0.8128 -2.8448,-0.8128 z"/><path d="m 43.086,272.67 q 0,1.8796 0.508,3.5052 0.5588,1.5748 1.4732,2.7432 0.9144,1.1684 2.1844,1.8288 1.27,0.6604 2.794,0.6604 3.048,0 4.6228,-2.794 1.5748,-2.794 1.5748,-8.2296 0,-5.2832 -1.5748,-8.0264 -1.524,-2.794 -4.6228,-2.794 -1.8288,0 -3.4036,1.016 -1.524,0.9652 -2.3876,2.7432 -1.1684,2.4384 -1.1684,6.1468 z m -0.1016,-12.294 h 0.2032 q 1.3208,-1.9304 3.4036,-2.9464 2.0828,-1.0668 4.7244,-1.0668 2.6924,0 4.9784,1.1176 2.3368,1.0668 4.0132,2.9464 1.7272,1.8796 2.6924,4.4196 0.9652,2.54 0.9652,5.4356 0,3.048 -1.0668,5.6388 -1.016,2.54 -2.8448,4.4196 -1.778,1.8796 -4.2164,2.9464 -2.3876,1.0668 -5.08,1.0668 -2.794,0 -5.2832,-1.0668 -2.4384,-1.1176 -3.9116,-2.8956 l -3.8608,3.4036 H 35.974 v -30.226 q 0,-4.7752 -0.6604,-6.5532 -0.1524,-0.3556 -0.3556,-0.6096 -0.2032,-0.254 -0.6096,-0.4064 -0.3556,-0.2032 -1.016,-0.3048 -0.6604,-0.1524 -1.7272,-0.3048 v -1.7272 l 11.379,-2.032 z"/></g></svg> +<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0,-87)"><circle r="105" cy="192" cx="105" style="fill:#7ec27b;"/><path style="fill:#fff;stroke-width:3.11444497" d="m 62.821144,169.92187 q 7.474669,0 14.077293,2.61614 6.727201,2.49156 11.710314,6.97636 5.10769,4.4848 7.97298,10.71369 2.989867,6.10431 2.989867,13.4544 0,7.59925 -2.989867,13.95272 -2.86529,6.35347 -7.97298,10.96284 -4.983113,4.60938 -11.710314,7.22552 -6.602624,2.61613 -14.077293,2.61613 -7.350091,0 -13.952715,-2.49155 -6.602624,-2.61614 -11.585737,-7.22552 -4.983112,-4.60938 -7.848402,-10.96285 -2.86529,-6.47804 -2.86529,-14.07729 0,-7.35009 2.86529,-13.57898 2.86529,-6.22889 7.848402,-10.71369 4.983113,-4.4848 11.585737,-6.97636 6.602624,-2.49156 13.952715,-2.49156 z m 0,7.22552 q -3.737335,0 -6.85178,1.99324 -3.114445,1.86867 -5.356846,5.35685 -2.117823,3.48818 -3.363601,8.47129 -1.1212,4.85853 -1.1212,10.83827 0,6.22889 1.1212,11.212 1.245778,4.98312 3.363601,8.47129 2.242401,3.48818 5.232268,5.48143 3.114446,1.86867 6.976358,1.86867 3.861912,0 6.976357,-1.86867 3.239023,-1.99325 5.481424,-5.48143 2.242401,-3.61275 3.488179,-8.59586 1.245778,-4.98312 1.245778,-11.08743 0,-5.97974 -1.245778,-10.83827 -1.245778,-4.85853 -3.488179,-8.34671 -2.242401,-3.61276 -5.481424,-5.48143 -3.114445,-1.99324 -6.976357,-1.99324 z"/><path style="fill:#fff;stroke-width:3.11444497" d="m 132.23045,209.91135 q 0,4.60938 1.24578,8.59587 1.37036,3.86191 3.61276,6.7272 2.2424,2.86529 5.35684,4.4848 3.11445,1.61952 6.85178,1.61952 7.47467,0 11.33658,-6.85178 3.86191,-6.85178 3.86191,-20.18161 0,-12.95609 -3.86191,-19.68329 -3.73733,-6.85178 -11.33658,-6.85178 -4.4848,0 -8.34671,2.49155 -3.73734,2.36698 -5.85516,6.72721 -2.86529,5.97973 -2.86529,15.07391 z m -0.24915,-30.14783 h 0.49831 q 3.23902,-4.73395 8.34671,-7.22551 5.10769,-2.61614 11.58574,-2.61614 6.60262,0 12.20862,2.74072 5.73058,2.61613 9.84165,7.22551 4.23564,4.60938 6.60262,10.83827 2.36698,6.22889 2.36698,13.32983 0,7.47466 -2.61613,13.82813 -2.49156,6.22889 -6.97636,10.83827 -4.36022,4.60938 -10.33996,7.22552 -5.85516,2.61613 -12.45778,2.61613 -6.85178,0 -12.95609,-2.61613 -5.97974,-2.74072 -9.59249,-7.10094 l -9.46792,8.34671 h -4.23564 V 163.0701 q 0,-11.71032 -1.61951,-16.07054 -0.37374,-0.87205 -0.87205,-1.49494 -0.49831,-0.62289 -1.49493,-0.99662 -0.87205,-0.49831 -2.49156,-0.74747 -1.61951,-0.37373 -4.23564,-0.74746 v -4.23565 l 27.90543,-4.98311 z"/></g></svg> diff --git a/assets/img/favicon.svg b/assets/img/favicon.svg @@ -5,17 +5,15 @@ 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 63.999999" + id="svg8" version="1.1" - id="svg30" - sodipodi:docname="favicon.svg" - width="64" - height="64" - inkscape:version="0.92.1 r15371"> + viewBox="0 0 210 210" + height="210mm" + width="210mm"> + <defs + id="defs2" /> <metadata - id="metadata36"> + id="metadata5"> <rdf:RDF> <cc:Work rdf:about=""> @@ -26,40 +24,27 @@ </cc:Work> </rdf:RDF> </metadata> - <defs - id="defs34" /> - <sodipodi:namedview - pagecolor="#ffffff" - bordercolor="#666666" - borderopacity="1" - objecttolerance="10" - gridtolerance="10" - guidetolerance="10" - inkscape:pageopacity="0" - inkscape:pageshadow="2" - inkscape:window-width="1600" - inkscape:window-height="836" - id="namedview32" - showgrid="false" - showguides="false" - inkscape:zoom="5.4138085" - inkscape:cx="32.185091" - inkscape:cy="30.440213" - inkscape:window-x="0" - inkscape:window-y="27" - inkscape:window-maximized="1" - inkscape:current-layer="svg30" /> <g - transform="matrix(0.94802076,0,0,0.94802076,1.679926,-217.32207)" - id="g28" - style="stroke-width:0.26458001"> - <path - d="m 14.783,256.36 q 3.048,0 5.7404,1.0668 2.7432,1.016 4.7752,2.8448 2.0828,1.8288 3.2512,4.3688 1.2192,2.4892 1.2192,5.4864 0,3.0988 -1.2192,5.6896 -1.1684,2.5908 -3.2512,4.4704 -2.032,1.8796 -4.7752,2.9464 Q 17.831,284.3 14.783,284.3 11.7858,284.3 9.0934,283.284 6.401,282.2172 4.369,280.3376 2.337,278.458 1.1686,275.8672 2e-4,273.2256 2e-4,270.1268 q 0,-2.9972 1.1684,-5.5372 1.1684,-2.54 3.2004,-4.3688 2.032,-1.8288 4.7244,-2.8448 2.6924,-1.016 5.6896,-1.016 z m 0,2.9464 q -1.524,0 -2.794,0.8128 -1.27,0.762 -2.1844,2.1844 -0.8636,1.4224 -1.3716,3.4544 -0.4572,1.9812 -0.4572,4.4196 0,2.54 0.4572,4.572 0.508,2.032 1.3716,3.4544 0.9144,1.4224 2.1336,2.2352 1.27,0.762 2.8448,0.762 1.5748,0 2.8448,-0.762 1.3208,-0.8128 2.2352,-2.2352 0.9144,-1.4732 1.4224,-3.5052 0.508,-2.032 0.508,-4.5212 0,-2.4384 -0.508,-4.4196 -0.508,-1.9812 -1.4224,-3.4036 -0.9144,-1.4732 -2.2352,-2.2352 -1.27,-0.8128 -2.8448,-0.8128 z" - id="path2" - inkscape:connector-curvature="0" /> - <path - d="m 43.086,272.67 q 0,1.8796 0.508,3.5052 0.5588,1.5748 1.4732,2.7432 0.9144,1.1684 2.1844,1.8288 1.27,0.6604 2.794,0.6604 3.048,0 4.6228,-2.794 1.5748,-2.794 1.5748,-8.2296 0,-5.2832 -1.5748,-8.0264 -1.524,-2.794 -4.6228,-2.794 -1.8288,0 -3.4036,1.016 -1.524,0.9652 -2.3876,2.7432 -1.1684,2.4384 -1.1684,6.1468 z m -0.1016,-12.294 h 0.2032 q 1.3208,-1.9304 3.4036,-2.9464 2.0828,-1.0668 4.7244,-1.0668 2.6924,0 4.9784,1.1176 2.3368,1.0668 4.0132,2.9464 1.7272,1.8796 2.6924,4.4196 0.9652,2.54 0.9652,5.4356 0,3.048 -1.0668,5.6388 -1.016,2.54 -2.8448,4.4196 -1.778,1.8796 -4.2164,2.9464 -2.3876,1.0668 -5.08,1.0668 -2.794,0 -5.2832,-1.0668 -2.4384,-1.1176 -3.9116,-2.8956 l -3.8608,3.4036 H 35.974 v -30.226 q 0,-4.7752 -0.6604,-6.5532 -0.1524,-0.3556 -0.3556,-0.6096 -0.2032,-0.254 -0.6096,-0.4064 -0.3556,-0.2032 -1.016,-0.3048 -0.6604,-0.1524 -1.7272,-0.3048 v -1.7272 l 11.379,-2.032 z" - id="path4" - inkscape:connector-curvature="0" /> + transform="translate(0,-87)" + id="layer1"> + <circle + r="105" + cy="192" + cx="105" + id="path14" + style="fill:#7ec27b;fill-opacity:1;stroke:none;stroke-width:0.1796589;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + <g + id="text18" + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:124.57781219px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.11444497" + aria-label="ob"> + <path + id="path906" + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Libre Baskerville';-inkscape-font-specification:'Libre Baskerville Bold';fill:#ffffff;fill-opacity:1;stroke-width:3.11444497" + d="m 62.821144,169.92187 q 7.474669,0 14.077293,2.61614 6.727201,2.49156 11.710314,6.97636 5.10769,4.4848 7.97298,10.71369 2.989867,6.10431 2.989867,13.4544 0,7.59925 -2.989867,13.95272 -2.86529,6.35347 -7.97298,10.96284 -4.983113,4.60938 -11.710314,7.22552 -6.602624,2.61613 -14.077293,2.61613 -7.350091,0 -13.952715,-2.49155 -6.602624,-2.61614 -11.585737,-7.22552 -4.983112,-4.60938 -7.848402,-10.96285 -2.86529,-6.47804 -2.86529,-14.07729 0,-7.35009 2.86529,-13.57898 2.86529,-6.22889 7.848402,-10.71369 4.983113,-4.4848 11.585737,-6.97636 6.602624,-2.49156 13.952715,-2.49156 z m 0,7.22552 q -3.737335,0 -6.85178,1.99324 -3.114445,1.86867 -5.356846,5.35685 -2.117823,3.48818 -3.363601,8.47129 -1.1212,4.85853 -1.1212,10.83827 0,6.22889 1.1212,11.212 1.245778,4.98312 3.363601,8.47129 2.242401,3.48818 5.232268,5.48143 3.114446,1.86867 6.976358,1.86867 3.861912,0 6.976357,-1.86867 3.239023,-1.99325 5.481424,-5.48143 2.242401,-3.61275 3.488179,-8.59586 1.245778,-4.98312 1.245778,-11.08743 0,-5.97974 -1.245778,-10.83827 -1.245778,-4.85853 -3.488179,-8.34671 -2.242401,-3.61276 -5.481424,-5.48143 -3.114445,-1.99324 -6.976357,-1.99324 z" /> + <path + id="path908" + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Libre Baskerville';-inkscape-font-specification:'Libre Baskerville Bold';fill:#ffffff;fill-opacity:1;stroke-width:3.11444497" + d="m 132.23045,209.91135 q 0,4.60938 1.24578,8.59587 1.37036,3.86191 3.61276,6.7272 2.2424,2.86529 5.35684,4.4848 3.11445,1.61952 6.85178,1.61952 7.47467,0 11.33658,-6.85178 3.86191,-6.85178 3.86191,-20.18161 0,-12.95609 -3.86191,-19.68329 -3.73733,-6.85178 -11.33658,-6.85178 -4.4848,0 -8.34671,2.49155 -3.73734,2.36698 -5.85516,6.72721 -2.86529,5.97973 -2.86529,15.07391 z m -0.24915,-30.14783 h 0.49831 q 3.23902,-4.73395 8.34671,-7.22551 5.10769,-2.61614 11.58574,-2.61614 6.60262,0 12.20862,2.74072 5.73058,2.61613 9.84165,7.22551 4.23564,4.60938 6.60262,10.83827 2.36698,6.22889 2.36698,13.32983 0,7.47466 -2.61613,13.82813 -2.49156,6.22889 -6.97636,10.83827 -4.36022,4.60938 -10.33996,7.22552 -5.85516,2.61613 -12.45778,2.61613 -6.85178,0 -12.95609,-2.61613 -5.97974,-2.74072 -9.59249,-7.10094 l -9.46792,8.34671 h -4.23564 V 163.0701 q 0,-11.71032 -1.61951,-16.07054 -0.37374,-0.87205 -0.87205,-1.49494 -0.49831,-0.62289 -1.49493,-0.99662 -0.87205,-0.49831 -2.49156,-0.74747 -1.61951,-0.37373 -4.23564,-0.74746 v -4.23565 l 27.90543,-4.98311 z" /> + </g> </g> </svg> diff --git a/assets/js/composer.js b/assets/js/composer.js @@ -71,10 +71,28 @@ var saveEvent = function(event) { downloadData(); } } +function toggleTheme() { + if (localStorage && localStorage.getItem("theme") == "dark") { + localStorage.setItem("theme", "default"); + } else if (localStorage) { + localStorage.setItem("theme", "dark"); + } + setTheme(); +} +function setTheme() { + if (localStorage) { + var light = localStorage.getItem("theme") == "default"; + document.documentElement.classList.toggle("dark"); + } +} key = (new URLSearchParams(window.location.search)).get('key'); if (key == '' || key == null) { - key = 'content'; + key = 'null'; +} +key = 'k-' + key; +if (localStorage && localStorage.getItem("theme") == "dark") { + setTheme(); } $composer.addEventListener('keyup input', resetTimer); $composer.addEventListener('keydown', resetTimer); diff --git a/layouts/composer/single.html b/layouts/composer/single.html @@ -2,12 +2,13 @@ <html lang="en"> <head> {{ partial "head-base.html" . }} - {{ $style := resources.Get "css/composer.css" | resources.Minify }} + {{ $options := (dict "targetPath" "css/composer.css" "outputStyle" "compressed") }} + {{ $style := resources.Get "css/composer.scss" | resources.ToCSS $options }} <link rel="stylesheet" type="text/css" href="{{ $style.RelPermalink }}"> </head> <body> <nav> - <span id="word-count">0 words</span> + <span id="word-count">0 words &middot; 0 minutes</span> &middot; <a onclick="toggleTheme()">Toggle theme</a> </nav> <textarea id="composer" placeholder="Start writing..." autofocus></textarea> {{ $js := resources.Get "js/composer.js" | resources.Minify }}