split out sass, use color vars. removed teaching img dir?
This commit is contained in:
wgroeneveld
parent
6fcca6918d
commit
2bfe5894f8
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = "<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
|
||||
content: ''
|
||||
display: inline-block
|
||||
background-color: var(--accent)
|
||||
background-color: $accent
|
||||
position: absolute
|
||||
width: 40px
|
||||
height: 40px
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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-alt-stack: 'Metropolis', sans-serif
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
/* --- goodreads widget styles --- */
|
||||
.goodreadswidget
|
||||
border-bottom: 3px solid var(--accent)
|
||||
border-bottom: 3px solid $accent
|
||||
padding: 0px
|
||||
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-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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
||||
{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue