Cian-H/am-d-model.eu
1
0
Fork 0
mirror of https://github.com/Cian-H/am-d-model.eu.git synced 2025-12-23 14:01:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed incorrect nav header theming in prod

Browse Source
This commit is contained in:
Cian Hughes
2025-01-13 17:13:06 +00:00
parent 2670fc1e95
commit 23c3cf5404
4 changed files with 51 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/NavigationHeader.svelte
View File

@@ -13,7 +13,7 @@
</script> </script>
<div class={$$props.class}> <div class={$$props.class}>
<div class="navigation-header-items-outer"> <div class="navigation-header">
<div class="flexrow-right navigation-header-items {items_class}"> <div class="flexrow-right navigation-header-items {items_class}">
<Link <Link
class="navigation-header-link {link_class}" class="navigation-header-link {link_class}"

18
src/lib/styles/NavigationHeader.scss
View File

@@ -1,3 +1,10 @@
.navigation-header {
display: flex;
flex-direction: row-reverse;
width: 100%;
justify-content: space-between;
}
.navigation-header { .navigation-header {
position: relative; position: relative;
height: 128px; height: 128px;
@@ -46,13 +53,6 @@
text-decoration: none; text-decoration: none;
} }
.navigation-header-items-outer {
display: flex;
flex-direction: row-reverse;
width: 100%;
justify-content: space-between;
}
.navigation-header-site-name { .navigation-header-site-name {
color: #000000; color: #000000;
text-align: left; text-align: left;
@@ -74,8 +74,8 @@
justify-content: flex-start; justify-content: flex-start;
} }
@media (max-width: 720px) { @media (max-width: 750px) {
.navigation-header-items-outer { .navigation-header-items {
display: none; display: none;
} }
} }

10
src/routes/+page.svelte
View File

@@ -1,11 +1,11 @@
<script> <script>
import "./LandingPage.scss";
import NavigationHeader from "$lib/components/NavigationHeader.svelte"; import NavigationHeader from "$lib/components/NavigationHeader.svelte";
import "./NavigationHeader.scss";
import NavigationFooter from "$lib/components/NavigationFooter.svelte"; import NavigationFooter from "$lib/components/NavigationFooter.svelte";
import Splash from "./Splash.svelte"; import Splash from "./Splash.svelte";
import InfoScroll from "./InfoScroll.svelte"; import InfoScroll from "./InfoScroll.svelte";
import BottomCall from "./BottomCall.svelte"; import BottomCall from "./BottomCall.svelte";
import "./LandingPage.scss";
import "./NavigationHeader.scss";
let use_video = true; let use_video = true;
function handleVideoError() { function handleVideoError() {
@@ -36,11 +36,7 @@
{/if} {/if}
<div class="landing-zone"> <div class="landing-zone">
<NavigationHeader <NavigationHeader
class="landing-navigation-header" class="splash-navigation-header"
items_class="landing-navigation-header-items"
link_class="landing-navigation-header-link"
button_class="landing-navigation-header-button"
button_text_class="landing-navigation-header-button-text"
display_title={false} display_title={false}
/> />
<Splash /> <Splash />

24
src/routes/NavigationHeader.scss
View File

@@ -1,19 +1,18 @@
.landing-navigation-header { .splash-navigation-header {
position: relative; position: relative;
height: 128px; height: 128px;
width: 100%; width: 100%;
padding-bottom: 120px; padding-bottom: 120px;
}
.landing-navigation-header-items { .navigation-header-items {
gap: 48px; gap: 48px;
align-items: center; align-items: center;
position: relative; position: relative;
padding-top: 28px; padding-top: 28px;
padding-right: 96px; padding-right: 96px;
} }
.landing-navigation-header-link { .navigation-header-link {
color: var(--cpalettelight); color: var(--cpalettelight);
font-family: var(--navigation-header-font-family); font-family: var(--navigation-header-font-family);
text-align: left; text-align: left;
@@ -24,9 +23,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
.landing-navigation-header-button { .navigation-header-button {
background: var(--cpalettelight); background: var(--cpalettelight);
border-radius: 8px; border-radius: 8px;
padding: 14px 24px 14px 24px; padding: 14px 24px 14px 24px;
@@ -39,16 +38,11 @@
position: relative; position: relative;
box-shadow: var(--button-shadow-box-shadow, box-shadow: var(--button-shadow-box-shadow,
0px 1px 2px 0px rgba(0, 0, 0, 0.05)); 0px 1px 2px 0px rgba(0, 0, 0, 0.05));
} }
.landing-navigation-header-button-text { .navigation-header-button-text {
@extend .landing-navigation-header-link; @extend .navigation-header-link;
color: var(--background); color: var(--background);
text-decoration: none; text-decoration: none;
}
@media (max-width: 720px) {
.landing-navigation-header {
display: none;
} }
} }