This commit is contained in:
EpicKiwi 2024-01-04 00:41:32 +01:00
commit 1d851e23a6
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
31 changed files with 2999 additions and 0 deletions

3
.scripts/extract-text.sh Executable file
View File

@ -0,0 +1,3 @@
#!/bin/bash
pdftotext -enc UTF-8 -nopgbrk "$1"

6
.scripts/make-booklet.sh Executable file
View File

@ -0,0 +1,6 @@
#!/bin/bash
NAME=$(basename "$1")
OUT=$(dirname "$1")/${NAME%.*}-brochure.pdf
pdfjam "$1" --booklet true --paper a4 --landscape --outfile "$OUT"

3
.scripts/make-thumbnail.sh Executable file
View File

@ -0,0 +1,3 @@
#!/bin/bash
convert -verbose -density 150 -trim "$1[0]" -quality 100 -flatten -sharpen 0x1.0 "$(dirname $1)/thumbnail.jpg"

5
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"recommendations": [
"ritwickdey.liveserver"
]
}

200
_src/img/logo_kiosque.svg Normal file
View File

@ -0,0 +1,200 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
id="svg2"
version="1.1"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
width="188.93687"
height="134.32153"
viewBox="0 0 94.468437 67.160766"
sodipodi:docname="logo_kiosque.svg"
inkscape:export-filename="/home/nwa/Documents/Lyon Open Lab/Collectif LOL/parallax and responsive/images/logo.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs6">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2157">
<g
inkscape:label="Clip"
id="use2159">
<rect
style="fill:none;fill-opacity:1;stroke:none;stroke-width:4.70173;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect191"
width="89.766708"
height="62.459038"
x="2.3508618"
y="2.3508654" />
</g>
</clipPath>
</defs>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1537"
inkscape:window-height="1001"
id="namedview4"
showgrid="false"
inkscape:zoom="4.8680853"
inkscape:cx="99.525783"
inkscape:cy="129.61975"
inkscape:current-layer="g2181"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:showpageshadow="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#d1d1d1" />
<g
id="g2181">
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:4.70173;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542"
width="89.766708"
height="62.459038"
x="2.3508627"
y="2.3508661" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:1.9169;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542-2"
width="25.101248"
height="37.127502"
x="31.437948"
y="10.704428"
transform="matrix(1.4293774,0,0,1.4293774,-19.958628,-3.5599788)" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:1.9169;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542-2-6"
width="25.101248"
height="37.127502"
x="39.492004"
y="3.9229815"
transform="matrix(1.4067559,0.25329373,-0.25329373,1.4067559,-19.958628,-3.5599788)" />
<rect
style="fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:1.9169;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542-2-6-1"
width="25.101248"
height="37.127502"
x="45.844315"
y="-1.9883734"
transform="matrix(1.3495008,0.47113422,-0.47113422,1.3495008,-19.958628,-3.5599788)"
inkscape:label="rect4542-2-6-1" />
<g
id="g2389"
transform="matrix(0.18267596,-0.41631964,0.41631964,0.18267596,21.32779,64.5608)">
<circle
r="4.0235658"
cy="54.189335"
cx="81.594971"
id="circle822"
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.0081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
ry="1.525695"
y="50.80328"
x="47.598076"
height="6.7451782"
width="11.456149"
id="rect838"
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.58291;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.0081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle842"
cx="67.460556"
cy="54.189335"
r="4.0235658" />
<circle
r="4.0235658"
cy="54.189335"
cx="39.191742"
id="circle846"
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.0081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93399;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect852"
width="14.782129"
height="6.7451782"
x="70.836403"
y="38.930374"
ry="1.525695" />
<rect
ry="1.525695"
y="38.930374"
x="53.002293"
height="6.7451782"
width="14.782129"
id="rect858"
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93399;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93399;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect860"
width="14.782129"
height="6.7451782"
x="35.168175"
y="38.930374"
ry="1.525695" />
<circle
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.0081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle862"
cx="81.594971"
cy="30.443529"
r="4.0235658" />
<rect
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.58291;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect864"
width="11.456149"
height="6.7451782"
x="47.598076"
y="27.057472"
ry="1.525695" />
<circle
r="4.0235658"
cy="30.443529"
cx="67.460556"
id="circle866"
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.0081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.0081;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle868"
cx="39.191742"
cy="30.443529"
r="4.0235658" />
</g>
<rect
style="fill:none;fill-opacity:1;stroke:#fff600;stroke-width:4.72806;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542-8"
width="90.26947"
height="62.808857"
x="2.0994806"
y="2.1759546" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.3 KiB

45
_src/js/layout.html Normal file
View File

@ -0,0 +1,45 @@
<style>
@import url("../styles/global.css");
:host {
margin-top: 0;
}
header {
margin-bottom: 10vh;
}
header h1 {
font-size: 1.5em;
font-family: "Degheest Director";
font-weight: 600;
}
header h1 > a {
display: grid;
grid-template-columns: 75px 1fr;
gap: 15px;
align-items: center;
color: inherit;
text-decoration: none;
}
header h1 img {
width: 100%;
}
header h1 small {
display: block;
}
</style>
<header>
<h1><a href="/">
<img src="/_src/img/logo_kiosque.svg" alt="Logo du site" />
<span>Infokiosques du LOL <small>Brochures et autres textes</small></span>
</a></h1>
</header>
<slot></slot>

24
_src/js/layout.js Normal file
View File

