split out sass, use color vars. removed teaching img dir?
This commit is contained in:
parent
6fcca6918d
commit
2bfe5894f8
|
@ -1,9 +1,5 @@
|
||||||
Brainbaking.com hugo site.
|
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
|
### Screenshot png - jpg conversion
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@ enableGitInfo = true
|
||||||
description = "Freshly baked thought"
|
description = "Freshly baked thought"
|
||||||
# see single.html, DisqusShortname also needed
|
# see single.html, DisqusShortname also needed
|
||||||
disableComments = true
|
disableComments = true
|
||||||
accent = "#008862"
|
accent = "#018661"
|
||||||
accent2 = "#008fb3"
|
accent2 = "#008fb3"
|
||||||
showBorder = true
|
showBorder = true
|
||||||
copyright = "<a href='/no-copyright-no-tracking'>No © and no tracking</a> - sharing is caring. <svg class='icon icon-small' width='16' height='16'><use xlink:href='#bulb'></use></svg> <a href='/'>Brain Baking</a>. <a href='/index.xml'>RSS Feed</a>."
|
copyright = "<a href='/no-copyright-no-tracking'>No © and no tracking</a> - sharing is caring. <svg class='icon icon-small' width='16' height='16'><use xlink:href='#bulb'></use></svg> <a href='/'>Brain Baking</a>. <a href='/index.xml'>RSS Feed</a>."
|
||||||
|
|
|
@ -23,7 +23,7 @@ blockquote
|
||||||
-webkit-mask-size: cover
|
-webkit-mask-size: cover
|
||||||
content: ''
|
content: ''
|
||||||
display: inline-block
|
display: inline-block
|
||||||
background-color: var(--accent)
|
background-color: $accent
|
||||||
position: absolute
|
position: absolute
|
||||||
width: 40px
|
width: 40px
|
||||||
height: 40px
|
height: 40px
|
||||||
|
|
|
@ -47,7 +47,7 @@ code
|
||||||
font-family: Menlo,Monaco,Consolas,"Courier New",monospace
|
font-family: Menlo,Monaco,Consolas,"Courier New",monospace
|
||||||
padding: 2px 4px
|
padding: 2px 4px
|
||||||
font-size: 90%
|
font-size: 90%
|
||||||
color: var(--accent2)
|
color: $accent2
|
||||||
background-color: #f9f2f4
|
background-color: #f9f2f4
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
|
|
||||||
|
@ -119,7 +119,7 @@ pre code
|
||||||
display: inline-block !important
|
display: inline-block !important
|
||||||
|
|
||||||
.navbar.navbar-default
|
.navbar.navbar-default
|
||||||
border-top: 5px solid var(--accent)
|
border-top: 5px solid $accent
|
||||||
border-bottom: 1px solid #e7e7e7
|
border-bottom: 1px solid #e7e7e7
|
||||||
|
|
||||||
.navbar-right
|
.navbar-right
|
||||||
|
@ -199,7 +199,7 @@ nav
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
|
|
||||||
body > footer
|
body > footer
|
||||||
border-bottom: 5px solid var(--accent)
|
border-bottom: 5px solid $accent
|
||||||
background-color: rgba(243, 243, 243, 0.8)
|
background-color: rgba(243, 243, 243, 0.8)
|
||||||
|
|
||||||
.navbar-default .navbar-toggle
|
.navbar-default .navbar-toggle
|
||||||
|
|
|
@ -25,56 +25,6 @@ body
|
||||||
nav, footer
|
nav, footer
|
||||||
font-size: 0.85rem
|
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
|
.copyright
|
||||||
margin: 15px 0
|
margin: 15px 0
|
||||||
|
@ -88,51 +38,17 @@ div.highlight
|
||||||
padding-bottom: 1.5rem
|
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
|
a:link, a:visited, a
|
||||||
color: var(--accent)
|
color: $accent
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
a.icon:hover
|
&:hover
|
||||||
text-decoration: none
|
|
||||||
|
|
||||||
a:hover
|
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
color: darken($accent, 10%)
|
||||||
|
|
||||||
|
nav
|
||||||
|
a:hover
|
||||||
|
text-decoration: none !important
|
||||||
|
|
||||||
h4 a
|
h4 a
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
|
@ -142,17 +58,6 @@ pre
|
||||||
font-size: 1rem !important
|
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
|
main
|
||||||
display: block
|
display: block
|
||||||
line-height: 1.7
|
line-height: 1.7
|
||||||
|
@ -171,20 +76,12 @@ main
|
||||||
p
|
p
|
||||||
margin: 0 0 20px !important
|
margin: 0 0 20px !important
|
||||||
|
|
||||||
article blockquote p
|
blockquote p
|
||||||
margin: 0 !important
|
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)
|
|
||||||
|
|
||||||
|
&.single
|
||||||
|
article a
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
header
|
header
|
||||||
margin: auto
|
margin: auto
|
||||||
|
@ -193,7 +90,7 @@ header
|
||||||
max-width: 80%
|
max-width: 80%
|
||||||
|
|
||||||
h1
|
h1
|
||||||
color: var(--accent)
|
color: $accent
|
||||||
h2
|
h2
|
||||||
margin-top: -1rem
|
margin-top: -1rem
|
||||||
h2, h3
|
h2, h3
|
||||||
|
@ -206,8 +103,8 @@ time
|
||||||
color: grey
|
color: grey
|
||||||
|
|
||||||
kbd
|
kbd
|
||||||
color: var(--accent)
|
color: $accent
|
||||||
border: 1px solid var(--accent)
|
border: 1px solid $accent
|
||||||
font-size: 1rem
|
font-size: 1rem
|
||||||
padding: 2px 4px
|
padding: 2px 4px
|
||||||
border-radius: 3px
|
border-radius: 3px
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
font-size: 12pt !important
|
font-size: 12pt !important
|
||||||
|
|
||||||
.commento-round-check input[type=checkbox]:checked+label:before, .commento-round-check input[type=radio]:checked+label:before
|
.commento-round-check input[type=checkbox]:checked+label:before, .commento-round-check input[type=radio]:checked+label:before
|
||||||
background: var(--accent) !important
|
background: $accent !important
|
||||||
border: 1px solid var(--accent) !important
|
border: 1px solid $accent !important
|
||||||
|
|
||||||
.commento-markdown-help tr td pre
|
.commento-markdown-help tr td pre
|
||||||
padding: 0 !important
|
padding: 0 !important
|
||||||
|
@ -16,26 +16,14 @@
|
||||||
|
|
||||||
.commento-button
|
.commento-button
|
||||||
color: white !important
|
color: white !important
|
||||||
background: var(--accent) !important
|
background: $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"
|
|
||||||
|
|
||||||
.commento-oauth-buttons button
|
.commento-oauth-buttons button
|
||||||
width: auto !important
|
width: auto !important
|
||||||
|
|
||||||
.commento-root a,
|
.commento-root a,
|
||||||
.commento-email-button
|
.commento-email-button
|
||||||
color: var(--accent) !important
|
color: $accent !important
|
||||||
|
|
||||||
.commento-name
|
.commento-name
|
||||||
font-size: 14pt !important
|
font-size: 14pt !important
|
||||||
|
|
|
@ -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
|
|
@ -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-stack: 'Source Serif Pro', sans-serif
|
||||||
$font-alt-stack: 'Metropolis', sans-serif
|
$font-alt-stack: 'Metropolis', sans-serif
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
/* --- goodreads widget styles --- */
|
/* --- goodreads widget styles --- */
|
||||||
.goodreadswidget
|
.goodreadswidget
|
||||||
border-bottom: 3px solid var(--accent)
|
border-bottom: 3px solid $accent
|
||||||
padding: 0px
|
padding: 0px
|
||||||
padding-bottom: 10px
|
padding-bottom: 10px
|
||||||
|
|
||||||
|
|
|
@ -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
|
|
@ -29,7 +29,7 @@ div.list
|
||||||
padding-left: 0.4rem
|
padding-left: 0.4rem
|
||||||
padding-right: 0.4rem
|
padding-right: 0.4rem
|
||||||
color: white
|
color: white
|
||||||
background-color: var(--accent)
|
background-color: $accent
|
||||||
border-radius: 2rem
|
border-radius: 2rem
|
||||||
margin-top: 1.5rem
|
margin-top: 1.5rem
|
||||||
float: left
|
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
|
.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
|
background-color: white !important
|
||||||
border-color: var(--accent) !important
|
border-color: $accent !important
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
$grey: #333
|
$grey: #333
|
||||||
|
$accent: {{ .Params.accent | default .Site.Params.accent }}
|
||||||
|
$accent2: {{ .Params.accent2 | default .Site.Params.accent2 }}
|
||||||
|
|
||||||
|
|
||||||
@import 'fonts'
|
@import 'fonts'
|
||||||
@import 'bootstrap-minimal'
|
@import 'bootstrap-minimal'
|
||||||
@import 'brainbaking'
|
@import 'brainbaking'
|
||||||
@import 'brainbaking-intro'
|
@import 'brainbaking-intro'
|
||||||
|
@import 'figures'
|
||||||
|
@import 'icons'
|
||||||
@import 'blockquote'
|
@import 'blockquote'
|
||||||
@import 'listing'
|
@import 'listing'
|
||||||
@import 'commento'
|
@import 'commento'
|
||||||
|
|
|
@ -1,12 +1,3 @@
|
||||||
<style>
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--accent: {{ if .Params.accent }}{{ .Params.accent }}{{ else }}{{ .Site.Params.accent }}{{ end }};
|
|
||||||
--accent2: {{ if .Params.accent2 }}{{ .Params.accent2 }}{{ else }}{{ .Site.Params.accent2 }}{{ end }};
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<link rel = 'stylesheet' href = '/css/simple-lightbox.min.css'>
|
<link rel = 'stylesheet' href = '/css/simple-lightbox.min.css'>
|
||||||
|
|
||||||
{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
|
{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
|
||||||
|
|
Loading…
Reference in New Issue