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

Edit dividers

Browse source
This commit is contained in:
Paul Nicoué 2023-03-06 11:50:54 +01:00
parent 7aba18b56e
commit e2b1064b1e
3 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/AppError.vue
View file

@ -6,7 +6,7 @@
<h1 class="error__title" v-show="isVisible">{{ errorMessage }}</h1> <h1 class="error__title" v-show="isVisible">{{ errorMessage }}</h1>
</Transition> </Transition>
<Transition name="expand-width"> <Transition name="expand-width">
<div class="error__separator" aria-hidden="true" v-show="isVisible"></div> <div class="error__divider" aria-hidden="true" v-show="isVisible"></div>
</Transition> </Transition>
<Transition name="fade-in-from-top"> <Transition name="fade-in-from-top">
<div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div> <div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div>
@ -70,7 +70,7 @@
display: grid; display: grid;
grid: grid:
'title' minmax(var(--h1-font-height), auto) 'title' minmax(var(--h1-font-height), auto)
'separator' 1px 'divider' 1px
'emoticon' minmax(var(--h1-font-height), auto) 'emoticon' minmax(var(--h1-font-height), auto)
'.' 5rem '.' 5rem
'button' auto 'button' auto
@ -85,11 +85,11 @@
margin: 0 2rem; margin: 0 2rem;
} }
&__separator { &__divider {
grid-area: separator; grid-area: divider;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--primary-accent-color); background: linear-gradient(90deg, var(--primary-color), var(--primary-accent-color-light), var(--primary-color));
} }
&__emoticon { &__emoticon {

11
components/ContactSection.vue
View file

@ -17,6 +17,7 @@
// -------------------------------------------------- // --------------------------------------------------
.contact { .contact {
position: relative;
display: grid; display: grid;
grid: grid:
'header' auto 'header' auto
@ -26,6 +27,16 @@
place-items: start stretch; place-items: start stretch;
row-gap: 4rem; row-gap: 4rem;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light), var(--primary-color));
}
&__header { &__header {
grid-area: header; grid-area: header;
} }

10
components/HeroTitle.vue
View file

@ -5,7 +5,7 @@
<span class="hero-title__name" v-show="isVisible">Paul Nicoué</span> <span class="hero-title__name" v-show="isVisible">Paul Nicoué</span>
</Transition> </Transition>
<Transition name="expand-width"> <Transition name="expand-width">
<span class="hero-title__separator" aria-hidden="true" v-show="isVisible"></span> <span class="hero-title__divider" aria-hidden="true" v-show="isVisible"></span>
</Transition> </Transition>
<Transition name="fade-in-from-top"> <Transition name="fade-in-from-top">
<span class="hero-title__job" v-show="isVisible">Intégrateur & développeur web</span> <span class="hero-title__job" v-show="isVisible">Intégrateur & développeur web</span>
@ -43,7 +43,7 @@
display: grid; display: grid;
grid: grid:
'name' auto 'name' auto
'separator' auto 'divider' auto
'job' auto 'job' auto
/ minmax(50%, auto); / minmax(50%, auto);
place-content: center; place-content: center;
@ -56,11 +56,11 @@
margin: 0 2rem; margin: 0 2rem;
} }
&__separator { &__divider {
grid-area: separator; grid-area: divider;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--primary-accent-color); background: linear-gradient(90deg, var(--primary-color), var(--primary-accent-color-light), var(--primary-color));
} }
&__job { &__job {