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}
 31
 32.brand-icon:hover {
 33    border-bottom: 1px solid;
 34}
 35
 36.layout {
 37    .title-wrapper {
 38        @include flex-column;
 39        margin-bottom: 0.5rem;
 40    }
 41    .title {
 42        color: $primary-color;
 43        text-align: left;
 44        display: block;
 45        font-size: $title-font-size;
 46        //font-weight: bold;
 47        margin: 0;
 48    }
 49    max-width: $layout-max-width;
 50    margin-left: auto;
 51    margin-right: auto;
 52    padding: $vertical-layout-padding $horizontal-layout-padding;
 53}
 54
 55nav {
 56    font-size: $nav-font-size;
 57    text-align: center;
 58    ul {
 59        display: block;
 60        padding: 0;
 61        //margin: 0.5rem;
 62        li {
 63            display: inline;
 64            list-style-type: none;
 65            a {
 66                color: $primary-color;
 67                display: inline-block;
 68                padding-top: 0.5rem;
 69                padding-bottom: 0.5rem;
 70                border-bottom: 1px solid $background-color;
 71            }
 72            a:hover {
 73                color: $post-link-color;
 74                border-bottom: 1px solid;
 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 $post-link-color;
119            color: $post-link-color;
120        }
121    }
122
123    .date-label {
124        font-size: 80%;
125        margin-right: 1rem;
126    }
127}
128
129.content {
130    .title {
131        font-size: $content-title-font-size;
132    }
133}
134
135.blog-post-content {
136    a {
137        color: $post-link-color;
138        text-decoration: none;
139        border-bottom: 1px solid;
140    }
141    a:hover {
142        border-bottom: none;
143    }
144
145    img {
146        width:100%;
147    }
148}
149
150.post-image {
151    @include full-width-mobile
152
153    img {
154        width:100%;
155    }
156}
157
158
159.tags {
160    font-size: .9em;
161    text-align: left;
162    ul {
163        display: block;
164        padding: 0;
165        //margin: 0.5rem;
166        li {
167            display: inline;
168            list-style-type: none;
169            text-align: center;
170            a {
171                border: 1px solid $post-link-color;
172                border-radius: 3px;
173                background: $post-link-color;
174                padding: 0.2em;
175                color: #fff;
176                // color: $primary-color;
177                margin: 10px 2px 10px 0;
178                line-height: 1em;
179            }
180            a:hover {
181                background: $background-color;
182                color: $post-link-color;
183            }
184        }
185        li:not(:last-child) {
186            padding: 0 0.1rem 0 0;
187        }
188    }
189}
190
191.highlight {
192    @include full-width-mobile
193    pre {
194        line-height: 1.2rem;
195        border: 1px solid #ddd;
196        border-radius: 5px;
197        overflow: auto;
198        padding: $horizontal-layout-padding;
199        margin: 0;
200        code[class*=language-] {
201            font-size: 0.9em;
202        }
203
204        .token.comment {
205            font-style: italic;
206        }
207    }
208}
209
210// Style blockquotes
211// https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
212// Worth looking at
213// https://codepen.io/frxnz/pen/IvBCr
214blockquote {
215    background: $blockquote-background-color;
216    border-left: 5px solid $primary-color;
217    margin: 1.5em 10px;
218    padding: 0.5em 10px;
219    quotes: "\201C""\201D""\2018""\2019";
220}
221
222blockquote:before {
223    color: $primary-color;
224    content: open-quote;
225    font-size: 4em;
226    line-height: 0.1em;
227    margin-right: 0.25em;
228    vertical-align: -0.4em;
229}
230
231blockquote p {
232    display: inline;
233}
234
235time {
236    font-size: 80%;
237    margin-right: 1rem;
238}