1html {
  2    font-size: $global-font-size;
  3}
  4
  5body {
  6    line-height: 1.8em;
  7    color: $primary-color;
  8    background: $background-color;
  9}
 10
 11.post-title, .date-label {
 12    letter-spacing: 0.025rem;
 13}
 14
 15p, sub, nav{
 16    letter-spacing: 0.05rem;
 17}
 18
 19.title-wrapper, .title {
 20    letter-spacing: 0.075rem;
 21}
 22
 23a {
 24    text-decoration: none;
 25}
 26
 27.brand-icon {
 28    color: $post-link-color;
 29    display: inline-flex;
 30    border-bottom: 1px solid;
 31
 32}
 33
 34.brand-icon:hover {
 35    border-bottom: none;
 36}
 37
 38.layout {
 39    .title-wrapper {
 40        @include flex-column;
 41        margin-bottom: 0.5rem;
 42    }
 43    .title {
 44        color: $primary-color;
 45        text-align: left;
 46        display: block;
 47        font-size: $title-font-size;
 48        //font-weight: bold;
 49        margin: 0;
 50    }
 51    max-width: $layout-max-width;
 52    margin-left: auto;
 53    margin-right: auto;
 54    padding: $vertical-layout-padding $horizontal-layout-padding;
 55}
 56
 57nav {
 58    font-size: $nav-font-size;
 59    text-align: center;
 60    ul {
 61        display: block;
 62        padding: 0;
 63        li {
 64            display: inline;
 65            list-style-type: none;
 66            a {
 67                color: $primary-color;
 68                display: inline-block;
 69                padding-top: 0.5rem;
 70                padding-bottom: 0.5rem;
 71                border-bottom: 1px solid $background-color;
 72            }
 73            a:hover {
 74                color: $post-link-color;
 75            }
 76        }
 77        li:not(:last-child) {
 78            padding: 0 1rem 0 0;
 79        }
 80    }
 81}
 82
 83.slim-description {
 84    margin-bottom: calc(#{$global-font-size} * 2);
 85    color: $subscript-color;
 86}
 87
 88
 89.blog-post-content {
 90    a {
 91        color: $post-link-color;
 92        text-decoration: none;
 93        border-bottom: 1px solid;
 94    }
 95    a:hover {
 96        border-bottom: none;
 97    }
 98}
 99
100
101
102.blog-list {
103    .list-item {
104        display: flex;
105        flex-direction: column-reverse;
106        align-items: baseline;
107        padding: 0.5rem 0.5rem 0.5rem 0;
108    }
109    .post-title {
110        a {
111            text-decoration: none;
112            color: $post-title-color;
113            //font-weight: 600;
114            border-bottom: none;
115            //transition: border-bottom .3s;
116        }
117        a:hover {
118            border-bottom: 1px solid;
119        }
120    }
121
122    .date-label {
123        font-size: 80%;
124        margin-right: 1rem;
125    }
126}
127
128.content {
129    .title {
130        font-size: $content-title-font-size;
131    }
132}
133
134.blog-post-content {
135    a {
136        color: $post-link-color;
137        text-decoration: none;
138        border-bottom: 1px solid;
139    }
140    a:hover {
141        border-bottom: none;
142    }
143
144    img {
145        width:100%;
146    }
147}
148
149.post-image {
150    @include full-width-mobile
151
152    img {
153        width:100%;
154    }
155}
156
157
158.tags {
159    font-size: .9em;
160    text-align: left;
161    ul {
162        display: block;
163        padding: 0;
164        //margin: 0.5rem;
165        li {
166            display: inline;
167            list-style-type: none;
168            text-align: center;
169            a {
170                border: 1px solid $post-link-color;
171                border-radius: 3px;
172                background: $post-link-color;
173                padding: 0.2em;
174                color: #fff;
175                // color: $primary-color;
176                margin: 10px 2px 10px 0;
177                line-height: 1em;
178            }
179            a:hover {
180                background: $background-color;
181                color: $post-link-color;
182            }
183        }
184        li:not(:last-child) {
185            padding: 0 0.1rem 0 0;
186        }
187    }
188}
189
190.highlight {
191    @include full-width-mobile
192    pre {
193        line-height: 1.2rem;
194        border: 1.5px dashed;
195        border-radius: 5px;
196        overflow: auto;
197        padding: $horizontal-layout-padding;
198        margin: 0;
199        code[class*=language-] {
200            font-size: 0.9em;
201        }
202
203        .token.comment {
204            font-style: italic;
205        }
206    }
207}
208
209p code {
210    border: 1px dashed;
211    border-radius: 5px;
212    padding: 1px;
213}
214
215// Style blockquotes
216// https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
217// Worth looking at
218// https://codepen.io/frxnz/pen/IvBCr
219blockquote {
220    background: $blockquote-background-color;
221    border-left: 5px solid $primary-color;
222    margin: 1.5em 10px;
223    padding: 0.5em 10px;
224    quotes: "\201C""\201D""\2018""\2019";
225}
226
227blockquote:before {
228    color: $primary-color;
229    content: open-quote;
230    font-size: 4em;
231    line-height: 0.1em;
232    margin-right: 0.25em;
233    vertical-align: -0.4em;
234}
235
236blockquote p {
237    display: inline;
238}
239
240time {
241    font-size: 80%;
242    margin-right: 1rem;
243}