From 5e6971692e65a34426292a7fa4a34e8e599d578b Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Tue, 10 Sep 2019 21:23:50 +0200
Subject: [PATCH] Add some dark styles

---
 src/components/Nav.svelte         | 42 +++++++++++++++++++++++++------
 src/routes/_layout.svelte         | 22 ++++++++++++----
 src/routes/index.svelte           |  6 +++++
 src/routes/portfolio/index.svelte | 18 ++++++++++---
 static/global.css                 |  4 +++
 5 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index a5ba7ad..54a72dc 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <style>
-	nav {
+	/* nav {
 		border-bottom: 1px solid rgba(255,62,0,0.1);
 		font-weight: 300;
 		padding: 0 1em;
@@ -15,7 +15,7 @@
 	}
 
 	/* clearfix */
-	ul::after {
+	/* ul::after {
 		content: '';
 		display: block;
 		clear: both;
@@ -39,22 +39,48 @@
 		background-color: rgb(255,62,0);
 		display: block;
 		bottom: -1px;
-	}
+	} */
 
-	a {
+	/* a {
 		text-decoration: none;
 		padding: 1em 0.5em;
 		display: block;
-	}
+  } */
+  
+  nav {
+    position: sticky;
+    top: 0;
+    background: rgb(31, 22, 94);
+    z-index: 1;
+    padding: 0.5em;
+    box-shadow: 0px 2px 4px #090808;
+  }
+
+  nav a {
+    padding: 0.4em 0.5em;
+    text-decoration: none;
+  }
+
+  nav a:hover {
+    text-decoration: underline
+  }
 </style>
 
 <nav>
-	<ul>
+	<!-- <ul> -->
 		<!-- <li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li> -->
-		<li><a class='{segment === "portfolio" ? "selected" : ""}' href='portfolio'>portfolio</a></li>
+		<!-- <li><a class='{segment === "portfolio" ? "selected" : ""}' href='portfolio'>portfolio</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='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li> -->
-	</ul>
+	<!-- </ul> -->
+
+  <div 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>
+  </div>
 </nav>
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 8432299..cc71b21 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -5,18 +5,30 @@
 </script>
 
 <style>
+  .app-content {
+		background: linear-gradient(176deg, rgb(31, 22, 94) 0%,rgb(67, 117, 236) 100%);
+    background-attachment: fixed;
+		color:#f2f0f0;
+  }
+
 	main {
 		position: relative;
 		max-width: 56em;
-		background-color: white;
 		padding: 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
+
+  :global(::selection) {
+    background: #0dd0d0;
+  }
+
 </style>
 
-<Nav {segment}/>
+<div class="app-content">
+  <Nav {segment}/>
 
-<main>
-	<slot></slot>
-</main>
\ No newline at end of file
+  <main>
+    <slot></slot>
+  </main>
+</div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 954eb14..f9e01d0 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,3 +1,9 @@
+<script context="module">
+  export async function preload() {
+	  return this.redirect(302, 'portfolio')
+  }
+</script>
+
 <style>
 	h1, figure, p {
 		text-align: center;
diff --git a/src/routes/portfolio/index.svelte b/src/routes/portfolio/index.svelte
index 224584e..b09725b 100644
--- a/src/routes/portfolio/index.svelte
+++ b/src/routes/portfolio/index.svelte
@@ -15,6 +15,16 @@
   export let content
 </script>
 
+<style>
+  :global([id])::before {
+    content: '';
+    display: block;
+    height:      3em;
+    margin-top: -3em;
+    visibility: hidden;
+  }
+</style>
+
 <svelte:head>
 	<title>{content.title}</title>
 </svelte:head>
@@ -23,11 +33,11 @@
 
 <h2>Software Developer</h2>
 
-<section class="personal-information">
+<section id="personal-information">
   {@html content.body}
 </section>
 
-<section class="work-history">
+<section id="work-history">
   <h2>Work experience</h2>
   <section class="work-history-prelude">
     {@html content.workHistoryPrelude}
@@ -41,7 +51,7 @@
   </ul>
 </section>
 
-<section class="projects">
+<section id="projects">
   <h2>Projects</h2>
   <ul>
     {#each content.projects as project}
@@ -52,7 +62,7 @@
   </ul>
 </section>
 
-<section class="education">
+<section id="education">
   <h2>Education</h2>
   <ul>
     {#each content.education as work}
diff --git a/static/global.css b/static/global.css
index 3566e73..283cd77 100644
--- a/static/global.css
+++ b/static/global.css
@@ -1,3 +1,7 @@
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	margin: 0;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;