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:
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 · 0 minutes</span> · <a onclick="toggleTheme()">Toggle theme</a>
</nav>
<textarea id="composer" placeholder="Start writing..." autofocus></textarea>
{{ $js := resources.Get "js/composer.js" | resources.Minify }}
