edpibu/web2.0
1
Fork 0
Code Issues Activity

Implement print layout

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-03-18 11:51:02 +01:00
parent 4d43cd1186
commit 6e3846d60d
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 52 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/index.html
View file

@ -55,7 +55,7 @@
<div class="block link-block"> <div class="block link-block">
<a href="https://git.edgarpierre.fr/edpibu"> <a href="https://git.edgarpierre.fr/edpibu">
<span class="i ri-git-repository-fill"></span> <span class="i ri-git-repository-fill"></span>
<span class="desc">Git</span> <span class="desc">Git <em>git.edgarpierre.fr/edpibu</em></span>
</a> </a>
<a href="https://www.komoot.fr/user/383887346799"> <a href="https://www.komoot.fr/user/383887346799">
<span class="i ri-map-2-fill"></span> <span class="i ri-map-2-fill"></span>
@ -63,7 +63,7 @@
</a> </a>
<a href="https://m.edgarpierre.fr"> <a href="https://m.edgarpierre.fr">
<span class="i ri-mastodon-fill"></span> <span class="i ri-mastodon-fill"></span>
<span class="desc">Mastodon</span> <span class="desc">Mastodon <em>m.edgarpierre.fr</em></span>
</a> </a>
</div> </div>
</div> </div>

50
src/static/css/main.css
View file

@ -36,6 +36,11 @@ body {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: var(--colgap); grid-gap: var(--colgap);
} }
@media print {
body {
display: block;
}
}
/* body > div { /* body > div {
column-width: var(--colw); column-width: var(--colw);
column-gap: var(--gap); column-gap: var(--gap);
@ -48,11 +53,11 @@ div.title > img {
h1 { h1 {
margin-top: 1rem; margin-top: 1rem;
} }
@media (min-width: 40rem) { @media screen and (width >= 40rem) {
body {grid-template-columns: var(--colw) 1fr} body {grid-template-columns: var(--colw) 1fr}
body > div.cv {grid-column: 2 / -1} body > div.cv {grid-column: 2 / -1}
} }
@media (min-width: 70rem) { @media screen and (width >= 70rem) {
h1 { h1 {
margin-top: 2rem; margin-top: 2rem;
} }
@ -66,6 +71,11 @@ h1 {
margin: 0; margin: 0;
} }
} }
@media print {
div.title > img {
margin-top: 0;
}
}
h1, h2, h3 { h1, h2, h3 {
font-weight: 250; font-weight: 250;
@ -92,6 +102,12 @@ h4 {font-size: 1.2rem}
h5 {font-size: 1rem} h5 {font-size: 1rem}
h6 {font-size: .8rem} h6 {font-size: .8rem}
@media print {
h2 {
display: none;
}
}
p, ul, ol, dl {line-height: var(--lh)} p, ul, ol, dl {line-height: var(--lh)}
em {font-variation-settings: 'slnt' -5} em {font-variation-settings: 'slnt' -5}
strong {font-weight: 550} strong {font-weight: 550}
@ -127,20 +143,36 @@ dd {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: .2rem; grid-gap: .2rem;
grid-auto-rows: auto; grid-auto-rows: auto;
margin: 1rem 0;
} }
.img-block > img { .img-block > img {
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
} }
.link-block > a { .link-block > a {
background: var(--bg-01);
color: inherit; color: inherit;
text-decoration: none;
}
@media not print {
.link-block > a {
background: var(--bg-01);
padding: var(--gap); padding: var(--gap);
height: 6rem; height: 6rem;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
text-decoration: none; }
}
@media print {
.img-block {
display: none;
}
.link-block > a {
height: auto;
}
.link-block > a > .i {
display: none;
}
} }
.link-block > a:hover { .link-block > a:hover {
background: var(--bg-02); background: var(--bg-02);
@ -173,3 +205,13 @@ footer {
margin: calc(-1 * var(--gap)); margin: calc(-1 * var(--gap));
margin-top: 0; margin-top: 0;
} }
@media print {
footer {
display: none;
}
}
@page {
size: a4 portrait;
margin: 2cm;
}