diff options
-rw-r--r-- | docs/style.css | 50 | ||||
-rw-r--r-- | docs/syntax.css | 167 |
2 files changed, 196 insertions, 21 deletions
diff --git a/docs/style.css b/docs/style.css index 379e56f..fb0ecde 100644 --- a/docs/style.css +++ b/docs/style.css | |||
@@ -1,15 +1,20 @@ | |||
1 | @import url('https://rsms.me/inter/inter.css'); | 1 | @import url('https://rsms.me/inter/inter.css'); |
2 | 2 | ||
3 | .feed-button { | 3 | .hot-links { |
4 | float: right; | 4 | float: right; |
5 | text-decoration: none; | 5 | padding: 0.3rem 0rem; |
6 | margin: -0.5rem 0; | ||
7 | } | ||
8 | |||
9 | .feed-button, .donate-button { | ||
10 | background-color: var(--dark-white); | ||
11 | border-radius: 0.2rem; | ||
12 | border: 0px solid var(--dark-white); | ||
6 | color: var(--black) !important; | 13 | color: var(--black) !important; |
7 | background-color: var(--cyan); | ||
8 | font-size: 0.8rem; | 14 | font-size: 0.8rem; |
9 | padding: 0.3rem 0.5rem; | ||
10 | margin: -0.5rem 0; | 15 | margin: -0.5rem 0; |
11 | border: 0px solid var(--dark-white); | 16 | padding: 0.3rem 0.5rem; |
12 | border-radius: 0.2rem; | 17 | text-decoration: none; |
13 | } | 18 | } |
14 | 19 | ||
15 | ::-moz-selection, ::selection { | 20 | ::-moz-selection, ::selection { |
@@ -17,12 +22,15 @@ | |||
17 | } | 22 | } |
18 | 23 | ||
19 | :root { | 24 | :root { |
20 | --cyan: #79ffe1; | 25 | --cyan: #00cece; |
21 | --pink: #d344e2; | 26 | --pink: #d344e2; |
22 | --black: #212121; | 27 | --black: #212121; |
23 | --light-black: #666666; | 28 | --light-black: #666666; |
24 | --white: #ffffff; | 29 | --white: #ffffff; |
25 | --dark-white: #eeeeee; | 30 | --dark-white: #eeeeee; |
31 | |||
32 | --light-yellow: #F7B955; | ||
33 | --dark-yellow: #F49B0B; | ||
26 | } | 34 | } |
27 | 35 | ||
28 | @media (prefers-color-scheme: dark) { | 36 | @media (prefers-color-scheme: dark) { |
@@ -34,10 +42,6 @@ | |||
34 | --white: #000; | 42 | --white: #000; |
35 | --dark-white: #323232; | 43 | --dark-white: #323232; |
36 | } | 44 | } |
37 | .feed-button { | ||
38 | color: var(--white) !important; | ||
39 | background: var(--cyan); | ||
40 | } | ||
41 | ::-moz-selection, ::selection { | 45 | ::-moz-selection, ::selection { |
42 | color: var(--white); | 46 | color: var(--white); |
43 | background: var(--cyan); | 47 | background: var(--cyan); |
@@ -62,6 +66,7 @@ body { | |||
62 | } | 66 | } |
63 | 67 | ||
64 | html { | 68 | html { |
69 | padding: 0; | ||
65 | line-height: 1.5; | 70 | line-height: 1.5; |
66 | font-size: 18px; | 71 | font-size: 18px; |
67 | } | 72 | } |
@@ -119,26 +124,28 @@ td { | |||
119 | } | 124 | } |
120 | 125 | ||
121 | .posts { | 126 | .posts { |
122 | width: 97%; | 127 | width: 95%; |
123 | max-width: 650px; | 128 | max-width: 650px; |
124 | } | 129 | } |
125 | 130 | ||
126 | pre, code { | 131 | pre:not(.sourceCode),div.sourceCode { |
127 | font-family: monospace; | 132 | overflow: auto !important; |
128 | } | 133 | padding: 1.3rem; |
129 | 134 | margin: 1rem -1.3rem !important; | |
130 | pre { | ||
131 | overflow: auto; | ||
132 | padding: 1rem; | ||
133 | border: 2px solid var(--dark-white); | 135 | border: 2px solid var(--dark-white); |
134 | border-radius: 0.4rem; | 136 | border-radius: 0.4rem; |
135 | } | 137 | } |
136 | 138 | ||
139 | pre, code { | ||
140 | font-family: monospace; | ||
141 | } | ||
142 | |||
137 | code { | 143 | code { |
138 | color: var(--pink); | 144 | color: var(--pink); |
139 | } | 145 | } |
140 | 146 | ||
141 | pre > code { | 147 | pre > code { |
148 | white-space: pre !important; | ||
142 | border: none; | 149 | border: none; |
143 | color: var(--black); | 150 | color: var(--black); |
144 | } | 151 | } |
@@ -162,7 +169,7 @@ pre > code { | |||
162 | 169 | ||
163 | 170 | ||
164 | .post { | 171 | .post { |
165 | margin: 1rem; | 172 | margin: 0.5rem; |
166 | } | 173 | } |
167 | 174 | ||
168 | img { | 175 | img { |
@@ -196,9 +203,10 @@ hr { | |||
196 | font-size: 0.8rem; | 203 | font-size: 0.8rem; |
197 | overflow: auto; | 204 | overflow: auto; |
198 | padding: 1.3rem; | 205 | padding: 1.3rem; |
206 | padding-right: 0.6rem; | ||
199 | border: 2px solid var(--dark-white); | 207 | border: 2px solid var(--dark-white); |
200 | border-radius: 0.4rem; | 208 | border-radius: 0.4rem; |
201 | margin: 1rem -1.3rem; | 209 | margin: 2rem -1.3rem; |
202 | font-family: 'Inter', sans-serif; | 210 | font-family: 'Inter', sans-serif; |
203 | } | 211 | } |
204 | 212 | ||
diff --git a/docs/syntax.css b/docs/syntax.css new file mode 100644 index 0000000..fbfb6fe --- /dev/null +++ b/docs/syntax.css | |||
@@ -0,0 +1,167 @@ | |||
1 | code { | ||
2 | white-space: pre-wrap; | ||
3 | } | ||
4 | |||
5 | span.smallcaps { | ||
6 | font-variant: small-caps; | ||
7 | } | ||
8 | |||
9 | span.underline { | ||
10 | text-decoration: underline; | ||
11 | } | ||
12 | |||
13 | div.column { | ||
14 | display: inline-block; | ||
15 | vertical-align: top; | ||
16 | width: 50%; | ||
17 | } | ||
18 | |||
19 | div.hanging-indent { | ||
20 | margin-left: 1.5em; | ||
21 | text-indent: -1.5em; | ||
22 | } | ||
23 | |||
24 | ul.task-list { | ||
25 | list-style: none; | ||
26 | } | ||
27 | |||
28 | pre > code.sourceCode { | ||
29 | white-space: pre; | ||
30 | position: relative; | ||
31 | } | ||
32 | |||
33 | pre > code.sourceCode > span { | ||
34 | display: inline-block; | ||
35 | line-height: 1.25; | ||
36 | } | ||
37 | |||
38 | pre > code.sourceCode > span:empty { | ||
39 | height: 1.2em; | ||
40 | } | ||
41 | |||
42 | code.sourceCode > span { | ||
43 | color: inherit; | ||
44 | text-decoration: inherit; | ||
45 | } | ||
46 | |||
47 | div.sourceCode { | ||
48 | margin: 1em 0; | ||
49 | } | ||
50 | |||
51 | pre.sourceCode { | ||
52 | margin: 0; | ||
53 | } | ||
54 | |||
55 | @media screen { | ||
56 | div.sourceCode { | ||
57 | overflow: auto; | ||
58 | } | ||
59 | } | ||
60 | |||
61 | @media print { | ||
62 | pre > code.sourceCode { | ||
63 | white-space: pre-wrap; | ||
64 | } | ||
65 | pre > code.sourceCode > span { | ||
66 | text-indent: -5em; | ||
67 | padding-left: 5em; | ||
68 | } | ||
69 | } | ||
70 | |||
71 | pre.numberSource code { | ||
72 | counter-reset: source-line 0; | ||
73 | } | ||
74 | |||
75 | pre.numberSource code > span { | ||
76 | position: relative; | ||
77 | left: -4em; | ||
78 | counter-increment: source-line; | ||
79 | } | ||
80 | |||
81 | pre.numberSource code > span > a:first-child::before { | ||
82 | content: counter(source-line); | ||
83 | position: relative; | ||
84 | left: -1em; | ||
85 | text-align: right; | ||
86 | vertical-align: baseline; | ||
87 | border: none; | ||
88 | display: inline-block; | ||
89 | -webkit-touch-callout: none; | ||
90 | -webkit-user-select: none; | ||
91 | -khtml-user-select: none; | ||
92 | -moz-user-select: none; | ||
93 | -ms-user-select: none; | ||
94 | user-select: none; | ||
95 | padding: 0 4px; | ||
96 | width: 4em; | ||
97 | } | ||
98 | |||
99 | pre.numberSource { | ||
100 | margin-left: 3em; | ||
101 | padding-left: 4px; | ||
102 | } | ||
103 | |||
104 | div.sourceCode { | ||
105 | } | ||
106 | |||
107 | @media screen { | ||
108 | pre > code.sourceCode > span > a:first-child::before { | ||
109 | text-decoration: underline; | ||
110 | } | ||
111 | } | ||
112 | |||
113 | code span.al { | ||
114 | font-weight: bold; | ||
115 | } | ||
116 | |||
117 | code span.an { | ||
118 | font-style: italic; | ||
119 | } | ||
120 | |||
121 | code span.cf { | ||
122 | font-weight: bold; | ||
123 | } | ||
124 | |||
125 | code span.co { | ||
126 | font-style: italic; | ||
127 | } | ||
128 | |||
129 | code span.cv { | ||
130 | font-style: italic; | ||
131 | } | ||
132 | |||
133 | code span.do { | ||
134 | font-style: italic; | ||
135 | } | ||
136 | |||
137 | code span.dt { | ||
138 | text-decoration: underline; | ||
139 | } | ||
140 | |||
141 | code span.er { | ||
142 | font-weight: bold; | ||
143 | } | ||
144 | |||
145 | code span.in { | ||
146 | font-style: italic; | ||
147 | } | ||
148 | |||
149 | code span.kw { | ||
150 | font-weight: bold; | ||
151 | } | ||
152 | |||
153 | code span.pp { | ||
154 | font-weight: bold; | ||
155 | } | ||
156 | |||
157 | code span.wa { | ||
158 | font-style: italic; | ||
159 | } | ||
160 | |||
161 | code span.st { | ||
162 | color: var(--cyan); | ||
163 | } | ||
164 | |||
165 | code span.at { | ||
166 | color: var(--pink); | ||
167 | } | ||