Spaces:
Sleeping
Sleeping
/* Some sane resets. */ | |
html { | |
height: 100%; | |
} | |
body { | |
margin: 0; | |
min-height: 100%; | |
} | |
/* All the flexbox magic! */ | |
body, | |
.sb-announcement, | |
.sb-content, | |
.sb-main, | |
.sb-container, | |
.sb-container__inner, | |
.sb-article-container, | |
.sb-footer-content, | |
.sb-header, | |
.sb-header-secondary, | |
.sb-footer { | |
display: flex; | |
} | |
/* These order things vertically */ | |
body, | |
.sb-main, | |
.sb-article-container { | |
flex-direction: column; | |
} | |
/* Put elements in the center */ | |
.sb-header, | |
.sb-header-secondary, | |
.sb-container, | |
.sb-content, | |
.sb-footer, | |
.sb-footer-content { | |
justify-content: center; | |
} | |
/* Put elements at the ends */ | |
.sb-article-container { | |
justify-content: space-between; | |
} | |
/* These elements grow. */ | |
.sb-main, | |
.sb-content, | |
.sb-container, | |
article { | |
flex-grow: 1; | |
} | |
/* Because padding making this wider is not fun */ | |
article { | |
box-sizing: border-box; | |
} | |
/* The announcements element should never be wider than the page. */ | |
.sb-announcement { | |
max-width: 100%; | |
} | |
.sb-sidebar-primary, | |
.sb-sidebar-secondary { | |
flex-shrink: 0; | |
width: 17rem; | |
} | |
.sb-announcement__inner { | |
justify-content: center; | |
box-sizing: border-box; | |
height: 3rem; | |
overflow-x: auto; | |
white-space: nowrap; | |
} | |
/* Sidebars, with checkbox-based toggle */ | |
.sb-sidebar-primary, | |
.sb-sidebar-secondary { | |
position: fixed; | |
height: 100%; | |
top: 0; | |
} | |
.sb-sidebar-primary { | |
left: -17rem; | |
transition: left 250ms ease-in-out; | |
} | |
.sb-sidebar-secondary { | |
right: -17rem; | |
transition: right 250ms ease-in-out; | |
} | |
.sb-sidebar-toggle { | |
display: none; | |
} | |
.sb-sidebar-overlay { | |
position: fixed; | |
top: 0; | |
width: 0; | |
height: 0; | |
transition: width 0ms ease 250ms, height 0ms ease 250ms, opacity 250ms ease; | |
opacity: 0; | |
background-color: rgba(0, 0, 0, 0.54); | |
} | |
#sb-sidebar-toggle--primary:checked | |
~ .sb-sidebar-overlay[for="sb-sidebar-toggle--primary"], | |
#sb-sidebar-toggle--secondary:checked | |
~ .sb-sidebar-overlay[for="sb-sidebar-toggle--secondary"] { | |
width: 100%; | |
height: 100%; | |
opacity: 1; | |
transition: width 0ms ease, height 0ms ease, opacity 250ms ease; | |
} | |
#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { | |
left: 0; | |
} | |
#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { | |
right: 0; | |
} | |
/* Full-width mode */ | |
.drop-secondary-sidebar-for-full-width-content | |
.hide-when-secondary-sidebar-shown { | |
display: none ; | |
} | |
.drop-secondary-sidebar-for-full-width-content .sb-sidebar-secondary { | |
display: none ; | |
} | |
/* Mobile views */ | |
.sb-page-width { | |
width: 100%; | |
} | |
.sb-article-container, | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 100vw; | |
} | |
.sb-article, | |
.match-content-width { | |
padding: 0 1rem; | |
box-sizing: border-box; | |
} | |
@media (min-width: 32rem) { | |
.sb-article, | |
.match-content-width { | |
padding: 0 2rem; | |
} | |
} | |
/* Tablet views */ | |
@media (min-width: 42rem) { | |
.sb-article-container { | |
width: auto; | |
} | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 42rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 42rem; | |
} | |
} | |
@media (min-width: 46rem) { | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 46rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 46rem; | |
} | |
} | |
@media (min-width: 50rem) { | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 50rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 50rem; | |
} | |
} | |
/* Tablet views */ | |
@media (min-width: 59rem) { | |
.sb-sidebar-secondary { | |
position: static; | |
} | |
.hide-when-secondary-sidebar-shown { | |
display: none ; | |
} | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 59rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 42rem; | |
} | |
} | |
@media (min-width: 63rem) { | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 63rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 46rem; | |
} | |
} | |
@media (min-width: 67rem) { | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 67rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 50rem; | |
} | |
} | |
/* Desktop views */ | |
@media (min-width: 76rem) { | |
.sb-sidebar-primary { | |
position: static; | |
} | |
.hide-when-primary-sidebar-shown { | |
display: none ; | |
} | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 59rem; | |
} | |
.sb-article, | |
.match-content-width { | |
width: 42rem; | |
} | |
} | |
/* Full desktop views */ | |
@media (min-width: 80rem) { | |
.sb-article, | |
.match-content-width { | |
width: 46rem; | |
} | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 63rem; | |
} | |
} | |
@media (min-width: 84rem) { | |
.sb-article, | |
.match-content-width { | |
width: 50rem; | |
} | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 67rem; | |
} | |
} | |
@media (min-width: 88rem) { | |
.sb-footer-content__inner, | |
.drop-secondary-sidebar-for-full-width-content .sb-article, | |
.drop-secondary-sidebar-for-full-width-content .match-content-width { | |
width: 67rem; | |
} | |
.sb-page-width { | |
width: 88rem; | |
} | |
} | |