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

Updated CSS for <Education/>, better button for <Slideshow/>.

Browse source
This commit is contained in:
Yohan Boujon 2023-11-14 23:02:46 +01:00
parent 6f5e264b49
commit c5903c6079
4 changed files with 50 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/lib/components/education.svelte
View file

@ -1,13 +1,16 @@
<script> <script>
import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiMapMarker, mdiCog } from "@mdi/js";
import "$lib/css/education.css"; import "$lib/css/education.css";
export let active = false; export let active = false;
export let data; export let data;
export let picture = "https://bib.insa-toulouse.fr/_resource/info_pratiques/INSA-Venir-Bib-photo-8_0.jpg"; export let picture =
"https://bib.insa-toulouse.fr/_resource/info_pratiques/INSA-Venir-Bib-photo-8_0.jpg";
const title = data.school; const title = data.school;
const location = data.school_location; const location = data.school_location;
const speciality = data.speciality;
const option = data.school_options; const option = data.school_options;
</script> </script>
@ -17,7 +20,22 @@
</div> </div>
<div class="education-text-container"> <div class="education-text-container">
<h1 class="education-title">{title}</h1> <h1 class="education-title">{title}</h1>
<p class="education-subtitle">{location}</p> {#if location}
<div class="education-subtitle-container">
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
<p class="education-subtitle education-aftericon">{location}</p>
</div>
{/if}
{#if speciality}
<div class="education-subtitle-container">
<SvgIcon size="35" path={mdiCog} type="mdi" />
<p class="education-subtitle education-aftericon">
{speciality}
</p>
</div>
{/if}
{#if option}
<p class="education-subtitle">{option}</p> <p class="education-subtitle">{option}</p>
{/if}
</div> </div>
</div> </div>

2
frontend/src/lib/components/slideshow.svelte
View file

@ -22,7 +22,7 @@
if (slideshow_hidden.includes(id)) { if (slideshow_hidden.includes(id)) {
transformValue = slideshow_index * 60; transformValue = slideshow_index * 60;
} else { } else {
transformValue = slideshow_index * 47.7; transformValue = slideshow_index * 54.75;
} }
element.style.transform = `translateX(-${transformValue}rem)`; element.style.transform = `translateX(-${transformValue}rem)`;
}); });

16
frontend/src/lib/css/education.css
View file

@ -3,7 +3,7 @@
border-radius: 0.4rem; border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background); background-color: var(--color-background);
height: 18rem; height: 20rem;
margin-left: 2.5rem; margin-left: 2.5rem;
margin-right: 2.5rem; margin-right: 2.5rem;
z-index: 1; z-index: 1;
@ -23,7 +23,7 @@
.education-text-container { .education-text-container {
margin: 1.5rem; margin: 1.5rem;
width: 18rem; width: 25rem;
} }
.education-title { .education-title {
@ -33,11 +33,23 @@
font-size: 2rem; font-size: 2rem;
} }
.education-subtitle-container {
display: flex;
flex-direction: row;
align-items: center;
}
.education-aftericon {
margin-left: 0.5rem;
}
.education-subtitle { .education-subtitle {
color: var(--color-text); color: var(--color-text);
font-family: 'Gabarito', sans-serif; font-family: 'Gabarito', sans-serif;
font-weight: 500; font-weight: 500;
font-size: 1.5rem; font-size: 1.5rem;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
} }
.education-unactive { .education-unactive {

12
frontend/src/lib/css/slideshow.css
View file

@ -12,7 +12,7 @@
min-width: 5rem; min-width: 5rem;
min-height: 5rem; min-height: 5rem;
background-color: var(--color-special); background-color: var(--color-special);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -21,3 +21,13 @@
border: 0; border: 0;
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
.slideshow_btn:hover {
transform: translateY(-0.25rem);
box-shadow: 0 0.7px 3px -1px rgba(150,170,180,0.5) !important;
}
.slideshow_btn:active {
background-color: var(--color-subtitle);
transform: translateY(0);
}