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