Skip to content

Commit 334125e

Browse files
dvdksndvdksn
committed
site: migrate to tailwindcss v4
Signed-off-by: David Karlsson <[email protected]>
1 parent dc878e6 commit 334125e

File tree

17 files changed

+1868
-2994
lines changed

17 files changed

+1868
-2994
lines changed

‎assets/css/code.css‎

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎assets/css/fonts.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import "tailwindcss";
2+
3+
@layer base {
4+
:root {
5+
/*
6+
* Font faces for Roboto Flex and Roboto Mono.
7+
*
8+
* - https://fonts.google.com/specimen/Roboto+Flex
9+
* - https://fonts.google.com/specimen/Roboto+Mono
10+
*
11+
* The TTF fonts have been compressed to woff2,
12+
* preserving the latin character subset.
13+
*
14+
* */
15+
16+
/* Roboto Flex */
17+
@font-face {
18+
font-family: "Roboto Flex";
19+
src: url("/assets/fonts/RobotoFlex.woff2") format("woff2");
20+
font-weight: 100 1000; /* Range of weights Roboto Flex supports */
21+
font-stretch: 100%; /* Range of width Roboto Flex supports */
22+
font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */
23+
font-display: fallback;
24+
}
25+
26+
/* Roboto Mono */
27+
@font-face {
28+
font-family: "Roboto Mono";
29+
src: url("/assets/fonts/RobotoMono-Regular.woff2") format("woff2");
30+
font-weight: 100 700; /* Define the range of weight the variable font supports */
31+
font-style: normal;
32+
font-display: fallback;
33+
}
34+
35+
/* Roboto Mono Italic */
36+
@font-face {
37+
font-family: "Roboto Mono";
38+
src: url("/assets/fonts/RobotoMono-Italic.woff2") format("woff2");
39+
font-weight: 100 700; /* Define the range of weight the variable font supports */
40+
font-style: italic;
41+
font-display: fallback;
42+
}
43+
}
44+
}
45+
46+
@theme {
47+
/* Font variables */
48+
--font-sans: "Roboto Flex", system-ui, -apple-system, BlinkMacSystemFont,
49+
"Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
50+
sans-serif;
51+
--font-mono: "Roboto Mono", monospace;
52+
--font-icons: "Material Symbols Rounded";
53+
54+
/* Font sizes */
55+
--text-xs: 0.7143rem;
56+
--text-xs--letter-spacing: 0.015em;
57+
--text-xs--font-weight: 500;
58+
--text-sm: 0.851rem;
59+
--text-base: 14px;
60+
--text-lg: 1.1429rem;
61+
--text-lg--line-height: 1.75;
62+
--text-xl: 1.2857rem;
63+
--text-xl--letter-spacing: -0.015em;
64+
--text-xl--font-weight: 500;
65+
--text-2xl: 1.5rem;
66+
--text-2xl--letter-spacing: -0.015em;
67+
--text-2xl--font-weight: 500;
68+
--text-3xl: 2rem;
69+
--text-3xl--font-weight: 500;
70+
--text-4xl: 2.5rem;
71+
--text-4xl--letter-spacing: -0.015em;
72+
--text-4xl--font-weight: 500;
73+
}

‎assets/css/global.css‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* global styles */
2+
@import "tailwindcss";
23

34
@layer base {
45
[x-cloak=""] {
@@ -41,49 +42,61 @@
4142
input[type="search"]::-ms-clear {
4243
display: none;
4344
}
45+
46+
/* Styles for built-in Table of Contents markup */
47+
#TableOfContents {
48+
.toc a {
49+
@apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
50+
&[aria-current="true"],
51+
&:hover {
52+
@apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
53+
}
54+
&:not([aria-current="true"]) {
55+
@apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
56+
}
57+
}
58+
}
4459
}
4560

4661
/* utility classes */
4762

