Repository navigation
Expand file tree
/
Copy pathapp.css
More file actions
116 lines (100 loc) · 2.1 KB
/
Copy pathapp.css
File metadata and controls
116 lines (100 loc) · 2.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
@import "open-props/style";
@import "open-props/normalize";
@import "open-props/colors";
@import "open-props/colors-hsl";
@import "open-props/gradients";
:root {
interpolate-size: allow-keywords;
}
body {
font-family: var(--font-sans);
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-rounded-sans);
text-wrap: balance;
}
/* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
details {
@media (prefers-reduced-motion: no-preference) {
interpolate-size: allow-keywords;
}
&::details-content {
opacity: 0;
block-size: 0;
overflow-y: clip;
transition:
content-visibility 0.5s allow-discrete,
opacity 0.5s,
block-size 0.5s;
}
&[open]::details-content {
opacity: 1;
block-size: auto;
}
}
details,
summary {
margin: 0;
padding: 0;
background: unset;
}
a {
text-decoration-line: underline;
}
p,
a,
details,
summary,
.text-paragraph {
font-family: var(--font-geometric-humanist);
font-size: var(--font-size-3);
}
pre.shiki {
font-family: var(--font-monospace-code);
border-radius: var(--radius-3);
max-inline-size: unset;
padding-block: var(--size-fluid-2);
margin: var(--size-fluid-1) 0;
code {
counter-reset: step;
counter-increment: step 0;
display: block;
.line {
padding-block: 2px;
margin-inline: 0;
margin-block: -12px;
padding-inline: var(--size-fluid-1);
display: block;
&::before {
content: counter(step);
counter-increment: step;
width: var(--size-fluid-1);
margin-right: var(--size-fluid-1);
display: inline-block;
text-align: right;
color: hsl(var(--gray-1-hsl) / 30%);
}
&.diff.remove {
background-color: hsl(var(--red-5-hsl) / 20%);
:first-child::before {
content: "- ";
}
}
&.diff.add {
background-color: hsl(var(--green-5-hsl) / 20%);
:first-child::before {
content: "+ ";
}
}
&.highlighted {
background-color: hsl(var(--gray-2-hsl) / 10%);
}
}
}
}