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: flex
  15     padding: 3px
  16     border: 1px solid black;
  17     margin: 25px 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: 21px
  38     font-size: 1.5em
  39     @media screen and (max-width: 767px)
  40       margin-top: 10px
  41       font-size: 1em
  42
  43 #introductionMenu, #userMenu
  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 #welcome
  80   max-width: 767px
  81   @media screen and (max-width: 767px)
  82     max-width: 100vw
  83   img
  84     width: 75%
  85     @media screen and (max-width: 767px)
  86       width: 100%
  87       max-width: 552px
  88   ul
  89     list-style-type: none
  90   // TODO: bad practice, shouldn't use table to align things...
  91   table.list-table
  92     width: 300px
  93     margin: 0 auto
  94     border: 0
  95     tbody
  96       border: 0
  97       tr
  98         border: 0
  99         margin: 0
 100         padding: 0
 101         td
 102           padding: 0
 103           text-align: left
 104           border: 0