public/stylesheets/index.sass

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