Raphaël G. Git Repositories - blogbundle/blob - 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.25rem;
  40         line-height: 1.65rem;
  41         font-family: 'Lemon',sans-serif;
  42         color: #09c;
  43         text-shadow: 1.5px 1.5px 3px #136;
  44         /*font-size: 1.17rem;
  45         margin: 1.17rem 0;*/
  46 }
  47
  48 h4 {
  49         font-size: 1rem;
  50         margin: 1.33rem 0;
  51 }
  52
  53 h5 {
  54         font-size: .83rem;
  55         margin: 1.386rem 0;
  56 }
  57
  58 h6 {
  59         font-size: .67rem;
  60         margin: 1.561rem 0;
  61 }
  62
  63 p {
  64         color: #066;
  65 }
  66
  67 body {
  68         display: flex;
  69         flex-flow: column wrap;
  70         gap: .5rem;
  71 }
  72
  73 /* Header */
  74 #header {
  75         /*padding: .5rem;
  76         background-color: #00c3f9;
  77         color: #0063c9;*/
  78         display: flex;
  79         flex-direction: column;
  80         gap: .5rem;
  81         margin: 0 .5rem;
  82 }
  83
  84 /* hack for top menu wrapping */
  85 /*@media ( max-width: 450px ) {
  86         #header {
  87                 flex-wrap: wrap;
  88         }
  89 }*/
  90
  91 /*#header a {
  92         color: #09c;
  93 }*/
  94
  95 #logo {
  96         font-size: 2rem;
  97         font-family: 'Lemon',sans-serif;
  98         color: #09c;
  99         text-shadow: 1.5px 1.5px 3px #136;
 100         margin: 0 .5rem;
 101         padding: 0;
 102         display: flex;
 103         flex: 1 1 auto;
 104         align-items: center;
 105         gap: .5rem;
 106         line-height: 60px;
 107 }
 108
 109 #logo strong {
 110         word-break: break-word;
 111 }
 112
 113 #nav {
 114         display: flex;
 115         flex-wrap: wrap;
 116         gap: .5rem;
 117         line-height: 2.5rem;
 118         margin: 0;
 119         border: 0;
 120         /*border-top: .1rem solid #0063c9;
 121         background-color: #cff;
 122         color: #09c;
 123         border-radius: 0 0 .5rem .5rem;*/
 124         padding: .5rem;
 125         background-color: #cff;
 126         border-radius: .5rem;
 127         border-top: .5rem solid #09c;
 128 }
 129
 130 #nav a {
 131         flex: 1 1 auto;
 132         border: .1rem solid #136;
 133         border-top: 0;
 134         border-left: 0;
 135         border-radius: .2rem;
 136         background-color: #00c3f9;
 137         color: #136;
 138         font-weight: bold;
 139         text-align: center;
 140         padding: 0 .25rem;
 141 }
 142
 143 #title a {
 144         font-size: 2rem;
 145         line-height: 2rem;
 146         display: block;
 147         /*height: 2rem;*/
 148 }
 149
 150 #header div {
 151         display: flex;
 152         flex-direction: row;
 153         flex-wrap: wrap;
 154         justify-content: space-between;
 155 }
 156
 157
 158 /* Index */
 159 section.form,
 160 #content {
 161         /*margin: .5rem 0;
 162         border-radius: .5rem;
 163         overflow: hidden;
 164         border: .1rem solid #00c3f9;
 165         padding: .5rem;*/
 166
 167         /*margin: .75rem .5rem 0 .5rem;
 168         padding: 0;*/
 169         /*background-color: #cff;*/
 170         border-radius: .5rem;
 171         border: .1rem solid #cff;
 172         border-top: .5rem solid #09c;
 173         margin: 0 .5rem;
 174         color: #0063c9;
 175         display: flex;
 176         flex-direction: column;
 177         gap: 0.5rem;
 178 }
 179
 180 article header,
 181 section header {
 182         background-color: #cff;
 183         padding: 0 .5rem .5rem .5rem;
 184         display: flex;
 185         flex-direction: column;
 186         row-gap: .5rem;
 187 }
 188
 189 article header p,
 190 section header p {
 191         text-align: justify;
 192 }
 193
 194 article header p {
 195         margin-bottom: 0;
 196 }
 197
 198 article section,
 199 section section {
 200         padding: 0 .5rem;
 201         display: flex;
 202         flex-direction: column;
 203         row-gap: .5rem;
 204 }
 205
 206 article section:last-child,
 207 section section:last-child {
 208         margin-bottom: .5rem;
 209 }
 210
 211 article footer,
 212 section footer {
 213         padding: .5rem;
 214         text-align: right;
 215 }
 216
 217 section article {
 218         border-radius: .5rem;
 219         border: .1rem solid #cff;
 220         border-top: .5rem solid #09c;
 221         color: #0063c9;
 222         /*margin: 0 .5rem;*/
 223         display: flex;
 224         flex-direction: column;
 225         gap: .5rem;
 226 }
 227
 228 /*section article:last-child {
 229         margin-bottom: .5rem;
 230 }*/
 231 form {
 232         display: flex;
 233         flex-direction: column;
 234         gap: .5rem;
 235 }
 236
 237 form div {
 238         display: flex;
 239         flex-direction: row;
 240         justify-content: center;
 241         gap: .5rem;
 242 }
 243
 244 form div div {
 245         flex-direction: column;
 246 }
 247
 248 form div ul {
 249         display: flex;
 250         flex-direction: column;
 251         gap: .2rem;
 252 }
 253
 254 form div li {
 255         display: flex;
 256         flex-direction: row;
 257         justify-content: space-between;
 258         border-radius: .2rem;
 259         border: .05rem solid transparent;
 260         border-color: #c33333;
 261         background-color: #f9c3c3;
 262         color: #c33333;
 263         padding: .1rem .2rem;
 264 }
 265
 266 form div li::before,
 267 form div li::after {
 268         /*XXX: display /!\ symbol */
 269         content: "⚠";
 270 }
 271 form label {
 272         width: 12rem;
 273         text-align: right;
 274         line-height: 1.3rem;
 275 }
 276
 277 form label.captcha {
 278         line-height: 2.5rem;
 279         height: 2.5rem;
 280 }
 281
 282 form label.captcha img {
 283         width: 9.2rem;
 284         height: 2.5rem;
 285 }
 286
 287 form input,
 288 form textarea {
 289         width: 24rem;
 290 }
 291
 292 form select {
 293         width: 24.2rem;
 294         padding: 2px;
 295         padding-block: 1px;
 296         box-sizing: content-box;
 297 }
 298
 299 header h1 a,
 300 header h2 a,
 301 header h3 a {
 302         color: #09c;
 303 }
 304
 305 footer nav.pager {
 306         display: flex;
 307         flex-direction: row;
 308         justify-content: space-between;
 309 }
 310
 311 footer nav.pager a {
 312         flex-basis: 100%;
 313 }
 314
 315 footer nav.pager a[rel=prev] {
 316         text-align: left;
 317 }
 318
 319 footer nav.pager a[rel=next] {
 320         text-align: right;
 321 }
 322
 323 /*#content h2 {
 324         *background-color: #cff;
 325         margin: 0;
 326         padding: .5rem;
 327         font-weight: bold;
 328         color: #09c;* /
 329         / *background-color: #00c3f9;
 330         margin: -.5rem -.5rem 0 -.5rem;
 331         padding: .5rem;
 332         color: #0063c9;* /
 333 }*/
 334
 335 /*#content nav,
 336 #content p {
 337         padding: .2rem .5rem;
 338         / *line-height: 1.4rem;* /
 339         text-align: justify;
 340 }
 341
 342 #content footer nav {
 343         text-align: right;
 344 }
 345
 346 #content p {
 347 }
 348
 349 #content header p {
 350         padding: .2rem 0;
 351 }
 352 */
 353
 354 /*#content article header {
 355         margin: 1.17rem 0;
 356 }
 357
 358 #content article header h3 {
 359         margin: 0;
 360 }
 361
 362 #content article header p {
 363         margin: 0;
 364         font-size: .75rem;
 365         display: flex;
 366         justify-content: space-between;
 367 }*/
 368
 369 /*#content article a {
 370         color: #00c3f9;
 371 }*/
 372
 373 /*#content article ul,
 374 #content article p {
 375         text-align: justify;
 376         text-justify: distribute;
 377         margin-bottom: .75rem;
 378 }
 379
 380 #content article header p {
 381         margin: .5rem .5rem 0 .5rem;
 382 }
 383
 384 #content article header p:last-child {
 385         margin-bottom: .5rem;
 386 }
 387
 388 #content article section {
 389         margin: 0 .5rem;
 390 }*/
 391
 392 /* Message */
 393 .message {
 394         margin: 0 .5rem;
 395         display: flex;
 396         flex-direction: row;
 397         justify-content: space-between;
 398         font-size: .9rem;
 399         padding: .2rem;
 400         border-radius: .2rem;
 401         border: .05rem solid transparent;
 402         text-align: center;
 403 }
 404
 405 .message::before,
 406 .message::after {
 407         margin: auto 0;
 408         padding: 0 .25rem;
 409 }
 410
 411 p.message {
 412         margin: 0;
 413 }
 414
 415 .message ul {
 416         margin: 0;
 417         padding: 0;
 418         list-style: none inside none;
 419         gap: .1rem;
 420 }
 421
 422 .message li {
 423         padding: .25rem;
 424 }
 425
 426 .error {
 427         border-color: #c33333;
 428         background-color: #f9c3c3;
 429         color: #c33333;
 430 }
 431
 432 .error::before,
 433 .error::after {
 434         /*XXX: display /!\ symbol */
 435         content: "⚠";
 436 }
 437
 438 .notice {
 439         border-color: #3333c3;
 440         background-color: #c3c3f9;
 441         color: #3333c3;
 442 }
 443
 444 .notice::before,
 445 .notice::after {
 446         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 447          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 448         /*XXX: display i symbol */
 449         content: "ℹ";
 450         /*XXX: display # symbol */
 451         /*content: "⌘";*/
 452 }
 453
 454 .warning {
 455         border-color: #c39333;
 456         background-color: #f9c333;
 457         color: #936333;
 458 }
 459
 460 .warning::before,
 461 .warning::after {
 462         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 463          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 464         content: "?";
 465         /*XXX: display # symbol */
 466         /*content: "⌘";*/
 467 }
 468
 469 /* Article */
 470 article p,
 471 article pre,
 472 article ul {
 473         margin-bottom: .5rem;
 474 }
 475
 476 article p:last-child {
 477         margin-bottom: 0;
 478 }
 479
 480 article ul {
 481         margin-top: -.5rem;
 482         list-style: "- " inside none;
 483         padding-left: .5rem;
 484 }
 485
 486 article li {
 487         margin-bottom: .3rem;
 488 }
 489
 490 article li:last-child {
 491         margin-bottom: 0;
 492 }
 493
 494 article ul:first-child {
 495         margin-top: none;
 496 }
 497
 498 article pre {
 499         border-radius: .5rem;
 500         border: .1rem solid #00c3f9;
 501         padding: .5rem;
 502         margin-bottom: 1rem;
 503         color: #0063c9;
 504         white-space: pre-wrap;
 505         word-wrap: break-word;
 506         word-break: break-all;
 507         overflow-x: auto;
 508 }
 509
 510 #footer {
 511         font-size: .8rem;
 512         padding: .5rem;
 513         margin: 0 .5rem;
 514         /*background-color: #00c3f9;
 515         color: #0063c9;
 516         border-radius: .5rem .5rem 0 0;
 517         bottom: 0;
 518         text-align: center;
 519         font-weight: bold;
 520         position: relative;
 521         left: 0;
 522         right: 0;*/
 523         background-color: #cff;
 524         border-radius: .5rem;
 525         border-top: .5rem solid #09c;
 526         color: #0063c9;
 527         display: flex;
 528         justify-content: space-between;
 529 }
 530
 531 #footer details {
 532         text-align: center;
 533 }
 534
 535 #footer summary:after {
 536         display: none;
 537 }
 538
 539 #footer summary::-webkit-details-marker {
 540         display: none;
 541 }
 542
 543 #footer nav {
 544         font-weight: normal;
 545 }
 546
 547 #footer a {
 548         color: #0063c9;
 549 }
 550
 551 /*
 552 #footer summary:after,
 553 #footer p:after {
 554         content: ' - ';
 555 }
 556
 557 #footer p:last-child:after {
 558         content: '';
 559 }*/