$line-height: 1.15
$size-small: 600px
html
font-size: 1.25rem
line-height: $line-height
p, li
line-height: 1.4
// COLOR
$color-darkest: #001e1d
$color-darken: #0f3433
$color-dark: #004643
$color-main: #abd1c6
$color-light: #e8e4e6
$color-lightest: #fffffe
$color-secondary: #f9bc60
$color-tertiary: #e16162
@mixin theme
// https://www.happyhues.co/palettes/10
--color-stroke: #{$color-darkest}
--color-main: #{$color-light}
--color-highlight: #{$color-secondary}
--color-secondary: #{$color-main}
--color-tertiary: #{$color-tertiary}
--color-background: #{$color-dark}
--color-headline: #{$color-lightest}
--color-paragraph: var(--color-secondary)
--color-link: var(--color-highlight)
--color-button: var(--color-highlight)
--color-button-text: var(--color-stroke)
--color-card-background: var(--color-main)
--color-card-headline: var(--color-stroke)
--color-card-paragraph: #{$color-darken}
--color-card-link: var(--color-background)
--color-card-button: var(--color-background)
--color-card-button-text: var(--color-headline)
--color-secondary-background: var(--color-secondary)
--color-secondary-headline: var(--color-darkest)
--color-secondary-paragraph: #{$color-darken}
--color-secondary-link: var(--color-highlight)
--color-secondary-button: var(--color-highlight)
--color-secondary-button-text: var(--color-stroke)
--color-secondary-card-background: var(--color-background)
--color-secondary-card-headline: var(--color-headline)
--color-secondary-card-paragraph: var(--color-paragraph)
--color-secondary-card-link: var(--color-link)
--color-secondary-card-button: var(--color-button)
--color-secondary-card-button-text: var(--color-button-text)
@mixin theme-primary
color: var(--color-paragraph)
background: var(--color-background)
h1, h2, h3, h4, h5, h6
color: var(--color-headline)
button, .button
background: var(--color-button)
color: var(--color-button-text)
a
color: var(--color-link)
.card, .cards > *
color: var(--color-card-paragraph)
background: var(--color-card-background)
h1, h2, h3, h4, h5, h6
color: var(--color-card-headline)
button, .button
background: var(--color-card-button)
color: var(--color-card-button-text)
a
color: var(--color-card-link)
@mixin theme-secondary
color: var(--color-secondary-paragraph)
background: var(--color-secondary-background)
h1, h2, h3, h4, h5, h6
color: var(--color-secondary-headline)
button, .button
background: var(--color-secondary-button)
color: var(--color-secondary-button-text)
a
color: var(--color-secondary-link)
.card
color: var(--color-secondary-card-paragraph)
background: var(--color-secondary-card-background)
h1, h2, h3, h4, h5, h6
color: var(--color-secondary-card-headline)
button, .button
background: var(--color-secondary-card-button)
color: var(--color-secondary-card-button-text)
a
color: var(--color-secondary-card-link)
body
@include theme
@include theme-primary
.theme-secondary
@include theme-secondary
.card, .cards > *
padding: 1rem
margin: 1rem
body
--border-style: dashed
--border-size: 4px
--link-style: dotted
--tile: 2rem
font-size: 1.125rem
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
margin: 0 auto
padding: 0 var(--tile)
max-width: 800px
overflow-y: scroll
@media screen and (max-width: $size-small)
--border-size: 2px
--tile: 1rem
font-size: .9rem
img
max-width: 100%
@media screen and (max-width: $size-small)
max-width: calc(100% + 1rem)
margin-left: -.5rem
hr
border: 0
border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
margin: var(--tile) auto
@media screen and (max-width: $size-small)
margin: calc(var(--tile)*2) calc(var(--tile)*-1)
.center
text-align: center
p + ol, p + ul
margin: 0
> li:first-child
padding-top: 0
ol, ul
padding-left: 1.2rem
li
padding: .3rem 0
ul.no-style
margin: 0
padding: 0
list-style-type: none
li
padding: 0
line-height: $line-height
a
text-decoration: underline var(--link-style)
&:hover
text-decoration: underline
.header .title
font-size: 2.25rem
font-weight: 700
margin: 1.5rem 0
h2
margin: calc(var(--tile)*1.5) auto
h3
// display: inline-block
margin: calc(var(--tile)*1.5) auto var(--tile)
.frame
border: var(--border-size) var(--border-style) var(--color-highlight)
padding: var(--tile)
.footer
font-size: 0.8rem
padding-bottom: calc(var(--tile)/2)
@media screen and (max-width: $size-small)
.cell, .cell.-right
text-align: center
flex: 0 0 100%
padding-bottom: calc(var(--tile)/2)
.flex
--margin-tile: calc(var(--tile)/2)
margin: calc(var(--margin-tile) * -1)
padding: 0
list-style-type: none
width: calc(100% + 2 * var(--margin-tile))
display: flex
flex-wrap: wrap
li
text-align: center
padding: var(--margin-tile)
flex: 0 0 50%
box-sizing: border-box
img
max-width: 100%
width: 40%
@media screen and (max-width: $size-small)
margin: 0
width: 100%
li
flex: 0 0 100%
.quote
border: var(--border-size) var(--border-style) var(--color-highlight)
padding: var(--tile)
margin: calc(1.5 * var(--tile)) 0
position: relative
text-align: center
h2
color: var(--color-paragraph)
margin: 0
strong
color: var(--color-highlight)
font-size: 130%
.blogDate
font-style: italic
font-size: 0.9rem
display: block
margin-top: 1.5rem
.footnotes
font-size: .8rem
p
margin: 0
// Grid
.grid { display: flex; flex-wrap: wrap; }
.grid.\-middle { align-items: center; }
.grid.\-bottom { align-items: end; }
.cell { flex: 1; box-sizing: border-box; }
.cell.\-left { text-align: left ;}
.cell.\-right { text-align: right; }
@import "../../themes/hugo-theme-lowtech/assets/styles/obfuscates"