wip media query rework, sidebar mostly finished, rewritten njk

This commit is contained in:
sundae 2026-04-04 16:50:30 +03:00
commit 790147ea05
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
33 changed files with 268 additions and 361 deletions

View file

@ -2,11 +2,6 @@
@import url("./variables.css");
@import url("./nav.css");
:root {
--view: 18rem;
}
/* i hate default styles >:( and also chrome */
h1,
h2,
@ -77,13 +72,15 @@ footer {
& span {
background-image: var(--transgender);
padding: 0 var(--pad-sm);
padding: 0 var(--pad-s);
}
}
main {
width: var(--main);
padding: var(--pad-xl);
padding-left: calc(var(--view) + var(--pad-xl));
padding-right: var(--view);
overflow: hidden;
}
@ -143,11 +140,11 @@ article {
}
& p:not(:last-child, [aria-label]) {
padding-bottom: var(--pad-sm);
padding-bottom: var(--pad-s);
}
& code:not(pre *) {
padding: 0 var(--pad-sm);
padding: 0 var(--pad-s);
}
& pre {
@ -181,7 +178,7 @@ article {
& ul:not([role="list"]):is(#art *) {
padding: 0;
margin: 0 0 var(--pad-sm) var(--pad-xl);
margin: 0 0 var(--pad-s) var(--pad-xl);
}
& li:not([role] *, #changelog *) {
@ -214,14 +211,14 @@ article {
& figcaption {
font-weight: normal;
font-style: italic;
padding-top: var(--pad-sm);
padding-top: var(--pad-s);
}
}
& > :first-child > code {
display: flex;
width: fit-content;
margin: var(--pad-sm) 0;
margin: var(--pad-s) 0;
}
}
@ -252,18 +249,18 @@ img[src*="/assets/img/flag/"] {
& img {
position: relative;
vertical-align: sub;
margin: 0 var(--pad-sm);
margin: 0 var(--pad-s);
}
}
article a:not(.link *, a:has(img)) {
display: inline-flex;
padding: 0 var(--pad-sm);
padding: 0 var(--pad-s);
}
dialog button[commandfor="signal"] {
width: max-content;
padding: 0 var(--pad-sm);
padding: 0 var(--pad-s);
margin: 0 auto;
}
@ -311,9 +308,44 @@ dialog#signal {
& img {
border: 4px solid white;
padding: var(--pad-sm);
padding: var(--pad-s);
max-width: 100%;
max-height: 250px;
}
}
}
@media screen and (min-width: 916px) {
div#sidebar {
display: flex;
}
nav#floating {
display: none;
}
nav#default button[popovertarget] {
display: none;
}
}
@media screen and (max-width: 916px) {
/* Reset */
header, footer, main {
margin: 0;
padding: 0;
width: auto;
}
article {
margin: var(--pad-m);
padding: var(--pad-l);
}
header {
text-align: right;
padding-right: var(--pad-m);
}
/* Move navbar artwork */
nav#default::before {
content: none;
}
body::after {
content: "";
}
}