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 #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 }*/