some animations

Author: Beelink

_v2/moduleart-website/design/quick-picture-viewer.pxd/QuickLook/Icon.tiff

@@ -1,3 +1,5 @@
+@import "../../assets/styles/variables.scss";
+
 @font-face {
   font-family: "Pacifico";
   src: url('../../assets/fonts/Pacifico.ttf');
@@ -21,12 +23,23 @@ main {
 }
 
 a {
-  color: #38F;
+  color: $link-color;
   text-decoration: none;
   position: relative;
   font-weight: 500;
 
-  &:hover {
-    border-bottom: 2px solid #38f;
+  &:not(.NO_ANIM)::after {
+    content: "";
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    height: 2px;
+    width: 0;
+    background: $link-color;
+    transition: width .25s;
+  }
+
+  &:not(.NO_ANIM):hover::after {
+    width: 100%;
   }
 }

_v2/moduleart-website/design/quick-picture-viewer.pxd/QuickLook/Thumbnail.tiff

@@ -2,17 +2,16 @@
   text-align: center;
   margin: 40px 0;
 
-  .logo {
+  &__logo {
     h1 {
       font: 48px/64px "Pacifico";
       margin: 0;
-      color: #38F;
     }
   }
 
-  .menu {
+  &__menu {
     padding: 0;
-    margin: 0;
+    margin: 8px 0;
     display: flex;
     justify-content: center;
 

_v2/moduleart-website/design/quick-picture-viewer.pxd/data/95D38AF6-09F4-4960-91A5-6B0C6D062FCD

@@ -1,12 +1,14 @@
 <template>
   <header class="global-header">
-    <div class="logo">
-      <h1>Module Art</h1>
+    <div class="global-header__logo">
+      <h1><a class="NO_ANIM" href="/">Module Art</a></h1>
     </div>
     <nav>
-      <ul class="menu">
+      <ul class="global-header__menu">
         <li><a href="#">Quick Picture Viewer</a></li>
         <li><a href="#">Qsnip</a></li>
+        <li><a href="#">News</a></li>
+        <li><a href="#">Contact</a></li>
       </ul>
     </nav>
   </header>