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: 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 #settingsMenu, #introductionMenu
  44   float: right
  45   @media screen and (max-width: 767px)
  46     .info-container
  47       p
  48         margin-right: 5px
  49
  50 // TODO: box-shadow or box-sizing ? https://stackoverflow.com/a/13517809
  51 .variant
  52   box-sizing: border-box
  53   border: 1px solid brown
  54   background-color: lightyellow
  55   &:hover
  56     background-color: yellow
  57   a
  58     color: #663300
  59     text-decoration: none
  60   .boxtitle
  61     font-weight: bold
  62     margin-bottom: 0
  63   .description
  64     @media screen and (max-width: 767px)
  65       margin-top: 0
  66
  67 #welcome
  68   max-width: 767px
  69   @media screen and (max-width: 767px)
  70     max-width: 100vw
  71   img
  72     width: 75%
  73     @media screen and (max-width: 767px)
  74       width: 100%
  75       max-width: 552px
  76   ul
  77     list-style-type: none
  78   // TODO: bad practice, shouldn't use table to align things...
  79   table.list-table
  80     width: 300px
  81     margin: 0 auto
  82     border: 0
  83     tbody
  84       border: 0
  85       tr
  86         border: 0
  87         margin: 0
  88         padding: 0
  89         td
  90           padding: 0
  91           text-align: left
  92           border: 0