_ Git - blog/blob - _sass/_base.scss

   1 // Body resets
   2 //
   3 // Update the foundational and global aspects of the page.
   4
   5 * {
   6   -webkit-box-sizing: border-box;
   7      -moz-box-sizing: border-box;
   8           box-sizing: border-box;
   9 }
  10
  11 html,
  12 body {
  13   margin: 0;
  14   padding: 0;
  15 }
  16
  17 html {
  18   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  19   font-size: 16px;
  20   line-height: 1.5;
  21
  22   @media (min-width: 38em) {
  23     font-size: 20px;
  24   }
  25 }
  26
  27 body {
  28   color: #515151;
  29   background-color: #fff;
  30   -webkit-text-size-adjust: 100%;
  31       -ms-text-size-adjust: 100%;
  32 }
  33
  34 // No `:visited` state is required by default (browsers will use `a`)
  35 a {
  36   color: #268bd2;
  37   text-decoration: none;
  38
  39   // `:focus` is linked to `:hover` for basic accessibility
  40   &:hover,
  41   &:focus {
  42     text-decoration: underline;
  43   }
  44
  45   strong {
  46     color: inherit;
  47   }
  48 }
  49
  50 // Images
  51 img {
  52   display: block;
  53   max-width: 100%;
  54   margin: 0 0 1rem;
  55   border-radius: 5px;
  56 }
  57
  58 // Tables
  59 table {
  60   margin-bottom: 1rem;
  61   width: 100%;
  62   border: 1px solid #e5e5e5;
  63   border-collapse: collapse;
  64 }
  65 td,
  66 th {
  67   padding: .25rem .5rem;
  68   border: 1px solid #e5e5e5;
  69 }
  70 tbody tr:nth-child(odd) td,
  71 tbody tr:nth-child(odd) th {
  72   background-color: #f9f9f9;
  73 }