mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-24 18:36:41 +07:00
added header
This commit is contained in:
Fedor Katurov
parent
aae9af8e62
commit
a8dd169087
8 changed files with 130 additions and 50 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
43
components/layout/LayoutHeader.vue
Normal file
43
components/layout/LayoutHeader.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -92,6 +92,8 @@ export default defineComponent({
|
|||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include container;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
|
|||
29
layouts/landing.vue
Normal file
29
layouts/landing.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue