Raphaël G. Git Repositories - blogbundle/blob - 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.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 section,
 195 section section {
 196         padding: 0 .5rem;
 197         display: flex;
 198         flex-direction: column;
 199         row-gap: .5rem;
 200 }
 201
 202 article section:last-child,
 203 section section:last-child {
 204         margin-bottom: .5rem;
 205 }
 206
 207 article footer,
 208 section footer {
 209         padding: .5rem;
 210         text-align: right;
 211 }
 212
 213 section article {
 214         border-radius: .5rem;
 215         border: .1rem solid #cff;
 216         border-top: .5rem solid #09c;
 217         color: #0063c9;
 218         /*margin: 0 .5rem;*/
 219         display: flex;
 220         flex-direction: column;
 221         gap: .5rem;
 222 }
 223
 224 /*section article:last-child {
 225         margin-bottom: .5rem;
 226 }*/
 227 form {
 228         display: flex;
 229         flex-direction: column;
 230         gap: .5rem;
 231 }
 232
 233 form div {
 234         display: flex;
 235         flex-direction: row;
 236         justify-content: center;
 237         gap: .5rem;
 238 }
 239
 240 form div div {
 241         flex-direction: column;
 242 }
 243
 244 form div ul {
 245         display: flex;
 246         flex-direction: column;
 247         gap: .2rem;
 248 }
 249
 250 form div li {
 251         display: flex;
 252         flex-direction: row;
 253         justify-content: space-between;
 254         border-radius: .2rem;
 255         border: .05rem solid transparent;
 256         border-color: #c33333;
 257         background-color: #f9c3c3;
 258         color: #c33333;
 259         padding: .1rem .2rem;
 260 }
 261
 262 form div li::before,
 263 form div li::after {
 264         /*XXX: display /!\ symbol */
 265         content: "⚠";
 266 }
 267 form label {
 268         width: 12rem;
 269         text-align: right;
 270         line-height: 1.3rem;
 271 }
 272
 273 form label.captcha {
 274         line-height: 2.5rem;
 275         height: 2.5rem;
 276 }
 277
 278 form label.captcha img {
 279         width: 9.2rem;
 280         height: 2.5rem;
 281 }
 282
 283 form input,
 284 form textarea {
 285         width: 24rem;
 286 }
 287
 288 form select {
 289         width: 24.2rem;
 290         padding: 2px;
 291         padding-block: 1px;
 292         box-sizing: content-box;
 293 }
 294
 295 header h1 a,
 296 header h2 a,
 297 header h3 a {
 298         color: #09c;
 299 }
 300
 301 footer nav.pager {
 302         display: flex;
 303         flex-direction: row;
 304         justify-content: space-between;
 305 }
 306
 307 footer nav.pager a {
 308         flex-basis: 100%;
 309 }
 310
 311 footer nav.pager a[rel=prev] {
 312         text-align: left;
 313 }
 314
 315 footer nav.pager a[rel=next] {
 316         text-align: right;
 317 }
 318
 319 /*#content h2 {
 320         *background-color: #cff;
 321         margin: 0;
 322         padding: .5rem;
 323         font-weight: bold;
 324         color: #09c;* /
 325         / *background-color: #00c3f9;
 326         margin: -.5rem -.5rem 0 -.5rem;
 327         padding: .5rem;
 328         color: #0063c9;* /
 329 }*/
 330
 331 /*#content nav,
 332 #content p {
 333         padding: .2rem .5rem;
 334         / *line-height: 1.4rem;* /
 335         text-align: justify;
 336 }
 337
 338 #content footer nav {
 339         text-align: right;
 340 }
 341
 342 #content p {
 343 }
 344
 345 #content header p {
 346         padding: .2rem 0;
 347 }
 348 */
 349
 350 /*#content article header {
 351         margin: 1.17rem 0;
 352 }
 353
 354 #content article header h3 {
 355         margin: 0;
 356 }
 357
 358 #content article header p {
 359         margin: 0;
 360         font-size: .75rem;
 361         display: flex;
 362         justify-content: space-between;
 363 }*/
 364
 365 /*#content article a {
 366         color: #00c3f9;
 367 }*/
 368
 369 /*#content article ul,
 370 #content article p {
 371         text-align: justify;
 372         text-justify: distribute;
 373         margin-bottom: .75rem;
 374 }
 375
 376 #content article header p {
 377         margin: .5rem .5rem 0 .5rem;
 378 }
 379
 380 #content article header p:last-child {
 381         margin-bottom: .5rem;
 382 }
 383
 384 #content article section {
 385         margin: 0 .5rem;
 386 }*/
 387
 388 /* Message */
 389 .message {
 390         margin: 0 .5rem;
 391         display: flex;
 392         flex-direction: row;
 393         justify-content: space-between;
 394         font-size: .9rem;
 395         padding: .2rem;
 396         border-radius: .2rem;
 397         border: .05rem solid transparent;
 398         text-align: center;
 399 }
 400
 401 .message::before,
 402 .message::after {
 403         margin: auto 0;
 404         padding: 0 .25rem;
 405 }
 406
 407 p.message {
 408         margin: 0;
 409 }
 410
 411 .message ul {
 412         margin: 0;
 413         padding: 0;
 414         list-style: none inside none;
 415         gap: .1rem;
 416 }
 417
 418 .message li {
 419         padding: .25rem;
 420 }
 421
 422 .error {
 423         border-color: #c33333;
 424         background-color: #f9c3c3;
 425         color: #c33333;
 426 }
 427
 428 .error::before,
 429 .error::after {
 430         /*XXX: display /!\ symbol */
 431         content: "⚠";
 432 }
 433
 434 .notice {
 435         border-color: #3333c3;
 436         background-color: #c3c3f9;
 437         color: #3333c3;
 438 }
 439
 440 .notice::before,
 441 .notice::after {
 442         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 443          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 444         /*XXX: display i symbol */
 445         content: "ℹ";
 446         /*XXX: display # symbol */
 447         /*content: "⌘";*/
 448 }
 449
 450 .warning {
 451         border-color: #c39333;
 452         background-color: #f9c333;
 453         color: #936333;
 454 }
 455
 456 .warning::before,
 457 .warning::after {
 458         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 459          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 460         content: "?";
 461         /*XXX: display # symbol */
 462         /*content: "⌘";*/
 463 }
 464
 465 /* Article */
 466 #article,
 467 #contact,
 468 #keyword {
 469         margin: .5rem 0;
 470         border-radius: .5rem;
 471         border: .1rem solid #00c3f9;
 472         padding: .5rem;
 473         overflow-x: hidden;
 474 }
 475
 476 #article header,
 477 #contact header,
 478 #keyword header {
 479         background-color: #00c3f9;
 480         margin: -.5rem -.5rem .5rem -.5rem;
 481         padding: .5rem;
 482         color: #0063c9;
 483 }
 484
 485 #article header h3,
 486 #contact header h3,
 487 #keyword header h3 {
 488         margin: 0;
 489 }
 490
 491 #article header p,
 492 #keyword header p {
 493         margin: 0;
 494         font-size: .75rem;
 495         display: flex;
 496         justify-content: space-between;
 497 }
 498
 499 #article a,
 500 #keyword a {
 501         color: #0063c9;
 502 }
 503
 504 #article p,
 505 #article pre,
 506 #article ul,
 507 #contact div,
 508 #keyword p,
 509 #keyword pre,
 510 #keyword ul {
 511         margin-bottom: .5rem;
 512 }
 513
 514 #article p,
 515 #keyword p {
 516         text-align: justify;
 517         text-justify: distribute;
 518 }
 519
 520 #article p:last-child,
 521 #contact div:last-child {
 522         margin-bottom: none;
 523 }
 524
 525 #contact input,
 526 #contact textarea {
 527         width: 24rem;
 528         padding: 2px;
 529         border: 1px solid #00c3f9;
 530 }
 531
 532 #contact button.submit {
 533         width: 4rem;
 534         margin: 0 10rem;
 535 }
 536
 537 #contact div div:last-child {
 538         text-align: center;
 539 }
 540
 541 #article pre {
 542         border-radius: .5rem;
 543         border: .1rem solid #00c3f9;
 544         padding: .5rem;
 545         color: #0063c9;
 546         overflow-x: auto;
 547         margin-bottom: 1rem;
 548 }
 549
 550 #article ul {
 551         margin-top: -.5rem;
 552 }
 553
 554 #article ul:first-child {
 555         margin-top: none;
 556 }
 557
 558 #footer {
 559         font-size: .8rem;
 560         padding: .5rem;
 561         margin: 0 .5rem;
 562         /*background-color: #00c3f9;
 563         color: #0063c9;
 564         border-radius: .5rem .5rem 0 0;
 565         bottom: 0;
 566         text-align: center;
 567         font-weight: bold;
 568         position: relative;
 569         left: 0;
 570         right: 0;*/
 571         background-color: #cff;
 572         border-radius: .5rem;
 573         border-top: .5rem solid #09c;
 574         color: #0063c9;
 575         display: flex;
 576         justify-content: space-between;
 577 }
 578
 579 #footer details {
 580         text-align: center;
 581 }
 582
 583 #footer summary:after {
 584         display: none;
 585 }
 586
 587 #footer summary::-webkit-details-marker {
 588         display: none;
 589 }
 590
 591 #footer nav {
 592         font-weight: normal;
 593 }
 594
 595 #footer a {
 596         color: #0063c9;
 597 }
 598
 599 /*
 600 #footer summary:after,
 601 #footer p:after {
 602         content: ' - ';
 603 }
 604
 605 #footer p:last-child:after {
 606         content: '';
 607 }*/