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