diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss index 6660277..d78a823 100644 --- a/assets/scss/colors.scss +++ b/assets/scss/colors.scss @@ -1,25 +1,20 @@ -$light-bg: #ffffff; -$light-bg-alt: #413c74; -$light-fg: #413c74; -$light-ln: #9b5bb4 ; -$light-accent1: #9b5bb4; -$light-accent2: #5183b9 ; -$light-accent3: #413c74; +$light-bg: #dde4ff ; +$light-bg-alt: #733c7c ; +$light-fg: #4b3d44; +$light-ln: #733c7c ; +$light-accent1: #007582 ; +$light-accent2: #225091 ; +$light-accent3: #27234c ; -$dark-bg: #413c74; -$dark-bg-alt: #ff8ad0; -$dark-fg: #ff8ad0; -$dark-ln: #ffdc6d; -$dark-accent1: #ffdc6d; -$dark-accent2: #61d478; -$dark-accent3: #ffffff; +$dark-bg: #27234c ; +$dark-bg-alt: #f2504b ; +$dark-fg: #e88dc3 ; +$dark-ln: #f2504b ; +$dark-accent1: #b296ff; +$dark-accent2: #39b8a3 ; +$dark-accent3: #dde4ff ; -$transition-time: 2s; -$trans-short: 0.2s; - -* { - transition: $transition-time; -} +$transition-time: 1s; body { &.light { @@ -33,11 +28,11 @@ body { a { &.light { - background-color: transparent; - color: $light-ln; + background-color: $light-ln; + color: $light-bg; } - background-color: transparent; - color: $dark-ln; + background-color: $dark-ln; + color: $dark-bg; transition: $transition-time; } @@ -51,7 +46,7 @@ a.footer-nav-item:hover { color: $dark-bg-alt; background-color: $dark-bg; border-color: $dark-bg; - transition: $trans-short; + transition: 0.24s; } footer { @@ -118,132 +113,66 @@ article { transition: $transition-time; } -h2 { +article h2 { background-color: $dark-accent1; color: $dark-bg; transition: $transition-time; - &.light { - color: $light-bg; - } } - -h2 a { - color: $dark-bg; - &.light{ - color: $light-bg; - } -} - -h3 { +article h3 { background-color: $dark-accent2; color: $dark-bg; transition: $transition-time; } -h3 a { - color: $dark-bg; - &:hover { - background-color: transparent; - } -} - -h3.light { +article.light h3 { background-color: $light-accent2; color: $light-bg; transition: $transition-time; - &a { - color: $light-bg; - } } - -h5, -h6, -h4 { +article h4 { background-color: $dark-accent3; color: $dark-bg; transition: $transition-time; - & a { - color: $dark-bg; - background-color: transparent; - } } -h4.light, -h5.light, -h6.light { +article.light h4 { background-color: $light-accent3; color: $light-bg; transition: $transition-time; } -h2.light { +article.light h2 { background-color: $light-accent1; color: $light-bg; transition: $transition-time; } -article.light a { - background-color: transparent; - color: $light-ln; +article h5, +article h6, +article a { + background-color: $dark-ln; + color: $dark-bg; + transition: $transition-time; +} + +article.light h5, +article.light h6, +article.light a { + background-color: $light-ln; + color: $light-bg; transition: $transition-time; - &.hash-link { - color: $light-bg; - } - &.hash-link:hover { - background-color: transparent; - color: $light-bg; - } } a:hover { - color: $dark-bg; - background-color: $dark-ln; - transition: $trans-short; + &.light { + color: $light-ln; + background-color: transparent; + } + color: $dark-ln; + background-color: transparent; } -.previous.light:hover, -.next.light:hover, -.postdescription a.light:hover, article.light a:hover { - color: $light-bg; - background-color: $light-ln; - transition: $trans-short; -} - -.light.hash-link:hover, -.hash-link:hover { + color: $light-ln; background-color: transparent; - transition: $transition-time; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - &a.light { - background-color: transparent; - color: $light-bg; - &:hover { - background-color: transparent; - } - } -} - -header.light { - background-color: $light-bg; - transition: $transition-time; -} - -header { - transition: $transition-time; -} - -.posttitle a { - background-color: transparent; - color: $dark-bg; - &:hover { - background-color: transparent; - } } diff --git a/assets/scss/font.scss b/assets/scss/font.scss index 2a2c0ce..e698513 100644 --- a/assets/scss/font.scss +++ b/assets/scss/font.scss @@ -19,20 +19,20 @@ $small: 12pt; font-size: $small; } -h1{ +h1 { font-size: $huge; } -h2 a{ +h2 { font-size: $huge; font-style:bold; } -h3 a, h4 a { +h3, h4 { font-size: $large; } -h5 a, h6 a { +h5 h6 { font-size: $big; } @@ -53,7 +53,3 @@ label::after { h6 { font-style: italic; } - -::before{ - font-family: CaskaydiaCoveMono; -} diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index 237bfbe..09b066d 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -24,19 +24,11 @@ footer { #content p, #content ul, #content ol, -#content table, -.postdescription, -hr -{ +#content table { margin-right: 24%; margin-left: 24%; } -#content ol ol, -#content ul ul{ - margin-left: 0.12em; -} - #footer-left { margin-top: auto; margin-bottom: auto; @@ -94,9 +86,9 @@ h4, h5, h6 { padding-right: 6%; - margin-right: 6%; padding-top: 12pt; padding-bottom: 12pt; + margin-right: 6%; justify-content: right; display: flex; align-items: center; @@ -115,8 +107,7 @@ article { margin-inline: auto; } -.titlecontainer, -header{ +.titlecontainer { width: 100%; padding-top: 42pt; } diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 3d82cf1..039f738 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -3,93 +3,79 @@ $toggle-width: 42pt; $toggle-height: 24pt; * { - border-width: 2pt; - transition: ease-in-out; + border-width: 2pt; + } + +input[type="checkbox"]{ + cursor: pointer; +} +.toggleinput{ + opacity: 0; + max-height: 0; + overflow: hidden; } -input[type="checkbox"] { - cursor: pointer; -} -.toggleinput { - opacity: 0; - max-height: 0; - max-width: 0; - overflow: hidden; +.togglelabel{ + width: $toggle-width; + height: 24pt; + border-radius: $radius; + cursor: pointer; + align-items: center; + display: flex; } -.togglelabel { - width: $toggle-width; - height: 24pt; - border-radius: $radius; - cursor: pointer; - align-items: center; - display: flex; +.togglelabel::after{ + left: calc(100% - 67pt); + content: ""; + position: absolute; + height: 20pt; + width: 20pt; + border-width: 1pt; + border-radius: 100pt; + transition: 0.3s; + display: inline-block; + vertical-align: middle; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + content: "滛"; + border-style: solid; + } -.togglelabel::after { - left: calc(100% - 67pt); - content: ""; - position: absolute; - height: 20pt; - width: 20pt; - border-width: 1pt; - border-radius: 100pt; - transition: 1s; - display: inline-block; - vertical-align: middle; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - content: ""; - border-style: solid; +input:checked + label:after{ + left: calc(100% - 49pt); } -input:checked + label:after { - left: calc(100% - 49pt); + +input:checked + label::after{ + content: ""; } -input:checked + label::after { - content: "滛"; +.footer-nav-item{ + border-radius: 100%; + height: 1em; + width: 1em; + justify-content: center; + align-items: center; + border-style: solid; } -.footer-nav-item { - border-radius: 100%; - height: 1em; - width: 1em; - justify-content: center; - align-items: center; - border-style: solid; +.togglelabel{ + border: solid; } -.togglelabel { - border: solid; +h1, h2, h3, h4, h5, h6 { + border-top-right-radius: $radius; + border-bottom-right-radius: $radius; } -h1, -h2, -h3, -h4, -h5, -h6 { - border-top-right-radius: $radius; - border-bottom-right-radius: $radius; - & .hash-link { - &:hover { - cursor: pointer; - &::before { - content: ""; - } - } - } -} - -.postdescription, #content p, #content ul, #content ol, #content table { - border-left-style: solid; - border-width: 0.24em; - padding-left: 2em; + border-left-style: solid; + border-width: 0.24em; + padding-left: 2em; } diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html deleted file mode 100644 index ee60227..0000000 --- a/layouts/_default/_markup/render-heading.html +++ /dev/null @@ -1,5 +0,0 @@ - - -  {{ .Text | safeHTML }} - - diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8423607..e1a2c94 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,10 +1,11 @@ - {{- partial "head.html" . -}} - - {{- partial "header.html" . -}} -
{{- block "main" . }}{{- end }}
- {{- partial "footer.html" . -}} - - + {{- partial "head.html" . -}} + + {{- partial "header.html" . -}} +
+ {{- block "main" . }}{{- end }} +
+ {{- partial "footer.html" . -}} + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 56a37f8..52d0d9e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,21 +1,19 @@ {{ define "main" }}
-
-

