diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss index 6b6bef4..1406aaa 100644 --- a/assets/scss/colors.scss +++ b/assets/scss/colors.scss @@ -14,9 +14,13 @@ $dark-accent1: #ffdc6d; $dark-accent2: #61d478; $dark-accent3: #ffffff; -$transition-time: 1s; +$transition-time: 2s; $trans-short: 0.2s; +* { + transition: $transition-time; +} + body { &.light { background-color: $light-bg; @@ -24,6 +28,7 @@ body { } background-color: $dark-bg; color: $dark-fg; + transition: $transition-time; } a { @@ -33,6 +38,7 @@ a { } background-color: transparent; color: $dark-ln; + transition: $transition-time; } a.footer-nav-item.active, @@ -45,6 +51,7 @@ a.footer-nav-item:hover { color: $dark-bg-alt; background-color: $dark-bg; border-color: $dark-bg; + transition: $trans-short; } footer { @@ -54,6 +61,7 @@ footer { } background-color: $dark-bg-alt; color: $dark-bg; + transition: $transition-time; } footer a { @@ -63,6 +71,7 @@ footer a { } color: $dark-bg; background-color: $dark-bg-alt; + transition: $transition-time; } .togglelabel { @@ -72,28 +81,33 @@ footer a { } background-color: $dark-bg-alt; border-color: $dark-bg; + transition: $transition-time; } .togglelabel.light::after { background-color: $light-bg; border-color: $light-bg; color: $light-bg-alt; + transition: $transition-time; } .togglelabel::after { background-color: $dark-bg; border-color: $dark-bg; color: $dark-bg-alt; + transition: $transition-time; } body.light #title { color: $light-bg; background-color: $light-bg-alt; + transition: $transition-time; } body #title { color: $dark-bg; background-color: $dark-bg-alt; + transition: $transition-time; } article { @@ -103,11 +117,13 @@ article { } background-color: $dark-bg; border-color: $dark-bg-alt; + transition: $transition-time; } h2 { background-color: $dark-accent1; color: $dark-bg; + transition: $transition-time; &.light { color: $light-bg; } @@ -123,6 +139,7 @@ h2 a { h3 { background-color: $dark-accent2; color: $dark-bg; + transition: $transition-time; } h3 a { @@ -135,6 +152,7 @@ h3 a { h3.light { background-color: $light-accent2; color: $light-bg; + transition: $transition-time; &a { color: $light-bg; } @@ -145,8 +163,10 @@ h6, h4 { background-color: $dark-accent3; color: $dark-bg; + transition: $transition-time; & a { color: $dark-bg; + background-color: transparent; } } @@ -155,16 +175,19 @@ h5.light, h6.light { background-color: $light-accent3; color: $light-bg; + transition: $transition-time; } h2.light { background-color: $light-accent1; color: $light-bg; + transition: $transition-time; } article.light a { background-color: transparent; color: $light-ln; + transition: $transition-time; &.hash-link { color: $light-bg; } @@ -177,6 +200,7 @@ article.light a { a:hover { color: $dark-bg; background-color: $dark-ln; + transition: $trans-short; border-color: $dark-ln; } @@ -186,12 +210,14 @@ a:hover { article.light a:hover { color: $light-bg; background-color: $light-ln; + transition: $trans-short; border-color: $light-ln; } .light.hash-link:hover, .hash-link:hover { background-color: transparent; + transition: $transition-time; } h1, @@ -209,21 +235,13 @@ h6 { } } -h1 { - & #rss-title { - background-color: transparent; - color: $dark-bg; - &:hover { - background-color: transparent; - } - &.light { - color: $light-bg; - } - } -} - header.light { background-color: $light-bg; + transition: $transition-time; +} + +header { + transition: $transition-time; } .posttitle a { @@ -239,6 +257,7 @@ button { background-color: $dark-bg-alt; border-color: $dark-bg; &:hover { + transition: $trans-short; background-color: $dark-bg; color: $dark-bg-alt; } @@ -247,6 +266,7 @@ button { background-color: $light-bg-alt; border-color: $light-bg; &:hover { + transition: $trans-short; background-color: $light-bg; color: $light-bg-alt; } @@ -257,32 +277,6 @@ button { &.light { color: $light-bg; } - &:hover { - background-color: transparent; - } + &:hover {background-color: transparent;} background-color: transparent; } - -#hamburger-bg { - background-color: $dark-bg; - & .hamburger-nav-item { - background-color: transparent; - color: $dark-ln; - border-color: $dark-ln; - &:hover { - background-color: $dark-ln; - color: $dark-bg; - } - } - &.light { - background-color: $light-bg; - & .hamburger-nav-item { - color: $light-ln; - border-color: $light-ln; - &:hover { - background-color: $light-ln; - color: $light-bg; - } - } - } -} diff --git a/assets/scss/font.scss b/assets/scss/font.scss index d731cba..fcf43fa 100644 --- a/assets/scss/font.scss +++ b/assets/scss/font.scss @@ -30,7 +30,6 @@ h1{ font-size: $huge; } -h1 a, h2 a{ font-size: $huge; font-style:bold; diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index ac403a4..15422b5 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -136,6 +136,7 @@ header{ #hamburger-bg{ position: fixed; + background-color: red; width: 100%; height: calc(100% - 42pt); left: 0pt; @@ -143,19 +144,12 @@ header{ right: 0; transition: 0s; display: grid; + align-items: center; justify-content: center; - overflow: scroll; & * { display: grid; - margin-top: 2pt; - margin-bottom: 2pt; + margin-top: 14pt; + margin-bottom: 14pt; text-align: center; } - &.hidden{ - display: none; - } -} - -#darkmode-button-small { - margin-right: 8pt; } diff --git a/assets/scss/responsive.css b/assets/scss/responsive.css index 8160813..08e4b87 100644 --- a/assets/scss/responsive.css +++ b/assets/scss/responsive.css @@ -1,6 +1,4 @@ -#hamburger-button, -#hamburger-bg, -#darkmode-button-small{ +#hamburger-button { display: none; } @@ -11,18 +9,8 @@ { display: none; } - #hamburger-button, - #darkmode-button-small, - #hamburger-bg, - #hamburger-bg #darkmode-toggle-label, - #hamburger-bg #darkmode-toggle{ + #hamburger-button { display: flex; } - #hamburger-bg #darkmode-toggle, - #hamburger-bg #darkmode-toggle-label{ - position: absolute; - bottom: 1em; - right: 1em; - } } diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 664d339..02a4bf0 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -101,10 +101,3 @@ ul a{ border-style: solid; padding: 0.12em; } - -#hamburger-bg { - & .hamburger-nav-item { - border-style: solid; - padding: 0.12em; - } -} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 46c08a9..dae6de4 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,8 +1,8 @@ {{ define "main" }}
-
-
-

{{.Title}} 

+
+
+

{{.Title}}

{{.Content}} diff --git a/layouts/index.html b/layouts/index.html index f15ee10..7bfd51d 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,6 @@ {{ define "main" }}
-

{{.Title}} 

+

{{ .Site.Title }}

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 21de32e..33673c5 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -11,15 +11,15 @@ - - -