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

List - {{.Title}}

+
+

{{.Title}}

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

{{ .Title }}

-
- {{ with .PrevInSection }} - - {{ end }} - {{ with .NextInSection }} - - {{ end }} -
{{ .Content }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0e67fe3..262d088 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -13,4 +13,3 @@ - diff --git a/static/js/darkmode.js b/static/js/darkmode.js deleted file mode 100644 index 466a466..0000000 --- a/static/js/darkmode.js +++ /dev/null @@ -1,32 +0,0 @@ -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 new file mode 100644 index 0000000..65ce913 --- /dev/null +++ b/static/js/headings.js @@ -0,0 +1,13 @@ +(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 new file mode 100644 index 0000000..2c1d53f --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,36 @@ +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; + } +});