diff --git a/README.md b/README.md index f9188be4..c0a498e3 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,5 @@ Brainbaking.com hugo site. -### TODO - -- Set Cache-Control on woff2 https://web.dev/uses-long-cache-ttl/ -- Check gzip compression of js/css files ### Screenshot png - jpg conversion diff --git a/config.toml b/config.toml index d31d8691..42087056 100644 --- a/config.toml +++ b/config.toml @@ -20,7 +20,7 @@ enableGitInfo = true description = "Freshly baked thought" # see single.html, DisqusShortname also needed disableComments = true - accent = "#008862" + accent = "#018661" accent2 = "#008fb3" showBorder = true copyright = "No © and no tracking - sharing is caring. Brain Baking. RSS Feed." diff --git a/themes/brainbaking-minimal/assets/sass/_blockquote.sass b/themes/brainbaking-minimal/assets/sass/_blockquote.sass index eaa72832..12e0e4d2 100644 --- a/themes/brainbaking-minimal/assets/sass/_blockquote.sass +++ b/themes/brainbaking-minimal/assets/sass/_blockquote.sass @@ -23,7 +23,7 @@ blockquote -webkit-mask-size: cover content: '' display: inline-block - background-color: var(--accent) + background-color: $accent position: absolute width: 40px height: 40px diff --git a/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass b/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass index 0bd2b92e..8b198629 100644 --- a/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass +++ b/themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass @@ -47,7 +47,7 @@ code font-family: Menlo,Monaco,Consolas,"Courier New",monospace padding: 2px 4px font-size: 90% - color: var(--accent2) + color: $accent2 background-color: #f9f2f4 border-radius: 4px @@ -119,7 +119,7 @@ pre code display: inline-block !important .navbar.navbar-default - border-top: 5px solid var(--accent) + border-top: 5px solid $accent border-bottom: 1px solid #e7e7e7 .navbar-right @@ -199,7 +199,7 @@ nav font-weight: bold body > footer - border-bottom: 5px solid var(--accent) + border-bottom: 5px solid $accent background-color: rgba(243, 243, 243, 0.8) .navbar-default .navbar-toggle diff --git a/themes/brainbaking-minimal/assets/sass/_brainbaking.sass b/themes/brainbaking-minimal/assets/sass/_brainbaking.sass index 5a0c43dd..b48976d1 100644 --- a/themes/brainbaking-minimal/assets/sass/_brainbaking.sass +++ b/themes/brainbaking-minimal/assets/sass/_brainbaking.sass @@ -25,56 +25,6 @@ body nav, footer font-size: 0.85rem -nav - svg - width: 24px - height: 24px - float: left - -%icon-in-text - position: relative - top: 5px - width: 24px !important - height: 24px !important - -main - p - .icon - @extend %icon-in-text - - &.single article > p:first-of-type::first-letter - font-size: 3.05em - font-weight: bold - line-height: 1.1em - float: left - margin-right: 10px - - - footer - margin-top: 3.5rem - - -.icon - width: 32px - height: 32px - padding-right: 0.3rem - - &-small - position: relative - top: 2px - padding-right: 0.1rem - width: 16px !important - height: 16px !important - - &-text - @extend %icon-in-text - &-float - @extend %icon-in-text - float: left - - &-inline - float: left - color: #999 .copyright margin: 15px 0 @@ -88,51 +38,17 @@ div.highlight padding-bottom: 1.5rem -article img - display: block - margin-left: auto - margin-right: auto - border: 1px solid #ccc !important - border-radius: 4px - margin-top: 1.5em - margin-bottom: 1.5em - -img - max-width: 100% - -figure - margin-bottom: 1.5em !important - margin-left: 0 - margin-right: 0 - img - margin-bottom: 0 !important - - figcaption - margin-top: 0.8rem !important - font-size: 1.2rem - text-align: center - font-style: italic - font-weight: normal - color: #aaa - - /** Hugo's figure shortcode seems to render h4s sometimes **/ - h4 - font-size: 1.2rem - font-weight: normal - - -/** general **/ - a:link, a:visited, a - color: var(--accent) - text-decoration: none + color: $accent + text-decoration: none -a.icon:hover - text-decoration: none - -a:hover + &:hover text-decoration: underline + color: darken($accent, 10%) +nav + a:hover + text-decoration: none !important h4 a font-weight: normal @@ -142,17 +58,6 @@ pre font-size: 1rem !important -.big-img - .container - height: 100px !important - @media (min-width: 768px) - height: 150px !important - @media (min-width: 960px) - height: 200px !important - @media (min-width: 1600px) - height: 250px !important - - main display: block line-height: 1.7 @@ -171,20 +76,12 @@ main p margin: 0 0 20px !important - article blockquote p - margin: 0 !important - - -.big-img - background: no-repeat center center - -webkit-background-size: cover - -moz-background-size: cover - background-size: cover - -o-background-size: cover - - border-top: 2px solid lightgray - border-bottom: 1px solid var(--accent) + blockquote p + margin: 0 !important + &.single + article a + text-decoration: underline header margin: auto @@ -193,7 +90,7 @@ header max-width: 80% h1 - color: var(--accent) + color: $accent h2 margin-top: -1rem h2, h3 @@ -206,8 +103,8 @@ time color: grey kbd - color: var(--accent) - border: 1px solid var(--accent) + color: $accent + border: 1px solid $accent font-size: 1rem padding: 2px 4px border-radius: 3px diff --git a/themes/brainbaking-minimal/assets/sass/_commento.sass b/themes/brainbaking-minimal/assets/sass/_commento.sass index 8f48797e..161ba98d 100644 --- a/themes/brainbaking-minimal/assets/sass/_commento.sass +++ b/themes/brainbaking-minimal/assets/sass/_commento.sass @@ -3,8 +3,8 @@ font-size: 12pt !important .commento-round-check input[type=checkbox]:checked+label:before, .commento-round-check input[type=radio]:checked+label:before - background: var(--accent) !important - border: 1px solid var(--accent) !important + background: $accent !important + border: 1px solid $accent !important .commento-markdown-help tr td pre padding: 0 !important @@ -16,26 +16,14 @@ .commento-button color: white !important - background: var(--accent) !important - -.commento-google-button:before - @extend %fa - content: "\f1a0" - -.commento-github-button:before - @extend %fa - content: "\f09b" - -.commento-twitter-button:before - @extend %fa - content: "\f099" + background: $accent !important .commento-oauth-buttons button width: auto !important .commento-root a, .commento-email-button - color: var(--accent) !important + color: $accent !important .commento-name font-size: 14pt !important diff --git a/themes/brainbaking-minimal/assets/sass/_figures.sass b/themes/brainbaking-minimal/assets/sass/_figures.sass new file mode 100644 index 00000000..038d856a --- /dev/null +++ b/themes/brainbaking-minimal/assets/sass/_figures.sass @@ -0,0 +1,51 @@ +article img + display: block + margin-left: auto + margin-right: auto + border: 1px solid #ccc !important + border-radius: 4px + margin-top: 1.5em + margin-bottom: 1.5em + +img + max-width: 100% + +figure + margin-bottom: 1.5em !important + margin-left: 0 + margin-right: 0 + img + margin-bottom: 0 !important + + figcaption + margin-top: 0.8rem !important + font-size: 1.2rem + text-align: center + font-style: italic + font-weight: normal + color: #aaa + + /** Hugo's figure shortcode seems to render h4s sometimes **/ + h4 + font-size: 1.2rem + font-weight: normal + + +.big-img + .container + height: 100px !important + @media (min-width: 768px) + height: 150px !important + @media (min-width: 960px) + height: 200px !important + @media (min-width: 1600px) + height: 250px !important + + background: no-repeat center center + -webkit-background-size: cover + -moz-background-size: cover + background-size: cover + -o-background-size: cover + + border-top: 2px solid lightgray + border-bottom: 1px solid $accent diff --git a/themes/brainbaking-minimal/assets/sass/_fonts.sass b/themes/brainbaking-minimal/assets/sass/_fonts.sass index 604ec7b5..a8868c22 100644 --- a/themes/brainbaking-minimal/assets/sass/_fonts.sass +++ b/themes/brainbaking-minimal/assets/sass/_fonts.sass @@ -1,9 +1,3 @@ -%fa - font-family: FontAwesome - display: inline-block - padding-right: 3px - vertical-align: middle - $font-stack: 'Source Serif Pro', sans-serif $font-alt-stack: 'Metropolis', sans-serif diff --git a/themes/brainbaking-minimal/assets/sass/_goodreads.sass b/themes/brainbaking-minimal/assets/sass/_goodreads.sass index 360a752a..c0da1449 100644 --- a/themes/brainbaking-minimal/assets/sass/_goodreads.sass +++ b/themes/brainbaking-minimal/assets/sass/_goodreads.sass @@ -1,7 +1,7 @@ /* --- goodreads widget styles --- */ .goodreadswidget - border-bottom: 3px solid var(--accent) + border-bottom: 3px solid $accent padding: 0px padding-bottom: 10px diff --git a/themes/brainbaking-minimal/assets/sass/_icons.sass b/themes/brainbaking-minimal/assets/sass/_icons.sass new file mode 100644 index 00000000..598987d2 --- /dev/null +++ b/themes/brainbaking-minimal/assets/sass/_icons.sass @@ -0,0 +1,53 @@ +nav + svg + width: 24px + height: 24px + float: left + +%icon-in-text + position: relative + top: 5px + width: 24px !important + height: 24px !important + +main + p + .icon + @extend %icon-in-text + + &.single article > p:first-of-type::first-letter + font-size: 3.05em + font-weight: bold + line-height: 1.1em + float: left + margin-right: 10px + + + footer + margin-top: 3.5rem + + +.icon + width: 32px + height: 32px + padding-right: 0.3rem + + &-small + position: relative + top: 2px + padding-right: 0.1rem + width: 16px !important + height: 16px !important + + &-text + @extend %icon-in-text + &-float + @extend %icon-in-text + float: left + + &-inline + float: left + color: #999 + +a.icon:hover + text-decoration: none diff --git a/themes/brainbaking-minimal/assets/sass/_listing.sass b/themes/brainbaking-minimal/assets/sass/_listing.sass index a9bbfbd2..ea377ce1 100644 --- a/themes/brainbaking-minimal/assets/sass/_listing.sass +++ b/themes/brainbaking-minimal/assets/sass/_listing.sass @@ -29,7 +29,7 @@ div.list padding-left: 0.4rem padding-right: 0.4rem color: white - background-color: var(--accent) + background-color: $accent border-radius: 2rem margin-top: 1.5rem float: left @@ -46,4 +46,4 @@ div.list .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover background-color: white !important - border-color: var(--accent) !important + border-color: $accent !important diff --git a/themes/brainbaking-minimal/assets/sass/main.sass b/themes/brainbaking-minimal/assets/sass/main.sass index 300be634..59623721 100644 --- a/themes/brainbaking-minimal/assets/sass/main.sass +++ b/themes/brainbaking-minimal/assets/sass/main.sass @@ -1,9 +1,14 @@ $grey: #333 +$accent: {{ .Params.accent | default .Site.Params.accent }} +$accent2: {{ .Params.accent2 | default .Site.Params.accent2 }} + @import 'fonts' @import 'bootstrap-minimal' @import 'brainbaking' @import 'brainbaking-intro' +@import 'figures' +@import 'icons' @import 'blockquote' @import 'listing' @import 'commento' diff --git a/themes/brainbaking-minimal/layouts/partials/css.html b/themes/brainbaking-minimal/layouts/partials/css.html index e5ed8c96..c1772240 100644 --- a/themes/brainbaking-minimal/layouts/partials/css.html +++ b/themes/brainbaking-minimal/layouts/partials/css.html @@ -1,12 +1,3 @@ - - {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}