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

{{ .Site.Title }}

+

{{.Title}} 

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

-