]> Raphaël G. Git Repositories - blogbundle/blob - Resources/public/css/screen.css
e470c638773dbb1e8d18298b91a2dd58148c76e9
[blogbundle] / Resources / public / css / screen.css
1 /* Reset link */
2 a {
3 text-decoration: none;
4 }
5
6 a:hover {
7 text-decoration: underline;
8 }
9
10 /* Default styling */
11 h1 {
12 font-size: 2rem;
13 line-height: 2.4rem;
14 font-family: 'Lemon',sans-serif;
15 color: #09c;
16 text-shadow: 1.5px 1.5px 3px #136;
17 /*line-height: 2rem;*/
18
19 /*margin: 1.34rem 0;*/
20 /*margin: 0 .5rem;
21 padding: 0;
22 display: flex;
23 flex: 1 1 auto;
24 align-items: center;
25 gap: .5rem;*/
26 }
27
28 h2 {
29 font-size: 1.5rem;
30 line-height: 1.9rem;
31 font-family: 'Lemon',sans-serif;
32 color: #09c;
33 text-shadow: 1px 1px 2px #136;
34 /*font-size: 1.5rem;
35 margin: 1.245rem 0;*/
36 }
37
38 h3 {
39 font-size: 1.17rem;
40 margin: 1.17rem 0;
41 }
42
43 h4 {
44 font-size: 1rem;
45 margin: 1.33rem 0;
46 }
47
48 h5 {
49 font-size: .83rem;
50 margin: 1.386rem 0;
51 }
52
53 h6 {
54 font-size: .67rem;
55 margin: 1.561rem 0;
56 }
57
58 p {
59 color: #066;
60 }
61
62 body {
63 display: flex;
64 flex-flow: column wrap;
65 gap: .5rem;
66 }
67
68 /* Header */
69 #header {
70 /*padding: .5rem;
71 background-color: #00c3f9;
72 color: #0063c9;*/
73 display: flex;
74 flex-direction: column;
75 gap: .5rem;
76 margin: 0 .5rem;
77 }
78
79 /* hack for top menu wrapping */
80 /*@media ( max-width: 450px ) {
81 #header {
82 flex-wrap: wrap;
83 }
84 }*/
85
86 /*#header a {
87 color: #09c;
88 }*/
89
90 #logo {
91 font-size: 2rem;
92 font-family: 'Lemon',sans-serif;
93 color: #09c;
94 text-shadow: 1.5px 1.5px 3px #136;
95 margin: 0 .5rem;
96 padding: 0;
97 display: flex;
98 flex: 1 1 auto;
99 align-items: center;
100 gap: .5rem;
101 line-height: 60px;
102 }
103
104 #nav {
105 display: flex;
106 flex-wrap: wrap;
107 gap: .5rem;
108 line-height: 2.5rem;
109 margin: 0;
110 border: 0;
111 /*border-top: .1rem solid #0063c9;
112 background-color: #cff;
113 color: #09c;
114 border-radius: 0 0 .5rem .5rem;*/
115 padding: .5rem;
116 background-color: #cff;
117 border-radius: .5rem;
118 border-top: .5rem solid #09c;
119 }
120
121 #nav a {
122 flex: 1 1 auto;
123 border: .1rem solid #136;
124 border-top: 0;
125 border-left: 0;
126 border-radius: .2rem;
127 background-color: #00c3f9;
128 color: #136;
129 font-weight: bold;
130 text-align: center;
131 padding: 0 .25rem;
132 }
133
134 #title a {
135 font-size: 2rem;
136 line-height: 2rem;
137 display: block;
138 /*height: 2rem;*/
139 }
140
141 #header div {
142 display: flex;
143 flex-direction: row;
144 flex-wrap: wrap;
145 justify-content: space-between;
146 }
147
148
149 /* Index */
150 #content {
151 /*margin: .5rem 0;
152 border-radius: .5rem;
153 overflow: hidden;
154 border: .1rem solid #00c3f9;
155 padding: .5rem;*/
156
157 /*margin: .75rem .5rem 0 .5rem;
158 padding: 0;*/
159 /*background-color: #cff;*/
160 border-radius: .5rem;
161 border: .1rem solid #cff;
162 border-top: .5rem solid #09c;
163 margin: 0 .5rem;
164 color: #0063c9;
165 display: flex;
166 flex-direction: column;
167 gap: 0.5rem;
168 }
169
170 article header,
171 section header {
172 background-color: #cff;
173 padding: 0 .5rem .5rem .5rem;
174 display: flex;
175 flex-direction: column;
176 row-gap: .5rem;
177 }
178
179 article header p,
180 section header p {
181 text-align: justify;
182 }
183
184 article section,
185 section section {
186 padding: 0 .5rem;
187 display: flex;
188 flex-direction: column;
189 row-gap: .5rem;
190 }
191
192 article footer,
193 section footer {
194 padding: .5rem;
195 text-align: right;
196 }
197
198 section article {
199 border-radius: .5rem;
200 border: .1rem solid #cff;
201 border-top: .5rem solid #09c;
202 color: #0063c9;
203 /*margin: 0 .5rem;*/
204 display: flex;
205 flex-direction: column;
206 gap: .5rem;
207 }
208
209 /*section article:last-child {
210 margin-bottom: .5rem;
211 }*/
212
213 header h1 a,
214 header h2 a,
215 header h3 a {
216 color: #09c;
217 }
218
219 footer nav.pager {
220 display: flex;
221 flex-direction: row;
222 justify-content: space-between;
223 }
224
225 footer nav.pager a {
226 flex-basis: 100%;
227 }
228
229 footer nav.pager a[rel=prev] {
230 text-align: left;
231 }
232
233 footer nav.pager a[rel=next] {
234 text-align: right;
235 }
236
237 /*#content h2 {
238 *background-color: #cff;
239 margin: 0;
240 padding: .5rem;
241 font-weight: bold;
242 color: #09c;* /
243 / *background-color: #00c3f9;
244 margin: -.5rem -.5rem 0 -.5rem;
245 padding: .5rem;
246 color: #0063c9;* /
247 }*/
248
249 /*#content nav,
250 #content p {
251 padding: .2rem .5rem;
252 / *line-height: 1.4rem;* /
253 text-align: justify;
254 }
255
256 #content footer nav {
257 text-align: right;
258 }
259
260 #content p {
261 }
262
263 #content header p {
264 padding: .2rem 0;
265 }
266 */
267
268 /*#content article header {
269 margin: 1.17rem 0;
270 }
271
272 #content article header h3 {
273 margin: 0;
274 }
275
276 #content article header p {
277 margin: 0;
278 font-size: .75rem;
279 display: flex;
280 justify-content: space-between;
281 }*/
282
283 /*#content article a {
284 color: #00c3f9;
285 }*/
286
287 /*#content article ul,
288 #content article p {
289 text-align: justify;
290 text-justify: distribute;
291 margin-bottom: .75rem;
292 }
293
294 #content article header p {
295 margin: .5rem .5rem 0 .5rem;
296 }
297
298 #content article header p:last-child {
299 margin-bottom: .5rem;
300 }
301
302 #content article section {
303 margin: 0 .5rem;
304 }*/
305
306 /* Article */
307 #article,
308 #contact,
309 #keyword {
310 margin: .5rem 0;
311 border-radius: .5rem;
312 border: .1rem solid #00c3f9;
313 padding: .5rem;
314 overflow-x: hidden;
315 }
316
317 #article header,
318 #contact header,
319 #keyword header {
320 background-color: #00c3f9;
321 margin: -.5rem -.5rem .5rem -.5rem;
322 padding: .5rem;
323 color: #0063c9;
324 }
325
326 #article header h3,
327 #contact header h3,
328 #keyword header h3 {
329 margin: 0;
330 }
331
332 #article header p,
333 #keyword header p {
334 margin: 0;
335 font-size: .75rem;
336 display: flex;
337 justify-content: space-between;
338 }
339
340 #article a,
341 #keyword a {
342 color: #0063c9;
343 }
344
345 #article p,
346 #article pre,
347 #article ul,
348 #contact div,
349 #keyword p,
350 #keyword pre,
351 #keyword ul {
352 margin-bottom: .5rem;
353 }
354
355 #article p,
356 #keyword p {
357 text-align: justify;
358 text-justify: distribute;
359 }
360
361 #article p:last-child,
362 #contact div:last-child {
363 margin-bottom: none;
364 }
365
366 #contact input,
367 #contact textarea {
368 width: 24rem;
369 padding: 2px;
370 border: 1px solid #00c3f9;
371 }
372
373 #contact button.submit {
374 width: 4rem;
375 margin: 0 10rem;
376 }
377
378 #contact div div:last-child {
379 text-align: center;
380 }
381
382 #article pre {
383 border-radius: .5rem;
384 border: .1rem solid #00c3f9;
385 padding: .5rem;
386 color: #0063c9;
387 overflow-x: auto;
388 margin-bottom: 1rem;
389 }
390
391 #article ul {
392 margin-top: -.5rem;
393 }
394
395 #article ul:first-child {
396 margin-top: none;
397 }
398
399 #footer {
400 font-size: .8rem;
401 padding: .5rem;
402 margin: 0 .5rem;
403 /*background-color: #00c3f9;
404 color: #0063c9;
405 border-radius: .5rem .5rem 0 0;
406 bottom: 0;
407 text-align: center;
408 font-weight: bold;
409 position: relative;
410 left: 0;
411 right: 0;*/
412 background-color: #cff;
413 border-radius: .5rem;
414 border-top: .5rem solid #09c;
415 color: #0063c9;
416 display: flex;
417 justify-content: space-between;
418 }
419
420 #footer details {
421 text-align: center;
422 }
423
424 #footer summary:after {
425 display: none;
426 }
427
428 #footer summary::-webkit-details-marker {
429 display: none;
430 }
431
432 #footer nav {
433 font-weight: normal;
434 }
435
436 #footer a {
437 color: #0063c9;
438 }
439
440 /*
441 #footer summary:after,
442 #footer p:after {
443 content: ' - ';
444 }
445
446 #footer p:last-child:after {
447 content: '';
448 }*/