new theme done

src/lib/elements/JobElement.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import MarkdownIt from 'markdown-it';
+	const md = new MarkdownIt({
+		html: true,
+		xhtmlOut: true,
+		typographer: true,
+		breaks: true,
+		linkify: true
+	});
+	import type { Job } from '$lib/model/job';
+	import type { CurrentLanguage } from '$lib/types';
+	export let job: Job;
+	export let currentLanguage: CurrentLanguage = 'it';
+</script>
+
+<div class="job-container">
+	<h3>{job.title[currentLanguage]}</h3>
+	<div class="image-container">
+		{#each job.images as image}
+			<img src={image} alt={image} loading="lazy" />
+		{/each}
+	</div>
+	<div class="text-content">
+		{@html md.render(job.content[currentLanguage])}
+	</div>
+	<div class="added-info">
+		{#if job.year}
+			Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
+		{/if}
+		<div>
+			{#if job.collaborators.length != 0}
+				Collab:
+			{/if}
+			{#each job.collaborators as collaborator, index}
+				<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
+				job.collaborators.length - 1
+					? ', '
+					: ''}
+			{/each}
+		</div>
+		<div>
+			{#if job.languages.length != 0}
+				Lang:
+			{/if}
+			{#each job.languages as language, index}
+				{language}{index != job.languages.length - 1 ? ', ' : ''}
+			{/each}
+		</div>
+		<div>
+			{#if job.tecnologies.length != 0}
+				Tech:
+			{/if}
+			{#each job.tecnologies as tecnology, index}
+				{tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''}
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '../../app.scss';
+	.text-content {
+		margin: auto;
+		text-align: justify;
+	}
+	.added-info {
+		text-align: left;
+		font-size: smaller;
+	}
+	.job-container {
+		width: 100%;
+		img {
+			background-color: $text-color;
+		}
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+</style>