gov.glados.computer
+1
-1
src/lib/Timeline.svelte
+1
-1
src/lib/Timeline.svelte
+30
-17
src/lib/TimelineCard.svelte
+30
-17
src/lib/TimelineCard.svelte
···
1
1
<script>
2
-
import { Button, Card, Group, Image, Text } from '@svelteuidev/core';
2
+
import { Button, Card, Group, Image, Text } from "@svelteuidev/core";
3
3
4
4
export let website;
5
5
</script>
6
6
7
-
<Card shadow='sm' padding='lg' width="500px">
8
-
<Card.Section first padding='lg'>
9
-
<Image
10
-
src={website.openGraphImageUrl}
11
-
height={160}
12
-
alt={website.title}
13
-
/>
14
-
</Card.Section>
7
+
<div class="card-container">
8
+
<Card shadow="lg" padding="lg">
9
+
<!-- TODO: figure out card image display by avoiding rate limited API calls -->
10
+
<!-- <Card.Section first padding="lg"> -->
11
+
<!-- <Image -->
12
+
<!-- src={website.openGraphImageUrl} -->
13
+
<!-- height={160} -->
14
+
<!-- alt={website.title} -->
15
+
<!-- /> -->
16
+
<!-- </Card.Section> -->
17
+
18
+
<Text weight="bold" size="xl">{website.name}</Text>
19
+
20
+
<div class="website-description">
21
+
<Text size="lg">{website.description}</Text>
22
+
</div>
15
23
16
-
<Group position='apart'>
17
-
<h3>{website.name}</h3>
18
-
</Group>
24
+
<Button variant="light" color="blue" href={website.url} target="_blank" fullSize>
25
+
Open
26
+
</Button>
27
+
</Card>
28
+
</div>
19
29
20
-
<Text size='sm'>{website.description}</Text>
30
+
<style>
31
+
.card-container {
32
+
margin-top: 20px;
33
+
}
21
34
22
-
<Button variant='light' color='blue' href={website.url} target="_blank" fullSize>
23
-
Open
24
-
</Button>
25
-
</Card>
35
+
.website-description {
36
+
margin: 20px auto;
37
+
}
38
+
</style>