janis/dertyp7.github.io
1
0
Fork 0
mirror of https://github.com/DerTyp7/dertyp7.github.io.git synced 2025-11-01 22:22:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Header component to App.js

Browse Source
This commit is contained in:
dertyp7
2024-01-13 16:27:05 +01:00
parent 15a866bbe6
commit b0b71f2c06
6 changed files with 77 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/styles/Header.scss Normal file
View File

@@ -0,0 +1,47 @@
.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid var(--color-border);
padding: 10px 50px;
.logo {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 2rem;
font-weight: 700;
letter-spacing: 5px;
padding-bottom: 8px;
color: var(--color-font);
span {
color: #7c7d7d;
}
}
nav {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 50ms ease-in-out;
&.current {
border-color: var(--color-accent);
}
&:hover {
border-color: var(--color-accent);
}
}
}
}

2
src/styles/index.scss
View File

@@ -2,7 +2,7 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
// line-height: 1.5;
font-weight: 400;
color-scheme: light dark;

7
src/styles/variables_colors.scss
View File

@@ -8,6 +8,7 @@
--color-font-link-header: #1c1c1c;
--color-font-link-header-hover: #000;
--color-border: #1c1c1c;
--color-border-link-header: transparent;
--color-border-link-header-hover: var(--color-accent);
@@ -23,10 +24,4 @@
--color-font-link: var(--color-accent);
--color-font-link-hover: #7dffc9;
.theme-dark {
--color-background-body: #1a1818;
--color-background-header: transparent;
--color-font: #fff;
}
}