Files
morten-olsen.github.io/src/pages/resume/work-history.astro
2024-01-21 23:04:23 +01:00

83 lines
1.6 KiB
Plaintext

---
import "reset-css";
import "../../styles/fonts-resume.css";
import { getCollection, type CollectionEntry } from "astro:content";
import Work from "../../components/resume/Work.astro";
const work: CollectionEntry<"work">[] = (await getCollection("work")).sort(
(a, b) => b.data.startDate.getTime() - a.data.startDate.getTime(),
);
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Morten Olsen's Resume</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>
<body>
<div class="root">
<h2 class="text-2xl font-bold mb-8 mt-16">Full work history</h2>
<div class="workgrid md:grid flex flex-col">
{work.map((work) => <Work content={work} />)}
</div>
</div>
</body>
</html>
<style>
@page {
size: auto; /* auto is the initial value */
margin: 20mm 20mm;
}
.workgrid {
grid-template-columns: auto 1fr;
grid-gap: 4rem;
}
.page-break {
page-break-after: always;
}
.avatar {
shape-outside: circle();
}
body,
html {
print-color-adjust: exact;
--bg-color: #f5f5f5;
--text-color: #333;
background-color: var(--bg-color);
font-family: "Leto", sans-serif;
@media print {
--bg-color: #fff;
}
}
* {
box-sizing: border-box;
}
.root {
width: 100%;
margin: 0 auto;
max-width: 1000px;
@apply p-8 md:p-16;
@apply print:p-0 print:max-w-none;
}
.withSidebar {
grid-template-columns: min(300px, 50%) 1fr;
column-gap: 50px;
@media print {
display: block;
}
}
</style>