_scss/base.scss

   1 // Define variables
   2
   3 $font-family: cursive;
   4 $font-family-mono: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace;
   5 $font-family-sans: sans-serif;
   6 $base-font-pct: 1.35*100%;
   7 $base-font-em:  1.35*1em;
   8 $base-font-rel: 1.35*1vw;
   9
  10
  11 /*** Reset ***/
  12
  13 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  14     margin: 0;
  15     padding: 0;
  16     border: 0;
  17     font: inherit;
  18     vertical-align: baseline;
  19     -moz-box-sizing: border-box;
  20     -webkit-box-sizing: border-box;
  21     box-sizing: border-box;
  22 }
  23
  24 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  25     display: block;
  26 }
  27
  28 body {
  29     line-height: 1;
  30 }
  31
  32 ol, ul {
  33     list-style: disc;
  34 }
  35
  36 blockquote, q {
  37     quotes: none;
  38
  39     &:before, &:after {
  40         content: '';
  41         content: none;
  42     }
  43 }
  44
  45 table {
  46     border {
  47         collapse: collapse;
  48         spacing: 0;
  49     }
  50 }
  51
  52 /*** Basics ***/
  53
  54 body {
  55     font: {
  56         size: $base-font-pct;
  57         size: $base-font-rel;
  58         family: $font-family;
  59     }
  60     line-height: 1.7;
  61 }
  62
  63 a {
  64     text-decoration: none;
  65     border-bottom: 1px solid #839496;
  66     padding-bottom: 2px;
  67
  68     &:active, &:visited {
  69         text-decoration: none;
  70         border-bottom: 1px solid #839496;
  71         padding-bottom: 2px;
  72     }
  73
  74     &:hover {
  75         background-color: #839496;
  76         color: #000000;
  77     }
  78 }
  79
  80 p, pre {
  81     margin-bottom: 1vh;
  82 }
  83
  84 ol, ul {
  85     padding: 0 0 18px 30px;
  86     padding: 0 0 1.5vw 1.7vmax;
  87
  88     li {
  89         margin: {
  90             top: 10px;
  91             bottom: 10px;
  92             top: 1vw;
  93             bottom: 1vw;
  94         }
  95     }
  96 }
  97
  98 em, i {
  99     font-style: italic;
 100 }
 101
 102 strong, b {
 103     font-weight: bold;
 104 }
 105
 106 small {
 107     font: {
 108         size: 0.85 * $base-font-em;
 109         size: $base-font-rel;
 110     }
 111 }
 112
 113 sup {
 114     @extend small;
 115     vertical-align: super;
 116 }
 117
 118 sub {
 119     @extend small;
 120     vertical-align: sub;
 121 }
 122
 123 blockquote {
 124     margin: 22px 22px;
 125     padding: 0 20px;
 126     border-left: 2px solid #000000;
 127     font: {
 128         size: 1.2 * $base-font-em;
 129         size: 1.2vw;
 130         style: italic;
 131     }
 132     line-height: 1.5 * $base-font-em;
 133 }
 134
 135 acronym, abbr {
 136     cursor: help;
 137     letter-spacing: 1px;
 138     border-bottom: 1px dashed;
 139 }
 140
 141 @each $hlev, $fspx, $fsrel in (h1, 17, 4.0),
 142                               (h2, 15, 3.0),
 143                               (h3, 15, 2.0) {
 144     #{$hlev} {
 145         font: {
 146             size: #{$fspx}px;
 147             size: #{$fsrel}vw;
 148         }
 149         margin: 0 0 10px 0;
 150     }
 151 }
 152
 153 /*** Useful Classes ***/
 154
 155 .clear {
 156   clear: both;
 157 }
 158
 159
 160 .float-left {
 161     float: left;
 162 }
 163
 164 .float-right {
 165     float: right;
 166 }
 167
 168 .text-left {
 169   text-align: left;
 170 }
 171
 172 .text-right {
 173   text-align: right;
 174 }
 175
 176 .text-center {
 177   text-align: center;
 178 }
 179
 180 .text-justify {
 181   text-align: justify;
 182 }
 183
 184 .img-left {
 185   float: left;
 186   margin: 4px 10px 4px 0;
 187 }
 188
 189 .img-right {
 190   float: right;
 191   margin: 4px 0 4px 10px;
 192 }
 193
 194 .img-middle {
 195   vertical-align: middle;
 196 }
 197
 198 .nopadding {
 199   padding: 0;
 200 }
 201
 202 .nounderline {
 203   text-decoration: underline;
 204 }
 205
 206 /*** Structure ***/
 207
 208 #page {
 209   margin-left: 10%;
 210   width: 100%;
 211 }
 212
 213 #header {
 214   width: 100%;
 215   position: fixed;
 216   top: 0;
 217   bottom: auto;
 218   text-align: center;
 219   z-index: 2;
 220
 221   h1 {
 222       font: {
 223           size: 32px;
 224           size: 4.2vw;
 225       }
 226       margin-bottom: 4px;
 227
 228       a {
 229           border: none;
 230       }
 231   }
 232   p {
 233       font: {
 234           size: 1.5*$base-font-pct;
 235           size: 1.5*$base-font-rel;
 236       }
 237   }
 238 }
 239
 240 #footer {
 241   width: 75%;
 242   margin: 50px auto 20px auto;
 243   padding-top: 10px;
 244   border-top: 1px solid #073642;
 245 }
 246
 247 #content {
 248   width: 75%;
 249   margin: {
 250       top: 11vw;
 251       bottom: auto;
 252       left: 2vmax;
 253       right: auto;
 254   }
 255 }
 256
 257 #sidebar {
 258   position: fixed;
 259   text-align: right;
 260   margin-top: 5vmin;
 261   width: 20%;
 262   left: -10%;
 263
 264   li {
 265     list-style: none;
 266     margin: 2px 0;
 267   }
 268
 269   a {
 270       border: none;
 271       font: {
 272           family: $font-family-sans;
 273           size: 1.2 * $base-font-em;
 274           size: 1.2vw;
 275       }
 276     padding: 2px 4px;
 277   }
 278 }
 279
 280 /*** Posts ***/
 281
 282 article {
 283   margin-bottom: 40px;
 284
 285   h1 {
 286       font: {
 287           size: 17px;
 288           size: 3.0vw;
 289       }
 290       margin: 0 0 10px 0;
 291
 292       a {
 293           border: none;
 294
 295           &.anchor {
 296               margin-left: 8px;
 297           }
 298       }
 299   }
 300
 301   img {
 302     display: block;
 303     text-align: center;
 304     margin: 0 auto 1em auto;
 305   }
 306
 307   .meta {
 308       font: {
 309           size: 0.85 * $base-font-em;
 310           size: 0.98vw;
 311           style: italic;
 312       }
 313   }
 314 }
 315
 316 img {
 317   &.left {
 318     float: left;
 319     margin: 0 1em 1em 0;
 320   }
 321
 322   &.right {
 323     float: right;
 324     margin: 0 0 1em 1 * $base-font-em;
 325   }
 326
 327   &.center {
 328     display: block;
 329     text-align: center;
 330     margin: 0 auto 1em auto;
 331   }
 332 }
 333
 334 /*** Pagination ***/
 335
 336 .postnavigation {
 337   padding-top: 10px;
 338   text-align: center;
 339   width: none;
 340
 341   .left {
 342     float: left;
 343   }
 344
 345   .right {
 346     float: right;
 347   }
 348 }
 349
 350 /*** Media Queries ***/
 351 @media all and (max-width: 870px) {
 352   #page, #header, #content, #footer {
 353     position: static;
 354     float: none;
 355     margin-left: initial;
 356     width: 100%;
 357   }
 358
 359   #page, #content, #header, #footer {
 360     width: 100%;
 361   }
 362
 363   #content {
 364     margin-top: initial;
 365   }
 366
 367   #sidebar {
 368     position: relative;
 369     text-align: left;
 370     width: 100%;
 371     left: 0;
 372     margin-top: 0;
 373
 374     float: none;
 375
 376     nav select.mnav {
 377       display: block;
 378       margin-bottom: 15px;
 379     }
 380   }
 381 }