From a8dd169087b64f9d76b47eb4f3c3a6f3e3a706d2 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 10 Nov 2022 13:20:04 +0600
Subject: [PATCH] added header

---
 assets/css/_mixins.scss            | 14 ++++++
 assets/svg/howdy.svg               | 73 ++++++++++++++----------------
 components/layout/LayoutHeader.vue | 43 ++++++++++++++++++
 layouts/content.vue                | 10 +---
 layouts/default.vue                |  2 +
 layouts/landing.vue                | 29 ++++++++++++
 pages/bio.vue                      |  5 +-
 pages/index.vue                    |  4 +-
 8 files changed, 130 insertions(+), 50 deletions(-)
 create mode 100644 components/layout/LayoutHeader.vue
 create mode 100644 layouts/landing.vue

diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss
index a22ce3a..11a6c8e 100644
--- a/assets/css/_mixins.scss
+++ b/assets/css/_mixins.scss
@@ -31,3 +31,17 @@
     @content;
   }
 }
+
+@mixin container {
+  max-width: 1280px;
+  margin: auto;
+  padding: 0 40px;
+
+  @include desktop {
+    padding: 0 40px;
+  }
+
+  @include tablet {
+    padding: 0 20px;
+  }
+}
diff --git a/assets/svg/howdy.svg b/assets/svg/howdy.svg
index bb2caaf..3c5215e 100644
--- a/assets/svg/howdy.svg
+++ b/assets/svg/howdy.svg
@@ -25,15 +25,15 @@
      inkscape:deskcolor="#505050"
      inkscape:document-units="px"
      showgrid="false"
-     inkscape:zoom="2.7666799"
-     inkscape:cx="225.54109"
-     inkscape:cy="121.08376"
+     inkscape:zoom="1.9557888"
+     inkscape:cx="148.78907"
+     inkscape:cy="221.13839"
      inkscape:window-width="1440"
-     inkscape:window-height="900"
+     inkscape:window-height="847"
      inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="25"
      inkscape:window-maximized="0"
-     inkscape:current-layer="g38429" /><defs
+     inkscape:current-layer="g15740" /><defs
      id="defs520"><linearGradient
        inkscape:collect="always"
        id="linearGradient35336"><stop
@@ -323,7 +323,7 @@
            style="fill:#242a7a;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
            d="m 38.67118,11.926483 a 2.6521345,2.6521345 0 0 0 -0.76797,0.114203 2.6521345,2.6521345 0 0 1 1.881938,2.538125 2.6521345,2.6521345 0 0 1 -1.882906,2.537157 2.6521345,2.6521345 0 0 0 0.768938,0.114687 2.6521345,2.6521345 0 0 0 2.652328,-2.651844 2.6521345,2.6521345 0 0 0 -2.652328,-2.652328 z" /></g><g
          id="g15740"
-         transform="translate(-2.4776356)"><rect
+         transform="translate(-6.8106973)"><rect
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991051;stroke-linecap:round"
            id="rect5880"
            width="34.134068"
@@ -374,7 +374,8 @@
            y="79.47654" /><path
            id="rect3649"
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991051;stroke-linecap:round"
-           d="M 8.6589027,25.765868 V 93.67645 H 44.21177 V 25.765868 Z m 1.8701703,2.026233 H 42.3416 V 91.650217 H 10.529073 Z" /><path
+           d="M 8.6589027,25.765868 V 93.67645 H 46.689406 V 25.765868 Z m 1.8701703,2.026233 H 44.819236 V 91.650217 H 10.529073 Z"
+           sodipodi:nodetypes="cccccccccc" /><path
            id="path5948"
            style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991051;stroke-linecap:round"
            d="m 14.169607,32.625517 -2.121318,10.029879 13.01936,0.09663 0.77153,-10.126514 h -0.03204 l -0.06408,0.482141 -1.071252,-0.482141 h -1.029395 l -0.599963,1.349789 -0.213424,-1.349789 h -2.737817 l -1.099158,1.157036 0.40256,-1.157036 h -3.010152 l -0.285771,1.543059 -0.192753,-1.543059 z" /><rect
@@ -491,39 +492,35 @@
            width="2.2448759"
            height="2.5402541"
            x="30.662273"
