diff --git a/src/partials/_nav_location.scss b/src/partials/_nav_location.scss index f3ad433..4d4ce79 100644 --- a/src/partials/_nav_location.scss +++ b/src/partials/_nav_location.scss @@ -2,8 +2,7 @@ margin: 0; padding: var(--spacing-horizontal); background-color: var(--background-2); - border-radius: var(--border-radius-small) - var(--border-radius-large); + border-radius: var(--border-radius-leaf); text-align: center; .location_header { diff --git a/src/partials/_nav_quick_links.scss b/src/partials/_nav_quick_links.scss index 36ae54e..35387c5 100644 --- a/src/partials/_nav_quick_links.scss +++ b/src/partials/_nav_quick_links.scss @@ -1,7 +1,7 @@ .nav_quick_links { --cols: 5; - --item-padding: 0.35rem; - --item-edge-length: 1.25rem; + --item-padding: 0.3rem; + --item-edge-length: 1.15rem; --item-size: calc( var(--item-edge-length) + calc(var(--item-padding) * 2) ); @@ -32,8 +32,7 @@ padding: var(--item-padding); background-color: var(--background-2); - border-radius: var(--border-radius-small) - var(--border-radius-large); + border-radius: var(--border-radius-leaf); } } } diff --git a/src/partials/_nav_title.scss b/src/partials/_nav_title.scss index 0763686..e1ecc28 100644 --- a/src/partials/_nav_title.scss +++ b/src/partials/_nav_title.scss @@ -9,7 +9,7 @@ margin: inherit; padding: 0 var(--spacing-horizontal); transition: var(--transition-fade); - text-transform: uppercase; + /*text-transform: uppercase;*/ display: block; } diff --git a/src/partials/_pane_main.scss b/src/partials/_pane_main.scss index 5e8090e..7cd4a73 100644 --- a/src/partials/_pane_main.scss +++ b/src/partials/_pane_main.scss @@ -5,6 +5,5 @@ margin: var(--margin-pane); padding: 0; - border-radius: var(--border-radius-small) - var(--border-radius-large); + border-radius: var(--border-radius-leaf); } diff --git a/src/partials/_pane_nav.scss b/src/partials/_pane_nav.scss index 78f19a2..41f917b 100644 --- a/src/partials/_pane_nav.scss +++ b/src/partials/_pane_nav.scss @@ -4,14 +4,15 @@ @use "nav_quick_links"; .pane_nav { - --spacing-horizontal: 0.75rem; - --transform-scale-x: scaleX(1.15); - margin: var(--margin-pane); padding: 0; gap: var(--spacing-menu-gap); width: min-content; align-content: start; + display: grid; + grid-auto-flow: row; + grid-template-rows: auto auto auto 1fr max-content; + color: var(--accent-pink); } diff --git a/src/partials/_pane_spacer.scss b/src/partials/_pane_spacer.scss index cbdcd82..f31c47a 100644 --- a/src/partials/_pane_spacer.scss +++ b/src/partials/_pane_spacer.scss @@ -15,8 +15,7 @@ ) ); flex: 1; - border-radius: var(--border-radius-small) - var(--border-radius-large); + border-radius: var(--border-radius-leaf); /* Vertical Text Align */ display: flex; diff --git a/src/style.scss b/src/style.scss index 7cdfe3f..cab1297 100644 --- a/src/style.scss +++ b/src/style.scss @@ -4,6 +4,13 @@ @use "partials/pane_error"; +/* +@font-face { + font-family: Syncopate; + src: url(syncopate.woff); +} +*/ + :root { /* 0: Base of an element. Example: the viewport class. @@ -44,18 +51,29 @@ --white-2: #e5e5e5ff; --white-3: #f5f5f5ff; - --font-size-generic: 1.65vh; - --font-family-generic: Arial, Sans-Serif, Helvetica; + --font-size-generic: 1.85vh; + --font-family-generic: "Liberation Sans", Arial, Sans-Serif; + + --border-radius-small: calc(var(--border-radius-large) / 2); + --border-radius-large: 1rem; + --border-radius-leaf: var(--border-radius-small) + var(--border-radius-large); + + --margin-pane: 1.5rem; + + --spacing-horizontal: 0.75rem; + --spacing-menu-gap: 1rem; --transition-fade: 0.4s ease-out; --transition-cut: none; - --border-radius-large: 1rem; - --border-radius-small: calc(var(--border-radius-large) / 2); + --transform-scale-x: scaleX(1.15); - --margin-pane: 1.5rem; - - --spacing-menu-gap: 1rem; + body { + background-color: var(--background-0); + margin: 0; + color: var(--white-3); + } } /* @@ -79,11 +97,20 @@ ion-icon { .viewport { /* Adds a margin otherwise for some reason. */ - margin: 0; + margin: inherit; - background-color: var(--background-0); - color: var(--white-3); display: flex; flex-flow: row wrap; align-items: flex-start; } + +.footer { + margin: 0; + padding: var(--spacing-horizontal); + + background-color: var(--background-2); + border-top-right-radius: var(--border-radius-large); + + position: absolute; + bottom: 0; +}