1  /* Some sane resets. */
  2  html {
  3    height: 100%;
  4  }
  5  
  6  body {
  7    margin: 0;
  8    min-height: 100%;
  9  }
 10  
 11  /* All the flexbox magic! */
 12  body,
 13  .sb-announcement,
 14  .sb-content,
 15  .sb-main,
 16  .sb-container,
 17  .sb-container__inner,
 18  .sb-article-container,
 19  .sb-footer-content,
 20  .sb-header,
 21  .sb-header-secondary,
 22  .sb-footer {
 23    display: flex;
 24  }
 25  
 26  /* These order things vertically */
 27  body,
 28  .sb-main,
 29  .sb-article-container {
 30    flex-direction: column;
 31  }
 32  
 33  /* Put elements in the center */
 34  .sb-header,
 35  .sb-header-secondary,
 36  .sb-container,
 37  .sb-content,
 38  .sb-footer,
 39  .sb-footer-content {
 40    justify-content: center;
 41  }
 42  /* Put elements at the ends */
 43  .sb-article-container {
 44    justify-content: space-between;
 45  }
 46  
 47  /* These elements grow. */
 48  .sb-main,
 49  .sb-content,
 50  .sb-container,
 51  article {
 52    flex-grow: 1;
 53  }
 54  
 55  /* Because padding making this wider is not fun */
 56  article {
 57    box-sizing: border-box;
 58  }
 59  
 60  /* The announcements element should never be wider than the page. */
 61  .sb-announcement {
 62    max-width: 100%;
 63  }
 64  
 65  .sb-sidebar-primary,
 66  .sb-sidebar-secondary {
 67    flex-shrink: 0;
 68    width: 17rem;
 69  }
 70  
 71  .sb-announcement__inner {
 72    justify-content: center;
 73  
 74    box-sizing: border-box;
 75    height: 3rem;
 76  
 77    overflow-x: auto;
 78    white-space: nowrap;
 79  }
 80  
 81  /* Sidebars, with checkbox-based toggle */
 82  .sb-sidebar-primary,
 83  .sb-sidebar-secondary {
 84    position: fixed;
 85    height: 100%;
 86    top: 0;
 87  }
 88  
 89  .sb-sidebar-primary {
 90    left: -17rem;
 91    transition: left 250ms ease-in-out;
 92  }
 93  .sb-sidebar-secondary {
 94    right: -17rem;
 95    transition: right 250ms ease-in-out;
 96  }
 97  
 98  .sb-sidebar-toggle {
 99    display: none;
100  }
101  .sb-sidebar-overlay {
102    position: fixed;
103    top: 0;
104    width: 0;
105    height: 0;
106  
107    transition: width 0ms ease 250ms, height 0ms ease 250ms, opacity 250ms ease;
108  
109    opacity: 0;
110    background-color: rgba(0, 0, 0, 0.54);
111  }
112  
113  #sb-sidebar-toggle--primary:checked
114    ~ .sb-sidebar-overlay[for="sb-sidebar-toggle--primary"],
115  #sb-sidebar-toggle--secondary:checked
116    ~ .sb-sidebar-overlay[for="sb-sidebar-toggle--secondary"] {
117    width: 100%;
118    height: 100%;
119    opacity: 1;
120    transition: width 0ms ease, height 0ms ease, opacity 250ms ease;
121  }
122  
123  #sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary {
124    left: 0;
125  }
126  #sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary {
127    right: 0;
128  }
129  
130  /* Full-width mode */
131  .drop-secondary-sidebar-for-full-width-content
132    .hide-when-secondary-sidebar-shown {
133    display: none !important;
134  }
135  .drop-secondary-sidebar-for-full-width-content .sb-sidebar-secondary {
136    display: none !important;
137  }
138  
139  /* Mobile views */
140  .sb-page-width {
141    width: 100%;
142  }
143  
144  .sb-article-container,
145  .sb-footer-content__inner,
146  .drop-secondary-sidebar-for-full-width-content .sb-article,
147  .drop-secondary-sidebar-for-full-width-content .match-content-width {
148    width: 100vw;
149  }
150  
151  .sb-article,
152  .match-content-width {
153    padding: 0 1rem;
154    box-sizing: border-box;
155  }
156  
157  @media (min-width: 32rem) {
158    .sb-article,
159    .match-content-width {
160      padding: 0 2rem;
161    }
162  }
163  
164  /* Tablet views */
165  @media (min-width: 42rem) {
166    .sb-article-container {
167      width: auto;
168    }
169    .sb-footer-content__inner,
170    .drop-secondary-sidebar-for-full-width-content .sb-article,
171    .drop-secondary-sidebar-for-full-width-content .match-content-width {
172      width: 42rem;
173    }
174    .sb-article,
175    .match-content-width {
176      width: 42rem;
177    }
178  }
179  @media (min-width: 46rem) {
180    .sb-footer-content__inner,
181    .drop-secondary-sidebar-for-full-width-content .sb-article,
182    .drop-secondary-sidebar-for-full-width-content .match-content-width {
183      width: 46rem;
184    }
185    .sb-article,
186    .match-content-width {
187      width: 46rem;
188    }
189  }
190  @media (min-width: 50rem) {
191    .sb-footer-content__inner,
192    .drop-secondary-sidebar-for-full-width-content .sb-article,
193    .drop-secondary-sidebar-for-full-width-content .match-content-width {
194      width: 50rem;
195    }
196    .sb-article,
197    .match-content-width {
198      width: 50rem;
199    }
200  }
201  
202  /* Tablet views */
203  @media (min-width: 59rem) {
204    .sb-sidebar-secondary {
205      position: static;
206    }
207    .hide-when-secondary-sidebar-shown {
208      display: none !important;
209    }
210    .sb-footer-content__inner,
211    .drop-secondary-sidebar-for-full-width-content .sb-article,
212    .drop-secondary-sidebar-for-full-width-content .match-content-width {
213      width: 59rem;
214    }
215    .sb-article,
216    .match-content-width {
217      width: 42rem;
218    }
219  }
220  @media (min-width: 63rem) {
221    .sb-footer-content__inner,
222    .drop-secondary-sidebar-for-full-width-content .sb-article,
223    .drop-secondary-sidebar-for-full-width-content .match-content-width {
224      width: 63rem;
225    }
226    .sb-article,
227    .match-content-width {
228      width: 46rem;
229    }
230  }
231  @media (min-width: 67rem) {
232    .sb-footer-content__inner,
233    .drop-secondary-sidebar-for-full-width-content .sb-article,
234    .drop-secondary-sidebar-for-full-width-content .match-content-width {
235      width: 67rem;
236    }
237    .sb-article,
238    .match-content-width {
239      width: 50rem;
240    }
241  }
242  
243  /* Desktop views */
244  @media (min-width: 76rem) {
245    .sb-sidebar-primary {
246      position: static;
247    }
248    .hide-when-primary-sidebar-shown {
249      display: none !important;
250    }
251    .sb-footer-content__inner,
252    .drop-secondary-sidebar-for-full-width-content .sb-article,
253    .drop-secondary-sidebar-for-full-width-content .match-content-width {
254      width: 59rem;
255    }
256    .sb-article,
257    .match-content-width {
258      width: 42rem;
259    }
260  }
261  
262  /* Full desktop views */
263  @media (min-width: 80rem) {
264    .sb-article,
265    .match-content-width {
266      width: 46rem;
267    }
268    .sb-footer-content__inner,
269    .drop-secondary-sidebar-for-full-width-content .sb-article,
270    .drop-secondary-sidebar-for-full-width-content .match-content-width {
271      width: 63rem;
272    }
273  }
274  
275  @media (min-width: 84rem) {
276    .sb-article,
277    .match-content-width {
278      width: 50rem;
279    }
280    .sb-footer-content__inner,
281    .drop-secondary-sidebar-for-full-width-content .sb-article,
282    .drop-secondary-sidebar-for-full-width-content .match-content-width {
283      width: 67rem;
284    }
285  }
286  
287  @media (min-width: 88rem) {
288    .sb-footer-content__inner,
289    .drop-secondary-sidebar-for-full-width-content .sb-article,
290    .drop-secondary-sidebar-for-full-width-content .match-content-width {
291      width: 67rem;
292    }
293    .sb-page-width {
294      width: 88rem;
295    }
296  }