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