1html {
2 scroll-behavior: smooth;
3 padding: 0 15px;
4 border-top: 0.5em solid #808080;
5 min-height: 100vh;
6 padding: 2em;
7 --border-color: linear-gradient(
8 to right,
9 #ffafc7 10%,
10 #73d7ee 10% 20%,
11 #613915 20% 30%,
12 #000000 30% 40%,
13 #e50000 40% 50%,
14 #ff8d00 50% 60%,
15 #ffee00 60% 70%,
16 #028121 70% 80%,
17 #004cff 80% 90%,
18 #760088 90%
19 );
20 border-image: var(--border-color) 1;
21}
22body {
23 font-family: Heliotrope;
24 color: $dark;
25 background: $light;
26}
27details {
28 margin-left: 3.5%;
29}
30summary {
31 padding: 0 10px;
32 a {
33 color: $dark;
34 }
35 a:visited {
36 color: $dark;
37 }
38}
39summary:hover {
40 cursor: pointer;
41 background-color: #ddd;
42 border-radius: 7px;
43}
44.admonition {
45 margin: 15px -12px;
46 padding: 5px 10px;
47 border: 2px solid;
48 border-radius: 7px;
49 p {
50 margin: 0;
51 }
52
53 &.note {
54 border-color: #b3d1f3;
55 background-color: #e5f1ff;
56 }
57 &.tip {
58 border-color: #b3f3d1;
59 background-color: #e5fff1;
60 }
61 &.warn {
62 border-color: #f3d1b3;
63 background-color: #fff0ce;
64 }
65 &.err {
66 border-color: #f3b3b3;
67 background-color: #ffe5e5;
68 }
69}
70blockquote {
71 margin: 15px -19px;
72 padding: 0 15px;
73 border-left: 3px solid $dark;
74 border-radius: 7px;
75 color: $dark;
76 background: #f7f7f7;
77 p {
78 margin: 0;
79 }
80}
81.content > ul, #TableOfContents > ul, .content > ol, #TableOfContents > ol {
82 padding-left: 1em;
83}
84ul, ol > ul, ol {
85 padding-left: 1.1em;
86}
87hr {
88 margin: 15px 0;
89 border: 1px solid $dark;
90}
91code {
92 background: $button-background;
93 border-radius: 3px;
94 padding: 0 4px;
95}
96pre {
97 margin: 15px -12px;
98 border: 2px solid unset;
99 border-radius: 7px;
100}
101code, pre {
102 font-size: 16px;
103 font-family: "Berkeley Mono", monospace;
104 color: $dark;
105}
106input {
107 font-family: inherit;
108 text-align: center;
109 width: 100%;
110 height: 35px;
111 box-sizing: border-box;
112 box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff;
113 transition: 0.15s ease-out;
114}
115input[type="text"] {
116 font-size: inherit;
117 color: $dark;
118 text-decoration: italic;
119 border: 1px solid #9fa6ad;
120 border-radius: 3px;
121}
122input[type="text"]:focus {
123}
124.wrapper {
125 max-width: 600px;
126 margin: 0 auto;
127 font-size: 18px;
128 line-height: 30px;
129 overflow-wrap: break-word;
130 word-wrap: break-word;
131 word-break: break-word;
132 -moz-hyphens: auto;
133 hyphens: auto;
134 text-align: left;
135}
136
137.content {
138 h2, p, li, td {
139 a:not(.button) {
140 color: $dark;
141 text-decoration: none;
142 background-image: linear-gradient(
143 120deg,
144 $gradient-right 0%,
145 $gradient-left 100%
146 );
147 background-repeat: no-repeat;
148 background-size: 0 0;
149 background-position: 100% 21%;
150 transition: 0.15s ease-out;
151 &:hover {
152 background-size: 100% 100%;
153 color: $light;
154 &:after {
155 color: $gradient-right;
156 }
157 }
158 &::after {
159 position: relative;
160 content: "\FEFF°";
161 margin-left: 0.1em;
162 font-size: 90%;
163 top: -0.1em;
164 color: $light-highlight;
165 font-feature-settings: "caps";
166 font-variant-numeric: normal;
167 }
168 }
169 }
170 .anchor-tag {
171 font-size: 70%;
172 position: relative;
173 bottom: 2.6px;
174 background-size: 100% 0;
175 background-position: 0 150%;
176 &::after {
177 content: "";
178 }
179 }
180 .footnote-ref {
181 background-size: 100% 1.5px;
182 background-position: 0 90%;
183 &::after {
184 content: "";
185 }
186 &:hover {
187 background-size: 100% 100%;
188 color: #fff;
189 }
190 }
191 .footnote-backref {
192 background-size: 100% 1.5px;
193 background-position: 0 90%;
194 &::after {
195 content: "";
196 }
197 &:hover {
198 background-size: 100% 100%;
199 color: #fff;
200 }
201 }
202 .highlight {
203 code {
204 padding: 0px !important;
205 }
206 pre {
207 overflow: auto;
208 border-radius: 5px;
209 padding: 12px;
210 background: $button-background !important;
211 }
212 a {
213 background-image: none;
214 &::after {
215 content: "";
216 }
217 }
218 }
219}
220
221.button {
222 font-family: inherit;
223 font-style: normal !important;
224 text-decoration: none !important;
225 height: 25px;
226 box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff;
227 display: inline-block;
228 color: $dark;
229 text-shadow: 0 1px 0 #fff;
230 background-color: #e4e6e8;
231 border: 1px solid #9fa6ad;
232 border-radius: 3px;
233 padding: 0px 4px 4px;
234}
235
236footer {
237 padding: 20px 0 20px 0;
238 text-align: center;
239 line-height: 30px;
240 margin-top: auto;
241 margin-bottom: 25px;
242 a {
243 color: $dark;
244 }
245 a:visited {
246 color: $dark;
247 }
248 .ring {
249 font-size: 20px;
250 }
251 .boring_stuff {
252 font-style: italic;
253 }
254}
255
256.tags {
257 display: flex;
258 flex-direction: row;
259 flex-wrap: wrap;
260 gap: 5px;
261 margin: 10px 0px 13px 0px !important;
262}