feat: create a basic page footer
This commit is contained in:
parent
5ec2a8fb09
commit
ae0a9622c1
GPG Key ID:
D75243CA236D825E
|
|
@ -3,6 +3,7 @@
|
||||||
<Home/>
|
<Home/>
|
||||||
<SkillPicker ref='picker' @pick='onPick($event)'/>
|
<SkillPicker ref='picker' @pick='onPick($event)'/>
|
||||||
<Timeline ref='timeline' @pick='onPicked($event)'/>
|
<Timeline ref='timeline' @pick='onPicked($event)'/>
|
||||||
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -12,6 +13,7 @@ import { tID } from '@/model/skills';
|
||||||
import Home from './components/Home.vue';
|
import Home from './components/Home.vue';
|
||||||
import Timeline from './components/Timeline.vue';
|
import Timeline from './components/Timeline.vue';
|
||||||
import SkillPicker from './components/SkillPicker.vue';
|
import SkillPicker from './components/SkillPicker.vue';
|
||||||
|
import Footer from './components/Footer.vue';
|
||||||
import { Locales } from './locales';
|
import { Locales } from './locales';
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -20,6 +22,7 @@ import { Locales } from './locales';
|
||||||
Home,
|
Home,
|
||||||
Timeline,
|
Timeline,
|
||||||
SkillPicker,
|
SkillPicker,
|
||||||
|
Footer,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class App extends Vue {
|
export default class App extends Vue {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="420mm"
|
||||||
|
height="20.822mm"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 420 20.822"
|
||||||
|
id="svg4984"
|
||||||
|
sodipodi:docname="wave.invert.1.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview4986"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.79815972"
|
||||||
|
inkscape:cx="793.70079"
|
||||||
|
inkscape:cy="38.839344"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1006"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="42"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4984" />
|
||||||
|
<defs
|
||||||
|
id="defs4978">
|
||||||
|
<linearGradient
|
||||||
|
id="a"
|
||||||
|
x1="787.57"
|
||||||
|
x2="787.57"
|
||||||
|
y1="4.8222"
|
||||||
|
y2="78.695"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".97647"
|
||||||
|
offset="0"
|
||||||
|
id="stop4971"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.98000002;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".89804"
|
||||||
|
offset="0.59202999"
|
||||||
|
id="stop4973"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.89999998;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
offset="1"
|
||||||
|
id="stop4975"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:1;" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
transform="translate(-.83328 -158.95)"
|
||||||
|
id="g4982">
|
||||||
|
<path
|
||||||
|
transform="matrix(.26458 0 0 .26458 .83328 158.95)"
|
||||||
|
d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z"
|
||||||
|
fill="url(#a)"
|
||||||
|
stroke-width=".56894"
|
||||||
|
id="path4980" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,73 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="420mm"
|
||||||
|
height="20.822mm"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 420 20.822"
|
||||||
|
id="svg7400"
|
||||||
|
sodipodi:docname="wave.invert.2.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7402"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.86745536"
|
||||||
|
inkscape:cx="659.97633"
|
||||||
|
inkscape:cy="39.195101"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1006"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="42"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg7400" />
|
||||||
|
<defs
|
||||||
|
id="defs7394">
|
||||||
|
<linearGradient
|
||||||
|
id="a"
|
||||||
|
x1="775"
|
||||||
|
x2="775"
|
||||||
|
y1="78.695"
|
||||||
|
y2="-.00018898"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".25098"
|
||||||
|
offset="0"
|
||||||
|
id="stop7387"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.25;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".14902"
|
||||||
|
offset="0.22879"
|
||||||
|
id="stop7389"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.15000001;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".05098"
|
||||||
|
offset="1"
|
||||||
|
id="stop7391"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.05;" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
transform="translate(-.83328 -158.95)"
|
||||||
|
id="g7398">
|
||||||
|
<path
|
||||||
|
transform="matrix(.26458 0 0 .26458 .83328 158.95)"
|
||||||
|
d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z"
|
||||||
|
fill="url(#a)"
|
||||||
|
stroke-width=".56894"
|
||||||
|
id="path7396" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,72 +1,13 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg
|
<svg width="420.23mm" height="14.465mm" version="1.1" viewBox="0 0 420.23 14.465" xmlns="http://www.w3.org/2000/svg">
|
||||||
width="420mm"
|
<defs>
|
||||||
height="20.822mm"
|
<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientTransform="matrix(.26458 0 0 .11755 .83328 170.52)" gradientUnits="userSpaceOnUse">
|
||||||
version="1.1"
|
<stop stop-color="#202228" stop-opacity=".98039" offset="0"/>
|
||||||
viewBox="0 0 420 20.822"
|
<stop stop-color="#202228" stop-opacity=".9" offset=".59203"/>
|
||||||
id="svg4984"
|
<stop stop-color="#202228" offset="1"/>
|
||||||
sodipodi:docname="wave.invert.1.svg"
|
</linearGradient>
|
||||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
</defs>
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
<g transform="matrix(1 0 0 -1 -.83328 179.77)">
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
<path d="m161.34 176.93c-22.053 0.24871-38.549-3.004-59.29-2.8795-20.74 0.12449-47.299 3.3092-64.216 3.9014-16.918 0.59231-18.361 0.30483-36.996 0.3515v1.4706h419.99v-1.4706l-11.555-0.0338c-31.382-0.0918-134.59-7.1872-176.14-6.4754-41.547 0.71177-49.741 4.8871-71.794 5.1358z" fill="url(#a)" stroke-width=".10034"/>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</g>
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview4986"
|
|
||||||
pagecolor="#505050"
|
|
||||||
bordercolor="#eeeeee"
|
|
||||||
borderopacity="1"
|
|
||||||
inkscape:showpageshadow="0"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#505050"
|
|
||||||
inkscape:document-units="mm"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="0.79815972"
|
|
||||||
inkscape:cx="793.70079"
|
|
||||||
inkscape:cy="38.839344"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1006"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="42"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg4984" />
|
|
||||||
<defs
|
|
||||||
id="defs4978">
|
|
||||||
<linearGradient
|
|
||||||
id="a"
|
|
||||||
x1="787.57"
|
|
||||||
x2="787.57"
|
|
||||||
y1="4.8222"
|
|
||||||
y2="78.695"
|
|
||||||
gradientUnits="userSpaceOnUse">
|
|
||||||
<stop
|
|
||||||
stop-color="#fff"
|
|
||||||
stop-opacity=".97647"
|
|
||||||
offset="0"
|
|
||||||
id="stop4971"
|
|
||||||
style="stop-color:#745cfc;stop-opacity:0.98000002;" />
|
|
||||||
<stop
|
|
||||||
stop-color="#fff"
|
|
||||||
stop-opacity=".89804"
|
|
||||||
offset="0.59202999"
|
|
||||||
id="stop4973"
|
|
||||||
style="stop-color:#745cfc;stop-opacity:0.89999998;" />
|
|
||||||
<stop
|
|
||||||
stop-color="#fff"
|
|
||||||
offset="1"
|
|
||||||
id="stop4975"
|
|
||||||
style="stop-color:#745cfc;stop-opacity:1;" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<g
|
|
||||||
transform="translate(-.83328 -158.95)"
|
|
||||||
id="g4982">
|
|
||||||
<path
|
|
||||||
transform="matrix(.26458 0 0 .26458 .83328 158.95)"
|
|
||||||
d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z"
|
|
||||||
fill="url(#a)"
|
|
||||||
stroke-width=".56894"
|
|
||||||
id="path4980" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 913 B |
|
|
@ -1,73 +1,13 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg
|
<svg width="420.23mm" height="14.465mm" version="1.1" viewBox="0 0 420.23 14.465" xmlns="http://www.w3.org/2000/svg">
|
||||||
width="420mm"
|
<defs>
|
||||||
height="20.822mm"
|
<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
|
||||||
version="1.1"
|
<stop stop-color="#202228" stop-opacity=".25098" offset="0"/>
|
||||||
viewBox="0 0 420 20.822"
|
<stop stop-color="#202228" stop-opacity=".14902" offset=".22879"/>
|
||||||
id="svg7400"
|
<stop stop-color="#202228" stop-opacity=".05098" offset="1"/>
|
||||||
sodipodi:docname="wave.invert.2.svg"
|
</linearGradient>
|
||||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
</defs>
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
<g transform="matrix(1 0 0 -.41891 -.71728 75.423)">
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
<path transform="matrix(.26458 0 0 .26458 .83328 158.95)" d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z" fill="url(#a)" stroke-width=".56894"/>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</g>
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview7402"
|
|
||||||
pagecolor="#505050"
|
|
||||||
bordercolor="#eeeeee"
|
|
||||||
borderopacity="1"
|
|
||||||
inkscape:showpageshadow="0"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#505050"
|
|
||||||
inkscape:document-units="mm"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="0.86745536"
|
|
||||||
inkscape:cx="659.97633"
|
|
||||||
inkscape:cy="39.195101"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1006"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="42"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg7400" />
|
|
||||||
<defs
|
|
||||||
id="defs7394">
|
|
||||||
<linearGradient
|
|
||||||
id="a"
|
|
||||||
x1="775"
|
|
||||||
x2="775"
|
|
||||||
y1="78.695"
|
|
||||||
y2="-.00018898"
|
|
||||||
gradientUnits="userSpaceOnUse">
|
|
||||||
<stop
|
|
||||||
stop-color="#fff"
|
|
||||||
stop-opacity=".25098"
|
|
||||||
offset="0"
|
|
||||||
id="stop7387"
|
|
||||||
style="stop-color:#745cfc;stop-opacity:0.25;" />
|
|
||||||
<stop
|
|
||||||
stop-color="#fff"
|
|
||||||
stop-opacity=".14902"
|
|
||||||
offset="0.22879"
|
|
||||||
id="stop7389"
|
|
||||||
style="stop-color:#745cfc;stop-opacity:0.15000001;" />
|
|
||||||
<stop
|
|
||||||
stop-color="#fff"
|
|
||||||
stop-opacity=".05098"
|
|
||||||
offset="1"
|
|
||||||
id="stop7391"
|
|
||||||
style="stop-color:#745cfc;stop-opacity:0.05;" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<g
|
|
||||||
transform="translate(-.83328 -158.95)"
|
|
||||||
id="g7398">
|
|
||||||
<path
|
|
||||||
transform="matrix(.26458 0 0 .26458 .83328 158.95)"
|
|
||||||
d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z"
|
|
||||||
fill="url(#a)"
|
|
||||||
stroke-width=".56894"
|
|
||||||
id="path7396" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,112 @@
|
||||||
|
<template>
|
||||||
|
<div id='footer'>
|
||||||
|
|
||||||
|
<div class='wave'></div>
|
||||||
|
<div class='wave w2'></div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class='copyright'>
|
||||||
|
2022 © xdrm-brackets
|
||||||
|
<span>Adrien Marquès</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img class='logo' src='../assets/home/logo.svg'/>
|
||||||
|
|
||||||
|
<div class='contact'>
|
||||||
|
<span class='tel'>(+33) 06 69 05 19 10</span>
|
||||||
|
<span class='mail'>xdrm.dev@gmail.com</span>
|
||||||
|
<span class='addr'>Montauban, 82000</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {},
|
||||||
|
})
|
||||||
|
export default class Footer extends Vue {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$width: 100vw;
|
||||||
|
$wave-height: 3rem;
|
||||||
|
$logo-size: 4em;
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
min-height: $wave-height;
|
||||||
|
|
||||||
|
background: lighten(#202228, 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin-top: $wave-height;
|
||||||
|
min-height: 20vh;
|
||||||
|
|
||||||
|
color: #bcc6ce;
|
||||||
|
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-family: 'Fira Code';
|
||||||
|
|
||||||
|
.copyright, .contact {
|
||||||
|
font-size: 1.3em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $logo-size;
|
||||||
|
height: $logo-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave-x {
|
||||||
|
from{ background-position-x: 1px; }
|
||||||
|
to{ background-position-x: 100vw; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: $wave-height;
|
||||||
|
|
||||||
|
background-image: url('../assets/wave.invert.1.svg');
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-position-y: 0;
|
||||||
|
background-size: auto 100%;
|
||||||
|
|
||||||
|
animation: 23s ease-in-out wave-x infinite alternate;
|
||||||
|
|
||||||
|
&.w2{
|
||||||
|
background-image: url('../assets/wave.invert.2.svg');
|
||||||
|
animation: 25s ease-in-out wave-x infinite alternate-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -291,7 +291,7 @@ export default class Home extends Vue {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: $wave-height;
|
height: $wave-height;
|
||||||
|
|
||||||
background-image: url('../assets/wave.invert.1.svg');
|
background-image: url('../assets/wave.1.svg');
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-position-y: 101%;
|
background-position-y: 101%;
|
||||||
background-size: auto 100%;
|
background-size: auto 100%;
|
||||||
|
|
@ -299,7 +299,7 @@ export default class Home extends Vue {
|
||||||
animation: 18s ease-in-out wave-x infinite alternate;
|
animation: 18s ease-in-out wave-x infinite alternate;
|
||||||
|
|
||||||
&.w2{
|
&.w2{
|
||||||
background-image: url('../assets/wave.invert.2.svg');
|
background-image: url('../assets/wave.2.svg');
|
||||||
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue