Add MainFramework and loading mask. Add animation to menu.

src/assets/css/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content
+  }
+  @-moz-keyframes #{$animationName} {
+    @content
+  }
+  @-o-keyframes #{$animationName} {
+    @content
+  }
+  @keyframes #{$animationName} {
+    @content
+  }
+}
+
+@mixin unique-keyframes {
+  $animationName: unique-id();
+  animation-name: $animationName;
+  @include keyframes($animationName) {
+    @content
+  }
+}

src/assets/css/common.scss

@@ -6,7 +6,7 @@ $font-secondary-color: #9E9E9E;
 .body {
   color: $font-main-color;
   user-select: none;
-  min-width: 1800px;
+  min-width: 900px;
   min-height: 400px;
 }
 
@@ -103,3 +103,19 @@ $font-secondary-color: #9E9E9E;
     height: 23px;
   }
 }
+
+#loading-mask {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(200, 200, 200, 0.2);
+}
+
+#fit-fullscreen {
+  width: 100vw;
+  height: 100vh;
+}

src/assets/css/header.scss

@@ -1,3 +1,5 @@
+@use "mixins" as mixins;
+
 .nav {
   display: flex;
   position: fixed;
@@ -13,6 +15,16 @@
       color: rgba(204, 204, 204, .33);
     }
   }
+  animation: .5s ease both;
+
+  @include mixins.unique-keyframes {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
 
   .logo {
     padding: 0 40px;
@@ -22,4 +34,60 @@
       font-family: century gothic, texgyreadventor, stheiti, sans-serif;
     }
   }
+
+  nav {
+    display: flex;
+    justify-content: end;
+    flex: 1;
+    transition: {
+      property: all;
+      duration: .5s;
+    };
+
+    .menu {
+      padding: 0 30px;
+
+      .item {
+        display: inline-block;
+        font-size: 1.5em;
+        transition: {
+          property: all;
+          duration: .3s;
+        };
+
+        a {
+          padding: 5px 20px;
+          color: rgba(102, 102, 102, .8);
+        }
+      }
+
+      .active {
+        border: {
+          bottom: {
+            width: 2px;
+            style: solid;
+            color: #CCC;
+          };
+        };
+      }
+
+      :hover {
+        transform: translateY(-5px);
+      }
+    }
+  }
+}
+
+.nav.hide {
+  animation: .5s ease both;
+
+  @include mixins.unique-keyframes {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      display: none;
+      transform: translateY(-100%);
+    }
+  }
 }

src/assets/css/home.scss

@@ -1 +0,0 @@
-@import url(header.scss);

src/assets/svg/loading.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>