navigation, navigation theme

package-lock.json

@@ -1354,6 +1354,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "compression": "^1.7.4",
     "date-fns": "^2.8.1",
     "front-matter": "^3.0.2",

src/components/Footer.svelte

@@ -20,8 +20,6 @@
   }
 
   .site-footer {
-    background: #2d3935;
-    color: #eae9be;
     font-size: 0.8em;
     padding: 0.4em;
     box-shadow: 1px 3px #959595;
@@ -42,11 +40,6 @@
     white-space: nowrap;
   }
 
-  a {
-    /* color: #f2ee12; */
-    color: #eae9be;
-  }
-
   .lists ul {
     list-style: none;
     padding: 0;
@@ -113,6 +106,10 @@
     font-size: 0.7em;
   }
 
+  .latest-posts li a:visited:not(:hover) {
+    color: #a7a574;
+  }
+
   @media only screen and (min-width: 900px) {
     .lists {
       flex-direction: row;
@@ -132,7 +129,7 @@
   }
 </style>
 
-<footer class="site-footer">
+<footer class="site-footer navigation-theme">
   <div class="lists">
     <section class="site-map">
       <ul>

src/components/Nav.svelte

@@ -1,56 +1,13 @@
 <script>
-  // export let segment;
+  import classNames from 'classnames'
+
+  export let segment
 </script>
 
 <style>
-  /* nav {
-		border-bottom: 1px solid rgba(255,62,0,0.1);
-		font-weight: 300;
-		padding: 0 1em;
-	}
-
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-
-	/* clearfix */
-  /* ul::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
-
-	li {
-		display: block;
-		float: left;
-	}
-
-	.selected {
-		position: relative;
-		display: inline-block;
-	}
-
-	.selected::after {
-		position: absolute;
-		content: '';
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: rgb(255,62,0);
-		display: block;
-		bottom: -1px;
-	} */
-
-  /* a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-		display: block;
-  } */
-
   nav {
     position: sticky;
     top: 0;
-    background: #f2f6f6;
     z-index: 1;
     padding: 0.5em;
     box-shadow: 0px 1px 3px #959595;
@@ -59,23 +16,75 @@
   nav a {
     padding: 0.4em 0.5em;
   }
+
+  .nav-main {
+    display: flex;
+  }
+
+  .logo-section,
+  .logo-section img {
+    height: 1em;
+  }
+
+  .logo-section img {
+    filter: invert(1);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  .nav-main > ul {
+    flex: 1;
+  }
+
+  a.selected {
+    text-shadow: 0px 0px 1px;
+  }
 </style>
 
-<nav>
+<nav class="navigation-theme">
-  <!-- <ul> -->
+  <section class="nav-main">
-  <!-- <li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li> -->
+    <ul>
-  <!-- <li><a class='{segment === "portfolio" ? "selected" : ""}' href='portfolio'>portfolio</a></li> -->
+      <li>
-
+        <a class={classNames({ selected: segment === undefined })} href=".">
-  <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+          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='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li> -->
+      <li>
-  <!-- </ul> -->
+        <a
+          rel="prefetch"
+          class={classNames({ selected: segment === 'blog' })}
+          href="/blog">
+          Blog
+        </a>
+      </li>
+      <li>
+        <a
+          class={classNames({ selected: segment === 'portfolio' })}
+          href="/portfolio">
+          Portfolio
+        </a>
+      </li>
+    </ul>
 
-  <div class="page-navigation">
+    <aside class="logo-section">
+      <a class="logo" href=".">
+        <img src="/images/m-logo.png" alt="m logo" />
+      </a>
+    </aside>
+  </section>
+
+  <!-- <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>
+  </div> -->
 </nav>

static/global.css

@@ -94,6 +94,19 @@ p {
   background: #0dd0d0;
 }
 
+.navigation-theme {
+  background: #2d3935;
+  color: #eae9be;
+}
+
+.navigation-theme a {
+  color: #eae9be;
+}
+
+.navigation-theme a:hover {
+  color: #faf9d6;
+}
+
 @media only screen and (min-width: 400px) {
   body {
     font-size: 18px;