135 lines
2.7 KiB
CSS
135 lines
2.7 KiB
CSS
@media (max-width: 600px){
|
|
.banner-header {
|
|
align-items: stretch;
|
|
gap: 0.7rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.site-brand {
|
|
justify-content: center;
|
|
}
|
|
|
|
.site-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 100%;
|
|
gap: 0.2rem;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.site-nav a {
|
|
padding: 0.42rem 0.55rem;
|
|
}
|
|
|
|
.site-actions {
|
|
width: 100%;
|
|
flex: 1 1 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.site-search {
|
|
display: none;
|
|
}
|
|
|
|
#updated {
|
|
text-align: center;
|
|
}
|
|
|
|
body.no-sidenotes {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#mobile-move-panel {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
:root:not([data-theme]){
|
|
--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;
|
|
--surface: #151820;
|
|
--surface-soft: #1b202a;
|
|
--accent: #8ab4ff;
|
|
--bg-color: var(--surface);
|
|
--border-color: var(--border);
|
|
--border-muted: var(--border);
|
|
--text-muted: var(--muted);
|
|
--accent-bg: color-mix(in oklab, var(--accent) 12%, var(--surface));
|
|
}
|
|
.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){
|
|
:root {
|
|
--content-min: 0px;
|
|
--content: min(var(--content-max), calc(100vi - 2 * var(--body-pad)));
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
}
|