390 lines
7.0 KiB
HTML
390 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<style>
|
|
|
|
/*stolen from https://github.com/CourtBouillon/weasyprint-samples/blob/master/report/report.css*/
|
|
|
|
@page {
|
|
@top-left {
|
|
background: #fbc847;
|
|
content: counter(page);
|
|
height: 1cm;
|
|
text-align: center;
|
|
width: 1cm;
|
|
}
|
|
@top-center {
|
|
background: #fbc847;
|
|
content: '';
|
|
display: block;
|
|
height: .05cm;
|
|
opacity: .5;
|
|
width: 100%;
|
|
}
|
|
@top-right {
|
|
content: string(heading);
|
|
font-size: 9pt;
|
|
height: 1cm;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@page :blank {
|
|
@top-left { background: none; content: '' }
|
|
@top-center { content: none }
|
|
@top-right { content: none }
|
|
}
|
|
@page no-chapter {
|
|
@top-left { background: none; content: none }
|
|
@top-center { content: none }
|
|
@top-right { content: none }
|
|
}
|
|
@page chapter {
|
|
background: #fbc847;
|
|
margin: 0;
|
|
@top-left { content: none }
|
|
@top-center { content: none }
|
|
@top-right { content: none }
|
|
}
|
|
|
|
html {
|
|
color: #393939;
|
|
font-family: Fira Sans;
|
|
font-size: 11pt;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/*h1 {*/
|
|
/* color: #fbc847;*/
|
|
/* font-size: 38pt;*/
|
|
/* margin: 5cm 2cm 0 2cm;*/
|
|
/* page: no-chapter;*/
|
|
/* width: 100%;*/
|
|
/*}*/
|
|
h1, h2, h3, h4 {
|
|
color: black;
|
|
font-weight: 400;
|
|
}
|
|
h1 {
|
|
font-size: 36pt;
|
|
}
|
|
h2 {
|
|
font-size: 28pt;
|
|
}
|
|
h3 {
|
|
font-weight: 300;
|
|
font-size: 15pt;
|
|
}
|
|
h4 {
|
|
font-size: 13pt;
|
|
}
|
|
|
|
#cover {
|
|
align-content: space-between;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
height: 297mm;
|
|
}
|
|
#cover address {
|
|
background: #fbc847;
|
|
flex: 1 50%;
|
|
margin: 0 -2cm;
|
|
padding: 1cm 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
#cover address:first-of-type {
|
|
padding-left: 3cm;
|
|
}
|
|
#contents {
|
|
break-before: right;
|
|
break-after: left;
|
|
page: no-chapter;
|
|
}
|
|
#contents h2 {
|
|
font-size: 20pt;
|
|
font-weight: 400;
|
|
margin-bottom: 3cm;
|
|
}
|
|
#contents h3 {
|
|
font-weight: 500;
|
|
margin: 3em 0 1em;
|
|
}
|
|
#contents h3::before {
|
|
background: #fbc847;
|
|
content: '';
|
|
display: block;
|
|
height: .08cm;
|
|
margin-bottom: .25cm;
|
|
width: 2cm;
|
|
}
|
|
#contents ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
#contents ul li {
|
|
border-top: .25pt solid #c1c1c1;
|
|
margin: .25cm 0;
|
|
padding-top: .25cm;
|
|
}
|
|
#contents ul li::before {
|
|
color: #fbc847;
|
|
content: '• ';
|
|
font-size: 40pt;
|
|
line-height: 16pt;
|
|
vertical-align: bottom;
|
|
}
|
|
#contents ul li a {
|
|
color: inherit;
|
|
text-decoration-line: inherit;
|
|
}
|
|
#contents ul li a::before {
|
|
content: target-text(attr(href));
|
|
}
|
|
#contents ul li a::after {
|
|
color: #fbc847;
|
|
content: target-counter(attr(href), page);
|
|
float: right;
|
|
}
|
|
|
|
#columns section {
|
|
columns: 2;
|
|
column-gap: 1cm;
|
|
padding-top: 1cm;
|
|
}
|
|
#columns section p {
|
|
text-align: justify;
|
|
}
|
|
#columns section p:first-of-type {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#skills h3 {
|
|
background: #fbc847;
|
|
margin: 0 -3cm 1cm;
|
|
padding: 1cm 1cm 1cm 3cm;
|
|
width: 21cm;
|
|
}
|
|
#skills section {
|
|
padding: .5cm 0;
|
|
}
|
|
#skills section#table-content::before {
|
|
background: url(table-content.svg) no-repeat center #fbc847;
|
|
background-size: 50%;
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
height: 2cm;
|
|
margin-right: .5cm;
|
|
vertical-align: middle;
|
|
width: 2cm;
|
|
}
|
|
#skills section#heading::before {
|
|
background: url(heading.svg) no-repeat center #fbc847;
|
|
background-size: 50%;
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
height: 2cm;
|
|
margin-right: .5cm;
|
|
vertical-align: middle;
|
|
width: 2cm;
|
|
}
|
|
#skills section#multi-columns::before {
|
|
background: url(multi-columns.svg) no-repeat center #fbc847;
|
|
background-size: 50%;
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
height: 2cm;
|
|
margin-right: .5cm;
|
|
vertical-align: middle;
|
|
width: 2cm;
|
|
}
|
|
#skills section#internal-links::before {
|
|
background: url(internal-links.svg) no-repeat center #fbc847;
|
|
background-size: 50%;
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
height: 2cm;
|
|
margin-right: .5cm;
|
|
vertical-align: middle;
|
|
width: 2cm;
|
|
}
|
|
#skills section#style::before {
|
|
background: url(style.svg) no-repeat center #fbc847;
|
|
background-size: 50%;
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
height: 2cm;
|
|
margin-right: .5cm;
|
|
vertical-align: middle;
|
|
width: 2cm;
|
|
}
|
|
#skills section h4 {
|
|
margin: 0;
|
|
}
|
|
#skills section p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#offers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
#offers h2, #offers h3 {
|
|
width: 100%;
|
|
}
|
|
#offers section {
|
|
width: 30%;
|
|
}
|
|
#offers section h4 {
|
|
margin-bottom: 0;
|
|
}
|
|
#offers section ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
}
|
|
#offers section ul li:not(:last-of-type) {
|
|
margin: .5cm 0;
|
|
}
|
|
#offers section p {
|
|
background: #fbc847;
|
|
display: block;
|
|
font-size: 15pt;
|
|
font-weight: 700;
|
|
margin-bottom: 0;
|
|
padding: .25cm 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#chapter {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 297mm;
|
|
justify-content: center;
|
|
page: chapter;
|
|
}
|
|
|
|
#typography section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 1cm 0;
|
|
}
|
|
#typography section h4 {
|
|
border-top: 1pt solid;
|
|
flex: 1 25%;
|
|
margin: 0;
|
|
}
|
|
#typography section h4 + * {
|
|
flex: 1 75%;
|
|
margin: 0;
|
|
padding-left: .5cm;
|
|
}
|
|
#typography section p {
|
|
text-align: justify;
|
|
}
|
|
#typography section ul {
|
|
line-height: 2;
|
|
list-style: none;
|
|
}
|
|
#typography section#small-caps p {
|
|
font-variant: small-caps;
|
|
}
|
|
#typography section#ligatures dl {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#typography section#ligatures dl dt {
|
|
font-weight: 400;
|
|
width: 30%;
|
|
}
|
|
#typography section#ligatures dl dd {
|
|
flex: 1 70%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#typography section#ligatures .none {
|
|
font-variant-ligatures: none;
|
|
}
|
|
#typography section#ligatures .common {
|
|
font-variant-ligatures: common-ligatures;
|
|
}
|
|
#typography section#ligatures .discretionary {
|
|
font-variant-ligatures: discretionary-ligatures;
|
|
}
|
|
#typography section#ligatures .contextual {
|
|
font-variant-ligatures: contextual;
|
|
}
|
|
#typography section#numbers dl {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#typography section#numbers dl dt {
|
|
font-weight: 400;
|
|
width: 30%;
|
|
}
|
|
#typography section#numbers dl dd {
|
|
flex: 1 70%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#typography section#numbers #fractions {
|
|
font-variant-numeric: diagonal-fractions;
|
|
}
|
|
#typography section#numbers #ordinals {
|
|
font-variant-numeric: ordinal;
|
|
}
|
|
#typography section#numbers #slashed {
|
|
font-variant-numeric: slashed-zero;
|
|
}
|
|
#typography section#numbers #super {
|
|
font-variant-position: super;
|
|
}
|
|
#typography section#numbers #sub {
|
|
font-variant-position: sub;
|
|
}
|
|
#typography section#figures dl {
|
|
columns: 4;
|
|
}
|
|
#typography section#figures dl dt {
|
|
font-weight: 400;
|
|
}
|
|
#typography section#figures dl dd {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#typography section#figures dl dd ul {
|
|
padding: 0 1em 0 0;
|
|
}
|
|
#typography section#figures #oldstyle {
|
|
font-variant-numeric: oldstyle-nums;
|
|
}
|
|
#typography section#figures #tabular {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#typography section#figures #old-tabular {
|
|
font-variant-numeric: oldstyle-nums tabular-nums;
|
|
}
|
|
|
|
</style>
|
|
<meta name="description" content="Report example">
|
|
</head>
|
|
<body>
|
|
|
|
<article id="columns">
|
|
|
|
$body$
|
|
|
|
</article>
|
|
|
|
</body>
|
|
|
|
</html> |