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

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

@ -1,23 +1,41 @@
<script>
import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiMapMarker, mdiCog } from "@mdi/js";
import "$lib/css/education.css";
export let active = false;
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 location = data.school_location;
const speciality = data.speciality;
const option = data.school_options;
</script>
<div class="education-main {active ? '' : 'education-unactive'}">
<div class="education-img-container">
<img class="education-img" src={picture} alt="Education"/>
<img class="education-img" src={picture} alt="Education" />
</div>
<div class="education-text-container">
<h1 class="education-title">{title}</h1>
<p class="education-subtitle">{location}</p>
<p class="education-subtitle">{option}</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>
{/if}
</div>
</div>

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

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

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

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

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

@ -12,7 +12,7 @@
min-width: 5rem;
min-height: 5rem;
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%;
display: flex;
justify-content: center;
@ -21,3 +21,13 @@
border: 0;
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);
}