resilien/assets/styles/main.sass

$line-height: 1.15
$size-small: 600px
$layout-size: 960px

// COLOR

$color-darkest: #001e1d
$color-darken: #0f3433
$color-dark: #004643
$color-main: #abd1c6
$color-light: #e8e4e6
$color-lightest: #fffffe
$color-secondary: #f9bc60
$color-tertiary: #A61A07

@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: var(--color-highlight)
  --color-paragraph: var(--color-main)
  --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: #{$color-lightest}


  --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 > *, .footnotes
    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-link: var(--color-secondary-link)
  --color-headline: var(--color-secondary-headline)
  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 > *, .footnotes
    color: var(--color-secondary-card-paragraph)
    background: var(--color-secondary-card-background)
    border-radius: var(--border-radius)
    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)

// HTML TAG

html
  font-size: 1.25rem
  line-height: $line-height

body
  @include theme
  @include theme-primary

p, li
  line-height: 1.6

.cards
  display: grid
  grid-auto-columns: 1fr
  grid-template-columns: 1fr 1fr
  grid-template-rows: auto auto auto
  column-gap: var(--tile)
  row-gap: var(--tile)
  margin: 0
  padding: 0
  list-style-type: none

  @media screen and (max-width: 800px)
    grid-template-columns: 1fr

.cards > *, .card
    padding: calc(var(--tile))
    border-radius: var(--border-radius)

    header
      display: grid
      column-gap: 1rem
      grid-template-columns: 70px auto
      align-items: center
      margin-bottom: 1rem

      p
        display: inline-block

      img
        width: 70px
        height: 70px

      p, h1, h2, h3
        margin: 0
        padding: 0

    @media screen and (max-width: 800px)
      text-align: center

body
  --tile: 2rem

  --border-style: dashed
  --border-size: 4px
  --border-radius: calc(var(--tile)/2)
  --link-style: dotted

  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

h1
  margin: 0 auto calc(var(--tile)*2)
  padding: calc(var(--tile)*2.5) 0 0
  text-align: center

h2
  margin: 0 auto calc(var(--tile)*1.5)
  padding: calc(var(--tile)*2) 0 0

h3
  margin: 0 auto var(--tile)
  padding: calc(var(--tile)*1.5) 0 0

h1 + h2, h2 + h3, h3 + h4
  padding-top: 0

a
  text-decoration: none
  border-bottom: 2px var(--link-style)
  &:hover
    border-bottom: 2px solid

  &:active, &:visited
    border-bottom: 2px dashed

a[href^="http"]::after
  content: "\2197"
  font-size: .8rem
  display: inline-block
  position: relative
  margin-left: .2em

ol, ul
  padding-left: 1.2rem

li
  padding: .3rem 0


ul.no-style
  margin: 0
  padding: 0
  list-style-type: none

  li
    padding: 0

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)

.theme-primary
  @include theme-primary

.theme-secondary
  @include theme-secondary

.half
  max-width: 50%
  margin: 0 auto

.center
  text-align: center

.header
  justify-content: space-between

  .title
    font-size: 2.25rem
    font-weight: 700
    margin: 0
    padding: 0
    a
      border: none
      text-align: center

    img
      height: 120px
      max-width: 100%
      margin: 0 auto

  @media screen and (max-width: $size-small)
    flex-direction: column
    justify-content: space-around

    .title
      a
        display: block
        width: 100%

.menu
  ul
    margin: 0
    padding: 0
    list-style-type: none

  li
    padding: 0
    margin-top: .3rem

  a
    padding: .3rem calc(var(--tile)/4)

  @media screen and (max-width: $size-small)
    ul
      display: flex
      flex-direction: row-reverse
    li
      display: inline
      margin: var(--tile) auto

.quote
  border: var(--border-size) var(--border-style) var(--color-highlight)
  border-radius: var(--border-radius)
  padding: var(--tile)
  margin: calc(1.5 * var(--tile)) 0
  position: relative
  text-align: center

  h2
    margin: 0
    padding: 0

    strong
      font-size: 130%

.content
  max-width: $layout-size
  padding: var(--tile)
  margin: 0 auto

  .blogDate:first-child + h1
    padding-top: var(--tile)

  h1:first-child
    padding-top: 0

  .quote:first-child
    margin-top: 0

.footnotes
  font-size: .8rem
  padding: var(--tile)

  hr
    border: none
    margin: 0
  p
    margin: 0

.footer
  font-size: 0.8rem
  padding-bottom: calc(var(--tile)/2)
  font-family: monospace
  line-height: 1.2

  @media screen and (max-width: $size-small)
    .cell, .cell.-right
      text-align: center
      flex: 0 0 100%
      padding-bottom: calc(var(--tile)/2)

    ul + ul
      border-top: 2px dotted
      padding-top: var(--tile)
      margin-top: var(--tile)

.blogDate
  font-style: italic
  font-size: 0.9rem
  display: block
  margin-top: 1.5rem
  text-align: center

// Grid

.grid            { display: flex; flex-wrap: wrap; }
.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"