-           y="49.08741" /><rect
-           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
+           y="49.08741" /><path
            id="rect34359"
-           width="8.2705946"
-           height="3.0128596"
-           x="29.480762"
-           y="38.631016" /><rect
-           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
+           style="fill:#333aa7;stroke-width:0.991054;stroke-linecap:round"
+           d="m 29.480762,38.757698 h 13.225866 v 3.012859 H 29.480762 Z"
+           sodipodi:nodetypes="ccccc" /><path
            id="rect34361"
-           width="8.2705946"
-           height="3.0128596"
-           x="30.780428"
-           y="35.204628" /><rect
-           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
+           style="fill:#333aa7;stroke-width:0.991054;stroke-linecap:round"
+           d="m 30.780428,35.33131 h 13.225866 v 3.01286 H 30.780428 Z"
+           sodipodi:nodetypes="ccccc" /><path
            id="rect34363"
-           width="8.2705946"
-           height="3.0128596"
-           x="29.539839"
-           y="31.778238" /></g><path
-         style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
-         d="m 9.6273615,13.290308 c 0,0 2.4257565,-4.8515125 4.7706545,-3.4769173 2.344898,1.3745953 1.69803,2.5066153 1.69803,2.5066153 l -1e-6,3.800351 c 0,0 -0.485151,-4.528078 -0.970302,-3.962069 -0.485151,0.56601 -5.4983815,1.13202 -5.4983815,1.13202 z"
-         id="path14608"
-         sodipodi:nodetypes="csccsc" /><path
-         style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
-         d="m 16.500338,13.775459 c 0,0 -0.56601,-14.63539619 12.371357,-6.872976 0,0 -9.622166,1.9406053 -10.51161,2.5066151 -0.889444,0.5660098 -0.889444,0.5660098 -0.889444,0.5660098 z"
-         id="path14604" /><path
-         style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
-         d="m 15.691752,14.341469 c 0,0 2.021464,-8.4901469 -3.153483,-10.1073178 C 7.3633224,2.6169802 4.048122,5.689605 4.048122,5.689605 c 0,0 4.44722,3.1534832 6.872976,3.0726246 0,0 4.204644,-3.0726253 4.770654,5.5792394 z"
-         id="path14606" /><path
-         style="fill:#242a7a;fill-opacity:1;stroke:none;stroke-width:0.991055;stroke-linecap:round"
-         d="M 12.260576,25.059735 C 11.30123,22.199954 10.183681,20.052087 9.9217982,14.053724 l 11.5563108,0.137575 c -0.414782,3.805903 -0.378668,7.686954 -2.889078,11.143586 L 12.810876,25.19731 Z"
-         id="path14375"
-         sodipodi:nodetypes="cccccc" /></g><g
+           style="fill:#333aa7;stroke-width:0.991054;stroke-linecap:round"
+           d="m 29.539839,31.90492 h 13.225865 v 3.01286 H 29.539839 Z"
+           sodipodi:nodetypes="ccccc" /></g><g
+         id="g456"
+         transform="translate(-1.4865814)"><path
+           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
+           d="m 9.6273615,13.290308 c 0,0 2.4257565,-4.8515125 4.7706545,-3.4769173 2.344898,1.3745953 1.69803,2.5066153 1.69803,2.5066153 l -1e-6,3.800351 c 0,0 -0.485151,-4.528078 -0.970302,-3.962069 -0.485151,0.56601 -5.4983815,1.13202 -5.4983815,1.13202 z"
+           id="path14608"
+           sodipodi:nodetypes="csccsc" /><path
+           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
+           d="m 16.500338,13.775459 c 0,0 -0.56601,-14.63539619 12.371357,-6.872976 0,0 -9.622166,1.9406053 -10.51161,2.5066151 -0.889444,0.5660098 -0.889444,0.5660098 -0.889444,0.5660098 z"
+           id="path14604" /><path
+           style="fill:#333aa7;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round"
+           d="m 15.691752,14.341469 c 0,0 2.021464,-8.4901469 -3.153483,-10.1073178 C 7.3633224,2.6169802 4.048122,5.689605 4.048122,5.689605 c 0,0 4.44722,3.1534832 6.872976,3.0726246 0,0 4.204644,-3.0726253 4.770654,5.5792394 z"
+           id="path14606" /><path
+           style="fill:#242a7a;fill-opacity:1;stroke:none;stroke-width:0.991055;stroke-linecap:round"
+           d="M 12.260576,25.059735 C 11.30123,22.199954 10.183681,20.052087 9.9217982,14.053724 l 11.5563108,0.137575 c -0.414782,3.805903 -0.378668,7.686954 -2.889078,11.143586 L 12.810876,25.19731 Z"
+           id="path14375"
+           sodipodi:nodetypes="cccccc" /></g></g><g
        id="g4098"
        transform="matrix(0.81394182,0,0,0.81730231,19.379908,30.942881)"
        style="stroke-width:1.22606"><rect
