index.css

1/* Font face */
2@font-face {
3  font-family: "RedHatDisplay";
4  src: url("../public/fonts/RedHatDisplay-VariableFont_wght.ttf")
5    format("truetype");
6  font-weight: 100 900;
7  font-display: swap;
8}
9
10/* Base Reset */
11* {
12  margin: 0;
13  padding: 0;
14  box-sizing: border-box;
15}
16
17/* Light Theme Variables */
18:root {
19  --font-body: "RedHatDisplay", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
20    "Cantarell", sans-serif;
21  --font-code: "source-code-pro", Menlo, Monaco, Consolas, "Courier New",
22    monospace;
23
24  --color-bg: #ffffff;
25  --color-text: #111111;
26  --color-muted: #666666;
27  --color-primary: #0070f3;
28  --color-border: #eaeaea;
29  --color-card: #f9f9f9;
30  --color-shadow: rgba(0, 0, 0, 0.05);
31
32  --footer-bg: #f9f9f9;
33  --border-color: #ccc;
34  --text-color: #333;
35  --accent-color: #0070f3;
36}
37
38/* Dark Theme Override */
39[data-theme="dark"] {
40  --color-bg: #0f0f0f;
41  --color-text: #f2f2f2;
42  --color-muted: #999999;
43  --color-primary: #1e90ff;
44  --color-border: #2a2a2a;
45  --color-card: #1a1a1a;
46  --color-shadow: rgba(255, 255, 255, 0.05);
47
48  --footer-bg: #121212;
49  --border-color: #333;
50  --text-color: #eee;
51  --accent-color: #66ccff;
52}
53
54/* Body and global text styles */
55body {
56  font-family: var(--font-body);
57  background-color: var(--color-bg);
58  color: var(--color-text);
59  transition: background-color 0.3s ease, color 0.3s ease;
60  line-height: 1.6;
61}
62
63/* Code */
64code {
65  font-family: var(--font-code);
66  background-color: var(--color-card);
67  padding: 0.2em 0.4em;
68  border-radius: 4px;
69  font-size: 0.95em;
70}
71
72/* Container */
73.container {
74  max-width: 960px;
75  margin: 0 auto;
76  padding: 1.5rem;
77}
78
79/* Card */
80.card {
81  background-color: var(--color-card);
82  border: 1px solid var(--color-border);
83  border-radius: 0.75rem;
84  box-shadow: 0 4px 6px var(--color-shadow);
85  padding: 1.25rem;
86  transition: background-color 0.3s ease, box-shadow 0.3s ease;
87}
88
89/* Button */
90.button {
91  background-color: var(--color-primary);
92  color: white;
93  border: none;
94  border-radius: 0.5rem;
95  padding: 0.6rem 1.2rem;
96  cursor: pointer;
97  font-weight: 600;
98  transition: background-color 0.2s ease;
99}
100
101.button:hover {
102  background-color: darken(var(--color-primary), 10%);
103}
104
105.button:disabled {
106  opacity: 0.6;
107  cursor: not-allowed;
108}