107 lines
2.3 KiB
CSS
107 lines
2.3 KiB
CSS
@media (max-width: 600px){
|
|
.banner-header{ flex-direction: column; align-items: center; text-align: center; }
|
|
.banner-logo{ margin: 0 0 .5rem 0; }
|
|
nav{ flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: 1rem; }
|
|
|
|
|
|
.theme-toggle {
|
|
position: static;
|
|
order: 2;
|
|
margin-left: .5rem;
|
|
padding: .3rem .6rem;
|
|
background: transparent;
|
|
}
|
|
|
|
.banner-header {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.banner-header nav {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
body.no-sidenotes {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#mobile-move-panel {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
:root:not([data-theme="light"]){
|
|
--bg: #0f1115;
|
|
--fg: #e6e6e6;
|
|
--link: #8ab4ff;
|
|
--heading: #9ecbff;
|
|
--code-bg: #1a1d24;
|
|
|
|
--note-color: #c2c7cf;
|
|
--note-bg: transparent;
|
|
|
|
--border: #2a2f3a;
|
|
--chip-bg: #1f2330;
|
|
--chip-fg: #cfd3da;
|
|
--muted: #a9b0bb;
|
|
}
|
|
.countdown-wrap {
|
|
color: var(--fg, #ddd);
|
|
}
|
|
time.countdown {
|
|
color: var(--accent, #7abfff);
|
|
background: color-mix(in srgb, var(--accent, #7abfff) 15%, transparent);
|
|
box-shadow: 0 0 6px rgba(255,255,255,0.05);
|
|
}
|
|
time.countdown.expired {
|
|
color: #777;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1250px){
|
|
#preamble.status{
|
|
padding-right: var(--body-pad);
|
|
}
|
|
|
|
#content.content{
|
|
padding-right: var(--body-pad);
|
|
}
|
|
.sidenote,
|
|
.marginnote{
|
|
float: none;
|
|
clear: both;
|
|
width: auto;
|
|
display: block;
|
|
margin: 0.5rem 0 0.75rem;
|
|
padding-left: 0.75rem;
|
|
border-left: 3px solid rgba(0,0,0,.08);
|
|
margin-right: 0;
|
|
}
|
|
.fullwidth{
|
|
max-width: calc(100vw - 2 * var(--body-pad));
|
|
}
|
|
.sidenote, .marginnote{
|
|
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
|
|
}
|
|
.sidenote .mn-img,
|
|
.marginnote .mn-img{
|
|
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
|
|
}
|
|
|
|
#table-of-contents{
|
|
float: none;
|
|
position: static;
|
|
width: auto;
|
|
margin: 0 0 1rem;
|
|
padding: .5rem .75rem;
|
|
border-right: 0;
|
|
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
|
|
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
}
|