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