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