_scss/minima/_layout.scss

   1 /**
   2  * Site header
   3  */
   4 .site-header {
   5   border-top: 4px solid $text-color;
   6   border-bottom: 1px solid $grey-color-light;
   7   min-height: $spacing-unit * 1.865;
   8
   9   // Positioning context for the mobile navigation icon
  10   position: relative;
  11 }
  12
  13 .site-logo {
  14   margin: 0;
  15 }
  16
  17 .site-title {
  18   @include relative-font-size(1.625);
  19   font-weight: 300;
  20   line-height: $base-line-height * $base-font-size * 2.25;
  21   letter-spacing: -1px;
  22   margin-bottom: 0;
  23   float: left;
  24
  25   &,
  26   &:visited {
  27     color: $grey-color-dark;
  28   }
  29 }
  30
  31 .site-nav {
  32   float: right;
  33   line-height: $base-line-height * $base-font-size * 2.25;
  34
  35   .nav-trigger {
  36       display: none;
  37   }
  38
  39   .menu-icon {
  40     display: none;
  41   }
  42
  43   .trigger {
  44     margin-top: 10px;
  45   }
  46
  47   .page-link {
  48     display: block;
  49     padding: 5px 10px;
  50     color: $text-color;
  51     line-height: $base-line-height;
  52   }
  53
  54   @include media-query($on-palm) {
  55     position: absolute;
  56     top: 9px;
  57     right: calc($spacing-unit / 2);
  58     background-color: $background-color;
  59     border: 1px solid $grey-color-light;
  60     border-radius: 5px;
  61     text-align: right;
  62
  63     label[for="nav-trigger"] {
  64       display: block;
  65       float: right;
  66       width: 36px;
  67       height: 36px;
  68       z-index: 2;
  69       cursor: pointer;
  70     }
  71
  72     .menu-icon {
  73       display: block;
  74       float: right;
  75       width: 36px;
  76       height: 26px;
  77       line-height: 0;
  78       padding-top: 10px;
  79       text-align: center;
  80
  81       > svg {
  82         fill: $grey-color-dark;
  83       }
  84     }
  85
  86     input ~ .trigger {
  87       clear: both;
  88       display: none;
  89     }
  90
  91     input:checked ~ .trigger {
  92       display: block;
  93       padding-bottom: 5px;
  94     }
  95
  96     .trigger {
  97       margin-top: 0;
  98     }
  99
 100     .page-link {
 101       margin-left: 20px;
 102     }
 103   }
 104 }
 105
 106
 107
 108 /**
 109  * Site footer
 110  */
 111 .site-footer {
 112   border-top: 1px solid $grey-color-light;
 113   padding: $spacing-unit 0;
 114 }
 115
 116 .footer-heading {
 117   @include relative-font-size(1.125);
 118   margin-bottom: calc($spacing-unit / 2);
 119 }
 120
 121 .contact-list,
 122 .social-media-list {
 123   list-style: none;
 124   margin-left: 0;
 125 }
 126
 127 .footer-col-wrapper {
 128   @include relative-font-size(0.9375);
 129   color: $grey-color;
 130   margin-left: calc(-1 * $spacing-unit / 2);
 131   @extend %clearfix;
 132 }
 133
 134 .footer-col {
 135   float: left;
 136   margin-bottom: calc($spacing-unit / 2);
 137   padding-left: calc($spacing-unit / 2);
 138 }
 139
 140 .footer-col-1 {
 141   width:    -moz-calc(35% - (#{$spacing-unit} / 2));
 142   width: -webkit-calc(35% - (#{$spacing-unit} / 2));
 143   width:         calc(35% - (#{$spacing-unit} / 2));
 144 }
 145
 146 .footer-col-2 {
 147   width:    -moz-calc(20% - (#{$spacing-unit} / 2));
 148   width: -webkit-calc(20% - (#{$spacing-unit} / 2));
 149   width:         calc(20% - (#{$spacing-unit} / 2));
 150 }
 151
 152 .footer-col-3 {
 153   width:    -moz-calc(45% - (#{$spacing-unit} / 2));
 154   width: -webkit-calc(45% - (#{$spacing-unit} / 2));
 155   width:         calc(45% - (#{$spacing-unit} / 2));
 156 }
 157
 158 @include media-query($on-laptop) {
 159   .footer-col-1,
 160   .footer-col-2 {
 161     width:    -moz-calc(50% - (#{$spacing-unit} / 2));
 162     width: -webkit-calc(50% - (#{$spacing-unit} / 2));
 163     width:         calc(50% - (#{$spacing-unit} / 2));
 164   }
 165
 166   .footer-col-3 {
 167     width:    -moz-calc(100% - (#{$spacing-unit} / 2));
 168     width: -webkit-calc(100% - (#{$spacing-unit} / 2));
 169     width:         calc(100% - (#{$spacing-unit} / 2));
 170   }
 171 }
 172
 173 @include media-query($on-palm) {
 174   .footer-col {
 175     float: none;
 176     width: -webkit-calc(100% - (#{$spacing-unit} / 2));
 177     width:         calc(100% - (#{$spacing-unit} / 2));
 178   }
 179 }
 180
 181
 182
 183 /**
 184  * Page content
 185  */
 186 .page-content {
 187   padding: $spacing-unit 0;
 188   flex: 1;
 189 }
 190
 191 .page-heading {
 192   @include relative-font-size(2);
 193 }
 194
 195 .post-list-heading {
 196   @include relative-font-size(1.75);
 197 }
 198
 199 .post-list {
 200   margin-left: 0;
 201   list-style: none;
 202
 203   > li {
 204     margin-bottom: $spacing-unit;
 205   }
 206 }
 207
 208 .post-meta {
 209   margin-top: calc(-1 * $spacing-unit / 4);
 210   margin-bottom: calc($spacing-unit / 5);
 211   font-size: $small-font-size;
 212   color: $grey-color;
 213 }
 214 h2 ~ .post-meta {
 215   margin-top: 0;
 216 }
 217
 218 .post-link {
 219   display: block;
 220   @include relative-font-size(1.5);
 221 }
 222
 223
 224
 225 /**
 226  * Posts
 227  */
 228 .post-header {
 229   margin-bottom: $spacing-unit;
 230 }
 231
 232 .post-title {
 233   @include relative-font-size(2.625);
 234   letter-spacing: -1px;
 235   line-height: 1;
 236
 237   @include media-query($on-laptop) {
 238     @include relative-font-size(2.25);
 239   }
 240 }
 241
 242 .post-image {
 243   text-align: center;
 244
 245   img {
 246     display: inline;
 247   }
 248 }
 249
 250 .post-content {
 251   margin-bottom: $spacing-unit;
 252
 253   h2 {
 254     @include relative-font-size(2);
 255
 256     @include media-query($on-laptop) {
 257       @include relative-font-size(1.75);
 258     }
 259   }
 260
 261   h3 {
 262     @include relative-font-size(1.625);
 263
 264     @include media-query($on-laptop) {
 265       @include relative-font-size(1.375);
 266     }
 267   }
 268
 269   h4 {
 270     @include relative-font-size(1.25);
 271
 272     @include media-query($on-laptop) {
 273       @include relative-font-size(1.125);
 274     }
 275   }
 276 }