style.sass

// vim: ft=sass ts=2 sw=2 et
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Fjalla+One&family=Cabin&display=swap')
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css')

body
  font-family: 'Roboto', sans-serif
  margin: 0
  font-size: 10pt
  background-color: white
  line-height: 1.35em

.footer
  display: block
  width: 100%
  padding: 20pt 0
  background: #eee
  text-align: center
  p
    margin: 0.2em auto

@media only screen
  body
    padding: 2em 0 0 0
    font-size: 12pt
  .page
    max-width: 230mm
    margin: 0 auto
    padding: 0 15mm
  .footer
    background: none
  .view-as-pdf
    margin: 1em 1em 0 1em

@media only print
  .page
    height: 297mm
    width: 210mm
    padding: 15mm
    position: relative
    box-sizing: border-box
  .footer
    position: absolute
    bottom: 0mm
    left: 0mm
  .view-as-pdf
    display: none

a
  color: #25A
  text-decoration: none
  font-weight: 500

code
  font-family: 'DejaVu Sans Mono', monospace

#heading
  display: flex
  flex-direction: row
  flex-wrap: wrap
  justify-content: space-between
  margin-bottom: 8pt

  h1,h2
    font-family: Cabin
    font-weight: normal
    text-transform: none
    letter-spacing: -1pt
    font-size: 30pt
  h2
    font-size: 18pt
  .main > *
    margin: 0
    line-height: 1

.contact
  font-size: 12pt
  list-style-type: none
  margin-top: 8pt

*::before
  font-family: 'Font Awesome 5 Free'
  font-weight: 900
  font-size: 80%
  margin-right: 0.5em
  color: #aaa
  display: inline-block
  vertical-align: middle
  margin-top: -0.2em

.phone::before
  content: '\f095'
.email::before
  content: '\f1fa'
.website::before
  content: '\f0c1'

.sectionwrapper
  padding: 10pt 0 0 0
  page-break-inside: avoid

.section
  margin: 0
  padding: 0
  border-radius: 10pt 0 0 0
  border-width: 2pt 0 0 1pt
  border-style: solid
  border-color: black
  position: relative

.section::after
    //content: ''
    position: absolute
    left: -2pt
    bottom: 0
    height: 24pt
    width: 9pt
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0))

.section > ul
  list-style-type: none
  margin: 0
  padding: 0

.section .headline
  margin-top: -9pt
  margin-bottom: 4pt
  text-align: center

.section h2
  margin: 0 10pt
  padding: 0 3pt 0 4pt
  background-color: white
  display: inline-block
  font-size: 14pt
  text-transform: uppercase
  font-family: 'Fjalla One'
  font-weight: normal
  letter-spacing: 2pt
  text-align: center
  //border: 0.2pt solid red

.itemwrapper
  padding-top: 6pt

.item
  position: relative
  margin: 0 0 10pt 0
  border: 1pt dashed black
  border-width: 1pt 0 0 0
  padding: 8pt 0 0 8pt

.item .titleline
  margin-top: -16pt
  margin-left: -4pt
  margin-bottom: 2pt
  padding: 0 0 0 0
  display: flex
  flex-direction: row
  flex-wrap: wrap
  justify-content: space-between

  .title
    padding: 0 4pt 0 2pt
    margin-left: 2pt
    background: white
    font-size: 12pt
    font-family: 'Cabin'

  .spacetime
    margin-top: 1pt
    .when::before
      content: '\f073'
      color: #357
    .where::before
      content: '\f3c5'
      color: #573
    .institution::before
      content: '\f1ad'
      color: #753
    *::before
      background: white
      line-height: 0
      margin-top: -2.5pt
      margin-right: 2.5pt
      font-style: normal

  .spacetime > *
    background: white
    display: inline-block
    padding: 0 0 0 8pt

.item .titleline.split
  .title
    //flex: 1 0 0

.item.noline .spacetime
  background: white
  flex-grow: 1

.item .description
  margin-top: 1pt
  p
    margin: 0 0 5pt 0
    padding: 0
    text-align: justify
  strong, b
    font-weight: 500
  ul
    margin-bottom: 4pt

.columns
  display: flex
  flex-direction: row
  flex-wrap: none
  margin: 8pt 0
  padding: 0
  .item
    margin: 0 0.1em 0.5em 0
    flex: 1 0 0
    ul
      padding-left: 12pt
  .item:first-child
    flex-grow: 1.6

.columns > :first-child
  border-right: 1pt dashed black

// on phones and small tablets,
// split column view and decrease padding
@media only screen and (max-width: 640px)
  .columns
    flex-direction: column
    .item
      margin-bottom: 1em
  .columns > :first-child
    border-right: none
  .page
    padding: 0 5mm
  .item .titleline
    align-items: flex-start
    flex-direction: column
  .sectionwrapper
    margin: 0 -5mm 0 0
  .item, .columns .item
    padding-right: 5mm

// strictly on small phones, remove left-side padding and border
@media only screen and (max-width: 480px)
  .sectionwrapper
    margin: 0 -5mm
  .section
    border-left-width: 0

@page
  size: A4 portrait
  -relaxed-page-width: 210mm
  -relaxed-page-height: 297mm
  min-height: 100%
  margin: 0