diff --git a/README.md b/README.md index b343e42..aee8260 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,11 @@ summaryLength = 70 # number of words for article summaries strokeColor = "#4f4f4f" accentColor = "#db5793" + # alternative sidebar layout + enableSidebarLayout = false + sidebarBackgroundColor = "#34363b" + sidebarForegroundColor = "white" + # redirect to baseURL if current URL host doesn't match # useful if deploying in gitlab pages with custom domain and don't want # the username.gitlab.io/website url to persist diff --git a/assets/scss/style.scss b/assets/scss/style.scss index fbefabf..e191aa9 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -21,12 +21,6 @@ $mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }}; color: $fg_color; } -a { - transition-property: color, border-color; - transition-duration: .15s; - transition-timing-function: ease-in-out; -} - body, html { font-family: "Symbols Nerd Font", $main_font, monospace; font-size: $base_font_size * $main_font_mult; @@ -209,7 +203,6 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;} } .nerdlink { - transition: all .15s ease-in-out; @extend .nerd; color: $fg_color; border-bottom: none; @@ -220,7 +213,6 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;} align-items: center; justify-content: center; .pseudofont { - transition: all .15s ease-in-out; fill: $fg_color; display: inline; position: relative; @@ -380,6 +372,7 @@ ul.list { #searchbar { @extend a; width: 100%; + min-width: 150px; display: inline-block; background-color: transparent; border-top: none; @@ -504,12 +497,15 @@ header { @include limitWidth; padding: 15px; margin-bottom: $content_spacing; - .titleAndHamburger { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: flex-start; - justify-content: space-between; + .rightOfLogo { + width: 100%; + .titleAndHamburger { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: flex-start; + justify-content: space-between; + } } nav { font-size: .9em; @@ -548,7 +544,10 @@ a.discreteTag { } input { - {{ if or (site.Params.discreteCards | default false) (eq (site.Params.navtype | default "standard") "circles") }} + {{ if or + (site.Params.discreteCards | default false) + (eq (site.Params.navtype | default "standard") "circles") + }} @include buttonLikeLink; &:hover, &:focus, &:active { background-color: $highlight_bg_color; @@ -559,7 +558,6 @@ input { padding: 12px; color: $fg_color; border: 2px solid transparent; - transition: .15s border ease-in-out; &:focus, &:active { border: 2px solid $accent_color; outline: none; @@ -674,7 +672,10 @@ header { } {{ end }} -{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} +{{ if and + (.Site.Params.enableJumbotron | default false) + .Site.Data.jumbotron +}} {{ $jumbo_fullscreen := (or (.Site.Data.jumbotron.fullscreen | default false) @@ -727,7 +728,10 @@ header.jumbotronContainer { padding-bottom: 0; padding-top: 0; .jumbotron { display: flex; } - {{ if and .Site.Data.jumbotron.background (not .Site.Data.jumbotron.backgroundVideo) }} + {{ if and + .Site.Data.jumbotron.background + (not .Site.Data.jumbotron.backgroundVideo) + }} background: linear-gradient( transparentize($bg_color, 0.2), @@ -827,7 +831,9 @@ header.jumbotronContainer { justify-content: center; align-items: center; align-content: center; - {{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }} + {{ $jumbotronImagePosition := ( + .Site.Data.jumbotron.imagePosition | default "left" + ) }} {{ if (eq $jumbotronImagePosition "left") }} flex-direction: row; {{ else if (eq $jumbotronImagePosition "right") }} @@ -903,3 +909,97 @@ header.jumbotronContainer { } } {{ end }} + +{{ if .Site.Params.enableSidebarLayout | default false }} + $sidebar_width: 350px; + $sidebar_bg_color: {{ + .Site.Params.sidebarBackgroundColor | default "$highlight_bg_color" + }}; + $sidebar_fg_color: {{ + .Site.Params.sidebarForegroundColor | default "$fg_color" + }}; + + header { + #sidebar_nav { + display: none; + } + #wide_nav { + display: block; + } + } + + @media only screen and (min-width: 950px) { + html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} { + overflow-y: hidden; + #baseContainer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + max-height: 100vh; + header { + margin-left: unset; margin-right: unset; + background-color: $sidebar_bg_color; + max-width: $sidebar_width; + min-width: $sidebar_width; + height: 100vh; + display: block; + overflow: auto; + margin-bottom: 0; + padding: 0 15px; + > *:last-child, > *:first-child { + padding-bottom: 15px; + padding-top: 15px; + } + .rightOfLogo { + align-self: center; + } + #sidebar_nav { + display: block; + margin: 12px 0; + width: 100%; + nav { + font-size: 1.1em; + ul#main-nav { + flex-direction: column; + li { + border-right: none; + a { + padding: 6px; + display: block; + } + } + } + } + } + #wide_nav { + display: none; + } + } + #contentContainer { + flex-grow: 1; + overflow-y: auto; + } + } + } + } + +{{ end }} + + +// transitions at the end so that loading css doens't cause animations + +a { + transition-property: color, border-color; + transition-duration: .15s; + transition-timing-function: ease-in-out; +} + +.nerdlink { + &, .pseudofond { + transition: all .15s ease-in-out; + } +} + +input { + transition: .15s border ease-in-out; +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8474b10..54da3cf 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,13 +1,17 @@ - + {{- partial "head.html" . -}} - {{- partial "header.html" . -}} -
-
- {{- block "main" . }}{{- end }} -
- {{- partial "footer.html" . -}} +
+ {{- partial "header.html" . -}} +
+
+
+ {{- block "main" . }}{{- end }} +
+ {{- partial "footer.html" . -}} +
+
{{- partial "plausible.html" . -}} {{- partial "inject/body.html" . -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a4024c3..562f503 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -3,45 +3,18 @@
-
+
{{ if and (.Site.Params.searchbarEverywhere | default true) (and (.Site.Params.enableSearch | default true) (not (eq .Title "Search"))) }} @@ -59,6 +32,17 @@ {{- partial "iconlink" . -}} {{ end }}
+ {{ if and + (.Site.Params.enableSidebarLayout | default false) + (or + (not (.Site.Params.enableJumbotron | default false)) + (not .IsHome) + ) + }} + + {{ end }} {{- partial "inject/header-after.html" . -}} {{- partial "jumbotron.html" . -}} diff --git a/layouts/partials/header_navigation.html b/layouts/partials/header_navigation.html new file mode 100644 index 0000000..7a52d73 --- /dev/null +++ b/layouts/partials/header_navigation.html @@ -0,0 +1,30 @@ +