@@ -152,3 +152,70 @@ export const Header = () => {
);
};
+
+export const MenuIcon = ({ showMenu }: { showMenu: boolean }) => {
+ return (
+
+ {showMenu ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss
index 6c2502f..66dc454 100644
--- a/web/src/components/layout/footer.module.scss
+++ b/web/src/components/layout/footer.module.scss
@@ -2,8 +2,10 @@
display: flex;
justify-content: space-between;
align-items: flex-end;
+ min-height: 60vh;
padding: var(--spacing-sitepadding);
- background: var(--color-background-secondary);
+ background: var(--color-chateauBlue);
+ color: var(--color-betongGray);
position: relative;
z-index: 700;
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index 47b0011..389de3c 100644
--- a/web/src/components/layout/header.module.scss
+++ b/web/src/components/layout/header.module.scss
@@ -22,10 +22,11 @@
.siteMenu {
display: flex;
gap: var(--spacing-sitepadding);
- align-items: flex-start;
+ align-items: center;
+ height: 3rem;
a {
- font-weight: 500;
+ font-weight: 600;
}
}
@@ -33,6 +34,14 @@
list-style: none;
display: flex;
gap: var(--spacing-sitepadding);
+ animation: slideInFromRight .3s ease-out forwards;
+
+ a {
+ font-weight: 600;
+ /*font-size: var(--font-size-caption);
+ text-transform: uppercase;
+ letter-spacing: .05em;*/
+ }
}
.toggleMenu {
@@ -40,36 +49,20 @@
z-index: 1001;
background: none;
margin-top: .2rem;
+ width: 3rem;
+ height: 3rem;
+ padding: 0;
+ margin: 0;
}
.menuIcon {
- --stroke-width: 0.12rem;
- --icon-width: 1.75rem;
display: block;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- width: var(--icon-width);
- height: var(--stroke-width);
- background: currentColor;
+ width: 3rem;
+ height: 3rem;
- &:before,
- &:after {
- content: "";
- display: block;
- position: absolute;
- left: 0;
- width: var(--icon-width);
- height: var(--stroke-width);
- background: currentColor;
- }
-
- &:before {
- top: -.5rem;
- }
-
- &:after {
- bottom: -.5rem;
+ svg {
+ width: 100%;
+ height: 100%;
}
}
@@ -81,8 +74,8 @@
z-index: 1000;
width: 50%;
- background: var(--color-chateauBlue);
- color: var(--color-betongGray);
+ background: var(--color-menu-background);
+ color: var(--color-menu-text);
padding: var(--spacing-sitepadding);
transition: all var(--transition-easing);
@@ -111,7 +104,7 @@
.siteMenu[data-show=true] {
.mainMenu {
- display: none;
+ animation: slideOutRight .3s ease-out forwards;
}
.fullMenu {
@@ -138,4 +131,28 @@
.fullMenu {
width: 100%;
}
+}
+
+@keyframes slideOutRight {
+ 0% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
+
+@keyframes slideInFromRight {
+ 0% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
}
\ No newline at end of file
diff --git a/web/src/css/animations.scss b/web/src/css/animations.scss
new file mode 100644
index 0000000..2b48778
--- /dev/null
+++ b/web/src/css/animations.scss
@@ -0,0 +1,38 @@
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+
+ 50% {
+ opacity: .5;
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideOutRight {
+ 0% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 47de14d..cc8354c 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -7,6 +7,7 @@
html {
min-height: 100%;
font-size: calc(1rem + 8 * (100vw - 320px) / 1920);
+ background-color: var(--color-chateauBlue);
}
html,
@@ -45,33 +46,6 @@ body {
}
}
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-@keyframes fadeUp {
- 0% {
- opacity: 0;
- transform: translateY(30px);
- }
-
- 50% {
- opacity: .5;
- transform: translateY(0);
- }
-
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
a {
color: inherit;
text-underline-offset: .16em;
diff --git a/web/src/css/main.scss b/web/src/css/main.scss
index 42eaf75..24d4bcd 100644
--- a/web/src/css/main.scss
+++ b/web/src/css/main.scss
@@ -1,3 +1,4 @@
@import 'fonts.scss';
@import 'variables.scss';
+@import 'animations.scss';
@import 'base.scss';
\ No newline at end of file
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
index 6a0cde4..1ef666c 100644
--- a/web/src/css/variables.scss
+++ b/web/src/css/variables.scss
@@ -32,6 +32,8 @@
--color-cta-background: var(--color-goldenOrange);
--color-cta-text: var(--color-black);
--color-placeholder: var(--color-neufPink);
+ --color-menu-text: var(--color-deepBrick);
+ --color-menu-background: var(--color-goldenBeige);
// spacing
--spacing-sitepadding: 2rem;