docs/main.scss
2023-06-19 02:37:46 +01:00

92 lines
1.6 KiB
SCSS

// * {
// margin: 0;
// padding: 0;
// }
@import "styles/normalise.scss";
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Segoe UI", sans-serif;
line-height: 1.35;
color: #222;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
&::after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 32px;
background: linear-gradient(#000, #0000);
z-index: 10;
}
}
#root {
max-width: #{960px + 16px * 2};
width: 100%;
padding: 16px;
}
#gap {
flex-grow: 1;
}
img {
max-width: 100%;
}
svg {
transform: translateZ(0);
}
// We can't fit equal margins either side, so try our best
@media (max-width: #{(960px + 16px * 2) + 260px * 2}) {
body {
padding-left: 260px;
}
#root {
max-width: #{800px + 16 * 2};
}
}
// We have no hope of showing the sidebar
@media (max-width: #{(800px + 16px * 2) + 260px * 1}) {
body {
padding-left: 0;
}
.sidebar {
display: none;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #e6e6e6;
}
}
@import "styles/type.scss";
@import "styles/code.scss";
@import "styles/table.scss";
@import "styles/collapse.scss";
@import "styles/footer.scss";
@import "styles/sidebar.scss";
@import "styles/misc.scss";
@import "styles/nav.scss"; // TODO: Get rid of this
@import "styles/part.scss"; // TODO: Get rid of this