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