git.cworth.org Git - lmno.games/blob - style.css

   1 /*\
   2 |*|
   3 |*| Core elements: Sizing and padding
   4 |*|
   5 \*/
   6
   7 body {
   8     line-height: 1.5;
   9     font-family: sans-serif;
  10 }
  11
  12 h1 {
  13     font-size: 150%;
  14     font-weight: bold;
  15 }
  16
  17 h2 {
  18     font-size: 110%;
  19     font-weight: bold;
  20 }
  21
  22 /*\
  23 |*|
  24 |*| Responsive form layout
  25 |*|
  26 \*/
  27
  28 /*
  29  *
  30  * Within the form, fields can be placed in <div> elements with
  31  * class "form-field". Each can also have an additional class of one
  32  * of "small", "medium", or "large". These classes will be used to
  33  * select either a 1- or 2-column layout for each row depending on the
  34  * width of the screen.
  35  *
  36  * Expected layout is as follows:
  37  *
  38  *   "large"   rows: 1-column on all devices
  39  *
  40  *   "medium"  rows: 2-column on wide displays (laptop/desktop/tablet)
  41  *                   1-column on small display (phones)
  42  *
  43  *   "small"   rows: 2-column on all devices
  44  *
  45  * Finally, a class of either "left" or "right" will select which
  46  * column the field should appear in for fields that end up in 2
  47  * columns.
  48  */
  49 form {
  50     max-width: 100%;
  51     display: grid;
  52     grid-template-columns: 49% 49%;
  53     grid-column-gap: 2%;
  54 }
  55
  56 .form-field.small.left,.form-field.medium.left {
  57     grid-column-start: 1;
  58 }
  59
  60 .form-field.small.right,.form-field.medium.right {
  61     grid-column-start: 2;
  62 }
  63
  64 .form-field.large {
  65     grid-column-start: 1;
  66     grid-column-end: span 2;
  67 }
  68
  69 /* For a narrow screen, use a single-column for medium form fields. */
  70 @media screen and (max-width: 600px) {
  71     .form-field.medium.left,.form-field.medium.right {
  72         grid-column-start: 1;
  73         grid-column-end: span 2
  74     }
  75 }