janispagel.de

Source code for https://janispagel.de
git clone git://git.janispagel.de/janispagel.de.git
Log | Files | Refs | README | LICENSE

_layout.scss (5367B)


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