janispagel.de

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

_base.scss (3975B)


      1 html {
      2   font-size: $base-font-size;
      3 }
      4 /**
      5  * Reset some basic elements
      6  */
      7 body, h1, h2, h3, h4, h5, h6,
      8 p, blockquote, pre, hr,
      9 dl, dd, ol, ul, figure {
     10   margin: 0;
     11   padding: 0;
     12 
     13 }
     14 /**
     15  * Basic styling
     16  */
     17 body {
     18   font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
     19   color: $text-color;
     20   background-color: $background-color;
     21   -webkit-text-size-adjust: 100%;
     22   -webkit-font-feature-settings: "kern" 1;
     23      -moz-font-feature-settings: "kern" 1;
     24        -o-font-feature-settings: "kern" 1;
     25           font-feature-settings: "kern" 1;
     26   font-kerning: normal;
     27   display: flex;
     28   min-height: 100vh;
     29   flex-direction: column;
     30   overflow-wrap: break-word;
     31 }
     32 /**
     33  * Set `margin-bottom` to maintain vertical rhythm
     34  */
     35 h1, h2, h3, h4, h5, h6,
     36 p, blockquote, pre,
     37 ul, ol, dl, figure,
     38 %vertical-rhythm {
     39   margin-bottom: $spacing-unit / 2;
     40 }
     41 hr {
     42   margin-top: $spacing-unit;
     43   margin-bottom: $spacing-unit;
     44 }
     45 /**
     46  * `main` element
     47  */
     48 main {
     49   display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
     50 }
     51 /**
     52  * Images
     53  */
     54 img {
     55   max-width: 100%;
     56   vertical-align: middle;
     57 }
     58 /**
     59  * Figures
     60  */
     61 figure > img {
     62   display: block;
     63 }
     64 
     65 figcaption {
     66   font-size: $small-font-size;
     67 }
     68 /**
     69  * Lists
     70  */
     71 ul, ol {
     72   margin-left: $spacing-unit;
     73 }
     74 
     75 li {
     76   > ul,
     77   > ol {
     78     margin-bottom: 0;
     79   }
     80 }
     81 /**
     82  * Headings
     83  */
     84 h1, h2, h3, h4, h5, h6 {
     85   font-weight: $base-font-weight;
     86 }
     87 /**
     88  * Links
     89  */
     90 a {
     91   color: $link-base-color;
     92   text-decoration: none;
     93 
     94   &:visited {
     95     color: $link-visited-color;
     96   }
     97 
     98   &:hover {
     99     color: $link-hover-color;
    100     text-decoration: underline;
    101   }
    102 
    103   .social-media-list &:hover {
    104     text-decoration: none;
    105 
    106     .username {
    107       text-decoration: underline;
    108     }
    109   }
    110 }
    111 /**
    112  * Blockquotes
    113  */
    114 blockquote {
    115   color: $brand-color;
    116   border-left: 4px solid $border-color-01;
    117   padding-left: $spacing-unit / 2;
    118   @include relative-font-size(1.125);
    119   font-style: italic;
    120 
    121   > :last-child {
    122     margin-bottom: 0;
    123   }
    124 
    125   i, em {
    126     font-style: normal;
    127   }
    128 }
    129 /**
    130  * Code formatting
    131  */
    132 pre,
    133 code {
    134   font-family: $code-font-family;
    135   font-size: 0.9375em;
    136   border: 1px solid $border-color-01;
    137   border-radius: 3px;
    138   background-color: $code-background-color;
    139 }
    140 code {
    141   padding: 1px 5px;
    142 }
    143 pre {
    144   padding: 8px 12px;
    145   overflow-x: auto;
    146   > code {
    147     border: 0;
    148     padding-right: 0;
    149     padding-left: 0;
    150   }
    151 }
    152 .highlight {
    153   border-radius: 3px;
    154   background: $code-background-color;
    155   @extend %vertical-rhythm;
    156 
    157   .highlighter-rouge & {
    158     background: $code-background-color;
    159   }
    160 }
    161 /**
    162  * Wrapper
    163  */
    164 .wrapper {
    165   max-width: calc(#{$content-width} - (#{$spacing-unit}));
    166   margin-right: auto;
    167   margin-left: auto;
    168   padding-right: $spacing-unit / 2;
    169   padding-left: $spacing-unit / 2;
    170   @extend %clearfix;
    171 
    172   @media screen and (min-width: $on-large) {
    173     max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
    174     padding-right: $spacing-unit;
    175     padding-left: $spacing-unit;
    176   }
    177 }
    178 /**
    179  * Clearfix
    180  */
    181 %clearfix:after {
    182   content: "";
    183   display: table;
    184   clear: both;
    185 }
    186 /**
    187  * Icons
    188  */
    189 .orange {
    190   color: #f66a0a;
    191 }
    192 .grey {
    193   color: #828282;
    194 }
    195 .svg-icon {
    196   width: 16px;
    197   height: 16px;
    198   display: inline-block;
    199   fill: currentColor;
    200   padding: 5px 3px 2px 5px;
    201   vertical-align: text-bottom;
    202 }
    203 /**
    204  * Tables
    205  */
    206 table {
    207   margin-bottom: $spacing-unit;
    208   width: 100%;
    209   text-align: $table-text-align;
    210   color: $table-text-color;
    211   border-collapse: collapse;
    212   border: 1px solid $table-border-color;
    213   tr {
    214     &:nth-child(even) {
    215       background-color: $table-zebra-color;
    216     }
    217   }
    218   th, td {
    219     padding: ($spacing-unit / 3) ($spacing-unit / 2);
    220   }
    221   th {
    222     background-color: $table-header-bg-color;
    223     border: 1px solid $table-header-border;
    224   }
    225   td {
    226     border: 1px solid $table-border-color;
    227   }
    228   @include media-query($on-laptop) {
    229     display: block;
    230     overflow-x: auto;
    231     -webkit-overflow-scrolling: touch;
    232             -ms-overflow-style: -ms-autohiding-scrollbar;
    233   }
    234 }