krz/php-blog
A PHP blogging system with built-in static comments.
clone: git clone https://gitbay.org/krz/php-blog.git
1:root {
2 --bg0: #121212;
3 --bg1: #202020;
4 --bg2: #3b3b3b;
5 --bg3: #5b5b5b;
6 --fg0: #ffffff;
7 --fg1: #cccccc;
8 --fg2: #9aa0a7;
9 --fg3: #fce21b;
10 --fg4: #e2cb18;
11 --fg3-5: rgba(252, 226, 27, 0.5);
12 --fg3-8: rgba(252, 226, 27, 0.8);
13 --fg3-25: rgba(252, 226, 27, 0.25)
14}
15
16*, ::after, ::before {
17 box-sizing: border-box
18}
19
20html {
21 font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
22 scroll-behavior: smooth
23}
24
25body {
26 background-color: var(--bg0);
27 color: var(--fg1);
28 font-size: 1rem;
29 font-weight: 400;
30 line-height: 1.5;
31 margin: 0;
32 -webkit-text-size-adjust: 100%
33}
34
35h1, h2, h3, h4, h5, h6 {
36 color: white;
37 font-family: mSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
38}
39
40time {
41 display: block;
42 font-family: mSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
43 margin: 0
44}
45
46time.d-inline {
47 display: inline
48}
49
50blockquote {
51 background: var(--bg2);
52 color: var(--fg0);
53 border-left: 5px solid var(--fg3);
54 margin: 1rem auto;
55 padding: 1rem 2rem
56}
57
58blockquote p {
59 margin: 0
60}
61
62a {
63 color: var(--fg3);
64 font-family: mSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
65}
66
67.img-fluid {
68 border: 1px solid var(--bg3);
69 max-width: 100%;
70 height: auto
71}
72
73kbd, ode, pre, samp {
74 font-family: mSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
75 font-size: 1em;
76 direction: ltr;
77 unicode-bidi: bidi-override
78}
79
80pre {
81 background-color: var(--bg2);
82 color: var(--fg0);
83 display: block;
84 margin-top: 0;
85 margin-bottom: 1rem;
86 overflow: auto;
87 padding: 1rem;
88 border-radius: 0.25rem
89}
90
91pre code {
92 font-size: inherit;
93 color: inherit;
94 word-break: normal
95}
96
97code {
98 color: #d63384;
99 word-wrap: break-word
100}
101
102a > code {
103 color: inherit
104}
105
106kbd {
107 padding: 0.2rem 0.4rem;
108 color: var(--fg0);
109 background-color: #212529;
110 border-radius: 0.2rem
111}
112
113kbd kbd {
114 padding: 0;
115 font-size: 1em;
116 font-weight: 700
117}
118
119nav.links {
120 margin-bottom: 2rem;
121 margin-top: 2rem;
122 text-align: center
123}
124
125footer, main {
126 margin: auto;
127 max-width: 45em;
128 padding: 2rem
129}
130
131footer {
132 border-top: 1px solid var(--bg3);
133 font-family: mSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
134}
135
136@media (max-width: 576px) {
137 body {
138 margin: 0
139 }
140
141 footer, main {
142 padding-left: 1rem;
143 padding-right: 1rem
144 }
145}
146
147ul.blog-posts {
148 list-style: none;
149 padding: 0
150}
151
152ul.blog-posts li {
153 margin-bottom: 1rem
154}
155
156@media (max-width: 576px) {
157 .blog-post {
158 border-radius: 0
159 }
160}
161
162.blog-post-body li, .blog-post-body p {
163 color: #ddd
164}
165
166.blog-post-body a {
167 color: var(--fg3);
168 font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
169}
170
171.blog-post-title {
172 display: block;
173 font-weight: bold;
174 position: relative;
175 margin: 0 0 15px;
176 padding-bottom: 15px;
177 border-bottom: 3px dotted var(--fg3)
178}
179
180.blog-post-title::after {
181 content: "";
182 position: absolute;
183 bottom: 2px;
184 display: block;
185 width: 100%;
186 border-bottom: 3px dotted var(--fg3)
187}
188
189.blog-post-metadata a {
190 color: var(--fg3)
191}
192
193.blog-post-body h2 {
194 margin-top: 2rem
195}
196
197.form-label {
198 margin-bottom: 0.5rem
199}
200
201.form-text {
202 color: #ccc;
203 margin-top: 0.25rem;
204 font-size: 0.875em
205}
206
207.form-control {
208 display: block;
209 width: 100%;
210 padding: 0.375rem 0.75rem;
211 font-size: 1rem;
212 font-weight: 400;
213 line-height: 1.5;
214 color: #fff;
215 background-color: #5b5b5b;
216 background-clip: padding-box;
217 border: 1px solid #5b5b5b;
218 -webkit-appearance: none;
219 -moz-appearance: none;
220 appearance: none;
221 border-radius: 0.25rem;
222 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
223}
224
225@media (prefers-reduced-motion: reduce) {
226 .form-control {
227 transition: none
228 }
229}
230
231form {
232 background-color: #3b3b3b;
233 border-radius: 0.5rem;
234 margin-top: 2rem;
235 padding: 1rem
236}
237
238form section {
239 margin-bottom: 1rem
240}
241
242textarea {
243 font-family: inherit
244}
245
246.comments {
247 background-color: #3b3b3b;
248 border-radius: 0.5rem;
249 margin-top: 1rem;
250 padding: 1rem
251}
252
253.user-comment {
254 background-color: var(--bg3);
255 border-radius: 0.5rem;
256 padding: 0.5rem;
257 margin-bottom: 0.5rem
258}
259
260.user-comment .row:not(.markdown) {
261 display: flex;
262 justify-content: flex-start;
263 align-items: center
264}
265
266.user-comment .row label {
267 color: var(--fg1);
268 margin-right: 0.25rem
269}
270
271.user-comment .row p {
272 color: var(--fg0);
273 margin: 0
274}