public/stylesheets/layout.sass

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