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