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: 1px solid #ddd;
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
209// Style blockquotes
210// https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
211// Worth looking at
212// https://codepen.io/frxnz/pen/IvBCr
213blockquote {
214 background: $blockquote-background-color;
215 border-left: 5px solid $primary-color;
216 margin: 1.5em 10px;
217 padding: 0.5em 10px;
218 quotes: "\201C""\201D""\2018""\2019";
219}
220
221blockquote:before {
222 color: $primary-color;
223 content: open-quote;
224 font-size: 4em;
225 line-height: 0.1em;
226 margin-right: 0.25em;
227 vertical-align: -0.4em;
228}
229
230blockquote p {
231 display: inline;
232}
233
234time {
235 font-size: 80%;
236 margin-right: 1rem;
237}