michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move global styles to layout

Browse Source
This commit is contained in:
Michal Vanko
2021-04-28 12:22:44 +02:00
parent 1c02d65020
commit 40eae4a8a5
8 changed files with 456 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/Nav.svelte
View File

@ -4,13 +4,76 @@
export let segment
</script>
<nav class="navigation-theme">
<section class="nav-main">
<ul>
<li>
<a class={classNames({ selected: segment === '/' })} href="/">
Introduction
</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
class={classNames({ selected: segment.startsWith('/blog') })}
href="/blog"
>
Blog
</a>
</li>
<li>
<a
class={classNames({ selected: segment.startsWith('/portfolio') })}
href="/portfolio"
>
Portfolio
</a>
</li>
</ul>
<aside class="logo-section">
<a class="logo" href=".">
<img src="/images/m-logo.png" alt="m logo" />
</a>
</aside>
</section>
{#if segment === 'portfolio'}
<!-- Move to portfolio layout -->
<section class="page-navigation">
<a href="portfolio#personal-information">About</a>
<a href="portfolio#skills">Skills</a>
<a href="portfolio#work-history">Work History</a>
<a href="portfolio#projects">Projects</a>
<a href="portfolio#education">Education</a>
</section>
{/if}
</nav>
<style>
@import '../styles/variables.module.less';
nav {
position: sticky;
top: -2.75em;
z-index: 1;
padding: 0.5em;
box-shadow: 0px 1px 3px #959595;
padding: 0.5em 0.5em 2em;
background: linear-gradient(
177.43deg,
@pinky -6.98%,
rgba(@pinky, 0) 54.88%
);
color: @menu-color;
}
a {
color: @menu-link-color;
&:hover {
color: @menu-link-hover-color;
}
}
nav a {
@ -55,49 +118,3 @@
margin: 0.3em auto 0;
}
</style>
<nav class="navigation-theme">
<section class="nav-main">
<ul>
<li>
<a class={classNames({ selected: segment === '/' })} href="/">
Introduction
</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
class={classNames({ selected: segment.startsWith('/blog') })}
href="/blog">
Blog
</a>
</li>
<li>
<a
class={classNames({ selected: segment.startsWith('/portfolio') })}
href="/portfolio">
Portfolio
</a>
</li>
</ul>
<aside class="logo-section">
<a class="logo" href=".">
<img src="/images/m-logo.png" alt="m logo" />
</a>
</aside>
</section>
{#if segment === 'portfolio'}
<!-- Move to portfolio layout -->
<section class="page-navigation">
<a href="portfolio#personal-information">About</a>
<a href="portfolio#skills">Skills</a>
<a href="portfolio#work-history">Work History</a>
<a href="portfolio#projects">Projects</a>
<a href="portfolio#education">Education</a>
</section>
{/if}
</nav>