Link svg and fix nested navlink highlighting.

15 files changed, 71 insertions, 18 deletions

diff --git a/_includes/nav.html b/_includes/nav.html
index 403d785..6610123 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,10 +1,11 @@
 <div class="container">
   <ul id="navlist" class="left">
+    {% assign parts = page.url | split: '/' %}
     <li {% if page.url == "/" %}class="active"{% endif %}>
       <a href="{{ site.baseurl }}/">hme</a>
     </li>
-    <li {% if page.url == "/projects/" %}class="active"{% endif %}>
-      <a href="{{ site.baseurl }}/projects/">tnk</a>
+    <li {% if parts[1] == "projects" %}class="active"{% endif %}>
+      <a href="{{ site.baseurl }}/projects/">proj</a>
     </li>
     <li {% if page.url == "/about/" %}class="active"{% endif %}>
       <a href="{{ site.baseurl }}/about/">abt</a>
diff --git a/_site/about/index.html b/_site/about/index.html
index 74ed4be..764f8ff 100644
--- a/_site/about/index.html
+++ b/_site/about/index.html
@@ -13,11 +13,12 @@
   
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
     <li >
-      <a href="/projects/">tnk</a>
+      <a href="/projects/">proj</a>
     </li>
     <li class="active">
       <a href="/about/">abt</a>
diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index e6c2231..fbc22f7 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -1,3 +1,7 @@
+:root {
+  --link-color: #2f2f2f;
+}
+
 body{
   height: 100%;
   text-decoration-skip: ink;
@@ -28,6 +32,17 @@ a {
   text-decoration: none;
 }
 
+a.external::after {
+  background-color: var(--link-color);
+  content: '';
+  display: inline-flex;
+  height: 10px;
+  margin-left: 4px;
+  width: 10px;
+  mask-size: cover;
+  mask-image: url(/assets/img/external-link.svg);
+}
+
 img {
   width: 100%;
   mix-blend-mode: multiply;
diff --git a/_site/assets/img/external-link.svg b/_site/assets/img/external-link.svg
new file mode 100644
index 0000000..2c04c7d
--- /dev/null
+++ b/_site/assets/img/external-link.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 3.5V14.5H12.5V10H14V15C14 15.5523 13.5523 16 13 16H1C0.447716 16 0 15.5523 0 15V3C0 2.44772 0.447715 2 1 2H6V3.5H1.5Z" fill="#FBFBFE"/>
+<path d="M15.9217 1.17828L7.01473 10.0853L5.95407 9.02462L14.8611 0.117624L15.9217 1.17828Z" fill="#FBFBFE"/>
+<path d="M7.5 0H16V1.5H7.5V0Z" fill="#FBFBFE"/>
+<path d="M16 0L16 8.5L14.5 8.5L14.5 -6.55671e-08L16 0Z" fill="#FBFBFE"/>
+</svg>
diff --git a/_site/blog/post-1/index/index.html b/_site/blog/post-1/index/index.html
index 81b756a..3c71fca 100644
--- a/_site/blog/post-1/index/index.html
+++ b/_site/blog/post-1/index/index.html
@@ -13,11 +13,12 @@
   
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
     <li >
-      <a href="/projects/">tnk</a>
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/index.html b/_site/index.html
index cff0950..21acaa8 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -13,11 +13,12 @@
   
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li class="active">
       <a href="/">hme</a>
     </li>
     <li >
-      <a href="/projects/">tnk</a>
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/bumblebee/index.html b/_site/projects/bumblebee/index.html
index e17a669..232cecb 100644
--- a/_site/projects/bumblebee/index.html
+++ b/_site/projects/bumblebee/index.html
@@ -17,11 +17,12 @@
 
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
-    <li >
-      <a href="/projects/">tnk</a>
+    <li class="active">
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/desktop-unix/index.html b/_site/projects/desktop-unix/index.html
index 8f82367..c90d2af 100644
--- a/_site/projects/desktop-unix/index.html
+++ b/_site/projects/desktop-unix/index.html
@@ -17,11 +17,12 @@
 
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
-    <li >
-      <a href="/projects/">tnk</a>
+    <li class="active">
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/e-reader/index.html b/_site/projects/e-reader/index.html
index 6d2f2f5..c41be90 100644
--- a/_site/projects/e-reader/index.html
+++ b/_site/projects/e-reader/index.html
@@ -17,11 +17,12 @@
 
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
-    <li >
-      <a href="/projects/">tnk</a>
+    <li class="active">
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/etlas/index.html b/_site/projects/etlas/index.html
index 11d6e74..dbda6f8 100644
--- a/_site/projects/etlas/index.html
+++ b/_site/projects/etlas/index.html
@@ -17,11 +17,12 @@
 
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
-    <li >
-      <a href="/projects/">tnk</a>
+    <li class="active">
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/fpm-door-lock/index.html b/_site/projects/fpm-door-lock/index.html
index 7067e46..bff07f2 100644
--- a/_site/projects/fpm-door-lock/index.html
+++ b/_site/projects/fpm-door-lock/index.html
@@ -17,11 +17,12 @@
 
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
-    <li >
-      <a href="/projects/">tnk</a>
+    <li class="active">
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/index.html b/_site/projects/index.html
index bec3495..0b5fdc5 100644
--- a/_site/projects/index.html
+++ b/_site/projects/index.html
@@ -13,11 +13,12 @@
   
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
     <li class="active">
-      <a href="/projects/">tnk</a>
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/_site/projects/matrix-digital-rain/index.html b/_site/projects/matrix-digital-rain/index.html
index 8ab334a..2636f4b 100644
--- a/_site/projects/matrix-digital-rain/index.html
+++ b/_site/projects/matrix-digital-rain/index.html
@@ -17,11 +17,12 @@
 
     <div class="container">
   <ul id="navlist" class="left">
+    
     <li >
       <a href="/">hme</a>
     </li>
-    <li >
-      <a href="/projects/">tnk</a>
+    <li class="active">
+      <a href="/projects/">proj</a>
     </li>
     <li >
       <a href="/about/">abt</a>
diff --git a/assets/css/main.css b/assets/css/main.css
index e6c2231..fbc22f7 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,3 +1,7 @@
+:root {
+  --link-color: #2f2f2f;
+}
+
 body{
   height: 100%;
   text-decoration-skip: ink;
@@ -28,6 +32,17 @@ a {
   text-decoration: none;
 }
 
+a.external::after {
+  background-color: var(--link-color);
+  content: '';
+  display: inline-flex;
+  height: 10px;
+  margin-left: 4px;
+  width: 10px;
+  mask-size: cover;
+  mask-image: url(/assets/img/external-link.svg);
+}
+
 img {
   width: 100%;
   mix-blend-mode: multiply;
diff --git a/assets/img/external-link.svg b/assets/img/external-link.svg
new file mode 100644
index 0000000..2c04c7d
--- /dev/null
+++ b/assets/img/external-link.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 3.5V14.5H12.5V10H14V15C14 15.5523 13.5523 16 13 16H1C0.447716 16 0 15.5523 0 15V3C0 2.44772 0.447715 2 1 2H6V3.5H1.5Z" fill="#FBFBFE"/>
+<path d="M15.9217 1.17828L7.01473 10.0853L5.95407 9.02462L14.8611 0.117624L15.9217 1.17828Z" fill="#FBFBFE"/>
+<path d="M7.5 0H16V1.5H7.5V0Z" fill="#FBFBFE"/>
+<path d="M16 0L16 8.5L14.5 8.5L14.5 -6.55671e-08L16 0Z" fill="#FBFBFE"/>
+</svg>