[Archived] Archived WIP of vielle.dev
vielle.dev
1.content {
2 /* Custom Flags */
3
4 & blockquote {
5 &[data-bq-flag--note],
6 &[data-bq-flag--alert],
7 &[data-bq-flag--info] {
8 color: black;
9 }
10
11 &[data-bq-flag--note] {
12 --accent: var(--rainbow-4);
13 --icon: "📝";
14 --name: "Note";
15 }
16
17 &[data-bq-flag--alert] {
18 --accent: var(--rainbow-0);
19 --icon: "🚨";
20 --name: "Alert";
21 }
22
23 &[data-bq-flag--info] {
24 --accent: var(--rainbow-5);
25 --icon: "📚";
26 --name: "Info";
27 }
28 }
29
30 & p,
31 & div:has(> p) {
32 &[data-para-flag--bg-red],
33 &[data-para-flag--bg-orange],
34 &[data-para-flag--bg-yellow],
35 &[data-para-flag--bg-green],
36 &[data-para-flag--bg-blue],
37 &[data-para-flag--bg-purple] {
38 /* contrasting colour */
39 color: black;
40 }
41
42 &[data-para-flag--bg-red] {
43 background-color: var(--rainbow-0);
44 }
45
46 &[data-para-flag--bg-orange] {
47 background-color: var(--rainbow-1);
48 }
49
50 &[data-para-flag--bg-yellow] {
51 background-color: var(--rainbow-2);
52 }
53
54 &[data-para-flag--bg-green] {
55 background-color: var(--rainbow-3);
56 }
57
58 &[data-para-flag--bg-blue] {
59 background-color: var(--rainbow-4);
60 }
61
62 &[data-para-flag--bg-purple] {
63 background-color: var(--rainbow-5);
64 }
65 }
66
67 & img {
68 &[data-img-flag--small="true"] {
69 width: 50%;
70 }
71
72 &[data-img-flag--left="true"] {
73 float: left;
74 }
75
76 &[data-img-flag--right="true"] {
77 float: right;
78 }
79
80 &[data-img-flag--centre="true"] {
81 margin-inline: auto;
82 }
83 }
84
85 /* Headings */
86
87 & h2,
88 & h3,
89 & h4 {
90 margin-block-start: 20px;
91 margin-block-end: 20px;
92
93 color: var(--typo-subheading);
94
95 & + & {
96 margin-block-start: 0;
97 }
98
99 :has(+ &) {
100 margin-block-end: 0;
101 }
102 }
103
104 & h2 {
105 font-size: 2.2rem;
106 }
107
108 & h3 {
109 font-size: 1.8rem;
110 }
111
112 & h4 {
113 font-size: 1.5rem;
114 }
115
116 /* Paragraphs */
117 & p,
118 & blockquote {
119 clear: both;
120 margin-block: 20px;
121 }
122
123 & div:has(> p) {
124 margin-block: 10px;
125 }
126
127 /* Images */
128 & img {
129 height: auto; /* fix height issues ?? */
130 margin: 10px;
131 }
132
133 & a {
134 text-decoration: 2px underline;
135
136 &:link {
137 color: var(--typo-url);
138 }
139 &:visited {
140 color: var(--typo-visited);
141 }
142 &:hover {
143 text-decoration: 1px wavy underline;
144 }
145 &:active {
146 color: var(--rainbow-3);
147 }
148 }
149
150 /* Standard Lists */
151 & ul,
152 & ol {
153 margin-inline-start: 40px;
154 & & {
155 margin-inline-start: 20px;
156 }
157 }
158
159 /* Blockquotes */
160 & blockquote {
161 --accent: var(--bg-secondary);
162 border-left: 2px solid hsl(from var(--accent) h s calc(l * 0.9));
163 padding: 10px 40px 10px 10px;
164 margin: 10px;
165 border-radius: 5px;
166 background-color: var(--accent);
167 width: fit-content;
168 min-width: 200px;
169
170 &::before {
171 content: var(--icon) " " var(--name) / var(--name);
172 }
173 }
174
175 /* Inline code */
176 :not(pre) > code {
177 color: var(--typo-code);
178 background-color: var(--bg-code);
179 padding: 2px;
180 border-radius: 5px;
181
182 /* make blockquote code use a lighter version of the accent with a darker background */
183 :is(blockquote) & {
184 color: hsl(from var(--accent) h calc(s * 0.8) calc(l * 1.4));
185 background-color: #00000080;
186 }
187 }
188
189 /* Outline Code */
190 & pre:has(> code) {
191 padding: 5px;
192 border-radius: 10px;
193 }
194
195 .astro-code {
196 background-color: var(--bg-code) !important;
197 margin-block: 10px;
198 padding: 0;
199 position: relative;
200
201 & code {
202 display: block;
203 padding: 10px;
204
205 & span {
206 color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
207 }
208 }
209 }
210
211 /* Check lists */
212 .task-list-item {
213 list-style: none;
214 }
215
216 .task-list-item label {
217 display: flex;
218 margin-block-start: 5px;
219 margin-block-end: 7.5px;
220
221 gap: 5px;
222
223 & input[type="checkbox"] {
224 width: 25px;
225 height: 25px;
226 margin-inline-end: 5px;
227
228 background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
229 border-radius: 5px;
230 border: 1px solid var(--typo-body);
231
232 &:checked {
233 --checkmark: url("../../assets/check.svg");
234 background: var(--checkmark) center/20px padding-box no-repeat
235 var(--rainbow-2);
236 }
237 }
238 }
239
240 /* Table */
241 & table {
242 border-collapse: collapse;
243 border-spacing: 0;
244
245 & th,
246 & td {
247 border: 1px solid white;
248 padding: 5px;
249 }
250
251 & thead th {
252 background-color: var(--bg-secondary);
253 }
254
255 & tbody tr:nth-child(2n) {
256 background-color: #ffffff10;
257 }
258 }
259}