git.piffa.net Git - aerei_site/blob - _sass/_base.scss

   1 /**
   2  * Reset some basic elements
   3  */
   4 body, h1, h2, h3, h4, h5, h6,
   5 p, blockquote, pre, hr,
   6 dl, dd, ol, ul, figure {
   7     margin: 0;
   8     padding: 0;
   9 }
  10
  11
  12
  13 /**
  14  * Basic styling
  15  */
  16 body {
  17     font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  18     color: $text-color;
  19     background-color: $background-color;
  20     -webkit-text-size-adjust: 100%;
  21     -webkit-font-feature-settings: "kern" 1;
  22     -moz-font-feature-settings: "kern" 1;
  23     -o-font-feature-settings: "kern" 1;
  24     font-feature-settings: "kern" 1;
  25     font-kerning: normal;
  26 }
  27
  28
  29
  30 /**
  31  * Set `margin-bottom` to maintain vertical rhythm
  32  */
  33 h1, h2, h3, h4, h5, h6,
  34 p, blockquote, pre,
  35 ul, ol, dl, figure,
  36 %vertical-rhythm {
  37     margin-bottom: $spacing-unit / 2;
  38 }
  39
  40
  41
  42 /**
  43  * Images
  44  */
  45 img {
  46     max-width: 100%;
  47     vertical-align: middle;
  48 }
  49
  50
  51
  52 /**
  53  * Figures
  54  */
  55 figure > img {
  56     display: block;
  57 }
  58
  59 figcaption {
  60     font-size: $small-font-size;
  61 }
  62
  63
  64
  65 /**
  66  * Lists
  67  */
  68 ul, ol {
  69     margin-left: $spacing-unit;
  70 }
  71
  72 li {
  73     > ul,
  74     > ol {
  75          margin-bottom: 0;
  76     }
  77 }
  78
  79
  80
  81 /**
  82  * Headings
  83  */
  84 h1, h2, h3, h4, h5, h6 {
  85     font-weight: $base-font-weight;
  86 }
  87
  88
  89
  90 /**
  91  * Links
  92  */
  93 a {
  94     color: $brand-color;
  95     text-decoration: none;
  96
  97     &:visited {
  98         color: darken($brand-color, 15%);
  99     }
 100
 101     &:hover {
 102         color: $text-color;
 103         text-decoration: underline;
 104     }
 105 }
 106
 107
 108
 109 /**
 110  * Blockquotes
 111  */
 112 blockquote {
 113     color: $grey-color;
 114     border-left: 4px solid $grey-color-light;
 115     padding-left: $spacing-unit / 2;
 116     font-size: 18px;
 117     letter-spacing: -1px;
 118     font-style: italic;
 119
 120     > :last-child {
 121         margin-bottom: 0;
 122     }
 123 }
 124
 125
 126
 127 /**
 128  * Code formatting
 129  */
 130 pre,
 131 code {
 132     font-size: 15px;
 133     border: 1px solid $grey-color-light;
 134     border-radius: 3px;
 135     background-color: #eef;
 136 }
 137
 138 code {
 139     padding: 1px 5px;
 140 }
 141
 142 pre {
 143     padding: 8px 12px;
 144     overflow-x: auto;
 145
 146     > code {
 147         border: 0;
 148         padding-right: 0;
 149         padding-left: 0;
 150     }
 151 }
 152
 153
 154
 155 /**
 156  * Wrapper
 157  */
 158 .wrapper {
 159     max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
 160     max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
 161     margin-right: auto;
 162     margin-left: auto;
 163     padding-right: $spacing-unit;
 164     padding-left: $spacing-unit;
 165     @extend %clearfix;
 166
 167     @include media-query($on-laptop) {
 168         max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
 169         max-width:         calc(#{$content-width} - (#{$spacing-unit}));
 170         padding-right: $spacing-unit / 2;
 171         padding-left: $spacing-unit / 2;
 172     }
 173 }
 174
 175
 176
 177 /**
 178  * Clearfix
 179  */
 180 %clearfix {
 181
 182     &:after {
 183         content: "";
 184         display: table;
 185         clear: both;
 186     }
 187 }
 188
 189
 190
 191 /**
 192  * Icons
 193  */
 194 .icon {
 195
 196     > svg {
 197         display: inline-block;
 198         width: 16px;
 199         height: 16px;
 200         vertical-align: middle;
 201
 202         path {
 203             fill: $grey-color;
 204         }
 205     }
 206 }