project nearly finished. TODO Next : Project page and refine some text
This commit is contained in:
140
src/components/Burger.vue
Normal file
140
src/components/Burger.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<script setup>
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
|
||||
const burger = useBurgerStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button class="button"
|
||||
v-bind:class="{center : !burger.checked}"
|
||||
@click="burger.toggle()">
|
||||
<svg class="hamburger"
|
||||
v-bind:class="{open : burger.checked}"
|
||||
viewBox="0 0 100 100">
|
||||
|
||||
<path
|
||||
class="line-middle"
|
||||
style="fill:none;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"/>
|
||||
<path
|
||||
class="arrow-down"
|
||||
style="fill:none;
|
||||
stroke-width:6;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"/>
|
||||
<path
|
||||
class="arrow-up"
|
||||
style="fill:none;
|
||||
stroke-width:6;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"/>
|
||||
<path
|
||||
class="line-and-door"
|
||||
style="fill:none;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dashoffset: 12 ;
|
||||
stroke-opacity:1"
|
||||
d="m 35 70 v 12 l 38, 0 V 20 H 35 v 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- <input type="checkbox" class="burger-toggle">
|
||||
<label for="burger-toggle" class="burger-menu" @click="burger.toggle()">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label> -->
|
||||
<!-- <h1>{{ burger.checked }}</h1> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/shared.scss";
|
||||
.button{
|
||||
position:absolute;
|
||||
top: 0.2em;
|
||||
left : -0.5em;
|
||||
width: 4.5em;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
transition:1s ;
|
||||
z-index : 2;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
.center {
|
||||
left: calc(50% - 2.25em);
|
||||
transition:1s ;
|
||||
}
|
||||
.line-and-door, .line-middle, .arrow-up, .arrow-down{
|
||||
transition:1s ;
|
||||
stroke-width:10;
|
||||
stroke:$green;
|
||||
}
|
||||
|
||||
.line-and-door{
|
||||
stroke-dashoffset: 12 ;
|
||||
d:path("m 35 70 v 12 l 38, 0 V 20 H 35 v 12");
|
||||
stroke-dasharray: 12 12 38 62 38;
|
||||
}
|
||||
|
||||
.line-middle{
|
||||
d:path("M 73, 50 H 35");
|
||||
}
|
||||
|
||||
.arrow-up, .arrow-down{
|
||||
d:path("m 42, 50 15, 0");
|
||||
}
|
||||
|
||||
.hamburger.open{
|
||||
& > .arrow-up {
|
||||
d:path("m 21, 50 15, -9");
|
||||
stroke-width:6;
|
||||
stroke:$green;
|
||||
|
||||
}
|
||||
& > .arrow-down {
|
||||
d:path("m 21, 50 15, 9");
|
||||
stroke-width:6;
|
||||
stroke:$green;
|
||||
}
|
||||
& > .line-middle{
|
||||
d:path("M 65, 50 H 21");
|
||||
stroke-width:6;
|
||||
stroke:$green;
|
||||
}
|
||||
& > .line-and-door{
|
||||
stroke-dashoffset: 0 ;
|
||||
d:path("m 42 70 v 12 l 38, 0 V 20 H 42 v 12");
|
||||
//stroke-dasharray: 12 12 38 62 38;
|
||||
stroke-width:6;
|
||||
stroke-dasharray: 205 ;
|
||||
stroke:$green;
|
||||
}
|
||||
}
|
||||
@media (min-width:$maxWidth){
|
||||
.button{
|
||||
left:calc((50% - 2.25em) - 550px);
|
||||
//transform: rotate(180deg);
|
||||
|
||||
}
|
||||
.button.center{
|
||||
left: calc(50% - 2.25em);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
0
src/components/Button.vue
Normal file
0
src/components/Button.vue
Normal file
302
src/components/Footer.vue
Normal file
302
src/components/Footer.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
class="arrow"
|
||||
v-bind:class="show ? 'down' : ''"
|
||||
@click="show = !show"
|
||||
>
|
||||
<circle
|
||||
style="fill:#e65353;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path833"
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="8" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 5.5,11 10,7 14.5,11"
|
||||
id="path841"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
</svg>
|
||||
|
||||
<div class="footer"
|
||||
v-bind:class="show ? '' : 'hide'">
|
||||
<h1>
|
||||
Design
|
||||
</h1>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
style="stroke:#fff;stroke-opacity:1;stroke-width:0.8;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:square;stroke-linejoin:miter;fill:#fff;fill-opacity:1">
|
||||
<g
|
||||
id="g1053"
|
||||
transform="matrix(3.2926021,0,0,3.2926021,13.394942,5.0000002)"
|
||||
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
|
||||
d="m 0,13.56745 c -5e-6,2.75062 2.261097,5.01172 5.011719,5.01171 2.750621,0 5.013677,-2.26109 5.013672,-5.01171 m 0,0 C 10.025388,10.81683 7.762335,8.55377 5.011719,8.55377 2.261103,8.55377 3e-6,10.81683 0,13.56745 m 3,0 c 1e-6,-1.1293 0.882422,-2.01368 2.011719,-2.01368 1.129297,0 2.013671,0.88438 2.013672,2.01368 m 0,0 c 2e-6,1.12929 -0.884373,2.01171 -2.013672,2.01171 -1.1293,0 -2.011721,-0.88242 -2.011719,-2.01171"
|
||||
id="path843"
|
||||
sodipodi:nodetypes="csccsccsccsc" />
|
||||
<path
|
||||
id="rect841"
|
||||
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0,0 H 3 V 13.56714 H 0 Z" />
|
||||
</g>
|
||||
<g
|
||||
id="path894"
|
||||
transform="matrix(3.2926021,0,0,3.2926021,19.411444,-4.7252006)"
|
||||
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||
<g
|
||||
id="path954"
|
||||
style="opacity:1;fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||
d="m 8.375,11.507812 4.9375,10.226563 1.755005,-2.977802 -3.469849,-7.248761 z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g985"
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter"
|
||||
transform="matrix(3.2926021,0,0,3.2926021,32.860095,5.3294217)">
|
||||
<g
|
||||
id="g973"
|
||||
transform="matrix(-1,0,0,1,29.989768,-3.053701)"
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter" />
|
||||
<g
|
||||
id="g977"
|
||||
transform="matrix(-1,0,0,1,25.149768,6.974189)"
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter">
|
||||
<g
|
||||
id="path975"
|
||||
style="opacity:1;
|
||||
fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter">
|
||||
<path
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
fill-rule:nonzero;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-dashoffset:0;
|
||||
stroke-opacity:1;
|
||||
color-rendering:auto;
|
||||
image-rendering:auto;
|
||||
shape-rendering:auto;
|
||||
text-rendering:auto;
|
||||
enable-background:accumulate;
|
||||
stop-color:#000000;
|
||||
stop-opacity:1"
|
||||
d="M 8.8268232,1.4804688 17.883467,20.259766 h 3.222656 L 12.04948,1.4804688 Z"
|
||||
id="path1039"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="75 -50 300 150"
|
||||
style="fill:none;
|
||||
stroke:white;
|
||||
stroke-width:5;
|
||||
stroke-linecap:round;"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||
id="path862"
|
||||
sodipodi:nodetypes="cscc" />
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||
id="path3943" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||
id="path3945" />
|
||||
<path
|
||||
style="stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||
id="path4209"
|
||||
sodipodi:nodetypes="cssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||
id="path5599"
|
||||
sodipodi:nodetypes="ssss" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||
id="path6508"
|
||||
sodipodi:nodetypes="csssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="465 -39 150 175"
|
||||
style="height : 1.8em"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
fill:hsl(0, 0%, 100%);
|
||||
fill-opacity:1;"
|
||||
d="m 521.33907,-32.100947 c -15.696,0 -29.8501,8.729044 -37.09062,22.1790455 -7.24053,13.4500045 -5.91492,32.3446665 7.17197,47.3022185 1.43732,1.642749 2.73071,2.928216 4.18011,4.572672 -20.02696,12.307516 -29.31825,31.315366 -27.02756,49.047466 2.9147,22.562305 23.06212,41.445905 49.20662,41.095695 18.2011,-0.24382 34.35419,-5.08829 46.57016,-15.17682 l 10.19351,11.31199 h 33.48737 c 0,0 -11.40008,-11.45583 -29.00271,-30.005825 7.62555,-15.07261 10.59424,-34.29628 9.60156,-58.272386 l -23.51583,0.976066 c 0.67379,16.27413 -0.91616,28.50638 -3.78227,38.04548 -8.45792,-9.04987 -17.26393,-18.82395 -26.48118,-28.95849 18.17595,-10.00276 28.62124,-26.326473 28.99029,-42.851552 0.22733,-10.173154 -3.52637,-20.406463 -11.12929,-27.770227 -7.60295,-7.363764 -18.67436,-11.495333 -31.37213,-11.495333 z m 0,23.537054 c 7.83107,0 12.28773,2.235786 15.00174,4.864433 2.71403,2.628646 4.06455,6.013533 3.96794,10.338903 -0.17763,7.953448 -6.4503,18.778829 -22.19495,25.070124 -3.12812,-3.52063 -5.90343,-6.306983 -8.98089,-9.824346 -7.894,-9.022371 -7.14525,-15.113741 -4.16423,-20.6512899 2.98102,-5.5375481 9.84988,-9.7978241 16.37039,-9.7978241 z m -9.29389,68.499888 c 12.77594,14.14387 25.16291,27.83514 36.50712,39.92866 -7.12746,5.655985 -16.83937,8.508835 -31.091,8.699735 -15.02851,0.20131 -24.1429,-9.703835 -25.54754,-20.577015 -1.19923,-9.28313 3.16266,-20.11957 20.13142,-28.05138 z"/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="144 105 45 27"
|
||||
style="stroke:#ffffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;"
|
||||
>
|
||||
|
||||
<circle
|
||||
style="display:inline; fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;"
|
||||
id="path905-7"
|
||||
cx="80.57341"
|
||||
cy="225.22316"
|
||||
r="0.95786411"
|
||||
transform="matrix(1.0762321,0,0,1.0762321,69.515692,-132.21175)" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 145.67023,114.3131 c 1.78592,-2.29773 3.12471,-4.35186 3.94309,-6.12246 l 0.48061,4.00796 2.67648,-3.44512 c 0,0 -1.33095,6.24196 0.31881,10.88518"
|
||||
id="path929"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 155.88053,113.34602 c -0.45893,4.69925 -1.25065,3.69121 -0.18477,4.04488 1.55502,0.51598 4.4305,-0.81121 10.33621,-4.63748"
|
||||
id="path931"
|
||||
sodipodi:nodetypes="csc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 160.60127,112.03858 c 0,0 -1.72603,7.30276 -7.26034,13.1046"
|
||||
id="path933"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 159.24101,117.33599 c 0,0 1.82586,2.56841 3.00349,5.26021 2.17197,-3.1972 4.23136,-5.70438 6.74074,-10.34101 0,0 8.08433,12.22102 13.33159,16.24117 1.18468,0.90765 5.45607,1.69302 4.48962,-3.15342"
|
||||
id="path935"
|
||||
sodipodi:nodetypes="cccsc" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 165.97522,118.73555 c 0.217,0.2611 2.78332,2.20999 2.78332,2.20999 l 3.36893,-3.46208"
|
||||
id="path939"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/shared.scss";
|
||||
|
||||
div.footer{
|
||||
position : fixed;
|
||||
bottom: 0em;
|
||||
padding-left:3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background-color: hsla(0, 0%, 1%, 0.904);
|
||||
min-height:3.5em;
|
||||
width: 100%;
|
||||
max-width: $maxWidth;
|
||||
z-index: 9;
|
||||
transition: 0.5s;
|
||||
&.hide{
|
||||
transform:translateY(100%)
|
||||
}
|
||||
}
|
||||
svg{
|
||||
height: 2.5em;
|
||||
}
|
||||
h1{
|
||||
font-size: 2em;
|
||||
margin-right: 0.5em;
|
||||
color:white;
|
||||
}
|
||||
.arrow{
|
||||
margin-left: 0.4em;
|
||||
position : fixed;
|
||||
bottom:0.5em;
|
||||
transition: 0.35s;
|
||||
z-index: 99;
|
||||
&.up{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
&.down{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@supports (backdrop-filter: blur(0.5rem)){
|
||||
div.footer{
|
||||
background-color: hsla(0, 100%, 0%, 0.25);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
/* adding backdrop-filter compatibility for firefox and safari */
|
||||
-webkit-backdrop-filter: blur(0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
370
src/components/Menu.vue
Normal file
370
src/components/Menu.vue
Normal file
@@ -0,0 +1,370 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', onScroll)
|
||||
|
||||
const allLinks = document.querySelectorAll('a')
|
||||
for (const a of allLinks){
|
||||
a.addEventListener('mouseleave', () => {
|
||||
if (a.classList[1] != 'router-link-exact-active'){
|
||||
a.classList.add('hover-out');
|
||||
a.addEventListener('transitionend', () => {
|
||||
a.classList.remove('hover-out')
|
||||
}, {once : true})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const onScroll = () => {
|
||||
const menu = document.querySelector(".menu")
|
||||
const menuYPosition = menu.getBoundingClientRect().y
|
||||
|
||||
//console.log(menu)
|
||||
if (menuYPosition <= 0){
|
||||
document.querySelector('.nav-menu').classList.add('sticked')
|
||||
}
|
||||
else{
|
||||
document.querySelector('.nav-menu').classList.remove('sticked')
|
||||
}
|
||||
}
|
||||
|
||||
const menuOpen = ref(false)
|
||||
const liShow = ref(false)
|
||||
const menuIsClosing = ref(false)
|
||||
|
||||
const closeMenu = () => {
|
||||
menuIsClosing.value = true;
|
||||
menuOpen.value = false;
|
||||
|
||||
const sideBarNav = document.querySelector('.nav-menu')
|
||||
sideBarNav.addEventListener('transitionend', () => {
|
||||
liShow.value = false
|
||||
menuIsClosing.value = false;
|
||||
//if menu is reopen during animation, let show all the li :
|
||||
if (menuOpen.value){
|
||||
liShow.value = true
|
||||
}
|
||||
}, {once : true})
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
menuOpen.value = !menuOpen.value;
|
||||
if (menuOpen.value){
|
||||
liShow.value = true
|
||||
}
|
||||
else{
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="menu-container">
|
||||
<div class="burger">
|
||||
<button class="button"
|
||||
@click="toggleMenu()"
|
||||
>
|
||||
<svg class="hamburger"
|
||||
v-bind:class="{open : menuOpen}"
|
||||
viewBox="2 0 100 100">
|
||||
<path
|
||||
class="cross"
|
||||
style="fill:none;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:round;
|
||||
stroke-opacity:1"
|
||||
d="M 36,21 H 74 L 74,33 55,52 36,71 36,83 H 74 L 74,71 36,33 Z"
|
||||
id="path978"
|
||||
sodipodi:nodetypes="cccccccccc" />
|
||||
<path
|
||||
class="middle"
|
||||
style="fill:none;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:bevel;
|
||||
stroke-opacity:1"
|
||||
d="M 36,52 H 74 C 90,52 82,69 77,74 71,80 63,83 55,83 38,83 24,69 24,52 24,35 38,21 55,21 c 17,0 31,14 31,31 0,9 -3,16 -9,22"
|
||||
id="path982"
|
||||
sodipodi:nodetypes="cccssssc" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="nav-menu"
|
||||
v-bind:class="{open : menuOpen}"
|
||||
>
|
||||
<li
|
||||
class=""
|
||||
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||
@click="closeMenu()">
|
||||
<router-link
|
||||
:to="{name:'whoAmI'}">
|
||||
Who Am I
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||
@click="closeMenu()">
|
||||
<router-link
|
||||
:to="{name:'technologies'}">
|
||||
Technologies
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||
@click="closeMenu()">
|
||||
<router-link
|
||||
:to="{name:'projects'}">
|
||||
Projects
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||
@click="closeMenu()">
|
||||
<router-link
|
||||
:to="{name:'networks'}">
|
||||
Networks
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||
@click="closeMenu()">
|
||||
<router-link
|
||||
:to="{name:'contact'}">
|
||||
Contact
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/shared.scss';
|
||||
|
||||
.burger{
|
||||
display: none;
|
||||
opacity:0;
|
||||
transition:0.5s;
|
||||
& .button{
|
||||
width: 3.5em;
|
||||
// height: 4.5em;
|
||||
background-color:$red-light;
|
||||
border: none;
|
||||
transition:1s ;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
& .hamburger{
|
||||
& .cross, & .middle {
|
||||
stroke-width:7;
|
||||
transition:1s ;
|
||||
stroke:$white;
|
||||
}
|
||||
& .cross{
|
||||
stroke-dashoffset: 0 ;
|
||||
stroke-dasharray: 0 0 36 80 36 80;
|
||||
}
|
||||
|
||||
& .middle{
|
||||
stroke-dashoffset: 0 ;
|
||||
stroke-dasharray: 36 250;
|
||||
}
|
||||
&.open{
|
||||
& .cross{
|
||||
stroke-width:7;
|
||||
stroke-dashoffset: -61 ;
|
||||
stroke-dasharray: 33 82 33 79;
|
||||
}
|
||||
|
||||
& .middle{
|
||||
stroke-width:7;
|
||||
stroke-dashoffset: -60 ;
|
||||
stroke-dasharray: 270 ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.nav-menu{
|
||||
//z-index: 999;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
background-color: rgba(0, 0, 0, 0.233);
|
||||
padding:1rem 0.5rem;
|
||||
//overflow: hidden;
|
||||
//transition: 0.5s;
|
||||
&.sticked{
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
a{
|
||||
font-size:1em;
|
||||
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color : $white;
|
||||
text-decoration: none;
|
||||
&::after{
|
||||
content: "";
|
||||
background-color: $red-light;
|
||||
width: 0%;
|
||||
margin-left:0;
|
||||
height: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover, &.router-link-exact-active{
|
||||
color:$red-light;
|
||||
transition: color 0.25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.router-link-exact-active{
|
||||
filter: drop-shadow(0 0 4px $red-light);
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
&:hover::after, &.router-link-exact-active::after{
|
||||
width: 100%;
|
||||
//This transition fires on the hover
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
&.hover-out::after{
|
||||
margin-left:100%;
|
||||
//This transition fires on hover-out class
|
||||
transition:0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
transform: translateY(1.25em);
|
||||
opacity:0;
|
||||
overflow: hidden;
|
||||
@for $i from 1 to 6 {
|
||||
&:nth-child(#{$i}){
|
||||
animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (width < 750px ){
|
||||
nav.menu-container{
|
||||
//border: $white solid 3px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
& .burger{
|
||||
margin-bottom: 1.5em;
|
||||
display: block;
|
||||
position: sticky;
|
||||
top:0;
|
||||
opacity: 0;
|
||||
z-index:9999;
|
||||
animation: burger 0.5s ease-in-out forwards;
|
||||
}
|
||||
& > ul.nav-menu{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
|
||||
z-index: 99;
|
||||
right:-250px;
|
||||
transform: translateX(0%);
|
||||
margin-top:0;
|
||||
margin-bottom: 0;
|
||||
width: 250px;
|
||||
background: hsl(0 0% 0% / 0.95);
|
||||
transition: 0.5s ease-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding-right: 1em;
|
||||
text-align: right;
|
||||
&.open{
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
& > li{
|
||||
display: none;
|
||||
opacity:0;
|
||||
}
|
||||
& > li.show{
|
||||
display: block;
|
||||
transform: translateY(1.25em);
|
||||
@for $i from 1 to 6 {
|
||||
&:nth-child(#{$i}){
|
||||
animation: 250ms theMenu (80 * $i + 0ms) ease-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > li.closing {
|
||||
transform: translateY(0em);
|
||||
opacity: 1;
|
||||
@for $i from 1 to 6 {
|
||||
&:nth-child(#{$i}){
|
||||
//animation in reverse side...
|
||||
animation: 150ms closeMe ( 50ms * (5 - $i)) ease-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > li > a {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@supports (backdrop-filter: blur(0.5rem)){
|
||||
nav.menu-container > ul.nav-menu{
|
||||
background-color: hsla(0, 100%, 0%, 0.25);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
/* adding backdrop-filter compatibility for firefox and safari */
|
||||
-webkit-backdrop-filter: blur(0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (height < 650px) and (width < 750px) {
|
||||
div.menu-container .burger{
|
||||
position : fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
@keyframes burger {
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes theMenu{
|
||||
100%{
|
||||
transform: translateY(0);
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
@keyframes closeMe{
|
||||
100%{
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes border-hover {
|
||||
0%{
|
||||
border-bottom: none;
|
||||
border-width: 0%;
|
||||
}
|
||||
100%{
|
||||
border-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
145
src/components/Modal.vue
Normal file
145
src/components/Modal.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
|
||||
<Transition name="modal-animation">
|
||||
<div v-show="modalActive" class="modal">
|
||||
<transition name="modal-frame-animation">
|
||||
<div v-show="modalActive" class="modal-frame">
|
||||
<font-awesome-icon class="close-btn" @click="close" icon="fa-regular fa-circle-xmark" />
|
||||
<h1>{{ title }}</h1>
|
||||
<slot>
|
||||
</slot>
|
||||
<button @click="close" class="button">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//import { defineEmits, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps ({
|
||||
modalActive : Boolean,
|
||||
title: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit("close");
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/shared.scss';
|
||||
/*Modale annimation*/
|
||||
|
||||
.modal-animation-enter-from,
|
||||
.modal-animation-leave-to{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-animation-enter-active{
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.modal-animation-leave-active{
|
||||
transition: opacity 0.3s ease 0.2s;
|
||||
}
|
||||
|
||||
/*Modal inner animation*/
|
||||
|
||||
.modal-frame-animation-enter-from, .modal-frame-animation-leave-to{
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
.modal-frame-animation-enter-active, .modal-frame-animation-leave-active{
|
||||
transition: all 0.3s cubic-bezier(0.52, -0.02, 0.19, 1.02);
|
||||
}
|
||||
|
||||
/*modal mise en forme*/
|
||||
.modal{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left: 00;
|
||||
background: rgba(140, 140, 140, 0.75);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-frame{
|
||||
//border : dashed red 2px;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
min-width: 230px;
|
||||
max-width: 350px;
|
||||
max-height: 80vh;
|
||||
overflow: visible;
|
||||
|
||||
background:#e5e5e5;
|
||||
border-top-left-radius: 1em;
|
||||
border-bottom-left-radius: 1em;
|
||||
border-bottom-right-radius: 1em;
|
||||
padding: 1em;
|
||||
padding-top:0em;
|
||||
margin: 3em;
|
||||
}
|
||||
|
||||
h1{
|
||||
margin-top:0.5em;
|
||||
font-size: 1.5em;
|
||||
//border:dashed 2px red;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.close-btn{
|
||||
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: -17px;
|
||||
top: -17px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0.75em;
|
||||
padding: 0.25em;
|
||||
background-color: #e5e5e5;
|
||||
color: $red;
|
||||
font-size: 1.7em;
|
||||
transition: color 0.5s ease;
|
||||
&:hover{
|
||||
color: lighten($red, 15%);
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
.modal-content{
|
||||
//border: 2px dashed red;
|
||||
max-height: calc(80vh - 7.5em);
|
||||
overflow-y: auto;
|
||||
//FireFox
|
||||
scrollbar-width: none;
|
||||
//Edge
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.button{
|
||||
border-radius: 0.5em;
|
||||
margin:0.5em auto;
|
||||
display: block;
|
||||
padding: 0.4em 0.75em;
|
||||
border:none;
|
||||
color:$red;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
background-color: $green;
|
||||
outline: $red;
|
||||
outline-style: solid;
|
||||
outline-offset: -5px;
|
||||
}
|
||||
</style>
|
||||
135
src/components/Name.vue
Normal file
135
src/components/Name.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
//import { onMounted } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger';
|
||||
const burger = useBurgerStore()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class = "name">
|
||||
<h1 class="spans">
|
||||
<div class="first-name">
|
||||
<span class="r-letter">R</span>
|
||||
<span>a</span>
|
||||
<span>f</span>
|
||||
<span>f</span>
|
||||
<span class="i-letter">i</span>
|
||||
</div>
|
||||
<div class="last-name">
|
||||
<span>A</span>
|
||||
<span>l</span>
|
||||
<span>e</span>
|
||||
<span>x</span>
|
||||
<span>a</span>
|
||||
<span>n</span>
|
||||
<span>i</span>
|
||||
<span>a</span>
|
||||
<span>n</span>
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="come-in">
|
||||
<h2>
|
||||
I'm a web developer
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/shared.scss";
|
||||
|
||||
.name{
|
||||
display:flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
margin:0 2.4rem;
|
||||
|
||||
// border : #f0f solid 1px;
|
||||
& h1{
|
||||
font-size: 2.7rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
position :relative;
|
||||
color: $page-title;
|
||||
font-weight: bold;
|
||||
margin-top: 0.5em;
|
||||
padding: 0em ;
|
||||
// border : #f0f solid 1px;
|
||||
|
||||
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
& div {
|
||||
display:flex;
|
||||
margin:0;
|
||||
// border : #f0f solid 1px;
|
||||
}
|
||||
& span{
|
||||
transform: rotateY(0deg);
|
||||
animation: title-spans 1500ms;
|
||||
}
|
||||
.i-letter{
|
||||
margin-right: 1ch ;
|
||||
}
|
||||
.r-letter{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.come-in, .name{
|
||||
overflow:hidden;
|
||||
}
|
||||
h2{
|
||||
margin: 0.5em 3em 0.5em 1em;
|
||||
top:100px;
|
||||
position: relative;
|
||||
font-size:1.7rem;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
color:$white;
|
||||
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes title-h1{
|
||||
0%{
|
||||
margin-top: 1.6em
|
||||
}
|
||||
|
||||
}
|
||||
@keyframes title-spans{
|
||||
0% {
|
||||
transform: rotateY(360deg);
|
||||
// color: $red;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
@keyframes subtitle{
|
||||
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px){
|
||||
.name{
|
||||
margin : 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px){
|
||||
.name h1 .r-letter{
|
||||
margin-left:2ch;
|
||||
}
|
||||
.name h1 .i-letter{
|
||||
margin-right:2ch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user