styles.sass

---
---

$dateWidth: 2.5rem
$datePadding: 1.5rem
$interPostPadding: 1rem
$darkRed: #800000
$lineHeight: 1.37

html, body
  margin: 0
  text-align: center
  font-family: "Equity A"
  font-size: 110%
  line-height: $lineHeight

@media screen
  html
    background-color: #f8f8f8

body > header, body > main, body > footer
  margin: 0 auto
  padding: 0 1rem 0 1rem

body > main img
  max-width: 100%

body > header
  margin-top: $interPostPadding

  img
    width: calc($dateWidth / 2)
    margin-top: calc($interPostPadding / 2)

  h1, p
    margin: 0 0 0
    line-height: 1.2

  h1
    padding-top: $interPostPadding
    font-family: "Concourse 3"
    font-size: 350%

  p
    color: #333
    padding-top: 2ex

.siteDescription
  text-transform: lowercase
  font-size: 115%

.siteAuthor
  font-size: 100%

.subscribe, .blogroll
  font-size: 100%

  a
    color: #800000

.youtube
  width: 100%
  height: 20rem
  margin: 1rem 0

@media screen
  body > header, body > main, body > footer
    max-width: 33rem
    box-sizing: border-box

  body > main.doublewide
    max-width: 42rem

  body > main.multilingual, *[lang=ru]
    font-family: "Noto Serif"
    line-height: $lineHeight + 0.1

body > header, body > main
  margin: 20px auto
  text-align: left

body > main
  margin-bottom: 0

body > footer
  margin-top: 1rem
  border-top: 1px dashed #eee
  padding-top: 1rem
  clear: both
  color: #444
  font-size: 85%
  text-align: right
  padding-bottom: 200px

  p
    margin: 0.5em 0

  a[href]
    color: #800000

h1
  font-size: 150%

h1, h2, h3, h4, h5, h6
  line-height: 1.2

a
  color: inherit
  text-decoration: none

  &:hover
    text-decoration: underline

ol.posts
  list-style-type: none
  margin: 0
  padding: 0

  &> li
    width: 100%
    padding: $interPostPadding 0 0 0
    &:last-child
      .tags
        border-bottom: none

    .tags
      border-bottom: 1px solid #ddd
      padding-bottom: $interPostPadding

  .description, .title, .tags
    margin-left: $dateWidth + $datePadding

ol.pages
  list-style-type: none

  &> li
    padding: $interPostPadding 0 0 0
    &:last-child

      .tags
        border-bottom: none

.title
  line-height: 1.2
  display: block
  font:
    family: "Concourse 6"
    size: 200%

.description
  padding: 1ex 0
  font-size: 90%
  color: #444

.tags
  list-style-type: none
  padding-top: 0.5ex
  font:
    family: "Concourse 4 Caps"
    size: 50%
  text:
    transform: uppercase
  color: #444

  li
    display: inline-block
    padding-right: 1em
    &:last-child
      padding-right: 0

.categories
  list-style-type: none

  li
    &:before
      content: '/'

.posts

  time
    display: block
    text-align: right
    width: $dateWidth
    padding: 0 $datePadding 0 0
    float: left

    .day
      display: block
      line-height: 1.2
      color: $darkRed
      font:
        size: 200%
        family: "Concourse 6"

    .month, .year
      color: #444

    .month
      display: block
      font-size: 75%

    .year
      display: block
      font-size: 75%

.post

  time
    padding-top: 1rem
    font-size: 80%

  .brief, .retrospect
    background: white
    padding: 1rem
    margin: 1rem 0
    border: 1px solid #777

  .brief
    &:before
      content: 'In Brief'
      font-weight: bold

  .retrospect
    &:before
      content: 'In Retrospect'
      font-weight: bold

  h1
    font-size: 200%
    font-family: "Concourse 6"
    line-height: 1.0
    padding: 0 0 0.25em 0

    small
      padding: 0.5rem 0 0 0
      display: block
      clear: both
      font-size: 50%
      color: #444

  h2
    font-size: 150%
    font-family: "Concourse 6"
    font-weight: normal
    padding: 1em 0 0.25em 0

  h3, h4, h5
    padding: 1em 0 0.25em 0

  h5
    font-weight: normal
    font-style: italic

  p
    padding: 0.5em 0
    // text-indent: 1em

  p, li
    text-align: left

  h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, hr + p
    text-indent: 0

  .series
    font-style: italic

  .signature
    color: #444
    font-size: 85%
    text-align: right

  ol, ul, dl
    margin-left: 1em

    p
      text-indent: 0

    li
      padding: 0

  dt
    font-weight: bold
    margin-top: 0.5rem

  dd
    margin-bottom: 0.5rem

  a
    color: $darkRed

  hr
    border: none
    text-align: center
    height: auto
    &:before
      content: '·  ·  ·'

