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

11
components/ContactSection.vue
View file

@ -17,6 +17,7 @@
// --------------------------------------------------
.contact {
position: relative;
display: grid;
grid:
'header' auto
@ -26,6 +27,16 @@
place-items: start stretch;
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 {
grid-area: header;
}

10
components/HeroTitle.vue
View file

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