safwanyp.com
Code for my personal website
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5html {
6 overflow-y: scroll;
7 color-scheme: light;
8}
9
10html.dark {
11 color-scheme: dark;
12}
13
14html,
15body {
16 @apply size-full;
17}
18
19body {
20 @apply font-sans antialiased;
21 @apply flex flex-col;
22 @apply bg-stone-100 dark:bg-bg-dark;
23 @apply text-black/75 dark:text-white/75;
24}
25
26header {
27 @apply fixed top-0 left-0 right-0 z-50 py-5;
28 @apply bg-stone-100 dark:bg-bg-dark;
29 @apply border-b border-stone-900/10 dark:border-stone-100/10;
30}
31
32main {
33 @apply flex-1 py-32;
34}
35
36footer {
37 @apply py-5 text-sm;
38 @apply border-t border-stone-900/10 dark:border-stone-100/10;
39}
40
41article {
42 @apply max-w-full prose dark:prose-invert prose-img:mx-auto prose-img:my-auto;
43 @apply prose-headings:font-semibold prose-p:font-serif;
44 @apply prose-headings:text-black prose-headings:dark:text-white;
45}
46
47input {
48 @apply text-base p-1 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:focus:ring-lime-300;
49}
50
51textarea {
52 @apply text-base p-1 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:focus:ring-lime-300;
53}
54
55@layer utilities {
56 article a {
57 @apply font-sans text-current underline underline-offset-2;
58 @apply decoration-black/35 dark:decoration-white/30;
59 @apply transition-colors duration-300 ease-in-out;
60 }
61 article a:hover {
62 @apply hover:text-lime-700 hover:dark:text-lime-300;
63 @apply hover:decoration-lime-600 dark:hover:decoration-lime-600/50;
64 }
65}
66
67.animate {
68 @apply opacity-0 translate-y-3;
69 @apply transition-all duration-700 ease-out;
70}
71
72.animate.show {
73 @apply opacity-100 translate-y-0;
74}
75
76html #back-to-top {
77 @apply opacity-0 pointer-events-none;
78}
79
80html.scrolled #back-to-top {
81 @apply opacity-100 pointer-events-auto;
82}