public/stylesheets/layout.sass

   1 html, *
   2   font-family: "Open Sans", Arial, sans-serif
   3   --back-color: #f2f2f2
   4   --a-link-color: blue
   5   --a-visited-color: blue
   6
   7 body
   8   padding: 0
   9   min-width: 320px
  10   margin-bottom: 10px
  11
  12 .container
  13   padding: 0
  14   overflow: hidden
  15
  16 .row
  17   div
  18     padding: 0
  19     .section-content
  20       *
  21         margin-left: auto
  22         margin-right: auto
  23         max-width: 767px
  24       figure.diagram-container
  25         max-width: 1000px
  26       @media screen and (max-width: 767px)
  27         max-width: 100%
  28         padding: 0 5px
  29
  30 @media screen and (max-width: 767px)
  31   .button-group
  32     flex-direction: row
  33     button:not(:first-child)
  34       border-left: 1px solid var(--button-group-border-color)
  35       border-top: 0
  36
  37 a
  38   text-decoration: underline
  39
  40 .text-center
  41   text-align: center
  42
  43 .smallpad
  44   padding: 5px
  45
  46 .emphasis
  47   font-style: italic
  48
  49 .clickable
  50   cursor: pointer
  51
  52 .clearer
  53   clear: both
  54
  55 .red
  56   color: #cc3300
  57
  58 .purple
  59   color: purple
  60
  61 .smallfont
  62   font-size: 0.8em
  63
  64 .bigfont
  65   font-size: 1.2em
  66
  67 .bold
  68   font-weight: bold
  69
  70 [type="checkbox"].modal+div .card
  71   max-width: 767px
  72   max-height: 100vh
  73 [type="checkbox"].modal+div .card.small-modal
  74   max-width: 320px
  75 [type="checkbox"].modal+div .card.big-modal
  76   max-width: 90vw