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;