diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 585c7c2..74750ed 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -26,7 +26,12 @@ + href="{{ `css/hyde-light.css` | relURL }}"> + + {{ partial "theme-color.html" . }} @@ -59,5 +64,7 @@ {{- end}} + + diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index f2b66d4..f149a3a 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -40,10 +40,16 @@
{{ range $item := .Site.Params.socialIcons }} - - + {{ end }}
+ +
+ + light mode + dark mode + + diff --git a/static/css/hyde-dark.css b/static/css/hyde-dark.css index ea774c9..0a0b249 100644 --- a/static/css/hyde-dark.css +++ b/static/css/hyde-dark.css @@ -1,81 +1,12 @@ -/* - * __ __ - * /\ \ /\ \ - * \ \ \___ __ __ \_\ \ __ - * \ \ _ `\/\ \/\ \ /'_` \ /'__`\ - * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ - * \ \_\ \_\/`____ \ \___,_\ \____\ - * \/_/\/_/`/___/> \/__,_ /\/____/ - * /\___/ - * \/__/ - * - * Designed, built, and released under MIT license by @mdo. Learn more at - * https://github.com/poole/hyde. - */ - - -/* - * Contents - * - * Global resets - * Sidebar - * Container - * Reverse layout - * Themes - */ - - -/* - * Global resets - * - * Update the foundational and global aspects of the page. - */ - -html { - font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif; -} -@media (min-width: 48em) { - html { - font-size: 16px; - } -} -@media (min-width: 58em) { - html { - font-size: 20px; - } -} - - -/* - * Sidebar - * - * Flexible banner for housing site name, intro, and "footer" content. Starts - * out above content in mobile and later moves to the side with wider viewports. - */ - +@media (prefers-color-scheme: dark) { .sidebar { - text-align: center; - padding: 2rem 1rem; + color: rgba(255,255,255,.5); background-color: #202020; } -@media (min-width: 48em) { - .sidebar { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 18rem; - } - - footer { - margin-left: 19rem !important; - margin-right: 1rem !important; - } -} h1,h2,h3,h4,h5,h6 { - color: #ccc; + color: #aaa; } /* Sidebar links */ @@ -86,82 +17,20 @@ h1,h2,h3,h4,h5,h6 { /* About section */ .sidebar-about h1 { color: #222; - margin-top: 0; - font-size: 2.25rem; - font-weight: 400; } -/* Sidebar nav */ -.sidebar-nav { - padding-left: 0; - list-style: none; -} -.sidebar-nav-item { - display: block; -} -a.sidebar-nav-item:hover, -a.sidebar-nav-item:focus { - text-decoration: underline; -} -.sidebar-nav-item.active { - font-weight: bold; -} - -/* Container - * - * Align the contents of the site above the proper threshold with some margin-fu - * with a 25%-wide `.sidebar`. - */ - -.content { - padding-top: 1rem; - padding-bottom: 1rem; - min-height: 50%; -} - - html, body { - height: 100%; - width: 100%; - background-color: #000000; - color: #ccc; + background-color: #000; + color: #aaa; } footer { - font-size: .7rem; - text-align: center; - height: 40px; - padding: 1rem 0; - margin: 0 1rem; border-top: 1px solid #e0e0e0; } - -@media (min-width: 48em) { - .content { - max-width: 40rem; - margin-left: 20rem; - margin-right: 2rem; - margin-bottom: -40px; - min-height: 100%; - } -} - -.img-circle { - border-radius: 50%; -} - .img-headshot { border: 6px solid #222; - height: 180px; - width: 180px; -} - -.center { - display: block; - margin-left: auto; - margin-right: auto; } .sidebar { @@ -180,103 +49,23 @@ footer a, color: #336699; } -.read-more-link { - margin-top: 1rem; -} - .read-more-link a { - padding: 8px 16px; - border: 1px solid; border-color: #336699; - border-radius: 4px; } .read-more-link a:hover { - text-decoration: none; color: #222; background-color: #336699; } -.pull-right { - float: right; -} - -ul.posts { - list-style: none; - padding: 0 1rem; -} - -.social-icons, -.sidebar nav { - margin-top: 1rem; -} - -ul.posts li, -.sidebar nav li { - font-size: 1.2rem; - padding: 0.25rem 0; -} - -.social-icons a { - font-size: 1.5rem; - padding: 0.2rem; -} - -@media (min-width: 58rem) { - .social-icons a { - font-size: 1.2rem; - } - - ul.posts li, - .sidebar nav li { - font-size: inherit; - padding: 0; - } -} - -.social-icons a, -.social-icons a:hover, -.social-icons a:focus { - text-decoration: none !important; -} - -.pagination { - justify-content: center; - display: flex; - margin: 1em 0 2rem 0; - padding: 0; -} - -.pagination ul { - margin: 0; - padding: 0; - list-style-type: none; -} - -.pagination li { - display: block; - float: left; - margin-left: -1px; -} - .pagination li a { - display: block; - margin-bottom: 0.25em; - padding: 0.5em 1em; - font-size: 14px; - font-weight: bold; - line-height: 1.5; - text-align: center; - text-decoration: none; color: #336699; border: 1px solid #336699; - border-radius: 0; } .pagination li a:hover { color: #222; background-color: #336699; - opacity: 0.75; } .pagination li.active a { @@ -286,94 +75,41 @@ ul.posts li, .pagination li.disabled a { color: rgba(67, 118, 122, 0.5); - pointer-events: none; - cursor: not-allowed; -} - -.pagination li:first-child { - margin-left: 0; -} - -.pagination li:first-child a { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.pagination li:last-child a { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.share-buttons { - text-align: center; - font-size: 2rem; - margin-top: 2rem; -} - -.share-buttons a { - padding: 0 0.6rem; -} - -.share-buttons a:hover { - opacity: 0.75; -} - -ul.tags { - list-style: none; - padding: 0; - margin: 1rem 0; -} - -ul.tags li { - display: inline-block; - margin: 0.25rem 0; } a.tag-link { background-color: #f2f2f2; - padding: 5px 10px; - border-radius: 3px; - font-size: 0.75rem; - text-decoration: none; color: #757575 !important; } -a.tag-link:hover { - text-decoration: none; + +/* Code */ +code, +pre, +.highlight { + font-family: Menlo, Monaco, "Courier New", monospace; +} +code { + color: #e83e8c; + white-space: pre; +} +pre { + background-color: #222; +} +pre code { + color: inherit; + background-color: transparent; +} +.highlight { + border-color: #ddd #ddd #ccc; +} +.chroma .lntd { + background-color: #222; } -figure { - padding: 0; - margin: 0; +.social-icons { + filter:invert(100%); } -figure > img { - margin: 0 auto; -} -figcaption { - text-align: center; - font-size: 80%; -} - -.tagline { - display: block; - font-size: 1.2rem; - margin-bottom: .5rem; - font-weight: 400; -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flex { - display: flex; - justify-content: space-between; -} - -.nowrap { - white-space: nowrap; -} +} \ No newline at end of file diff --git a/static/css/hyde-light.css b/static/css/hyde-light.css new file mode 100644 index 0000000..31304a4 --- /dev/null +++ b/static/css/hyde-light.css @@ -0,0 +1,380 @@ +/* + * __ __ + * /\ \ /\ \ + * \ \ \___ __ __ \_\ \ __ + * \ \ _ `\/\ \/\ \ /'_` \ /'__`\ + * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ + * \ \_\ \_\/`____ \ \___,_\ \____\ + * \/_/\/_/`/___/> \/__,_ /\/____/ + * /\___/ + * \/__/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/hyde. + */ + + +/* + * Contents + * + * Global resets + * Sidebar + * Container + * Reverse layout + * Themes + */ + + +/* + * Global resets + * + * Update the foundational and global aspects of the page. + */ + +html { + font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif; +} +@media (min-width: 48em) { + html { + font-size: 16px; + } +} +@media (min-width: 58em) { + html { + font-size: 20px; + } +} + + +/* + * Sidebar + * + * Flexible banner for housing site name, intro, and "footer" content. Starts + * out above content in mobile and later moves to the side with wider viewports. + */ + +.sidebar { + text-align: center; + padding: 2rem 1rem; + color: rgba(255,255,255,.5); + background-color: #202020; +} +@media (min-width: 48em) { + .sidebar { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 18rem; + } + + footer { + margin-left: 19rem !important; + margin-right: 1rem !important; + } +} + +/* Sidebar links */ +.sidebar a { + color: #fff; +} + +/* About section */ +.sidebar-about h1 { + color: #fff; + margin-top: 0; + font-size: 2.25rem; + font-weight: 400; +} + +/* Sidebar nav */ +.sidebar-nav { + padding-left: 0; + list-style: none; +} +.sidebar-nav-item { + display: block; +} +a.sidebar-nav-item:hover, +a.sidebar-nav-item:focus { + text-decoration: underline; +} +.sidebar-nav-item.active { + font-weight: bold; +} + +/* Container + * + * Align the contents of the site above the proper threshold with some margin-fu + * with a 25%-wide `.sidebar`. + */ + +.content { + padding-top: 1rem; + padding-bottom: 1rem; + min-height: 50%; +} + + +html, +body { + height: 100%; + width: 100%; +} + +footer { + font-size: .7rem; + text-align: center; + height: 40px; + padding: 1rem 0; + margin: 0 1rem; + border-top: 1px solid #e0e0e0; +} + + +@media (min-width: 48em) { + .content { + max-width: 40rem; + margin-left: 20rem; + margin-right: 2rem; + margin-bottom: -40px; + min-height: 100%; + } +} + +.img-circle { + border-radius: 50%; +} + +.img-headshot { + border: 6px solid #fff; + height: 180px; + width: 180px; +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; +} + +.sidebar { + background-color: #336699; + color: #fff; +} + +.sidebar a, +.sidebar-about h1 { + color: #fff; +} + +footer a, +.content a, +.related-posts li a:hover { + color: #336699; +} + +.read-more-link { + margin-top: 1rem; +} + +.read-more-link a { + padding: 8px 16px; + border: 1px solid; + border-color: #336699; + border-radius: 4px; +} + +.read-more-link a:hover { + text-decoration: none; + color: #fff; + background-color: #336699; +} + +.pull-right { + float: right; +} + +ul.posts { + list-style: none; + padding: 0 1rem; +} + +.social-icons, +.sidebar nav { + margin-top: 1rem; +} + +ul.posts li, +.sidebar nav li { + font-size: 1.2rem; + padding: 0.25rem 0; +} + +.social-icons a { + font-size: 1.5rem; + padding: 0.2rem; +} + +@media (min-width: 58rem) { + .social-icons a { + font-size: 1.2rem; + } + + ul.posts li, + .sidebar nav li { + font-size: inherit; + padding: 0; + } +} + +.social-icons a, +.social-icons a:hover, +.social-icons a:focus { + text-decoration: none !important; +} + +.pagination { + justify-content: center; + display: flex; + margin: 1em 0 2rem 0; + padding: 0; +} + +.pagination ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.pagination li { + display: block; + float: left; + margin-left: -1px; +} + +.pagination li a { + display: block; + margin-bottom: 0.25em; + padding: 0.5em 1em; + font-size: 14px; + font-weight: bold; + line-height: 1.5; + text-align: center; + text-decoration: none; + color: #336699; + border: 1px solid #336699; + border-radius: 0; +} + +.pagination li a:hover { + color: #fff; + background-color: #336699; + opacity: 0.75; +} + +.pagination li.active a { + color: #fff; + background-color: #336699; +} + +.pagination li.disabled a { + color: rgba(67, 118, 122, 0.5); + pointer-events: none; + cursor: not-allowed; +} + +.pagination li:first-child { + margin-left: 0; +} + +.pagination li:first-child a { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.pagination li:last-child a { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.share-buttons { + text-align: center; + font-size: 2rem; + margin-top: 2rem; +} + +.share-buttons a { + padding: 0 0.6rem; +} + +.share-buttons a:hover { + opacity: 0.75; +} + +ul.tags { + list-style: none; + padding: 0; + margin: 1rem 0; +} + +ul.tags li { + display: inline-block; + margin: 0.25rem 0; +} + +a.tag-link { + background-color: #f2f2f2; + padding: 5px 10px; + border-radius: 3px; + font-size: 0.75rem; + text-decoration: none; + color: #757575 !important; +} + +a.tag-link:hover { + text-decoration: none; +} + +figure { + padding: 0; + margin: 0; +} + +figure > img { + margin: 0 auto; +} + +figcaption { + text-align: center; + font-size: 80%; +} + +.tagline { + display: block; + font-size: 1.2rem; + margin-bottom: .5rem; + font-weight: 400; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flex { + display: flex; + justify-content: space-between; +} + +.nowrap { + white-space: nowrap; +} + +pre { + background-color: #efefef; + border-left: 3px solid #ccc; + padding: 5px; + +} diff --git a/static/css/hyde.css b/static/css/hyde.css index fa12345..cda97fe 100644 --- a/static/css/hyde.css +++ b/static/css/hyde.css @@ -1,373 +1 @@ -/* - * __ __ - * /\ \ /\ \ - * \ \ \___ __ __ \_\ \ __ - * \ \ _ `\/\ \/\ \ /'_` \ /'__`\ - * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ - * \ \_\ \_\/`____ \ \___,_\ \____\ - * \/_/\/_/`/___/> \/__,_ /\/____/ - * /\___/ - * \/__/ - * - * Designed, built, and released under MIT license by @mdo. Learn more at - * https://github.com/poole/hyde. - */ - - -/* - * Contents - * - * Global resets - * Sidebar - * Container - * Reverse layout - * Themes - */ - - -/* - * Global resets - * - * Update the foundational and global aspects of the page. - */ - -html { - font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif; -} -@media (min-width: 48em) { - html { - font-size: 16px; - } -} -@media (min-width: 58em) { - html { - font-size: 20px; - } -} - - -/* - * Sidebar - * - * Flexible banner for housing site name, intro, and "footer" content. Starts - * out above content in mobile and later moves to the side with wider viewports. - */ - -.sidebar { - text-align: center; - padding: 2rem 1rem; - color: rgba(255,255,255,.5); - background-color: #202020; -} -@media (min-width: 48em) { - .sidebar { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 18rem; - } - - footer { - margin-left: 19rem !important; - margin-right: 1rem !important; - } -} - -/* Sidebar links */ -.sidebar a { - color: #fff; -} - -/* About section */ -.sidebar-about h1 { - color: #fff; - margin-top: 0; - font-size: 2.25rem; - font-weight: 400; -} - -/* Sidebar nav */ -.sidebar-nav { - padding-left: 0; - list-style: none; -} -.sidebar-nav-item { - display: block; -} -a.sidebar-nav-item:hover, -a.sidebar-nav-item:focus { - text-decoration: underline; -} -.sidebar-nav-item.active { - font-weight: bold; -} - -/* Container - * - * Align the contents of the site above the proper threshold with some margin-fu - * with a 25%-wide `.sidebar`. - */ - -.content { - padding-top: 1rem; - padding-bottom: 1rem; - min-height: 50%; -} - - -html, -body { - height: 100%; - width: 100%; -} - -footer { - font-size: .7rem; - text-align: center; - height: 40px; - padding: 1rem 0; - margin: 0 1rem; - border-top: 1px solid #e0e0e0; -} - - -@media (min-width: 48em) { - .content { - max-width: 40rem; - margin-left: 20rem; - margin-right: 2rem; - margin-bottom: -40px; - min-height: 100%; - } -} - -.img-circle { - border-radius: 50%; -} - -.img-headshot { - border: 6px solid #fff; - height: 180px; - width: 180px; -} - -.center { - display: block; - margin-left: auto; - margin-right: auto; -} - -.sidebar { - background-color: #336699; - color: #fff; -} - -.sidebar a, -.sidebar-about h1 { - color: #fff; -} - -footer a, -.content a, -.related-posts li a:hover { - color: #336699; -} - -.read-more-link { - margin-top: 1rem; -} - -.read-more-link a { - padding: 8px 16px; - border: 1px solid; - border-color: #336699; - border-radius: 4px; -} - -.read-more-link a:hover { - text-decoration: none; - color: #fff; - background-color: #336699; -} - -.pull-right { - float: right; -} - -ul.posts { - list-style: none; - padding: 0 1rem; -} - -.social-icons, -.sidebar nav { - margin-top: 1rem; -} - -ul.posts li, -.sidebar nav li { - font-size: 1.2rem; - padding: 0.25rem 0; -} - -.social-icons a { - font-size: 1.5rem; - padding: 0.2rem; -} - -@media (min-width: 58rem) { - .social-icons a { - font-size: 1.2rem; - } - - ul.posts li, - .sidebar nav li { - font-size: inherit; - padding: 0; - } -} - -.social-icons a, -.social-icons a:hover, -.social-icons a:focus { - text-decoration: none !important; -} - -.pagination { - justify-content: center; - display: flex; - margin: 1em 0 2rem 0; - padding: 0; -} - -.pagination ul { - margin: 0; - padding: 0; - list-style-type: none; -} - -.pagination li { - display: block; - float: left; - margin-left: -1px; -} - -.pagination li a { - display: block; - margin-bottom: 0.25em; - padding: 0.5em 1em; - font-size: 14px; - font-weight: bold; - line-height: 1.5; - text-align: center; - text-decoration: none; - color: #336699; - border: 1px solid #336699; - border-radius: 0; -} - -.pagination li a:hover { - color: #fff; - background-color: #336699; - opacity: 0.75; -} - -.pagination li.active a { - color: #fff; - background-color: #336699; -} - -.pagination li.disabled a { - color: rgba(67, 118, 122, 0.5); - pointer-events: none; - cursor: not-allowed; -} - -.pagination li:first-child { - margin-left: 0; -} - -.pagination li:first-child a { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.pagination li:last-child a { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.share-buttons { - text-align: center; - font-size: 2rem; - margin-top: 2rem; -} - -.share-buttons a { - padding: 0 0.6rem; -} - -.share-buttons a:hover { - opacity: 0.75; -} - -ul.tags { - list-style: none; - padding: 0; - margin: 1rem 0; -} - -ul.tags li { - display: inline-block; - margin: 0.25rem 0; -} - -a.tag-link { - background-color: #f2f2f2; - padding: 5px 10px; - border-radius: 3px; - font-size: 0.75rem; - text-decoration: none; - color: #757575 !important; -} - -a.tag-link:hover { - text-decoration: none; -} - -figure { - padding: 0; - margin: 0; -} - -figure > img { - margin: 0 auto; -} - -figcaption { - text-align: center; - font-size: 80%; -} - -.tagline { - display: block; - font-size: 1.2rem; - margin-bottom: .5rem; - font-weight: 400; -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flex { - display: flex; - justify-content: space-between; -} - -.nowrap { - white-space: nowrap; -} +@import "hyde-dark.css"; \ No newline at end of file diff --git a/static/css/pagefind-dark.css b/static/css/pagefind-dark.css new file mode 100644 index 0000000..a95aa0b --- /dev/null +++ b/static/css/pagefind-dark.css @@ -0,0 +1,12 @@ +@media (prefers-color-scheme: dark) { +:root { + --pagefind-ui-primary: #aaa; + --pagefind-ui-text: #aaa; + --pagefind-ui-background: #393939; + --pagefind-ui-border: #393939; + --pagefind-ui-tag: #393939; +} +.pagefind-ui mark { + background-color: #336699; +} +} \ No newline at end of file diff --git a/static/js/colour-toggle.js b/static/js/colour-toggle.js new file mode 100644 index 0000000..1e8bec8 --- /dev/null +++ b/static/js/colour-toggle.js @@ -0,0 +1,98 @@ +// With thanks to Mendhak on +// https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting +// Return the system level color scheme, but if something's in local storage, return that +// Unless the system scheme matches the the stored scheme, in which case... remove from local storage +function getPreferredColorScheme(){ + let systemScheme = 'light'; + if(window.matchMedia('(prefers-color-scheme: dark)').matches){ + systemScheme = 'dark'; + } + let chosenScheme = systemScheme; + + if(localStorage.getItem("scheme")){ + chosenScheme = localStorage.getItem("scheme"); + } + + if(systemScheme === chosenScheme){ + localStorage.removeItem("scheme"); + } + + return chosenScheme; +} + +// Write chosen color scheme to local storage +// Unless the system scheme matches the the stored scheme, in which case... remove from local storage +function savePreferredColorScheme(scheme){ + let systemScheme = 'light'; + + if(window.matchMedia('(prefers-color-scheme: dark)').matches){ + systemScheme = 'dark'; + } + + if(systemScheme === scheme){ + localStorage.removeItem("scheme"); + } + else { + localStorage.setItem("scheme", scheme); + } + +} + +// Get the current scheme, and apply the opposite +function toggleColorScheme(){ + let newScheme = "light"; + let scheme = getPreferredColorScheme(); + if (scheme === "light"){ + newScheme = "dark"; + } + + applyPreferredColorScheme(newScheme); + savePreferredColorScheme(newScheme); + + +} + +// Apply the chosen color scheme by traversing stylesheet rules, and applying a medium. +function applyPreferredColorScheme(scheme) { + for (var s = 0; s < document.styleSheets.length; s++) { + + for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) { + rule = document.styleSheets[s].cssRules[i]; + + + if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) { + + switch (scheme) { + case "light": + rule.media.appendMedium("original-prefers-color-scheme"); + if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)"); + if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)"); + break; + case "dark": + rule.media.appendMedium("(prefers-color-scheme: light)"); + rule.media.appendMedium("(prefers-color-scheme: dark)"); + if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme"); + break; + default: + rule.media.appendMedium("(prefers-color-scheme: dark)"); + if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)"); + if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme"); + break; + } + } + } + + + } + + // Change the toggle button to be the opposite of the current scheme + if (scheme === "dark") { + document.getElementById("toggle-light").style.display = 'inline'; + document.getElementById("toggle-dark").style.display = 'none'; + } else { + document.getElementById("toggle-dark").style.display = 'inline'; + document.getElementById("toggle-light").style.display = 'none'; + } +} + +applyPreferredColorScheme(getPreferredColorScheme()); \ No newline at end of file