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

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