Radicale/css/main.sass

---
# Sass for Radicale
---

@charset "utf-8"
@import url(monokai.css)

body
  background: #e4e9f6
  color: #424247
  display: flex
  flex-direction: column
  font-family: sans
  font-size: 14pt
  line-height: 1.4
  margin: 0
  min-height: 100vh

a
  color: inherit

nav, footer
  background: #a40000
  color: white
  padding: 0 20%

  ul
    display: flex
    flex-wrap: wrap
    margin: 0
    padding: 0

    li
      display: block
      padding: 0 1em 0 0

      a
        color: inherit
        display: block
        padding: 1em 0.5em 1em 0
        text-decoration: inherit
        transition: 0.2s

        &:hover,
        &:focus
          color: black
          outline: none

header
  background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1))
  background-position: 22% 45%
  background-repeat: no-repeat
  color: #efdddd
  font-size: 1.5em
  min-height: 250px
  overflow: auto
  padding: 3em 22%
  text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5)

  & > *
    padding-left: 220px

  h1
    font-size: 2.5em
    font-weight: lighter
    margin: 0.5em 0

main
  flex: 1

section
  padding: 0 20% 2em

  &:not(:last-child)
    border-bottom: 1px dashed #ccc

  h1
    background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1))
    color: #e5dddd
    font-size: 2.5em
    margin: 0 -33.33% 1em
    padding: 1em 33.33%

  h2, h3, h4
    font-weight: lighter
    margin: 1.5em 0 1em

article
  border-top: 1px solid transparent
  position: relative
  margin: 3em 0

  aside
    box-sizing: border-box
    color: #aaa
    font-size: 0.8em
    right: -30%
    top: 0.5em
    position: absolute

  &:before
    border-top: 1px dashed #ccc
    content: ''
    display: block
    left: -33.33%
    position: absolute
    right: -33.33%

pre
  border-radius: 3px
  background: black
  color: #d3d5db
  margin: 0 -1em
  overflow-x: auto
  padding: 1em

table
  border-collapse: collapse
  font-size: 0.8em
  margin: auto

  td
    border: 1px solid #ccc
    padding: 0.5em

dl
  dt
    margin-bottom: 0.5em
    margin-top: 1em

p > code, li > code, dt > code
  background: #d1daf0

@media (max-width: 800px)
  body
    font-size: 12pt

  header, section
    padding-left: 2em
    padding-right: 2em

  nav, footer
    padding-left: 0
    padding-right: 0

    ul
      justify-content: center

      li
        padding: 0 0.5em

        a
          padding: 1em 0

  header
    background-position: 50% 30px, 0 0
    padding-bottom: 0
    padding-top: 330px
    text-align: center

    & > *
      margin: 0
      padding-left: 0

  section h1
    margin: 0 -0.8em 1.3em
    padding: 0.5em 0
    text-align: center

  article
    aside
      top: 0.5em
      right: -1.5em

    &:before
      left: -2em
      right: -2em