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