48-
@layer utilities {
49-
.link {
50-
@apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
51-
}
63+
@utility link {
64+
@apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
65+
}
5266

53-
.invertible {
54-
@apply dark:hue-rotate-180 dark:invert dark:filter;
55-
}
67+
@utility invertible {
68+
@apply dark:hue-rotate-180 dark:invert dark:filter;
69+
}
5670

57-
.bg-pattern-blue {
58-
background-color: theme(colors.white / 50%);
59-
background-image: url('/assets/images/bg-pattern-blue.webp');
60-
background-blend-mode: overlay;
61-
background-size: cover;
62-
background-repeat: none;
63-
.dark & {
64-
background-color: theme(colors.black / 70%);
65-
}
71+
@utility bg-pattern-blue {
72+
background-color: theme(colors.white / 50%);
73+
background-image: url('/assets/images/bg-pattern-blue.webp');
74+
background-blend-mode: overlay;
75+
background-size: cover;
76+
background-repeat: none;
77+
.dark & {
78+
background-color: theme(colors.black / 70%);
6679
}
80+
}
6781

68-
.bg-pattern-purple {
69-
background-color: theme(colors.white / 50%);
70-
background-image: url('/assets/images/bg-pattern-purple.webp');
71-
background-blend-mode: overlay;
72-
background-size: cover;
73-
background-repeat: none;
74-
.dark & {
75-
background-color: theme(colors.black / 70%);
76-
}
82+
@utility bg-pattern-purple {
83+
background-color: theme(colors.white / 50%);
84+
background-image: url('/assets/images/bg-pattern-purple.webp');
85+
background-blend-mode: overlay;
86+
background-size: cover;
87+
background-repeat: none;
88+
.dark & {
89+
background-color: theme(colors.black / 70%);
7790
}
91+
}
7892

79-
.bg-pattern-verde {
80-
background-color: theme(colors.white / 50%);
81-
background-image: url('/assets/images/bg-pattern-verde.webp');
82-
background-blend-mode: overlay;
83-
background-size: cover;
84-
background-repeat: none;
85-
.dark & {
86-
background-color: theme(colors.black / 70%);
87-
}
93+
@utility bg-pattern-verde {
94+
background-color: theme(colors.white / 50%);
95+
background-image: url('/assets/images/bg-pattern-verde.webp');
96+
background-blend-mode: overlay;
97+
background-size: cover;
98+
background-repeat: none;
99+
.dark & {
100+
background-color: theme(colors.black / 70%);
88101
}
89102
}

‎assets/css/hack.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,24 @@
22
.ot-floating-button__close {
33
@apply flex justify-center items-center;
44
}
5+
6+
/* Kapa overrides */
7+
.mantine-Modal-root {
8+
.mantine-Modal-inner { inset: 0; }
9+
10+
ol {
11+
list-style-type: decimal;
12+
}
13+
14+
.mantine-List-root {
15+
min-width: 100%;
16+
}
17+
18+
.mantine-List-itemWrapper {
19+
max-width: 100%;
20+
}
21+
22+
.mantine-Prism-copy {
23+
background-color: rgb(20, 21, 23)
24+
}
25+
}

‎assets/css/icons.css‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
@layer utilities {
2-
.icon-svg {
3-
svg {
4-
font-size: 24px;
5-
width: 1em;
6-
height: 1em;
7-
display: inline-block;
8-
fill: currentColor;
9-
}
1+
@import "tailwindcss";
2+
3+
@utility icon-svg {
4+
svg {
5+
font-size: 24px;
6+
width: 1em;
7+
height: 1em;
8+
display: inline-block;
9+
fill: currentColor;
1010
}
11+
}
1112

12-
.icon-xs {
13-
svg {
14-
font-size: 12px;
15-
}
13+
@utility icon-xs {
14+
svg {
15+
font-size: 12px;
1616
}
17+
}
1718

18-
.icon-sm {
19-
svg {
20-
font-size: 16px;
21-
}
19+
@utility icon-sm {
20+
svg {
21+
font-size: 16px;
2222
}
23+
}
2324

24-
.icon-lg {
25-
svg {
26-
font-size: 32px;
27-
}
25+
@utility icon-lg {
26+
svg {
27+
font-size: 32px;
2828
}
2929
}

‎assets/css/kapa.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)