client/src/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 div
  16   padding: 0
  17
  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 .right-menu
  37   float: right
  38   @media screen and (max-width: 767px)
  39     .info-container
  40       p
  41         margin-right: 5px
  42
  43 a.right-menu
  44   &:link, &:visited, &:hover
  45     color: black
  46
  47 #settings, #contactForm
  48   max-width: 767px
  49   @media screen and (max-width: 767px)
  50     max-width: 100vw
  51
  52 #emailSent
  53   color: blue
  54   display: none
  55
  56 a
  57   text-decoration: underline
  58
  59 .text-center
  60   text-align: center
  61
  62 .smallpad
  63   padding: 5px
  64
  65 .emphasis
  66   font-style: italic
  67
  68 .clickable
  69   cursor: pointer
  70
  71 .clearer
  72   clear: both
  73
  74 .red
  75   color: #cc3300
  76
  77 .purple
  78   color: purple
  79
  80 .smallfont
  81   font-size: 0.8em
  82
  83 .bigfont
  84   font-size: 1.2em
  85
  86 .bold
  87   font-weight: bold
  88
  89 [type="checkbox"].modal+div .card
  90   max-width: 767px
  91   max-height: 100vh
  92 [type="checkbox"].modal+div .card.small-modal
  93   max-width: 320px
  94 [type="checkbox"].modal+div .card.big-modal
  95   max-width: 90vw