diff --git a/components/layout/LayoutHeader.vue b/components/layout/LayoutHeader.vue
new file mode 100644
index 0000000..47b5910
--- /dev/null
+++ b/components/layout/LayoutHeader.vue
@@ -0,0 +1,43 @@
+<template>
+  <div :class="$style.header">
+    <NuxtLink to="/" :activeClass="$style.active">Home</NuxtLink>
+    <NuxtLink to="/bio" :activeClass="$style.active">About me</NuxtLink>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.header {
+  text-align: left;
+  padding: 22px 0;
+
+  a {
+    color: var(--color-text);
+    text-decoration: none;
+    padding: 0 25px 0 0;
+    position: relative;
+
+    &.active {
+      color: var(--color-link);
+
+      &::after {
+        right: 28px;
+        left: 3px;
+        background: var(--color-link);
+      }
+    }
+
+    &::after {
+      content: "";
+      background: var(--color-text);
+      position: absolute;
+      height: 2px;
+      bottom: -6px;
+      left: 50%;
+      right: 50%;
+      transition: all 0.25s;
+    }
+  }
+}
+</style>
diff --git a/layouts/content.vue b/layouts/content.vue
index c5b9d97..7341893 100644
--- a/layouts/content.vue
+++ b/layouts/content.vue
@@ -17,19 +17,11 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  padding-top: 40px;
 }
 
 .content {
   flex: 1;
-  padding: 40px 120px;
-
-  @include desktop {
-    padding: 40px 40px 20px 40px;
-  }
-
-  @include tablet {
-    padding: 40px 20px 20px 20px;
-  }
 }
 
 .footer {
diff --git a/layouts/default.vue b/layouts/default.vue
index 578c950..fb92896 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -92,6 +92,8 @@ export default defineComponent({
   z-index: 1;
   display: flex;
   flex-direction: column;
+
+  @include container;
 }
 
 .sidebar {
diff --git a/layouts/landing.vue b/layouts/landing.vue
new file mode 100644
index 0000000..227cdb3
--- /dev/null
+++ b/layouts/landing.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div :class="$style.header_container">
+      <div :class="$style.header_content">
+        <LayoutHeader />
+      </div>
+    </div>
+
+    <NuxtLayout name="content">
+      <slot />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+@import "@/assets/css/mixins";
+
+.header_container {
+  position: sticky;
+  top: 0;
+  background: var(--color-background);
+}
+
+.header_content {
+  @include container;
+}
+</style>
diff --git a/pages/bio.vue b/pages/bio.vue
index 73153ba..c55409a 100644
--- a/pages/bio.vue
+++ b/pages/bio.vue
@@ -19,11 +19,14 @@
 </template>
 
 <script lang="ts" setup>
-definePageMeta({ layout: "content" });
+definePageMeta({ layout: "landing" });
 </script>
 
 <style lang="scss" module>
+@import "@/assets/css/mixins";
+
 .content {
+  @include container;
 }
 
 .section {
diff --git a/pages/index.vue b/pages/index.vue
index 95d76d3..46c9259 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,14 +24,14 @@ export default {
   },
 };
 
-definePageMeta({ layout: false });
+definePageMeta({ layout: "landing" });
 </script>
 
 <style lang="scss" module>
 @import "~~/assets/css/mixins";
 
 .main {
-  padding-top: 40px;
+  @include container;
 
   @include tablet {
     padding-top: 0;