my website at https://anirudh.fi
1@import "tailwindcss";
2
3@layer base {
4 @theme {
5 --color-cyan: #509c93;
6 --color-light: #fff9eb;
7 --color-light-gray: #fceccc;
8 --color-medium-gray: #e6dcd1;
9 --color-mediumer-gray: #d8cbbe;
10 --color-gray: #776e63;
11 --color-dark: #4a443d;
12 --color-darker: #2a261f;
13 --color-warm: #fffdf5;
14 --color-fg: #100f0f;
15 --color-selection: rgba(143, 105, 213, 0.2);
16
17 --color-dark-light: #2a261f;
18 --color-dark-light-gray: #4a443d;
19 --color-dark-medium-gray: #6b635a;
20 --color-dark-gray: #d3cec1;
21 --color-dark-fg: #fff6e3;
22 --color-dark-dark: #e6dcd1;
23 --color-dark-darker: #fff9eb;
24 --color-dusk: #100f0f;
25 --color-dark-selection: rgba(80, 156, 147, 0.2);
26
27 --breakpoint-md: 400px;
28 }
29
30 h1 {
31 @apply text-3xl;
32 @apply font-medium;
33 @apply pt-4 pb-3;
34 }
35
36 h2 {
37 @apply text-xl;
38 @apply font-normal;
39 @apply text-darker dark:text-dark-darker;
40 @apply pt-4 pb-3;
41 }
42
43 ::selection {
44 @apply bg-selection;
45 @apply dark:bg-dark-selection;
46 }
47
48 html {
49 @apply bg-warm dark:bg-dusk;
50 @apply text-fg dark:text-dark-fg;
51 }
52
53 main {
54 @apply text-base p-0 font-normal;
55 @apply text-base/relaxed;
56 article {
57 @apply py-5;
58 p {
59 @apply py-2;
60 }
61 strong {
62 @apply font-medium;
63 }
64
65 ul {
66 @apply list-disc;
67 @apply mx-8 my-2;
68 @apply marker:text-mediumer-gray;
69 }
70
71 ol {
72 counter-reset: counter;
73 li {
74 counter-increment: counter;
75 }
76 @apply list-decimal;
77 @apply mx-8 my-2;
78 @apply marker:text-gray;
79 }
80
81 blockquote {
82 @apply pl-6 bg-light dark:bg-dark-light border-l-4 border-l-light-gray dark:border-l-dark-medium-gray;
83 }
84
85 code {
86 @apply bg-light text-[0.9rem] dark:bg-dark-light;
87 }
88 pre {
89 @apply bg-light p-4 my-2 overflow-x-auto overflow-y-hidden dark:bg-dark-light;
90 }
91
92 .footnotes {
93 hr {
94 @apply border-t dark:border-dark-light-gray border-light-gray pt-6 mt-6;
95 }
96 }
97
98 .footnotes > ol li {
99 @apply flex items-center gap-3;
100 }
101
102 .footnotes > ol li::before {
103 @apply content-[counter(counter)];
104 @apply rounded-full text-center leading-4 text-light bg-cyan;
105 @apply w-4 h-4 text-xs inline-block flex-shrink-0;
106 }
107
108 .footnote-ref a {
109 @apply no-underline dark:text-dark-light text-light rounded-full text-center bg-cyan border-b-0;
110 @apply w-3 h-3 text-[0.6rem] leading-3 inline-block;
111 }
112
113 .footnotes > ol li p {
114 @apply m-0 leading-7;
115 }
116
117 .footnote-return {
118 @apply border-b-0 text-cyan ml-auto;
119 }
120
121 .footnote-return:hover {
122 @apply border-b-0 text-cyan ml-auto;
123 }
124
125 .footnotes ol li:not(:last-child) {
126 @apply pb-8;
127 }
128 }
129 }
130
131 body {
132 @apply max-w-[655px];
133 @apply px-4 pt-8 pb-80;
134 @apply my-4 mx-auto;
135 }
136
137 a {
138 @apply text-darker dark:text-dark-darker;
139 @apply border-b border-medium-gray hover:border-gray;
140 @apply dark:border-dark-medium-gray dark:hover:border-dark-gray;
141 }
142
143 img {
144 @apply max-w-full;
145 @apply w-full;
146 @apply block;
147 @apply mx-auto my-[10px_auto_4px_auto];
148 @apply rounded-md;
149 }
150
151 figure {
152 @apply my-6;
153 img {
154 @apply mb-0 my-0;
155 }
156 figcaption {
157 @apply text-sm text-gray dark:text-dark-gray text-center mt-2;
158 a {
159 @apply text-gray dark:text-dark-gray;
160 }
161 }
162 }
163
164 .row {
165 @apply flex flex-col md:flex-row items-center justify-between;
166 @apply gap-4 md:gap-2;
167 }
168}