Pane layout patches for mobile, Code cleanup.

This commit is contained in:
Cutieguwu
2025-08-21 11:40:04 -04:00
parent 5f4049c10c
commit 5bde31a42f
7 changed files with 13 additions and 23 deletions

View File

@@ -67,18 +67,18 @@
font-size: var(--font-size-generic); font-size: var(--font-size-generic);
color: var(--white-1); color: var(--white-1);
}
body { body {
background-color: var(--background-0); background-color: var(--background-0);
// Adds a margin otherwise for some reason. // Adds a margin otherwise for some reason.
margin: 0; margin: 0;
display: grid; display: grid;
grid-auto-flow: column dense; grid-auto-flow: column dense;
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
grid-template-areas: "nav main spacer"; grid-template-areas: "nav main spacer";
}
} }
* { * {

View File

@@ -8,16 +8,14 @@
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane { .pane {
width: 100%; width: calc((50% - var(--spacing-small)) * 2);
} }
} }
nav.pane, nav.pane,
.pane.spacer { .pane.spacer {
width: min-content;
gap: var(--spacing-medium); gap: var(--spacing-medium);
position: sticky; position: sticky;
top: var(--spacing-large); top: var(--spacing-large);
right: var(--spacing-large);
} }

View File

@@ -1,6 +1,4 @@
.location { .location {
grid-area: location;
margin: 0; margin: 0;
padding: var(--spacing-small); padding: var(--spacing-small);
background-color: var(--background-2); background-color: var(--background-2);

View File

@@ -2,8 +2,6 @@
@use "nav_title"; @use "nav_title";
nav .menu { nav .menu {
grid-area: menu;
// Remove default padding and style applied to ul for bullets. // Remove default padding and style applied to ul for bullets.
padding: 0; padding: 0;
list-style: none; list-style: none;

View File

@@ -1,6 +1,4 @@
nav.pane .quick_links { nav.pane .quick_links {
grid-area: quick_links;
--item-padding: 0.25rem; --item-padding: 0.25rem;
justify-content: space-between; justify-content: space-between;

View File

@@ -26,14 +26,11 @@ nav.pane {
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
nav.pane { nav.pane {
width: calc(
calc(50% - var(--spacing-large) + var(--spacing-small)) * 2
);
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: 0 var(--spacing-small); padding: 0 var(--spacing-small);
.nav_menu, .menu,
.quick_links, .quick_links,
.location { .location {
display: none; display: none;

View File

@@ -1,6 +1,7 @@
.pane.spacer { .pane.spacer {
grid-area: spacer; grid-area: spacer;
width: min-content;
height: calc(100vh - calc(var(--spacing-large) * 2)); height: calc(100vh - calc(var(--spacing-large) * 2));
display: grid; display: grid;