@ -0,0 +1,24 @@
/* LAYOUT
Ce script importe la decoration et la navigation du site et l'ajoute en tant que "Shadow root"
sur le <body> de la page
Pour ajouter ce script sur une page ajoutez les balises suivantes dans <head>
<link rel="prefetch" href="/src/js/layout.html" />
<script defer src="/src/js/layout.js"></script>
*/
(async () => {
let res = await fetch("/_src/js/layout.html")
if(!res.headers.get("Content-Type").startsWith("text/html")) {
console.error(`Layout content type is ${res.headers.get("Content-Type")} not text/html`)
return
}
let layoutContent = await res.text()
document.body.attachShadow({mode: "open"})
document.body.shadowRoot.innerHTML = layoutContent
document.body.classList.add("with-layout")
})()

46
_src/styles/fonts.css Normal file
View File

@ -0,0 +1,46 @@
@font-face {
font-family: "Degheest Director";
src: url("./fonts/degheest/Director-Variable.woff");
font-weight: 100 700;
}
@font-face {
font-family: "Degheest Director";
src: url("./fonts/degheest/Director-Regular.woff");
}
@font-face {
font-family: "Degheest Director";
src: url("./fonts/degheest/Director-Bold.woff");
font-weight: bold;
}
@font-face {
font-family: "Degheest Director";
src: url("./fonts/degheest/Director-Light.woff");
font-weight: 300;
}
@font-face {
font-family: "Open Sans";
src: url("./fonts/open-sans/OpenSans-Regular.ttf");
}
@font-face {
font-family: "Open Sans";
src: url("./fonts/open-sans/OpenSans-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "Open Sans";
src: url("./fonts/open-sans/OpenSans-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: "Open Sans";
src: url("./fonts/open-sans/OpenSans-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

118
_src/styles/global.css Normal file
View File

@ -0,0 +1,118 @@
@import url("./fonts.css");
:root {
--background-color: black;
--text-color: white;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: var(--background-color);
font-family: "Open Sans", sans-serif;
color: var(--text-color);
margin-top: 10vh;
margin-bottom: 15vh;
box-sizing: border-box;
padding: 25px;
}
body.with-layout {
margin-top: 0;
}
body > * {
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
h1 {
font-family: "Degheest Director";
font-weight: 700;
font-size: 3em;
}
@media screen and (max-width: 500px) {
h1 {
line-break: loose;
}
}
h1 small, h2 small {
display: block;
}
h1 small {
font-size: 0.5em;
margin-top: 1ex;
font-weight: 400;
}
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
h1, h2, h3, p {
margin-bottom: 35px;
}
p {
line-height: 1.5;
}
hr {
border: none;
margin-top: 100px;
margin-bottom: 100px;
}
body > img {
width: max-content;
height: max-content;
object-fit: scale-down;
max-height: 50vh;
max-width: 100%;
display: block;
}
body > img:first-child {
margin-bottom: 10vh;
}
ul li > a:first-child::before {
content: "🠺";
font-family: "Open Sans", sans-serif;
margin-left: -1.5ex;
margin-right: 0.5ex;
font-size: 1.5em;
vertical-align: middle;
display: inline-block;
}
ul li > a:first-child:hover::before {
opacity: 1;
transform: translateX(0.25ex);
}
body > section {
margin-top: 10vh;
}

41
index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infokiosques LOL</title>
<link rel="stylesheet" href="/_src/styles/global.css" />
</head>
<body vocab="http://schema.org/" typeof="Website" resource="." >
<img src="/_src/img/logo_kiosque.svg" alt="Logo du site" />
<h1 property="name">Inforkiosques du LOL <small>Brochures et autres textes</small></h1>
<section id="publications"
typeof="Collection"
resource="#publications" >
<h2 property="name">Publications</h2>
<ul>
<li><a property="hasPart" href="publications/2023-01-03-detruire-le-capitalisme-de-surveillance/">
Détruire le capitalisme de surveillance <small>par Cory Doctorow</small>
</a></li>
</ul>
</section>
<section>
<h2>Resources</h2>
<ul>
<li><a href="https://labolyon.fr">labolyon.fr</a></li>
<li><a href="https://equa.space/notes/pdfjam/">using <code>pdfjam</code> for zine creation and bookbinding</a></li>
</ul>
</section>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Détruire le capitalisme de surveillance — Cory Doctorow — Infokiosques LOL</title>
<link rel="stylesheet" href="/_src/styles/global.css" />
<link rel="prefetch" href="/_src/js/layout.html" />
<script defer src="/_src/js/layout.js"></script>
</head>
<body vocab="http://schema.org/" resource="." typeof="Book">
<img property="image" src="thumbnail.jpg" alt="Couverture de la brochure" />
<h1>
<span property="name">Détruire le capitalisme de surveillance</span>
<small>
de <span property="author">Cory Doctorow</span>,
traduction <span property="translator">Framalang</span>
</small>
</h1>
<p property="abstract">
Le capitalisme de surveillance tel quanalysé ici par Cory Doctorow est une cible agile, mouvante et surtout omnipotente et omniprésente. Comment maîtriser le monstre et le déconstruire, à défaut de le détruire ?
</p>
<ul>
<li property="encoding" typeof="MediaObject">
<a property="contentUrl" href="Doctorow-68p.pdf">
<span property="name">PDF : Page par page</span>
</a>
</li>
<li property="encoding" typeof="MediaObject">
<a property="contentUrl" href="Doctorow-68p-brochure.pdf">
<span property="name">PDF : Brochure imprimable</span>
</a>
</li>
<li property="encoding" typeof="MediaObject">
<a property="contentUrl" href="Doctorow-68p.txt">
<span property="name">TEXTE : Texte brut</span>
</a>
</li>
</ul>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB