diary-website

Website for diary
git clone https://git.in0rdr.ch/diary-website.git
Log | Files | Refs | Pull requests | README | LICENSE

_typography.scss (2435B)

      1 body {
      2   color: $base-font-color;
      3   font-family: $base-font-family;
      4   //font-feature-settings: "kern", "liga", "pnum";
      5   font-size: $base-font-size;
      6   line-height: $base-line-height;
      7 }
      8 
      9 h1,
     10 h2,
     11 h3,
     12 h4,
     13 h5,
     14 h6 {
     15   font-family: $heading-font-family;
     16   font-size: $base-font-size;
     17   line-height: $heading-line-height;
     18   margin: $small-spacing 0 $small-spacing 0;
     19   font-weight: 700;
     20 }
     21 
     22 h1 {
     23   font-size: rem(30);
     24 }
     25 
     26 h2 {
     27   font-size: rem(26);
     28 }
     29 
     30 h3 {
     31   font-size: rem(24);
     32 }
     33 
     34 h4 {
     35   font-size: rem(20);
     36 }
     37 
     38 h5,
     39 h6 {
     40   font-size: rem(16);
     41 }
     42 
     43 p {
     44   margin: 0 0 $small-spacing;
     45 
     46   &.lead {
     47     font-size: rem(22);
     48     font-weight: 300;
     49   }
     50   @media(min-width: 500px){
     51     &.lead {
     52       display: table-cell;
     53       vertical-align: middle;
     54     }
     55   }
     56 }
     57 
     58 a {
     59   color: $action-color;
     60   text-decoration: none;
     61   transition: color $base-duration $base-timing;
     62 
     63   &:active,
     64   &:focus,
     65   &:hover {
     66     color: shade($action-color, 25%);
     67   }
     68 }
     69 
     70 hr {
     71   border-bottom: $base-border;
     72   border-left: 0;
     73   border-right: 0;
     74   border-top: 0;
     75   margin: $base-spacing 0;
     76 }
     77 
     78 img,
     79 picture {
     80   margin: 0;
     81   max-width: 100%;
     82   &.mascot {
     83     display: block;
     84     width: 35%;
     85     margin: 0 auto 8% auto;
     86   }
     87   @media(min-width: 500px){
     88     &.mascot {
     89       width: 80%;
     90       display: table-cell;
     91     }
     92   }
     93 }
     94 
     95 blockquote {
     96   padding: $base-spacing 0 $base-spacing $base-spacing;
     97   margin: $base-spacing 0;
     98   color: $dark-gray-color;
     99   line-height: 1.8;
    100   border-left: $small-spacing solid $light-gray-color;
    101   background-color: lighten($light-gray-color, 15%);
    102   p {
    103     margin: 0;
    104   }
    105 }
    106 
    107 code {
    108   background: none;
    109   border-radius: 0;
    110   border: none;
    111   font-family: "SFMono-Regular",Menlo,Consolas,"Inconsolata",monospace;
    112   font-size: 1em;
    113   margin: 0;
    114   padding: 0 5px;
    115   background-color: lighten($light-gray-color, 13%);
    116 }
    117 
    118 pre {
    119   -webkit-overflow-scrolling: touch;
    120   font-family: "SFMono-Regular",Menlo,Consolas,"Inconsolata",monospace;
    121   font-size: 1em;
    122   margin: 0;
    123   padding: 5px 10px !important;
    124   overflow: auto;
    125   max-height: 60em;
    126   white-space: pre;
    127   border: 1px solid $light-gray-color;
    128 
    129   code {
    130     line-height: 1.75em;
    131     padding: 0 !important;
    132   }
    133 }
    134 
    135 strong {
    136   font-weight: bold;
    137 }
    138 
    139 em {
    140   font-style: italic;
    141 }
    142 
    143 ul,
    144 ol,
    145 dl {
    146     margin-top: 0;
    147     margin-left: 1.2em;
    148     margin-bottom: 1rem;
    149     list-style-type: square;
    150     list-style-position: outside;
    151     list-style-image: none;
    152 }
    153 
    154 ol {
    155   @extend %default-ul;
    156   list-style-type: decimal;
    157 }