my website at https://anirudh.fi
templates: add dark mode css
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>
+22
-21
+5
-4
input.css
+5
-4
input.css
···
36
36
h2 {
37
37
@apply text-xl;
38
38
@apply font-normal;
39
-
@apply text-darker;
39
+
@apply text-darker dark:text-dark-darker;
40
40
@apply pt-4 pb-3;
41
41
}
42
42
···
87
87
88
88
.footnotes {
89
89
hr {
90
-
@apply border-t border-light-gray pt-6 mt-6;
90
+
@apply border-t dark:border-dark-light-gray border-light-gray pt-6 mt-6;
91
91
}
92
92
}
93
93
···
102
102
}
103
103
104
104
.footnote-ref a {
105
-
@apply no-underline text-light rounded-full text-center bg-cyan border-b-0;
105
+
@apply no-underline dark:text-dark-light text-light rounded-full text-center bg-cyan border-b-0;
106
106
@apply w-3 h-3 text-[0.6rem] leading-3 inline-block;
107
107
}
108
108
···
131
131
}
132
132
133
133
a {
134
-
@apply text-darker dark:text-gray;
134
+
@apply text-darker dark:text-dark-darker;
135
135
@apply border-b border-medium-gray hover:border-gray;
136
+
@apply dark:border-dark-medium-gray dark:hover:border-dark-gray;
136
137
}
137
138
138
139
img {
+2
-2
templates/blog.html
+2
-2
templates/blog.html
···
30
30
{{ if .Meta.draft }}
31
31
(<span class="text-red-200">draft</span>)
32
32
{{ end }}
33
-
<p class="text-gray">{{ .Meta.subtitle }}</p>
33
+
<p class="text-gray dark:text-dark-gray">{{ .Meta.subtitle }}</p>
34
34
</div>
35
35
{{ $dateStr := .Meta.date }}
36
36
{{ $date := parsedate $dateStr }}
37
-
<div class="index-date text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
37
+
<div class="index-date dark:text-dark-gray text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
38
38
</div>
39
39
</li>
40
40
{{ end }}
+3
-3
templates/index.html
+3
-3
templates/index.html
···
13
13
{{ template "partials/nav.html" }}
14
14
</div>
15
15
<article>
16
-
<section class="my-12 py-12 border-b border-light-gray">
16
+
<section class="my-12 py-12 border-b dark:border-dark-light-gray border-light-gray">
17
17
{{ .Body }}
18
18
</section>
19
19
···
29
29
{{ if .Meta.draft }}
30
30
(<span class="draft">draft</span>)
31
31
{{ end }}
32
-
<p class="text-gray">{{ .Meta.subtitle }}</p>
32
+
<p class="dark:text-dark-gray text-gray">{{ .Meta.subtitle }}</p>
33
33
</div>
34
34
{{ $dateStr := .Meta.date }}
35
35
{{ $date := parsedate $dateStr }}
36
-
<div class="text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
36
+
<div class="dark:text-dark-gray text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
37
37
</div>
38
38
</li>
39
39
{{ end }}
+2
-2
templates/photoindex.html
+2
-2
templates/photoindex.html
···
35
35
<div class="flex md:flex-row flex-col justify-between">
36
36
<div>
37
37
<a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} — {{ .Meta.season }}</a>
38
-
<p class="text-gray">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
38
+
<p class="dark:text-dark-gray text-gray">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
39
39
</div>
40
40
{{ $dateStr := .Meta.date }}
41
41
{{ $date := parsedate $dateStr }}
42
-
<div class="text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
42
+
<div class="dark:text-dark-gray text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
43
43
</div>
44
44
</li>
45
45
{{ end }}
+3
-3
templates/photos.html
+3
-3
templates/photos.html
···
13
13
{{ template "partials/nav.html" }}
14
14
</div>
15
15
<article align="left">
16
-
<h1>{{ .Meta.title }} — {{ .Meta.season }}</h1>
17
-
<h2 class="subtitle"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }} </h2>
18
-
<div class="columns-1 md:columns-2">
16
+
<h1 class="-mb-4">{{ .Meta.title }} — {{ .Meta.season }}</h1>
17
+
<h2 class="text-gray dark:text-dark-gray"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }} </h2>
18
+
<div class="columns-1 md:columns-2 mt-12">
19
19
{{ $photos := .Yaml.photos }}
20
20
{{ $d := .Yaml.defaults }}
21
21
{{ range $photos }}
+2
-2
templates/reading.html
+2
-2
templates/reading.html
···
27
27
<div class="flex md:flex-row flex-col justify-between">
28
28
<div>
29
29
<a href="{{ $book.link }}">{{ $book.name }}</a>
30
-
<p class="text-gray">{{ $book.author }}</p>
30
+
<p class="dark:text-dark-gray text-gray">{{ $book.author }}</p>
31
31
</div>
32
-
<span class="text-gray lowercase">{{ $book.status }}</span>
32
+
<span class="dark:text-dark-gray text-gray lowercase">{{ $book.status }}</span>
33
33
</div>
34
34
</li>
35
35
{{- end }}
+2
-2
templates/text.html
+2
-2
templates/text.html
···
13
13
{{ template "partials/nav.html" }}
14
14
</div>
15
15
<article>
16
-
<section class="text-gray lowercase">
16
+
<section class="dark:text-dark-gray text-gray lowercase">
17
17
{{ $dateStr := index .Meta "date" }}
18
18
{{ $date := parsedate $dateStr }}
19
19
{{ $date.Format "02 Jan, 2006" }}
···
23
23
<h1 class="-mb-4">{{ index .Meta "title" }} {{ if eq .Meta.draft "true" }}
24
24
<span class="text-base text-red-400">[draft]</span>{{ end }}
25
25
</h1>
26
-
<h2 class="text-gray">{{ index .Meta "subtitle" }}</h2>
26
+
<h2 class="text-gray dark:text-dark-gray">{{ index .Meta "subtitle" }}</h2>
27
27
<div class="mt-12">
28
28
{{ .Body }}
29
29
</div>