dotfiles
My PC Dotfiles & Websitegit clone https://github.com/maydayv7/dotfiles
site/sass/_post.scss (6290B)
1@import "variables";
2
3blockquote {
4 color: var(--color);
5 font-style: italic;
6 margin-left: 0.5em;
7 padding: 1em 10px 0.8em 20px;
8 position: relative;
9
10 p:last-child {
11 margin-bottom: 0;
12 }
13
14 &:before {
15 color: var(--accent-alpha-70);
16 content: "\201C";
17 font-size: 3em;
18 position: absolute;
19 top: -10px;
20 left: 0;
21 }
22
23 &:after {
24 content: "";
25 }
26
27 // GitHub Alerts
28 &[class*="markdown-alert"] {
29 border-left: 4px solid;
30 font-style: normal;
31 padding: 0.25em 1em 0.25em 2.8em;
32 position: relative;
33
34 &:before {
35 position: absolute;
36 left: 0.4em;
37 top: 0.35em;
38 width: 1.2em;
39 font-family: "JetBrainsMono", monospace;
40 font-size: 1.2em;
41 line-height: 1;
42 text-align: center;
43 }
44
45 p {
46 margin: 0.25em 0;
47 }
48 }
49
50 &.markdown-alert-note {
51 border-left-color: var(--accent-secondary);
52
53 &:before {
54 content: "\f449";
55 color: var(--accent-secondary);
56 }
57 }
58
59 &.markdown-alert-tip {
60 border-left-color: var(--accent-secondary-alpha-70);
61
62 &:before {
63 content: "\f400";
64 color: var(--accent-secondary-alpha-70);
65 }
66 }
67
68 &.markdown-alert-important {
69 border-left-color: var(--accent);
70
71 &:before {
72 content: "\f643";
73 color: var(--accent);
74 }
75 }
76
77 &.markdown-alert-warning {
78 border-left-color: var(--accent-alpha-70);
79
80 &:before {
81 content: "\f421";
82 color: var(--accent-alpha-70);
83 }
84 }
85
86 &.markdown-alert-caution {
87 border-left-color: var(--accent);
88 background-color: var(--accent-alpha-20);
89
90 &:before {
91 content: "\f28b";
92 color: var(--accent);
93 }
94 }
95}
96
97.code-wrapper {
98 position: relative;
99
100 &:hover .copy,
101 .copy:focus {
102 opacity: 1;
103 }
104}
105
106.copy {
107 background: var(--background);
108 border-color: var(--accent-secondary);
109 border-radius: $corner-radius;
110 color: var(--color);
111 font-family: inherit;
112 font-size: 0.8em;
113 opacity: 0;
114 padding: 3px 8px;
115 position: absolute;
116 top: 8px;
117 right: 8px;
118 transition: opacity 0.15s ease;
119 z-index: 1;
120
121 &:active {
122 background-color: var(--accent-alpha-70);
123 }
124
125 &:focus {
126 background-color: var(--accent);
127 outline: 0;
128 }
129
130 &:hover {
131 background-color: var(--accent-alpha-20);
132 color: var(--accent-secondary);
133 cursor: pointer;
134 }
135}
136
137.post {
138 text-align: left;
139 min-width: 0;
140 overflow-wrap: anywhere;
141 width: 100%;
142
143 &:not(:last-of-type) {
144 border-bottom: 1px solid var(--border-color);
145 padding-bottom: 20px;
146 }
147
148 &-icon {
149 padding-right: 0.35em;
150 }
151
152 &-edit {
153 font-size: 0.9rem;
154 margin-top: 2rem;
155
156 svg {
157 margin-right: 0.1rem;
158 width: 2rem;
159 }
160 }
161
162 &-metatitle {
163 color: var(--accent-secondary);
164 }
165
166 &-title {
167 --border: 3px dotted var(--accent);
168 border-bottom: var(--border);
169 color: var(--accent);
170 margin: 0 0 8px;
171 padding-bottom: 15px;
172 padding-top: 20px;
173 position: relative;
174
175 &:after {
176 border-bottom: var(--border);
177 bottom: 2px;
178 content: "";
179 display: block;
180 position: absolute;
181 width: 100%;
182 }
183
184 a {
185 text-decoration: none;
186 }
187
188 &-sub {
189 font-size: 1.2rem;
190 --border: 2.5px dotted var(--accent-secondary) !important;
191 color: var(--accent-secondary) !important;
192 padding-top: 15px !important;
193 }
194 }
195
196 &-content {
197 h1,
198 h2,
199 h3,
200 h4,
201 h5,
202 h6 {
203 color: var(--accent-secondary);
204 }
205
206 h1:before {
207 content: "# ";
208 }
209
210 h2:before {
211 content: "## ";
212 }
213
214 h3:before {
215 content: "### ";
216 }
217
218 h4:before,
219 h5:before,
220 h6:before {
221 content: "#### ";
222 }
223
224 p {
225 strong,
226 b {
227 font-weight: 900;
228 }
229 }
230
231 ul {
232 list-style: none;
233 margin-left: 0px;
234 padding-left: 10px;
235
236 li {
237 padding-left: 10px;
238
239 &:before {
240 color: var(--accent);
241 content: "*";
242 left: -10px;
243 position: absolute;
244 }
245 }
246 }
247
248 code {
249 background: var(--accent-alpha-20);
250 border-radius: $corner-radius;
251 color: var(--accent-secondary);
252 font-family:
253 "JetBrainsMono",
254 Menlo,
255 DejaVu Sans Mono,
256 monospace;
257 font-feature-settings: normal;
258 font-size: 0.95rem;
259 margin: 0 2px;
260 padding: 1px 6px;
261 }
262
263 pre {
264 border: 1px solid var(--border-color);
265 border-radius: $corner-radius;
266 font-family:
267 "JetBrainsMono",
268 Menlo,
269 DejaVu Sans Mono,
270 monospace;
271 font-size: 0.95rem;
272 overflow: auto;
273 padding: 15px 10px;
274
275 code {
276 background: none !important;
277 border: none;
278 color: inherit;
279 font-size: inherit;
280 margin: 0;
281 padding: 0;
282 }
283 }
284
285 &:not(.post-in-list) {
286 h1,
287 h2,
288 h3,
289 h4,
290 h5,
291 h6 {
292 .zola-anchor {
293 border-bottom-color: transparent;
294 cursor: pointer;
295 font-size: inherit;
296 margin-left: 0.5rem;
297 text-decoration: none;
298 vertical-align: 1%;
299 opacity: 0;
300 }
301
302 &:hover,
303 &:focus-within {
304 .zola-anchor {
305 opacity: 1;
306 }
307 }
308 }
309 }
310 }
311
312 .pre-list {
313 border-bottom: 1px solid var(--border-secondary-color);
314 }
315
316 &-list {
317 font-size: 1rem;
318 list-style: none;
319
320 li {
321 padding-left: 5px;
322
323 &:before {
324 color: var(--accent-alpha-70);
325 content: "</>";
326 left: -33px;
327 position: absolute;
328 }
329 }
330
331 @media (max-width: $phone-max-width) {
332 margin-left: 33px;
333 }
334 }
335}
336
337.meta {
338 &-page {
339 font-size: 1rem;
340 color: var(--accent-alpha-70);
341 }
342
343 &-list {
344 color: var(--color);
345
346 &.meta-title {
347 color: var(--accent-secondary);
348 }
349 }
350}
351
352.scroll-back {
353 display: block;
354 z-index: 100;
355 position: fixed;
356 right: 30px;
357 visibility: hidden;
358 background-color: var(--accent-alpha-20);
359 border-radius: $corner-radius;
360 border: none;
361 bottom: 20px;
362 color: var(--accent-secondary);
363 cursor: pointer;
364 font-size: 18px;
365 outline: none;
366 padding: 12px;
367 transition: all 0.2s ease;
368
369 &:hover {
370 background-color: var(--accent-alpha-70);
371 }
372}