cv-site/src/elements/Training.svelte

84 lines
1.9 KiB
Svelte

<script lang="ts">
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt({
html:true,
xhtmlOut:true,
typographer: true,
});
import data from '../model/training.json'
import type { Schema } from 'src/model/job';
export let currentLanguage = 'it'
const training:Schema[] = data as Schema[];
</script>
<div class="trainingContainer">
{#each training as school }
<div class="element">
<img src="{school.images[0]}" alt="school logo" />
<div>
<h4>{school.title[currentLanguage]}</h4>
<p>{school.content[currentLanguage]}</p>
<p>{school.year.start} - {school.year.end}</p>
</div>
</div>
{/each}
</div>
<style lang="scss">
@import './static/colors.scss';
.trainingContainer{
margin: auto;
background-color:$navajo-white;
display: flex;
flex-wrap: wrap;
border-radius: 10px;
width: 90%;
border-radius: 10px;
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
padding: 1vh;
}
.element{
background-color: $cultured;
text-align: justify;
display: flex;
align-items: center ;
width: 98%;
border-radius: 10px;
margin-bottom: 1vh;
padding: 1vh;
background-color: $cultured;
border-style: solid;
border-width: 0.1px;
}
.element:last-child{
margin-bottom: 0px;
}
.element>img{
max-width: 35%;
margin: auto;
}
.element>div{
max-width: 50%;
margin-left: auto;
justify-self: end;
}
.element>div>p{
text-align: center;
overflow-wrap: break-word;
text-align: justify;
}
@media screen and (min-width: 600px) {
.trainingContainer{
display: flex;
height: auto;
max-width: $cv-max-width;
width: 80vw;
}
}
</style>