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 |*| Overall page layout
  25 |*|
  26 |*| Assumes: Top-level div with id="page" for all content
  27 |*|
  28 \*/
  29
  30 /* Mobile-first: At small sized we have a white background and use the
  31  * entire screen width for the page (so the background color of the
  32  * body is not visible anywhere). */
  33 body {
  34     background-color: #333738;
  35 }
  36
  37 #page {
  38     background-color: white;
  39 }
  40
  41 /* We never let the page content get larger than a large fixed width.
  42  *
  43  * And when the screen is wide enough, we can afford some "wasted"
  44  * space on either side of the page content. This starts at 0 for a
  45  * 620px wide page up to 50px on either side for a 720px wide page.
  46  *
  47  * Wider than that and we start to see the background on either side
  48  * of the page content.
  49  */
  50 #page {
  51     box-sizing: border-box;
  52     max-width: 720px;
  53     margin-left: auto;
  54     margin-right: auto;
  55     padding-top: 0;
  56     padding-bottom: 0;
  57 }
  58
  59 @media screen and (min-width: 620px) and (max-width: 720px) {
  60     #page {
  61         padding-left: calc((100% - 620px)/2);
  62         padding-right: calc((100% - 620px)/2);
  63     }
  64 }
  65
  66 @media screen and (min-width: 720px) {
  67     #page {
  68         padding-left: 50px;
  69         padding-right: 50px;
  70     }
  71 }
  72
  73 /* The calculations for height are different. We don't have any
  74  * vertical centering, so instead we have only some fixed padding on
  75  * the top. Then, the margin which allows the background to be visible
  76  * on the top and bottom starts appearing at a viewport height of 648
  77  * and tops out at a size of 36px.
  78  */
  79 #page {
  80     min-height: 500px;
  81     padding-top: 1em;
  82 }
  83
  84 @media screen and (min-height: 648px) and (max-height: 720px) {
  85     #page {
  86         margin-top: calc((100vh - 648px)/2);
  87         margin-bottom: calc((100vh - 648px)/2);
  88     }
  89 }
  90
  91 @media screen and (min-height: 720px) {
  92     #page {
  93         margin-top: 36px;
  94         margin-bottom: 36px;
  95     }
  96 }
  97
  98 /*\
  99 |*|
 100 |*| Responsive form layout
 101 |*|
 102 \*/
 103
 104 /*
 105  *
 106  * Within the form, fields can be placed in <div> elements with
 107  * class "form-field". Each can also have an additional class of one
 108  * of "small", "medium", or "large". These classes will be used to
 109  * select either a 1- or 2-column layout for each row depending on the
 110  * width of the screen.
 111  *
 112  * Expected layout is as follows:
 113  *
 114  *   "large"   rows: 1-column on all devices
 115  *
 116  *   "medium"  rows: 2-column on wide displays (laptop/desktop/tablet)
 117  *                   1-column on small display (phones)
 118  *
 119  *   "small"   rows: 2-column on all devices
 120  *
 121  * Finally, a class of either "left" or "right" will select which
 122  * column the field should appear in for fields that end up in 2
 123  * columns.
 124  */
 125 form {
 126     max-width: 100%;
 127     display: grid;
 128     grid-template-columns: 49% 49%;
 129     grid-column-gap: 2%;
 130 }
 131
 132 .form-field.small.left,.form-field.medium.left {
 133     grid-column-start: 1;
 134 }
 135
 136 .form-field.small.right,.form-field.medium.right {
 137     grid-column-start: 2;
 138 }
 139
 140 .form-field.large {
 141     grid-column-start: 1;
 142     grid-column-end: span 2;
 143 }
 144
 145 /* For a narrow screen, use a single-column for medium form fields. */
 146 @media screen and (max-width: 600px) {
 147     .form-field.medium.left,.form-field.medium.right {
 148         grid-column-start: 1;
 149         grid-column-end: span 2
 150     }
 151 }