edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu icons, animations and color variable updates

Browse Source
This commit is contained in:
elisejakob
2024-05-21 00:16:32 +02:00
parent 963987278a
commit e5819d9000
8 changed files with 161 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/general/logo.module.scss
View File

@ -4,7 +4,7 @@
transition: width .3s ease;
&.index {
width: 24rem;
width: 20rem;
}
svg {

69
web/src/components/layout/Header.tsx
View File

@ -85,7 +85,7 @@ export const Header = () => {
aria-label="Vis meny"
onClick={toggleMenu}
>
<span className={styles.menuIcon}></span>
<MenuIcon showMenu={showMenu} />
</button>
<div className={styles.fullMenu}>
<LogoIcon face="right" />
@ -152,3 +152,70 @@ export const Header = () => {
</header>
);
};
export const MenuIcon = ({ showMenu }: { showMenu: boolean }) => {
return (
<div className={styles.menuIcon}>
{showMenu ? (
<svg
viewBox="0 0 309 309"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M154.2 308.4C239.362 308.4 308.4 239.362 308.4 154.2C308.4 69.0377 239.362 0 154.2 0C69.0377 0 0 69.0377 0 154.2C0 239.362 69.0377 308.4 154.2 308.4Z"
fill="var(--color-menu-text)"
/>
<rect
x="101.964"
y="80.8135"
width="177.657"
height="29.9116"
transform="rotate(45 101.964 80.8135)"
fill="var(--color-menu-background)"
/>
<rect
x="227.586"
y="101.964"
width="177.657"
height="29.9116"
transform="rotate(135 227.586 101.964)"
fill="var(--color-menu-background)"
/>
</svg>
) : (
<svg
viewBox="0 0 309 309"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M154.2 308.4C239.362 308.4 308.4 239.362 308.4 154.2C308.4 69.0377 239.362 0 154.2 0C69.0377 0 0 69.0377 0 154.2C0 239.362 69.0377 308.4 154.2 308.4Z"
fill="var(--color-text)"
/>
<rect
x="65.3716"
y="139.244"
width="177.657"
height="29.9116"
fill="var(--color-background)"
/>
<rect
x="65.3716"
y="199.244"
width="177.657"
height="29.9116"
fill="var(--color-background)"
/>
<rect
x="65.3716"
y="79.2444"
width="177.657"
height="29.9116"
fill="var(--color-background)"
/>
</svg>
)}
</div>
);
};

4
web/src/components/layout/footer.module.scss
View File

@ -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;

77
web/src/components/layout/header.module.scss
View File

@ -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;
}
}

38
web/src/css/animations.scss Normal file
View File

@ -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;
}
}

28
web/src/css/base.scss
View File

@ -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;

1
web/src/css/main.scss
View File

@ -1,3 +1,4 @@
@import 'fonts.scss';
@import 'variables.scss';
@import 'animations.scss';
@import 'base.scss';

2
web/src/css/variables.scss
View File

@ -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;