host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove ContactDecoration component

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:17:44 +01:00
parent 53e513a55b
commit 469c52eb97
2 changed files with 5 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

61
components/ContactDecoration.vue
View file

@ -1,61 +0,0 @@
<template>
<div class="contact-decoration" aria-hidden="true">
<div class="contact-decoration__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.2 3.2 L 20.8 3.2 C 22.01 3.2 23 4.19 23 5.4 L 23 18.6 C 23 19.81 22.01 20.8 20.8 20.8 L 3.2 20.8 C 1.99 20.8 1 19.81 1 18.6 L 1 5.4 C 1 4.19 1.99 3.2 3.2 3.2 Z"/>
<polyline points="23 5.4 12 13.1 1 5.4"/>
</svg>
</div>
<div class="contact-decoration__separator"></div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.contact-decoration {
display: none;
@media screen and (min-width: $tablet-media-query) {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100%;
margin: 0 -1rem;
&__icon {
width: calc(var(--regular-icon-size) + 1rem);
height: calc(var(--regular-icon-size) + 1rem);
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color);
border: 1px solid var(--accent-color);
border-radius: 50%;
svg {
stroke: var(--secondary-color);
width: var(--regular-icon-size);
height: var(--regular-icon-size);
}
}
&__separator {
width: 1px;
height: 0;
background-color: var(--accent-color);
animation: expand-height 600ms ease-in-out 600ms forwards;
}
}
}
</style>

15
components/ContactSection.vue
View file

@ -1,7 +1,6 @@
<template> <template>
<section id="contact" class="contact"> <section id="contact" class="contact">
<ContactDecoration class="contact__decoration" />
<ContactHeader class="contact__header" /> <ContactHeader class="contact__header" />
<ContactForm class="contact__form" /> <ContactForm class="contact__form" />
</section> </section>
@ -21,17 +20,13 @@
max-width: var(--regular-content-max-width); max-width: var(--regular-content-max-width);
display: grid; display: grid;
grid: grid:
'decoration header' auto 'header' auto
'decoration form' auto 'form' auto
/ auto 1fr; / 1fr;
place-content: start stretch; place-content: start stretch;
place-items: start stretch; place-items: start stretch;
row-gap: 4rem; row-gap: 4rem;
&__decoration {
grid-area: decoration;
}
&__header { &__header {
grid-area: header; grid-area: header;
} }
@ -46,8 +41,8 @@
@media screen and (min-width: $desktop-media-query) { @media screen and (min-width: $desktop-media-query) {
grid: grid:
'decoration header form' auto 'header form' auto
/ auto 1fr 2fr; / 1fr 2fr;
column-gap: 6rem; column-gap: 6rem;
} }
} }