marc.beninca.link
Domain Name: Marc Beninca 馃敆
marc.beninca.link
tilde.link
1/*
2variables
3*/
4
5:root {
6 --alpha: rgba(0, 0, 0, 0);
7 --anchor-gradient: linear-gradient(to top, var(--alpha), var(--anchor-background), var(--alpha));
8 --article-gradient: linear-gradient(to top, var(--alpha), var(--article-background));
9 --section-gradient: linear-gradient(to top, var(--alpha), var(--section-header-background));
10 --footer-gradient: linear-gradient(to top, var(--footer-background), var(--footer-background) 66%, var(--alpha));
11 --header-gradient: linear-gradient(to top, var(--alpha), var(--header-background) 33%, var(--header-background));
12 --article-header-gradient: linear-gradient(to top, var(--alpha), var(--article-header-background));
13 --article-sub-gradient: linear-gradient(to top, var(--alpha), var(--article-sub-background));
14/*
15light
16*/
17 --anchor-background: #fcc;
18 --anchor-foreground: #00f;
19 --anchor-hover: #f00;
20 --article-background: #ccc;
21 --body-background: #fff;
22 --body-foreground: #000;
23 --body-image: url("../img/light/debian-white.jpeg");
24 --button-background: #bbb;
25 --footer-background: #8cc;
26 --header-background: #8cc;
27 --section-header-background: #8c8;
28 --article-header-background: #ebb;
29 --article-sub-background: #bbe;
30}
31/*
32dark
33*/
34@media screen {
35[data-theme="dark"] {
36 --anchor-background: #622;
37 --anchor-foreground: #f88;
38 --anchor-hover: #cc6;
39 --article-background: #777;
40 --body-background: #000;
41 --body-foreground: #ccc;
42 --body-image: url("../img/dark/debian-blue.jpeg");
43 --button-background: #444;
44 --footer-background: #033;
45 --header-background: #033;
46 --section-header-background: #030;
47 --article-header-background: #300;
48 --article-sub-background: #003;
49}
50}
51
52/*
53document
54*/
55
56html {
57 font-family: "DejaVu Sans", sans-serif;
58 text-align: start;
59}
60
61body {
62 background-color: var(--body-background);
63 background-image: var(--body-image);
64 background-position: center;
65 background-repeat: no-repeat;
66 background-size: cover;
67 color: var(--body-foreground);
68 display: flex;
69 flex-direction: column;
70 justify-content: space-between;
71}
72
73/*
74structure
75*/
76
77.sticky {
78 align-items: center;
79 display: flex;
80 justify-content: space-between;
81 position: sticky;
82}
83
84header.sticky {
85 background: var(--header-gradient);
86 margin-block-end: .5em;
87 top: 0;
88}
89
90footer {
91 background: var(--footer-gradient);
92}
93
94footer.sticky {
95 bottom: 0;
96 margin-block-start: .5em;
97}
98
99main {
100 display: flex;
101 flex-direction: column;
102 flex-grow: 1;
103 justify-content: space-evenly;
104}
105
106button {
107 background-color: var(--button-background);
108}
109
110button img {
111 block-size: 1.5em;
112}
113
114/*
115links
116*/
117
118.link #link,
119.link a {
120 background: var(--anchor-gradient);
121}
122
123a {
124 color: var(--anchor-foreground);
125 text-decoration: none;
126 text-decoration-skip-ink: auto;
127 text-underline-offset: .15em;
128}
129
130a:hover {
131 color: var(--anchor-hover);
132}
133
134a img {
135 block-size: 1.5em;
136}
137
138/*
139headings
140*/
141
142h1, h2, h3, h4, h5 {
143 font-weight: bold;
144 padding: .25em .5em;
145}
146
147h4 {
148 font-weight: normal;
149}
150
151h1 {
152 font-size: 1.4rem;
153}
154h2 {
155 font-size: 1.3rem;
156}
157h3 {
158 font-size: 1.2rem;
159}
160h4 {
161 font-size: 1.1rem;
162}
163
164/*
165sections
166*/
167
168header:has(h2) {
169 background: var(--section-gradient);
170}
171
172section .body {
173 display: flex;
174 flex-wrap: wrap;
175 gap: .5em;
176 justify-content: space-evenly;
177}
178
179/*
180articles
181*/
182
183article {
184 background: var(--article-gradient);
185 padding: .25em .5em;
186}
187
188header:has(h3) {
189 background: var(--article-header-gradient);
190}
191header:has(h4) {
192 background: var(--article-sub-gradient);
193}
194
195article .body {
196 display: block;
197}
198
199/*
200content
201*/
202
203ul {
204 list-style-type: disc;
205 padding-inline-start: 1.25em;
206}
207
208hr {
209 border-style: dashed;
210 margin: .5em;
211}
212
213/*
214debug
215*/
216
217.debug * {
218 border-color: lightgray;
219 border-style: dashed;
220 border-width: 1px;
221}