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
  11 .container
  12   padding: 0
  13   overflow: hidden
  14
  15 .row
  16   div
  17     padding: 0
  18     .section-content
  19       *
  20         margin-left: auto
  21         margin-right: auto
  22         max-width: 767px
  23       figure.diagram-container
  24         max-width: 1000px
  25       @media screen and (max-width: 767px)
  26         max-width: 100%
  27         padding: 0 5px
  28
  29 @media screen and (max-width: 767px)
  30   .button-group
  31     flex-direction: row
  32     button:not(:first-child)
  33       border-left: 1px solid var(--button-group-border-color)
  34       border-top: 0
  35
  36 #settings, #contactForm
  37   max-width: 767px
  38   @media screen and (max-width: 767px)
  39     max-width: 100vw
  40
  41 #emailSent
  42   color: blue
  43   display: none
  44
  45 footer
  46   height: 77px
  47   background-color: #000033
  48   div
  49     line-height: 77px
  50     a
  51       margin: 0 10px 0 0
  52       display: inline-block
  53       &:visited, &:link
  54         color: white
  55     p
  56       margin: 0 0 0 10px
  57       display: inline-block
  58       color: white
  59       text-decoration: underline
  60   @media screen and (max-width: 767px)
  61     height: 43px
  62     div
  63       line-height: 43px
  64
  65 a
  66   text-decoration: underline
  67
  68 .text-center
  69   text-align: center
  70
  71 .smallpad
  72   padding: 5px
  73
  74 .emphasis
  75   font-style: italic
  76
  77 .clickable
  78   cursor: pointer
  79
  80 .clearer
  81   clear: both
  82
  83 .red
  84   color: #cc3300
  85
  86 .purple
  87   color: purple
  88
  89 .smallfont
  90   font-size: 0.8em
  91
  92 .bigfont
  93   font-size: 1.2em
  94
  95 .bold
  96   font-weight: bold
  97
  98 [type="checkbox"].modal+div .card
  99   max-width: 767px
 100   max-height: 100vh
 101 [type="checkbox"].modal+div .card.small-modal
 102   max-width: 320px
 103 [type="checkbox"].modal+div .card.big-modal
 104   max-width: 90vw