Pane layout patches for mobile, Code cleanup.
This commit is contained in:
@@ -67,8 +67,9 @@
|
|||||||
|
|
||||||
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.
|
||||||
@@ -78,7 +79,6 @@
|
|||||||
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";
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user