diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss index 036d366..e7d461b 100644 --- a/assets/scss/colors.scss +++ b/assets/scss/colors.scss @@ -1,20 +1,21 @@ -$light-bg: #dde4ff ; -$light-bg-alt: #733c7c ; +$light-bg: #dde4ff; +$light-bg-alt: #733c7c; $light-fg: #4b3d44; -$light-ln: #733c7c ; -$light-accent1: #007582 ; -$light-accent2: #225091 ; -$light-accent3: #27234c ; +$light-ln: #733c7c; +$light-accent1: #007582; +$light-accent2: #225091; +$light-accent3: #27234c; -$dark-bg: #27234c ; -$dark-bg-alt: #f2504b ; -$dark-fg: #e88dc3 ; -$dark-ln: #f2504b ; +$dark-bg: #27234c; +$dark-bg-alt: #f2504b; +$dark-fg: #e88dc3; +$dark-ln: #f2504b; $dark-accent1: #b296ff; -$dark-accent2: #39b8a3 ; -$dark-accent3: #dde4ff ; +$dark-accent2: #39b8a3; +$dark-accent3: #dde4ff; -$transition-time: 1s; +$transition-time: 2s; +$trans-short: 0.2s; body { &.light { @@ -46,7 +47,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,62 +114,117 @@ article { transition: $transition-time; } -article h2 { +h2, +h2 a { background-color: $dark-accent1; color: $dark-bg; transition: $transition-time; + & a{ + background-color: transparent; + } } -article h3 { +h3, +h3 a { background-color: $dark-accent2; color: $dark-bg; transition: $transition-time; + & a{ + background-color: transparent; + } } -article.light h3 { +h3.light { background-color: $light-accent2; color: $light-bg; transition: $transition-time; + &a { + color: $light-bg; + } } -article h5, -article h6, -article h4 { +h5, +h6, +h4 { background-color: $dark-accent3; color: $dark-bg; transition: $transition-time; + & a { + color: $dark-bg; + background-color: transparent; + } } -article.light h5, -article.light h6, -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.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-bg; - background-color: $light-ln; - } 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{ + 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 ae68cd6..617e828 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -24,7 +24,8 @@ footer { #content p, #content ul, #content ol, -#content table +#content table, +.postdescription { margin-right: 24%; margin-left: 24%; @@ -94,12 +95,18 @@ h6 { padding-right: 6%; padding-top: 12pt; padding-bottom: 12pt; - margin-right: 6%; justify-content: right; display: flex; align-items: center; } +h1 {margin-right: 6%;} +h2 {margin-right: 12%;} +h3 {margin-right: 18%;} +h4 {margin-right: 24%;} +h5 {margin-right: 32%;} +h6 {margin-right: 38%;} + h2, h3, h4, @@ -113,7 +120,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 37d4b5e..5ffc808 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -3,80 +3,92 @@ $toggle-width: 42pt; $toggle-height: 24pt; * { - border-width: 2pt; - } - - -input[type="checkbox"]{ - cursor: pointer; -} -.toggleinput{ - opacity: 10; - max-height: 10; - overflow: hidden; + border-width: 2pt; } -.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 299c699..56a37f8 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,7 +1,7 @@ {{ define "main" }}
-
+

{{.Title}}

@@ -10,9 +10,12 @@
{{ end }} 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/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/darkmode.js b/static/js/main.js similarity index 100% rename from static/js/darkmode.js rename to static/js/main.js