assets/main/sass/base/_typography.scss

   1 ///
   2 /// Massively by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Type */
   8
   9         html {
  10                 font-size: 16pt;
  11
  12                 @include breakpoint('<=xlarge') {
  13                         font-size: 12pt;
  14                 }
  15
  16                 @include breakpoint('<=large') {
  17                         font-size: 11pt;
  18                 }
  19
  20                 @include breakpoint('<=xxsmall') {
  21                         font-size: 10pt;
  22                 }
  23         }
  24
  25         body {
  26                 color: _palette(fg);
  27         }
  28
  29         body, input, select, textarea {
  30                 font-family: _font(family);
  31                 font-weight: _font(weight);
  32                 font-size: 1rem;
  33                 line-height: 2.375;
  34         }
  35
  36         a {
  37                 @include vendor('transition', (
  38                         'color #{_duration(transition)} ease-in-out',
  39                         'background-color #{_duration(transition)} ease-in-out',
  40                         'border-color #{_duration(transition)} ease-in-out',
  41                         'box-shadow #{_duration(transition)} ease-in-out'
  42                 ));
  43                 border-bottom: dotted 1px;
  44                 text-decoration: none;
  45
  46                 &:hover {
  47                         border-bottom-color: transparent;
  48                 }
  49         }
  50
  51         strong, b {
  52                 font-weight: _font(weight-bold);
  53         }
  54
  55         em, i {
  56                 font-style: italic;
  57         }
  58
  59         p {
  60                 text-align: justify;
  61                 margin: 0 0 _size(element-margin) 0;
  62         }
  63
  64         h1, h2, h3, h4, h5, h6 {
  65                 font-family: _font(family-heading);
  66                 font-weight: _font(weight-heading);
  67                 line-height: 1.5;
  68                 letter-spacing: 0.075em;
  69                 text-transform: uppercase;
  70                 margin: 0 0 (_size(element-margin) * 0.5) 0;
  71
  72                 a {
  73                         border-bottom: 0;
  74                         color: inherit;
  75                         text-decoration: none;
  76                 }
  77         }
  78
  79         h1 {
  80                 font-size: 4rem;
  81                 line-height: 1.1;
  82                 margin: 0 0 _size(element-margin) 0;
  83         }
  84
  85         h2 {
  86                 font-size: 1.75rem;
  87                 line-height: 1.3;
  88                 margin: 0 0 (_size(element-margin) * 0.75) 0;
  89         }
  90
  91         h3 {
  92                 font-size: 1.25rem;
  93                 margin: 0 0 (_size(element-margin) * 0.75) 0;
  94         }
  95
  96         h4 {
  97                 font-size: 1rem;
  98         }
  99
 100         h5 {
 101                 font-size: 0.9rem;
 102         }
 103
 104         h6 {
 105                 font-size: 0.8rem;
 106         }
 107
 108         sub {
 109                 font-size: 0.8rem;
 110                 position: relative;
 111                 top: 0.5rem;
 112         }
 113
 114         sup {
 115                 font-size: 0.8rem;
 116                 position: relative;
 117                 top: -0.5rem;
 118         }
 119
 120         blockquote {
 121                 border-left: solid 4px;
 122                 font-style: italic;
 123                 margin: 0 0 _size(element-margin) 0;
 124                 padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
 125         }
 126
 127         code {
 128                 border-radius: _size(border-radius);
 129                 border: solid 2px;
 130                 font-family: _font(family-fixed);
 131                 font-size: 0.9rem;
 132                 margin: 0 0.25rem;
 133                 padding: 0.25rem 0.65rem;
 134         }
 135
 136         pre {
 137                 -webkit-overflow-scrolling: touch;
 138                 font-family: _font(family-fixed);
 139                 font-size: 0.9rem;
 140                 margin: 0 0 _size(element-margin) 0;
 141
 142                 code {
 143                         display: block;
 144                         line-height: 1.75;
 145                         padding: 1rem 1.5rem;
 146                         overflow-x: auto;
 147                 }
 148         }
 149
 150         hr {
 151                 border: 0;
 152                 border-bottom: solid 2px;
 153                 margin: (_size(element-margin) * 1.5) 0;
 154
 155                 &.major {
 156                         margin: (_size(element-margin) * 2.5) 0;
 157                 }
 158         }
 159
 160         .align-left {
 161                 text-align: left;
 162         }
 163
 164         .align-center {
 165                 text-align: center;
 166         }
 167
 168         .align-right {
 169                 text-align: right;
 170         }
 171
 172         @mixin color-typography($p: null) {
 173                 @if $p != null {
 174                         color: _palette($p, fg);
 175                 }
 176
 177                 input, select, textarea {
 178                         color: _palette($p, fg-bold);
 179                 }
 180
 181                 a {
 182                         color: _palette($p, fg-bold);
 183                         border-bottom-color: transparentize(_palette($p, fg), 0.5);
 184
 185                         &:hover {
 186                                 border-bottom-color: transparent;
 187                                 color: _palette($p, accent) !important;
 188                         }
 189                 }
 190
 191                 strong, b {
 192                         color: _palette($p, fg-bold);
 193                 }
 194
 195                 h1, h2, h3, h4, h5, h6 {
 196                         color: _palette($p, fg-bold);
 197                 }
 198
 199                 blockquote {
 200                         border-left-color: _palette($p, border);
 201                 }
 202
 203                 code {
 204                         background: _palette($p, border-bg);
 205                         border-color: _palette($p, border);
 206                 }
 207
 208                 hr {
 209                         border-bottom-color: _palette($p, border);
 210                 }
 211         }
 212
 213         @include color-typography;