Whidix/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

custom homapage

Browse Source
This commit is contained in:
whidix
2022-12-30 01:47:17 +01:00
parent cf9dc34936
commit 74ac50ede7
25 changed files with 222 additions and 13954 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/routes/Header.svelte
View File

@@ -5,43 +5,63 @@
</script>
<header>
<div class="corner">
<a href="https://kit.svelte.dev">
<img src={logo} alt="SvelteKit" />
</a>
</div>
<div class="header">
<div class="corner">
<a href="https://kit.svelte.dev">
<img src={logo} alt="SvelteKit" />
</a>
</div>
<nav>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
</svg>
<ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
<a href="/">Home</a>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/about">About</a>
</li>
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
<a href="/sverdle">Sverdle</a>
</li>
</ul>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
</svg>
</nav>
<nav>
<ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
<a href="/">Home</a>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/about">About</a>
</li>
<li aria-current={$page.url.pathname === '/blog' ? 'page' : undefined}>
<a href="/blog">Blog</a>
</li>
<li aria-current={$page.url.pathname.startsWith('/projects') ? 'page' : undefined}>
<a href="/projects">Projects</a>
</li>
<li aria-current={$page.url.pathname.startsWith('/shs') ? 'page' : undefined}>
<a href="/shs">SHS</a>
</li>
<li aria-current={$page.url.pathname.startsWith('/contact') ? 'page' : undefined}>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
<div class="corner">
<a href="https://github.com/sveltejs/kit">
<img src={github} alt="GitHub" />
</a>
<div class="corner">
<a href="https://github.com/sveltejs/kit">
<img src={github} alt="GitHub" />
</a>
</div>
</div>
</header>
<style>
header {
display: flex;
border-top: 3px solid var(--color-nav);
justify-content: space-between;
width: 100%;
position: relative;
z-index: 1;
}
.header {
display: flex;
background-color: white;
justify-content: space-between;
width: 80%;
margin: 0 auto;
position: relative;
top: 20px;
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgb(0 0 0/5%);
}
.corner {
@@ -66,21 +86,9 @@
nav {
display: flex;
justify-content: center;
--background: rgba(255, 255, 255, 0.7);
}
svg {
width: 2em;
height: 3em;
display: block;
}
path {
fill: var(--background);
}
ul {
position: relative;
padding: 0;
margin: 0;
height: 3em;
@@ -89,7 +97,6 @@
align-items: center;
list-style: none;
background: var(--background);
background-size: contain;
}
li {
@@ -111,7 +118,7 @@
nav a {
display: flex;
height: 100%;
height: 80%;
align-items: center;
padding: 0 0.5rem;
color: var(--color-text);
@@ -124,6 +131,8 @@
}
a:hover {
color: var(--color-theme-1);
color: var(--color-nav);
background-color: var(--color-bg-nav);
border-radius: 5px;
}
</style>