cuisine-du-web/livre-de-cuisine
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout du QRcode en mode print

Browse Source
This commit is contained in:
EpicKiwi 2024-05-03 13:21:11 +02:00
parent 11f120ba39
commit 8819cf18ad
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
3 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/qr-code.js Normal file
View File

File diff suppressed because one or more lines are too long

67
assets/style.css
View File

@ -90,7 +90,7 @@ small {
margin-right: 1ex; margin-right: 1ex;
} }
.guide > p:first-of-type:last-of-type::before { .guide > p:first-of-type:last-child::before {
content: "➔"; content: "➔";
} }
@ -128,3 +128,68 @@ pre {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
} }
.ressource qr-code {
display: none;
}
@media print {
a {
color: inherit;
}
.ressource :not(h2) {
font-size: 10pt;
}
.ressource ul {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
flex-wrap: wrap;
width: 100%;
margin-bottom: 50px;
}
.ressource ul > * {
width: 200px;
}
.ressource li {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
text-align: center;
margin-bottom: 25px;
page-break-inside: avoid;
}
.ressource li a {
display: contents;
}
.ressource qr-code {
display: block;
width: 100px;
}
.ressource qr-code::part(img) {
width: 100%;
}
.ressource a::after {
content: attr(href);
display: block;
text-decoration: none;
font-size: 0.9em;
margin-top: 1em;
order: 0;
word-wrap: break-word;
opacity: 0.5;
width: 100%;
}
}

16
recettes/01-creer-une-page-simple.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/style.css"> <link rel="stylesheet" href="../assets/style.css">
<script src="../assets/qr-code.js"></script>
<title>Créer une page simple</title> <title>Créer une page simple</title>
</head> </head>
<body> <body>
@ -84,9 +85,18 @@
<section class="ressource"> <section class="ressource">
<h2>Pour aller plus loin</h2> <h2>Pour aller plus loin</h2>
<ul> <ul>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">Notions de base en HTML</a></li> <li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank">
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html">Anatomie d'un document HTML</a></li> <qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics"></qr-code>
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title">&lt;title&gt; : l'élément de titre du document</a></li> Notions de base en HTML
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomie_dun_document_html"></qr-code>
Anatomie d'un document HTML
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/HTML/Element/title"></qr-code>
&lt;title&gt; : l'élément de titre du document
</a></li>
</ul> </ul>
</section> </section>