Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Frontend: Adjustements inthe flag section, each slide has now a fixed height. Some tweaks in subsections and footer.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-25 23:39:15 +01:00
parent 524bb88a4c
commit f023dd8e69
4 changed files with 85 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
frontend/src/lib/css/cv.css
View file

@ -50,6 +50,28 @@
color: var(--color-background);
margin: 0.5rem;
}
.subsection {
margin-left: 3rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.end {
padding-bottom: 5rem;
}
.footer {
position: relative;
display: flex;
height: 15rem;
background-color: var(--color-text);
z-index: 3;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
@media screen and (max-width: 1000px) {
@ -72,6 +94,28 @@
color: var(--color-background);
margin: 0.5rem;
}
.subsection {
margin-left: 5vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.end {
padding-bottom: 3rem;
}
.footer {
position: relative;
display: flex;
height: 20rem;
background-color: var(--color-text);
z-index: 3;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
.profile-picture-container {
@ -108,28 +152,6 @@ h2 {
font-size: 1.5rem;
}
.subsection {
margin-left: 3rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.end {
padding-bottom: 5rem;
}
.footer {
position: relative;
display: flex;
height: 30vh;
background-color: var(--color-text);
z-index: 3;
justify-content: center;
align-items: center;
flex-direction: column;
}
.footer svg {
margin: 0;
}

23
frontend/src/lib/css/flag.css
View file

@ -1,3 +1,4 @@
@media screen and (min-width: 1000px) {
.flag-main {
display: flex;
border-radius: 0.4rem;
@ -11,6 +12,28 @@
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 1000px) {
.flag-main {
display: flex;
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background);
margin-bottom: 1rem;
margin-top: 1rem;
padding: 1rem;
transition: all .3s ease 0s;
justify-content: center;
align-items: center;
width: 100%;
}
.flag-container {
margin-left: 10vw !important;
margin-right: 10vw;
}
}
.flag-img {
padding-left: 0.5rem;

10
frontend/src/lib/css/slide.css
View file

@ -93,7 +93,7 @@
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background);
height: 60dvh;
min-height: 35rem;
width: 90dvw;
margin-left: 5dvw;
z-index: 1;
@ -103,7 +103,7 @@
.slide-img-mobile-container {
display: flex;
justify-content: center;
height: 30dvh;
height: 17.25rem;
}
.slide-img-mobile {
@ -124,7 +124,7 @@
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 600;
font-size: 3vmax;
font-size: 1.8rem;
margin-bottom: 0;
}
@ -133,7 +133,7 @@
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1.75vmax;
font-size: 1.1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
@ -158,7 +158,7 @@
}
.slide-text {
font-size: 1.5vmax;
font-size: 1rem;
}
}

2
frontend/src/routes/+page.svelte
View file

@ -143,7 +143,7 @@
{/each}
</div>
<SubSection icon={mdiEarth} title="Languages"/>
<div class="subsection end">
<div class="subsection flag-container end">
{#each cv.skills.languages as langdata}
<FlagComponent lang={langdata.lang} level={langdata.level} icon={langdata.icon_alpha}/>
{/each}