resilien/assets/styles/main.sass

$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: #A91804

@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-stroke)
  --color-secondary-paragraph: #{$color-darken}

  --color-secondary-link: var(--color-tertiary)
  --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)

  .quote
    color: var(--color-paragraph)

    h1, h2, h3, h4, h5, h6
      color: var(--color-paragraph)

    strong
        color: var(--color-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, .cards > *
    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)

svg
  height: 120px
  .st0
    fill: var(--color-paragraph)
  .st1
    fill: var(--color-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
  padding: 0
  overflow-y: scroll

  @media screen and (max-width: $size-small)
    --border-size: 2px
    --tile: 1rem
    font-size: .9rem

.content
  max-width: 800px
  padding: var(--tile)
  margin: 0 auto

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
    margin: 0

    strong
      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"