@media screen
  .post
    a[href]
      background-image: url('/images/external.svg')
      background-position: center right
      background-repeat: no-repeat
      padding-right: 13px

    a[href].note, a[href].back
      background: none
      padding-right: 0

    a[href].note:after
      content: ' ⤓'

    a[href].back:after
      content: ' ↺'

    a[href*="wikipedia.org"]
      background-image: url('/images/wikipedia.svg'), url('/images/external.svg') !important
      background-position: center right 11px, center right
      background-size: 12px
      padding-right: 25px

// Code

pre
  padding: 1em
  white-space: pre-wrap
  margin-bottom: 0.5rem
  margin-top: 0.5rem

code
  font-family: "Triplicate A"

@media screen
  pre
    background-color: #fdfdfd

details
  margin: 1rem 0
  border: 1px solid #777
  padding: 1rem
  summary
    font-weight: bold

blockquote, figure
  border-radius: 1ex 0 1ex 0

blockquote
  padding: 1rem
  padding: 0.5rem 1rem
  margin-top: 0.5rem
  margin-bottom: 0.5rem

  p:first-child
    text-indent: 0

  footer
    text-align: right

@media screen
  blockquote, figure
    background-color: #fdfdfd

blockquote + blockquote
  margin-top: 1.0rem

// Footnotes

div.footnotes
  border-top: 1px solid #ccc
  border-bottom: 1px solid #ccc
  margin-top: 1em

  ol
    margin: 0
    padding: 0.5em
    list-style: decimal inside none
    li
      font-size: 85%

sup
  position: relative
  top: -0.5em
  font-size: 80%

ins
  text-decoration: underline
  color: green
  background: none

del
  text-decoration: line-through
  color: red
  background: none

.hash
  font-size: 70%

table
  margin: 0 auto

  &.borders
    td, th
      border: 1px solid black
      padding: 1ex
    thead
      tr:last-child
        border-bottom: 2px solid black
    tbody
      td, th
        vertical-align: top
    td:first-child, th:first-child
      padding-left: 1ex
    td:last-child, th:last-child
      padding-right: 1ex

  &.left
    text-align: left

  thead
    td, th
      vertical-align: bottom
  caption
    font-weight: bold
    border-bottom: 1px solid black
    padding-bottom: 0.25rem

  td, th
    padding: 0.5rem

  td:first-child, th:first-child
    padding-left: 0

  td:last-child, th:last-child
    padding-right: 0

.translation
  width: 100%
  margin-top: 1rem

  caption
    margin-bottom: 1rem

  td, th
    padding: 0.25rem 0.5rem
    width: 50%

  tbody tr:last-child
    td, th
      padding-bottom: 2rem

mark
  font-weight: normal
  font-style: normal

h1.tag, h1.series
  position: relative
  font-size: 200%
  font-family: "Concourse 6"
  line-height: 1.0
  padding-top: 1em
  padding-bottom: 0.25em
  padding-left: $dateWidth + $datePadding + $interPostPadding

h1.tag
  &:before
    content: 'Tag'
    color: $darkRed
    display: block
    text-align: right
    width: $dateWidth + $interPostPadding
    left: 0
    position: absolute

h1.series
  color: $darkRed

/* List Styles */

.arabicInParentheses p,
.doubleLowerAlphaInParentheses p,
.lowerAlphaInParentheses p,
.lowerRomanInParentheses p,
.lowerRomanInParentheses p,
.upperRomanInParentheses p
  margin-top: 0
  padding-top: 0

/* (a) */

ol.lowerAlphaInParentheses
  counter-reset: lowerAlphaInParentheses
  margin-left: 2rem

.lowerAlphaInParentheses > li
  list-style: none
  position: relative

