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-22 21:41:57 +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>
<div class={$$props.class}>
<div class="navigation-header-items-outer">
<div class="navigation-header">
<div class="flexrow-right navigation-header-items {items_class}">
<Link
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 {
position: relative;
height: 128px;
@@ -46,13 +53,6 @@
text-decoration: none;
}
.navigation-header-items-outer {
display: flex;
flex-direction: row-reverse;
width: 100%;
justify-content: space-between;
}
.navigation-header-site-name {
color: #000000;
text-align: left;
@@ -74,8 +74,8 @@
justify-content: flex-start;
}
@media (max-width: 720px) {
.navigation-header-items-outer {
@media (max-width: 750px) {
.navigation-header-items {
display: none;
}
}

10
src/routes/+page.svelte
View File

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

82
src/routes/NavigationHeader.scss
View File

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