Skip to content

Commit 422a74b

Browse files
esacteksabesacteksab
authored
feat: initial support for custom accent colors (#27)
* feat: initial commit to support custom accent colors * chore: a constant battle * chore: the world's most expensive formatter * chore: continued support for accent colors * chore: sets a default for light scheme
1 parent 210e304 commit 422a74b

23 files changed

+475
-367
lines changed

‎.prettierrc‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
{
2-
"plugins": [
3-
"prettier-plugin-sh",
4-
"prettier-plugin-pkg",
5-
"prettier-plugin-go-template",
6-
"prettier-plugin-css-order",
7-
"prettier-plugin-toml",
8-
"prettier-plugin-tailwindcss"
9-
],
10-
"overrides": [
11-
{
12-
"files": ["*.html"],
13-
"options": {
14-
"parser": "go-template",
15-
"goTemplateBracketSpacing": true,
16-
"bracketSameLine": true,
17-
"embeddedLanguageFormatting": "off",
18-
"htmlWhitespaceSensitivity": "strict"
19-
}
20-
},
21-
{
22-
"files": ["*.md"],
23-
"options": {
24-
"embeddedLanguageFormatting": "off"
25-
}
26-
},
27-
{
28-
"files": ["*.toml"],
29-
"options": {
30-
"indentTables": true,
31-
"indentEntries": true,
32-
"alignEntries": true
33-
}
34-
}
35-
],
36-
"tailwindStylesheet": "./assets/css/main.css",
37-
"tailwindConfig": "./tailwind.config.js",
38-
"tailwindFunctions": ["tw"],
39-
"cssDeclarationSorterOrder": "smacss"
2+
"plugins": [
3+
"prettier-plugin-sh",
4+
"prettier-plugin-pkg",
5+
"prettier-plugin-go-template",
6+
"prettier-plugin-css-order",
7+
"prettier-plugin-toml",
8+
"prettier-plugin-tailwindcss"
9+
],
10+
"overrides": [
11+
{
12+
"files": ["*.html"],
13+
"options": {
14+
"parser": "go-template",
15+
"goTemplateBracketSpacing": true,
16+
"bracketSameLine": true,
17+
"embeddedLanguageFormatting": "off",
18+
"htmlWhitespaceSensitivity": "css"
19+
}
20+
},
21+
{
22+
"files": ["*.md"],
23+
"options": {
24+
"embeddedLanguageFormatting": "off"
25+
}
26+
},
27+
{
28+
"files": ["*.toml"],
29+
"options": {
30+
"indentTables": true,
31+
"indentEntries": true,
32+
"alignEntries": true
33+
}
34+
}
35+
],
36+
"tailwindStylesheet": "./assets/css/*.css",
37+
"tailwindConfig": "./tailwind.config.js",
38+
"tailwindFunctions": ["tw"],
39+
"cssDeclarationSorterOrder": "smacss"
4040
}

‎assets/css/main.css‎

Lines changed: 63 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
@import "tailwindcss";
22
@source "hugo_stats.json";
33

4+
:root {
5+
--accent-color: var(--color-amber-500);
6+
}
7+
48
@layer components {
59
html {
610
width: 100%;
@@ -49,15 +53,25 @@
4953
}
5054

5155
p {
52-
@apply block text-sm/tight font-medium;
56+
@apply block text-base/normal font-medium;
5357
margin-block: unset;
5458
@apply py-2;
5559
}
5660
}
5761

62+
header,
63+
main {
64+
border-color: var(--accent-color);
65+
}
66+
5867
a :is(h1, h2, h3, h4, h5, h6) {
5968
@apply no-underline;
6069
}
70+
71+
.anchor {
72+
@apply no-underline;
73+
}
74+
6175
a .anchor-icon {
6276
visibility: hidden;
6377
}
@@ -72,6 +86,7 @@ a:hover .anchor-icon {
7286

7387
code {
7488
display: inline-block;
89+
margin: 0.125em;
7590
padding: 0.0625rem 0.25rem;
7691
font-size: 85%;
7792
@apply rounded-sm no-underline;
@@ -123,7 +138,11 @@ nav label {
123138
}
124139

125140
.post-preview > span > p {
126-
@apply mt-5;
141+
@apply mt-2;
142+
}
143+
144+
.post-metadata p {
145+
text-decoration-color: var(--accent-color);
127146
}
128147

129148
.main :is(ul, ol) {
@@ -260,10 +279,9 @@ article h2 {
260279
}
261280

262281
.tags {
263-
@apply ml-2 p-1 font-mono;
282+
@apply ml-2 p-1;
264283
}
265284

266-
p + p,
267285
p + a + h1,
268286
p + a + h2,
269287
p + a + h3,
@@ -296,35 +314,35 @@ h2 + h3 {
296314
}
297315

298316
.alert-note {
299-
@apply bg-blue-100 text-blue-700;
317+
@apply bg-blue-50 text-blue-700;
300318
code {
301319
@apply border-blue-700;
302320
}
303321
}
304322

305323
.alert-tip {
306-
@apply bg-orange-100 text-orange-700;
324+
@apply bg-amber-50 text-amber-700;
307325
code {
308-
@apply border-orange-700;
326+
@apply border-amber-700;
309327
}
310328
}
311329

312330
.alert-important {
313-
@apply bg-lime-100 text-lime-700;
331+
@apply bg-lime-50 text-lime-700;
314332
code {
315333
@apply border-lime-700;
316334
}
317335
}
318336

319337
.alert-caution {
320-
@apply bg-yellow-100 text-yellow-700;
338+
@apply bg-yellow-50 text-yellow-700;
321339
code {
322340
@apply border-yellow-700;
323341
}
324342
}
325343

326344
.alert-warning {
327-
@apply bg-red-100 text-red-700;
345+
@apply bg-red-50 text-red-700;
328346
code {
329347
@apply border-red-700;
330348
}
@@ -357,6 +375,7 @@ hr {
357375
}
358376
code {
359377
@apply border-1;
378+
margin: 0;
360379
}
361380
}
362381

@@ -381,53 +400,61 @@ Dark Mode
381400

382401
@media (prefers-color-scheme: dark) {
383402
code {
384-
@apply border-neutral-600 font-mono text-amber-500;
403+
border-color: var(--accent-color);
404+
color: var(--accent-color);
385405
}
386406

387407
img {
388408
@apply brightness-[.9] contrast-[1.1];
389409
}
390410

391411
tr {
392-
@apply border-t-1 border-neutral-600;
412+
@apply border-t-1;
413+
border-color: var(--accent-color);
393414
}
394415

395416
th {
396-
@apply border-1 border-neutral-600;
417+
@apply border-1;
418+
border-color: var(--accent-color);
397419
}
398420

399421
td {
400-
@apply border-1 border-neutral-600;
422+
@apply border-1;
423+
border-color: var(--accent-color);
401424
code {
402-
@apply border-1 border-neutral-600;
425+
@apply border-1;
403426
}
404427
}
405428

406429
li,
407430
p,
408431
blockquote {
409432
code {
410-
@apply border-1 border-neutral-600;
433+
@apply border-1;
434+
border-color: var(--accent-color);
411435
}
412436
}
413437

414438
.labeled-highlight__label {
415439
translate: 0% -50%;
416440
code {
417-
@apply border-neutral-600 bg-zinc-800;
441+
/* @apply border-neutral-600 bg-zinc-800; */
442+
@apply bg-zinc-800;
443+
border-color: var(--accent-color);
418444
}
419445
}
420446

421447
.highlight {
422-
@apply border-1 rounded-sm border-neutral-600;
448+
@apply border-1 rounded-sm;
449+
border-color: var(--accent-color);
423450
}
424451

425452
.tags {
426453
@apply bg-zinc-800;
427454
}
428455

429456
:is(.read-more, .pager) a {
430-
@apply text-amber-500;
457+
color: var(--accent-color);
431458
}
432459

433460
nav a {
@@ -444,22 +471,29 @@ Light Mode
444471
*/
445472

446473
@media (prefers-color-scheme: light) {
474+
:root {
475+
--accent-color: var(--color-orange-700);
476+
}
447477
code {
448-
@apply font-mono text-orange-700;
478+
color: var(--accent-color);
449479
}
450480

451481
tr {
452-
@apply border-t-1 border-neutral-600;
482+
@apply border-t-1;
483+
border-color: var(--accent-color);
453484
}
454485

455486
th {
456-
@apply border-1 border-neutral-600;
487+
@apply border-1;
488+
border-color: var(--accent-color);
457489
}
458490

459491
td {
460-
@apply border-1 border-neutral-600;
492+
@apply border-1;
493+
border-color: var(--accent-color);
461494
code {
462-
@apply border-1 border-orange-700;
495+
@apply border-1;
496+
border-color: var(--accent-color);
463497
}
464498
}
465499

@@ -471,14 +505,16 @@ Light Mode
471505
p,
472506
blockquote {
473507
code {
474-
@apply border-1 border-orange-700;
508+
@apply border-1;
509+
border-color: var(--accent-color);
475510
}
476511
}
477512

478513
.labeled-highlight__label {
479514
translate: 0;
480515
code {
481-
@apply border-orange-500 bg-neutral-100;
516+
@apply bg-neutral-100;
517+
border-color: var(--accent-color);
482518
}
483519
}
484520

@@ -491,6 +527,6 @@ Light Mode
491527
}
492528

493529
:is(.read-more, .pager) a {
494-
@apply text-orange-700;
530+
color: var(--accent-color);
495531
}
496532
}

‎layouts/404.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<h2>{{ ":question: HTTP 404 Page not found :question:" | .RenderString }}</h2>
3-
<p>{{ "The page you requested cannot be found. Don't know what you're looking for but it's not here." | .RenderString }}</p>
4-
<p><a href="{{ .Site.Home.RelPermalink }}">Return to the home page.</a></p>
2+
<h2>{{ ":question: HTTP 404 Page not found :question:" | .RenderString }}</h2>
3+
<p>{{ "The page you requested cannot be found. Don't know what you're looking for but it's not here." | .RenderString }}</p>
4+
<p><a href="{{ .Site.Home.RelPermalink }}">Return to the home page.</a></p>
55
{{ end }}

‎layouts/_default/_markup/render-blockquote-alert.html‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
{{- $svgs := dict
2-
"caution" "fas fa-circle-exclamation"
3-
"important" "fas fa-star"
4-
"note" "fas fa-note-sticky"
5-
"tip" "fas fa-lightbulb"
6-
"warning" "fas fa-triangle-exclamation"
2+
"caution" "fas fa-circle-exclamation"
3+
"important" "fas fa-star"
4+
"note" "fas fa-note-sticky"
5+
"tip" "fas fa-lightbulb"
6+
"warning" "fas fa-triangle-exclamation"
77
}}
8+
89
{{- if eq .Type "alert" }}
9-
<blockquote class="alert alert-{{- .AlertType }} flex flex-col border-l-8 border-2 rounded-sm">
10-
<div class="inline-flex items-center">
11-
<span class="fa-stack fa-lg m-2">
12-
<i class="fas fa-square fa-stack-2x"></i>
13-
<i class="{{- index $svgs .AlertType }} fa-stack-1x fa-inverse"></i>
14-
</span>
15-
{{- with .AlertTitle }}
16-
<h3>{{- . }}</h3>
17-
{{- else }}
18-
<h3>{{- or (i18n .AlertType) (title .AlertType) }}</h3>
19-
{{- end }}
20-
</div>
21-
<div class="flex flex-col m-0 p-2">
22-
{{- .Text | emojify }}
23-
</div>
24-
</blockquote>
10+
<blockquote class="alert alert-{{ .AlertType }} flex flex-col border-l-8 border-2 rounded-sm">
11+
<div class="tight inline-flex items-center">
12+
<span class="fa-stack fa-lg m-2">
13+
<i class="fas fa-square fa-stack-2x"></i>
14+
<i class="{{ index $svgs .AlertType }} fa-stack-1x fa-inverse"></i>
15+
</span>
16+
{{- with .AlertTitle }}
17+
<h3 class="tight">{{ . }}</h3>
18+
{{- else }}
19+
<h3 class="tight">{{ or (i18n .AlertType) (title .AlertType) }}</h3>
20+
{{- end }}
21+
</div>
22+
<div class="tight flex flex-col m-0 p-2">
23+
{{ .Text | emojify }}
24+
</div>
25+
</blockquote>
2526
{{- end }}

‎layouts/_default/_markup/render-heading.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
33
{{ .Text }}
44
<i class="anchor-icon fas fa-link fa-2xs"></i>
5-
</h{{ .Level }}></a>
5+
</h{{ .Level }}>
6+
</a>

0 commit comments

Comments
 (0)