{{.Title}}

+
+

List - {{.Title}}

{{.Content}}
-
+
+
{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 39e4d70..84eaccb 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,6 +3,14 @@

{{ .Title }}

+
+ {{ with .PrevInSection }} + + {{ end }} + {{ with .NextInSection }} + + {{ end }} +
{{ .Content }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 262d088..0e67fe3 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -13,3 +13,4 @@ + diff --git a/static/js/darkmode.js b/static/js/darkmode.js new file mode 100644 index 0000000..466a466 --- /dev/null +++ b/static/js/darkmode.js @@ -0,0 +1,32 @@ +const checkbox = document.getElementById("darkmode-toggle"); +const colorswitchers = document.getElementsByClassName("colorswitch"); + +if (localStorage.getItem("dark")) { + switchToDark(); +} else { + switchToLight(); +} +checkbox.checked = localStorage.getItem("dark"); + +checkbox.addEventListener("change", function () { + localStorage.setItem("dark", this.checked); + if (this.checked) { + switchToDark(); + } else { + localStorage.removeItem("dark"); + switchToLight(); + } +}); + +function switchToLight() { + for (let item of colorswitchers) { + item.classList.add("light"); + } +} + +function switchToDark() { + for (let item of colorswitchers) { + console.log(item); + item.classList.remove("light"); + } +} diff --git a/static/js/headings.js b/static/js/headings.js deleted file mode 100644 index 65ce913..0000000 --- a/static/js/headings.js +++ /dev/null @@ -1,13 +0,0 @@ -(function addHeadingLinks() { - var article = document.getElementById("content"); - var headings = article.querySelectorAll("h1, h2, h3, h4, h5, h6"); - headings.forEach(function (heading) { - if (heading.id) { - var a = document.createElement("a"); - a.innerHTML = heading.innerHTML; - a.href = "#" + heading.id; - heading.innerHTML = ""; - heading.appendChild(a); - } - }); -})(); diff --git a/static/js/main.js b/static/js/main.js deleted file mode 100644 index 2c1d53f..0000000 --- a/static/js/main.js +++ /dev/null @@ -1,36 +0,0 @@ -const checkbox = document.getElementById("darkmode-toggle"); -const colorswitchers = document.getElementsByClassName("colorswitch"); - -function switchToLight() { - for (let item of colorswitchers) { - item.classList.add("light"); - } -} - -function switchToDark() { - for (let item of colorswitchers) { - console.log(item); - item.classList.remove("light"); - } -} - -document.addEventListener("DOMContentLoaded", () => { - if (localStorage.getItem("light")) { - switchToLight(); - } else { - switchToDark(); - } - checkbox.checked = localStorage.getItem("dark"); - checkbox.addEventListener("change", function () { - localStorage.setItem("light", this.checked); - if (this.checked) { - switchToLight(); - } else { - localStorage.removeItem("light"); - switchToDark(); - } - }); - if (localStorage.getItem("light")) { - checkbox.checked = true; - } -});