public/stylesheets/index.sass

   1 #header
   2   width: 100%
   3   background: linear-gradient(#e66465, #9198e5)
   4   height: 77px
   5   @media screen and (max-width: 767px)
   6     height: 43px
   7
   8 .info-container
   9   display: inline-block
  10   vertical-align: top
  11   padding: 0
  12   box-sizing: border-box
  13   p
  14     display: inline-block
  15     padding: 3px
  16     border: 1px solid black;
  17     margin: 27px 15px 5px 7px
  18     @media screen and (max-width: 767px)
  19       margin-top: 7px
  20
  21 #mainTitle
  22   font-style: italic
  23   margin-left: 10px
  24   @media screen and (max-width: 767px)
  25     margin-left: 5px
  26   float: left
  27   img
  28     display: inline-block
  29     height: 30px
  30     margin-top: 25px
  31     @media screen and (max-width: 767px)
  32       margin-top: 7px
  33   p
  34     font-weight: bold
  35     padding: 0
  36     border: none
  37     margin-top: 22px
  38     font-size: 1.5em
  39     @media screen and (max-width: 767px)
  40       margin-top: 10px
  41       font-size: 1em
  42
  43 #helpMenu
  44   float: right
  45   @media screen and (max-width: 767px)
  46     .info-container
  47       p
  48         margin-right: 5px
  49
  50 #flagMenu
  51   float: right
  52   margin-right: 10px
  53   @media screen and (max-width: 767px)
  54     margin-right: 5px
  55   img
  56     display: inline-block
  57     height: 30px
  58     padding-top: 27px
  59     @media screen and (max-width: 767px)
  60       padding-top: 8px
  61
  62 // TODO: box-shadow or box-sizing ? https://stackoverflow.com/a/13517809
  63 .variant
  64   box-sizing: border-box
  65   border: 1px solid brown
  66   background-color: lightyellow
  67   &:hover
  68     background-color: yellow
  69   a
  70     color: #663300
  71     text-decoration: none
  72   .boxtitle
  73     font-weight: bold
  74     margin-bottom: 0
  75   .description
  76     @media screen and (max-width: 767px)
  77       margin-top: 0
  78
  79 #readThis
  80   margin-top: 0
  81   color: var(--a-link-color)
  82   text-decoration: underline
  83
  84 #welcome
  85   max-width: 767px
  86   @media screen and (max-width: 767px)
  87     max-width: 100vw
  88   img
  89     width: 75%
  90     @media screen and (max-width: 767px)
  91       width: 100%
  92       max-width: 552px
  93   ul
  94     list-style-type: none
  95   // TODO: bad practice, use table to align things...
  96   table.list-table
  97     width: 300px
  98     margin: 0 auto
  99     border: 0
 100     tbody
 101       border: 0
 102       tr
 103         border: 0
 104         margin: 0
 105         padding: 0
 106         td
 107           padding: 0
 108           text-align: left
 109           border: 0
 110   #disableMsg
 111     color: darkred