Move pdf styles to it's own file

This commit is contained in:
TheThomaas 2025-05-01 17:15:49 +02:00
parent 779f447c13
commit 92bc04f148
2 changed files with 96 additions and 95 deletions

View file

@ -4,106 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
{% block content %}
{{ content }}
{% endblock %}
<style>
:root {
--accent-color: blue;
--font-body: Arial, sans-serif;
--font-display: 'Times New Roman', Times, serif;
}
html {
font-family: var(--font-body, Arial, sans-serif);
margin: 0;
}
body {
margin: 0;
}
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
text-align:center;
font-family: var(--font-display, 'Times New Roman', Times, serif);
font-size: 2rem;
margin: 0;
line-height: 1.6;
}
h2 {
color : var(--accent-color, blue);
}
p {
margin: 0;
}
ul {
margin: 0;
}
li::marker {
color: var(--accent-color, blue);
}
section {margin-bottom: 1.2rem;}
.justify-center {
justify-content: center;
}
.underline {
text-decoration: underline;
}
.list-inline {
display: flex;
align-items: center;
padding: 0;
margin: 0;
gap: .8rem;
}
.list-inline li {
display: contents;
}
.list-inline li + li::before {
content: '|';
}
.title {
display: flex;
gap: .8rem;
margin-bottom: .6rem;
}
.title h2 {
margin: 0;
}
.title hr {
align-self: center;
flex: 1 0 auto;
}
section ul {padding: 0;margin-left: 1.2rem;}
.subtitle {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
justify-items: center;
margin-inline: 1rem;
margin-bottom: .4rem;
}
.subtitle .timeSection { font-size: .9rem; }
.subtitle h3,
.subtitle p { margin: 0; }
.subtitle > :first-child {justify-self: start;}
.subtitle > :last-child {justify-self: end;}
.subtitle + ul {font-size: .9rem;}
.subtitle ~ .subtitle {margin-top: 1rem;}
</style>
{% css "pdf" %}
{% include "css/pdf.css" %}
{% endcss %}
<style>{% getBundle "css" "pdf" %}</style>
</body>
</html>

91
src/css/pdf.css Normal file
View file

@ -0,0 +1,91 @@
:root {
--accent-color: blue;
--font-body: Arial, sans-serif;
--font-display: 'Times New Roman', Times, serif;
}
html {
font-family: var(--font-body, Arial, sans-serif);
margin: 0;
}
body {
margin: 0;
}
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
text-align:center;
font-family: var(--font-display, 'Times New Roman', Times, serif);
font-size: 2rem;
margin: 0;
line-height: 1.6;
}
h2 {
color : var(--accent-color, blue);
}
p {
margin: 0;
}
ul {
margin: 0;
}
li::marker {
color: var(--accent-color, blue);
}
section {margin-bottom: 1.2rem;}
.justify-center {
justify-content: center;
}
.underline {
text-decoration: underline;
}
.list-inline {
display: flex;
align-items: center;
padding: 0;
margin: 0;
gap: .8rem;
}
.list-inline li {
display: contents;
}
.list-inline li + li::before {
content: '|';
}
.title {
display: flex;
gap: .8rem;
margin-bottom: .6rem;
}
.title h2 {
margin: 0;
}
.title hr {
align-self: center;
flex: 1 0 auto;
}
section ul {padding: 0;margin-left: 1.2rem;}
.subtitle {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
justify-items: center;
margin-inline: 1rem;
margin-bottom: .4rem;
}
.subtitle .timeSection { font-size: .9rem; }
.subtitle h3,
.subtitle p { margin: 0; }
.subtitle > :first-child {justify-self: start;}
.subtitle > :last-child {justify-self: end;}
.subtitle + ul {font-size: .9rem;}
.subtitle ~ .subtitle {margin-top: 1rem;}