.lowerAlphaInParentheses > li:before
  content: "(" counter(lowerAlphaInParentheses, lower-alpha) ") "
  counter-increment: lowerAlphaInParentheses
  display: block
  left: -2rem
  position: absolute
  user-select: text

/* (i) */

ol.lowerRomanInParentheses
  counter-reset: lowerRomanInParentheses
  margin-left: 2rem

.lowerRomanInParentheses > li
  list-style: none
  position: relative

.lowerRomanInParentheses > li:before
  content: "(" counter(lowerRomanInParentheses, lower-roman) ") "
  counter-increment: lowerRomanInParentheses
  display: block
  left: -2rem
  position: absolute
  user-select: text

/* (1) */

ol.arabicInParentheses
  counter-reset: arabicInParentheses
  margin-left: 2rem

.arabicInParentheses > li
  list-style: none
  position: relative

.arabicInParentheses > li:before
  content: "(" counter(arabicInParentheses) ") "
  counter-increment: arabicInParentheses
  display: block
  left: -2rem
  position: absolute
  user-select: text

/* A. */

ol.upperAlphaPeriod
  counter-reset: upperAlphaPeriod
  margin-left: 2rem

.upperAlphaPeriod > li
  list-style: none
  position: relative

.upperAlphaPeriod > li:before
  content: counter(upperAlphaPeriod, upper-alpha) ". "
  counter-increment: upperAlphaPeriod
  display: block
  left: -2rem
  position: absolute
  user-select: text

/* (A) */

ol.upperAlphaInParentheses
  counter-reset: upperAlphaInParentheses
  margin-left: 2rem

.upperAlphaInParentheses > li
  list-style: none
  position: relative

.upperAlphaInParentheses > li:before
  content: "(" counter(upperAlphaInParentheses, upper-alpha) ") "
  counter-increment: upperAlphaInParentheses
  display: block
  left: -2rem
  position: absolute
  user-select: text

/* (I) */

ol.upperRomanInParentheses
  counter-reset: upperRomanInParentheses
  margin-left: 2rem

.upperRomanInParentheses > li
  list-style: none
  position: relative

.upperRomanInParentheses > li:before
  content: "(" counter(upperRomanInParentheses, upper-roman) ") "
  counter-increment: upperRomanInParentheses
  display: block
  left: -2rem
  position: absolute
  user-select: text

/* (aa) */

ol.doubleLowerAlphaInParentheses
  counter-reset: doubleLowerAlphaInParentheses
  margin-left: 2rem

.doubleLowerAlphaInParentheses > li
  list-style: none
  position: relative

.doubleLowerAlphaInParentheses > li:before
  content: "(" counter(doubleLowerAlphaInParentheses, lower-alpha) counter(doubleLowerAlphaInParentheses, lower-alpha) ") "
  counter-increment: doubleLowerAlphaInParentheses
  display: block
  left: -2rem
  position: absolute
  user-select: text

aside.annotation
  border: 1px solid black
  margin: 0.5rem 0
  padding: 0.5rem

.totebag
  border-radius: 1ex

  p
    text-align: center

  p:first-child
    font-size: 200%
    font-family: serif
    font-variant: small-caps

@media screen
  .totebag
    background-color: black

    p
      color: white

.disqusButton
  font-size: 16px
  padding: 10px 25px
  line-height: 1.45em
  letter-spacing: 1.5px
  border-color: #2e9fff
  background-color: #2e9fff
  color: white
  border-radius: 3px
  border: 1px solid transparent
  text-align: center
  font-weight: 500
  display: inline-block
  cursor: pointer

.conformedSignature
  font-size: 125%
  font-style: italic
  font-family: cursive

.completedBySignatory
  font-family: monospace

figure
  margin: 0.5rem 0
  padding: 1rem

  a[href]
    border: none
    &:after
      content: none !important

figcaption
  font-size: 85%
  margin-top: 0.75rem

.fourcolumns
  columns: 4

.worst
  color: red

.best
  color: green

#typingSpace
  width: 100%
  box-sizing: border-box
  padding: 0.5rem 1rem

sub
  vertical-align: sub
  font-size: smaller

abbr[title]
  border-bottom: none

@media print
  body > footer, .signature
    display: none

.smallcaps
    font-variant: small-caps