2021-08-02 09:53:08 +02:00
|
|
|
<script lang="ts">
|
|
|
|
import dayjs from 'dayjs'
|
2020-09-28 16:02:16 +02:00
|
|
|
|
2021-08-02 09:53:08 +02:00
|
|
|
import Icon from './Icon.svelte'
|
2021-03-06 23:10:17 +01:00
|
|
|
|
2021-08-02 09:53:08 +02:00
|
|
|
export let project: import('$lib/api').Project
|
2020-07-24 15:16:04 +02:00
|
|
|
</script>
|
|
|
|
|
2021-02-10 11:35:35 +01:00
|
|
|
<section>
|
2021-08-02 09:53:08 +02:00
|
|
|
<a href={project.project.link} target="_blank" rel="noopener">
|
2021-02-10 11:35:35 +01:00
|
|
|
<h2>{project.title}</h2>
|
|
|
|
</a>
|
2021-03-06 23:10:17 +01:00
|
|
|
<div class="subtitle">
|
2021-08-02 09:53:08 +02:00
|
|
|
<b>{project.project.description}</b>
|
|
|
|
<b class="date">{dayjs(project.project.date, 'X').format('MMM YY')}</b>
|
2021-02-10 11:35:35 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
{@html project.content}
|
|
|
|
</p>
|
|
|
|
|
2021-03-06 23:10:17 +01:00
|
|
|
<div class="link">
|
|
|
|
<Icon icon="link-outline" />
|
2021-08-02 09:53:08 +02:00
|
|
|
<a rel="noopener noreferrer" target="_blank" href={project.project.link}
|
|
|
|
>{project.project.link.replace(/https?:\/\//, '')}</a
|
2021-03-06 23:10:17 +01:00
|
|
|
>
|
|
|
|
</div>
|
2021-02-10 11:35:35 +01:00
|
|
|
</section>
|
|
|
|
|
2020-07-24 15:30:46 +02:00
|
|
|
<style>
|
|
|
|
h2 {
|
|
|
|
font-size: 2em;
|
2020-09-24 19:29:43 +02:00
|
|
|
margin-bottom: 0.25em;
|
2020-07-24 15:30:46 +02:00
|
|
|
}
|
|
|
|
|
2021-03-06 23:10:17 +01:00
|
|
|
div.subtitle {
|
2020-07-24 15:30:46 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
2020-07-24 15:36:56 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.date {
|
|
|
|
align-self: flex-end;
|
2020-07-24 15:30:46 +02:00
|
|
|
}
|
|
|
|
|
2021-03-06 23:10:17 +01:00
|
|
|
.link {
|
|
|
|
display: flex;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.link a {
|
|
|
|
margin-left: 0.5rem;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2020-07-24 15:30:46 +02:00
|
|
|
section {
|
2020-09-24 19:29:43 +02:00
|
|
|
margin-bottom: 6em;
|
2020-07-24 15:30:46 +02:00
|
|
|
}
|
|
|
|
|
2020-09-24 19:29:43 +02:00
|
|
|
a {
|
|
|
|
font-family: monospace;
|
2020-07-24 15:30:46 +02:00
|
|
|
}
|
2020-07-24 15:36:56 +02:00
|
|
|
|
|
|
|
@media (max-width: 30em) {
|
2021-03-06 23:10:17 +01:00
|
|
|
div.subtitle {
|
2020-07-24 15:36:56 +02:00
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
2020-07-24 15:30:46 +02:00
|
|
|
</style>
|