fix header

Author: Eugene

package.json

@@ -14,14 +14,15 @@
     "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
     "react-slotify": "^0.1.7",
+    "react-snow-particle": "^1.0.6",
     "typescript": "^4.4.4"
   },
   "devDependencies": {
-    "@types/react-document-title": "^2.0.5",
-    "@types/redux-logger": "^3.0.9",
     "@types/node": "^16.11.7",
     "@types/react": "^17.0.34",
+    "@types/react-document-title": "^2.0.5",
     "@types/react-dom": "^17.0.11",
+    "@types/redux-logger": "^3.0.9",
     "redux-devtools-extension": "^2.13.9",
     "redux-logger": "^3.0.6"
   },

src/index.css src/assets/scss/index.scsssrc/index.css renamed to src/assets/scss/index.scss

@@ -1,3 +1,5 @@
+@import "./variables.scss";
+
 * {
   padding: 0;
   margin: 0;
@@ -9,10 +11,10 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-size: 18px;
+  font-size: $font-size-md;
   line-height: 150%;
   font-weight: 500;
-  color: #2c2c2e;
+  color: $color-text;
 }
 
 code {

src/assets/scss/variables.scss

@@ -8,16 +8,17 @@ $color-text: #1c1c1e; // Apple systemGray6 dark
 $duration-t: 0.25s; // for transitions
 
 // size
+$size-xs: 2px; // extra small
 $size-sm: 4px; // small
 $size-md: 8px; // medium
 $size-lg: 16px; // large
 $size-xl: 32px; // extra large
 $size-mx: 64px; // maximum
 
 // font size
-$font-size-sm: 14px;
-$font-size-md: 18px;
-$font-size-lg: 24px;
+$font-size-sm: 14px; // small
+$font-size-md: 18px; // medium
+$font-size-lg: 24px; // large
 
 // shadow
 $shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.1); // medium

src/components/App/index.scss

@@ -12,4 +12,13 @@
     padding: $size-xl 0;
     flex: 1;
   }
+
+  &__effects {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    pointer-events: none;
+  }
 }

src/components/App/index.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent } from "react";
 import { Routes, Route } from "react-router-dom";
+import { Snow } from "react-snow-particle";
 
 import mainConfig from "../../config/Main";
 import Header from "../Header";
@@ -34,6 +35,9 @@ const App: FunctionComponent = () => {
           <Footer />
         </WidthLimiterSlot>
       </WidthLimiter>
+      <div className="app__effects">
+        <Snow size="8px"/>
+      </div>
     </div>
   );
 };

src/components/Footer/index.scss

@@ -2,8 +2,8 @@
 
 .footer {
   text-align: center;
-  padding: 16px 0;
-  margin: 64px 0 0;
+  padding: $size-lg 0;
+  margin: $size-mx 0 0;
 
   &__copyright {
     color: $color-secondary;

src/components/Header/index.scss

@@ -10,27 +10,33 @@
     position: relative;
     display: inline-block;
 
-    h1, span {
+    h1,
+    span {
       font: 42px/150% Pacifico;
       display: block;
+      transition: transform $duration-t;
     }
 
     &::after {
       content: "";
       left: 0;
-      bottom: $size-sm;
+      bottom: $size-md;
       height: $size-sm;
-      width: 0;
+      width: 100%;
       background-color: $color-primary;
       position: absolute;
-      border-radius: 2px;
+      border-radius: $size-xs;
       opacity: 0;
-      transition: width $duration-t, opacity $duration-t;
+      transition: opacity $duration-t;
     }
 
-    &:hover {
+    &--clickable:hover {
+      h1,
+      span {
+        transform: translateY(-$size-md);
+      }
+
       &::after {
-        width: 100%;
         opacity: 1;
       }
     }

src/components/Header/index.tsx

@@ -11,13 +11,15 @@ const Header: FunctionComponent = () => {
 
   return (
     <header className="header">
-      <RouterLink to="/" className="header__logo">
-        {location.pathname === "/" ? (
+      {location.pathname === "/" ? (
+        <div className="header__logo">
           <h1>{mainConfig.title}</h1>
-        ) : (
+        </div>
+      ) : (
+        <RouterLink to="/" className="header__logo header__logo--clickable">
           <span>{mainConfig.title}</span>
-        )}
-      </RouterLink>
+        </RouterLink>
+      )}
       <ul className="header__links">
         <li className="header__link">
           <Link text="GitHub" href="https://github.com/ModuleArt" />

src/components/Link/index.scss

@@ -14,24 +14,23 @@
   &::before {
     content: "";
     position: absolute;
-    top: calc(100% - $size-sm);
+    bottom: 0;
     left: 0;
     width: 100%;
-    height: 2px;
+    height: $size-xs;
     border-radius: 1px;
     background: $color-primary;
     opacity: 0;
-    transition: top $duration-t, opacity $duration-t;
+    transition: opacity $duration-t;
   }
 
   &:hover &__text {
-    transform: translateY(-2px);
+    transform: translateY(-$size-xs);
   }
 
   &:hover {
     &::before {
       opacity: 1;
-      top: calc(100% - 2px);
     }
   }
 }

src/components/ProjectCard/index.scss

@@ -3,14 +3,12 @@
 .project-card {
   &__title {
     margin-bottom: $size-lg;
-    display: flex;
-    justify-content: center;
+    text-align: center;
     font-size: $font-size-lg;
   }
 
   &__text {
     font-weight: 600;
-    margin-right: $size-md;
   }
 
   &__platform {
@@ -34,7 +32,7 @@
     vertical-align: top;
     top: 100px;
     transition: top $duration-t, box-shadow $duration-t;
-    border-radius: 4px;
+    border-radius: $size-sm;
     box-shadow: $shadow-lg;
   }