p0c-website

Proof of concepts for fun and profit
git clone https://git.in0rdr.ch/p0c-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_typography.scss (2402B)

      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(18);
     48     font-weight: 300;
     49   }
     50   @media(min-width: 500px){
     51     &.lead {
     52       font-size: rem(22);
     53       display: table-cell;
     54       vertical-align: middle;
     55     }
     56   }
     57 }
     58 
     59 a {
     60   color: $action-color;
     61   text-decoration: none;
     62   transition: color $base-duration $base-timing;
     63 
     64   &:active,
     65   &:focus,
     66   &:hover {
     67     color: shade($action-color, 25%);
     68   }
     69 }
     70 
     71 hr {
     72   border-bottom: $base-border;
     73   border-left: 0;
     74   border-right: 0;
     75   border-top: 0;
     76   margin: $base-spacing 0;
     77 }
     78 
     79 img,
     80 picture {
     81   margin: 0;
     82   max-width: 100%;
     83   &.mascot {
     84     display: block;
     85     width: 35%;
     86     margin: 0 auto 8% auto;
     87   }
     88   @media(min-width: 500px){
     89     &.mascot {
     90       width: 80%;
     91       display: table-cell;
     92     }
     93   }
     94 }
     95 
     96 blockquote {
     97   padding: $base-spacing 0 $base-spacing $base-spacing;
     98   margin: $base-spacing 0;
     99   color: $dark-gray-color;
    100   line-height: 1.8;
    101   border-left: $small-spacing solid $light-gray-color;
    102   background-color: lighten($light-gray-color, 15%);
    103   p {
    104     margin: 0;
    105   }
    106 }
    107 
    108 code {
    109   background: none;
    110   border-radius: 0;
    111   border: none;
    112   font-family: "SFMono-Regular",Menlo,Consolas,"Inconsolata",monospace;
    113   font-size: 1em;
    114   margin: 0;
    115   padding: 0 5px;
    116   background-color: lighten($light-gray-color, 13%);
    117 }
    118 
    119 pre {
    120   -webkit-overflow-scrolling: touch;
    121   font-family: "SFMono-Regular",Menlo,Consolas,"Inconsolata",monospace;
    122   font-size: 1em;
    123   margin: 0;
    124   padding: 5px 10px !important;
    125   overflow: auto;
    126   max-height: 60em;
    127   white-space: pre;
    128   border: 1px solid $light-gray-color;
    129 
    130   code {
    131     line-height: 1.75em;
    132     padding: 0 !important;
    133   }
    134 }
    135 
    136 strong {
    137   font-weight: bold;
    138 }
    139 
    140 em {
    141   font-style: italic;
    142 }
    143 
    144 ul,
    145 ol,
    146 dl {
    147     margin-top: 0;
    148     margin-left: 1.2em;
    149     margin-bottom: 1rem;
    150     list-style-type: square;
    151     list-style-position: outside;
    152     list-style-image: none;
    153 }