update portfolioHEADmaster

1 files changed, 100 insertions, 56 deletions

diff --git a/docs/assets/css/css.css b/docs/assets/css/css.css
index 5aa0b0b..d12b7b5 100644
--- a/docs/assets/css/css.css
+++ b/docs/assets/css/css.css
@@ -1,77 +1,104 @@
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-55Rg.ttf);
-    font-weight: normal;
-    font-style: normal;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-55Rg.ttf);
+  font-weight: normal;
+  font-style: normal;
 }
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-56It.ttf);
-    font-weight: normal;
-    font-style: italic;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-56It.ttf);
+  font-weight: normal;
+  font-style: italic;
 }
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-75Bd.ttf);
-    font-weight: bold;
-    font-style: normal;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-75Bd.ttf);
+  font-weight: bold;
+  font-style: normal;
 }
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-76BdIt.ttf);
-    font-weight: bold;
-    font-style: italic;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-76BdIt.ttf);
+  font-weight: bold;
+  font-style: italic;
 }
 .desktop .m,
-.mobile .d { display: none; }
-html, body {
-  margin: 0; padding: 0; width: 100%; height: 100%;
+.mobile .d {
+  display: none;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
   font-family: nhg, sans-serif;
-  color: rgba(255,255,255,0.9);
+  color: rgba(255, 255, 255, 0.9);
 }
 html {
-  background-color: rgb(0,0,0);
-  background-image: linear-gradient(rgba(20, 10, 0, 0.0), rgba(20, 10, 0, 1.0));
+  background-color: rgb(0, 0, 0);
+  background-image: linear-gradient(rgba(20, 10, 0, 0), rgba(20, 10, 0, 1));
   background-attachment: fixed;
   transition: background-color 1s;
 }
 html.day {
-  background-color: rgb(80,10,60);
+  background-color: rgb(80, 10, 60);
 }
 html.night {
-  background-color: rgb(8,10,30);
+  background-color: rgb(8, 10, 30);
 }
 body {
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
   transition: background-color 1000ms, opacity 500ms;
   opacity: 1;
 }
 body.loading {
-  background-color: rgba(255,128,192,1);
+  background-color: rgba(255, 128, 192, 1);
   background-color: black;
   opacity: 0;
 }
 body.fade {
   opacity: 1;
   background-color: black;
-  background-color: rgba(255,128,192,1);
+  background-color: rgba(255, 128, 192, 1);
+}
+::-webkit-scrollbar {
+  background-color: #000;
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #666;
+  border: solid 2px transparent;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+  border: solid 2px transparent;
+}
+
+::-webkit-scrollbar-track {
+  border: solid 2px transparent;
 }
 .shards {
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   pointer-events: none;
 }
 .bgs {
   position: absolute;
-  top: 50%; left: 50%;
+  top: 50%;
+  left: 50%;
   opacity: 0.7;
   transition: opacity 500ms;
   perspective: 10000px;
 }
 .stars {
-  transition: all 500ms cubic-bezier(0,0,0,1);
+  transition: all 500ms cubic-bezier(0, 0, 0, 1);
   transform: translateZ(0) scaleX(1) scaleY(1);
 }
 .stars.fade {
@@ -82,31 +109,33 @@ body.fade {
 }
 .bg {
   position: absolute;
-  top: 0; left: 0;
+  top: 0;
+  left: 0;
   transition: all 120s;
 }
 header {
-  background-color: rgba(40,20,30,0.9);
+  background-color: rgba(40, 20, 30, 0.9);
   position: absolute;
   width: 100%;
   bottom: 100px;
   left: 0;
 }
 p {
-  margin: 0; padding: 0;
+  margin: 0;
+  padding: 0;
   line-height: 1.4;
 }
 p + p {
-  margin-top: 14px;ß
+  margin-top: 14px;
 }
 a {
   text-decoration: none;
-  color: rgba(255,255,255,0.8);
+  color: rgba(255, 255, 255, 0.8);
   transition: color 200ms;
   border-bottom: 1px dotted;
 }
 .desktop a:hover {
-  color: rgba(255,255,255,1.0);
+  color: rgba(255, 255, 255, 1);
 }
 img {
   max-width: 100%;
@@ -120,7 +149,7 @@ img.cover {
 }
 .menu a.active {
   border-bottom: 1px dotted;
-  color: rgba(255,255,255,1.0);
+  color: rgba(255, 255, 255, 1);
 }
 .logo {
   width: 400px;
@@ -194,7 +223,7 @@ ol li {
   background-image: url(../img/pause-inv.png);
   background-size: 100%;
   background-position: center;
-  border: 2px solid rgba(255,255,255,0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 100%;
   margin: 0 10px 0 10px;
 }
@@ -209,7 +238,7 @@ ol li {
   flex: auto;
 }
 .desktop .player:hover .track {
-  color: rgba(255,255,255,1.0);
+  color: rgba(255, 255, 255, 1);
 }
 .playlist {
   -webkit-overflow-scrolling: touch;
@@ -219,27 +248,31 @@ ol li {
   max-width: calc(100vw - 30px);
   background: black;
   position: absolute;
-  bottom: 160px; right: 0;
+  bottom: 160px;
+  right: 0;
   margin: 0px 10px;
   padding: 0px;
-  height: 0; overflow: hidden;
-  transition: all 0.5s cubic-bezier(0,1,1,1);
+  height: 0;
+  overflow: hidden;
+  transition: all 0.5s cubic-bezier(0, 1, 1, 1);
 }
 .playlist.visible {
   height: 180px;
 }
 .playlist ul {
-  margin: 0; padding: 0;
+  margin: 0;
+  padding: 0;
 }
 .playlist li {
-  margin: 0; padding: 10px;
+  margin: 0;
+  padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
-  background: rgba(20,5,10,0.5);
+  background: rgba(20, 5, 10, 0.5);
 }
 .playlist li.active {
   color: #000;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
 }
 .playlistToggle {
   align-self: flex-end;
@@ -248,7 +281,7 @@ ol li {
   padding: 10px;
   display: flex;
   flex-direction: column;
-  justify-content:space-between;
+  justify-content: space-between;
 }
 .playlistToggle div {
   width: 100%;
@@ -263,10 +296,11 @@ section {
   max-width: 500px;
   background: black;
   position: absolute;
-  bottom: 160px; left: 0;
+  bottom: 160px;
+  left: 0;
   margin: 10px 10px;
   padding: 10px;
-  background: rgba(20,5,10,0.5);
+  background: rgba(20, 5, 10, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 200ms;
@@ -279,14 +313,24 @@ section {
   pointer-events: auto;
 }
 @keyframes fade {
-  0% { opacity: 0.6; }
- 50% { opacity: 1.0; }
- 90% { opacity: 0.7; }
-100% { opacity: 0.6; }
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.6;
+  }
 }
 
 @media (max-width: 700px) {
-  * { box-sizing: border-box; }
+  * {
+    box-sizing: border-box;
+  }
   header {
     bottom: auto;
     top: 0px;
@@ -331,7 +375,7 @@ section {
   .player {
     position: fixed;
     bottom: 0;
-    background: rgba(80,10,60,0.6);
+    background: rgba(80, 10, 60, 0.6);
     width: 100vw;
     padding: 12px 20px;
   }