xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: remove contact from the home page

This commit is contained in:
Adrien Marquès 2022-10-18 16:58:24 +02:00
parent 53d16159b9
commit fe4af9ea62
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
2 changed files with 21 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Home.vue
View File

@ -1,11 +1,6 @@
<template> <template>
<div id='home'> <div id='home'>
<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>
<LangPicker /> <LangPicker />
@ -135,32 +130,19 @@ export default class Home extends Vue {
align-items: center; align-items: center;
} }
.contact { .lang-picker {
grid-column: 1 / 4; grid-column: 3;
grid-row: 1; grid-row: 1;
display: flex; justify-self: end;
position: relative;
margin: 1em 0;
flex-flow: row nowrap;
justify-content: space-around;
color: #9ea6b3;
font-size: 1.2em;
font-weight: 400;
}
.lang-picker {
display: block; display: block;
position: absolute; position: relative;
top: 0; top: 0;
right: 0; right: 0;
margin-top: 1em; margin-top: .5em;
margin-right: 1em; margin-right: .5em;
font-size: 1.2em; font-size: 1.2em;
} }

29
src/components/LangPicker.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class='lang-picker'> <div class='lang-picker'>
<div @click='current = locales[0]'> <div @click='current = locales[0]' :data-active='current == locales[0]'>
<img src='../assets/lang/en-US.svg' :data-active='current == locales[0]'/> <img src='../assets/lang/en-US.svg'/>
</div> </div>
<div @click='current = locales[1]'> <div @click='current = locales[1]' :data-active='current == locales[1]'>
<img src='../assets/lang/fr-FR.svg' :data-active='current == locales[1]'/> <img src='../assets/lang/fr-FR.svg'/>
</div> </div>
</div> </div>
</template> </template>
@ -48,22 +48,23 @@ export default class LangPicker extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
.lang-picker { div.lang-picker {
display: flex; display: flex;
position: relative; position: relative;
flex: row nowrap; flex-flow: row nowrap;
img { div {
display: inline-block; flex: 2em;
width: 2em;
margin-right: .5em; display: block;
padding: .25em;
cursor: pointer; cursor: pointer;
transform-style: preserve-3d; transform-style: preserve-3d;
transition: filter .1s ease-in-out; transition: filter .1s ease-in-out;
;
filter: grayscale(70%); filter: grayscale(70%);
&[data-active=true]{ &[data-active=true]{
@ -71,12 +72,12 @@ export default class LangPicker extends Vue {
} }
&:not([data-active=true]):hover { &:not([data-active=true]):hover {
filter: grayscale(40%); filter: grayscale(40%);
} }
} }
& div:last-child > img { img {
margin: 0; width: 2em;
} }
} }