Skip to content
Extraits de code Groupes Projets
Valider 4d24b37c rédigé par Nicolas Taffin's avatar Nicolas Taffin
Parcourir les fichiers

versement des fichiers

parent d50bcdd7
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Tout étendre Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 2509 ajouts et 0 suppression
.DS_Store 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
auteurs.html 0 → 100644
+ 95
− 0
Voir le fichier @ 4d24b37c
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ada &amp; Zangemann : les auteurs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta name="author" content="Matthias Kirschner et Sandra Brandstätter"/>
<meta name="description" content="Ada et Zangemann esr un livre pour les enfants et jeunes ados qui pourrait bien leur transmettre le plaisir de bricoler. Un livre sur l’informatique libre, la camaraderie et le rôle des filles pour une technique au service de l’autonomie. Un conte vivant et superbement illustré."/>
<meta property="og:title" content="Ada &amp; Zangemann"/>
<meta property="og:url" content="https://ada-lelivre.fr/" />
<meta property="og:image" content="https://ada-lelivre.fr/images/ada-card.jpg" />
<meta property="og:image:alt" content="Ada bricole sur son établi."/>
<meta property="twitter:title" content="Ada &amp; Zangemann"/>
<meta property="twitter:description" content="Ada et Zangemann esr un livre pour les enfants et jeunes ados qui pourrait bien leur transmettre le plaisir de bricoler. Un livre sur l’informatique libre, la camaraderie et le rôle des filles pour une technique au service de l’autonomie. Un conte vivant et superbement illustré."/>
<meta property="twitter:image" content="https://ada-lelivre.fr/images/ada-card.jpg" />
<meta property="twitter:image:alt" content="Ada bricole sur son établi."/>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css/ada.css" media="all" rel="stylesheet" type="text/css">
<link href="css/navigation.css" media="all" rel="stylesheet" type="text/css">
<link href="css/responsive.css" media="all" rel="stylesheet" type="text/css">
<link href="css/tweaks.css" media="all" rel="stylesheet" type="text/css">
</head>
<body class="page auteurs" lang="fr">
<nav class="main-menu">
<label for="menu-collapsed">🛹<span class="accessibility">Menu</span></label>
<input type="checkbox" id="menu-collapsed" name="menu-collapsed" />
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li>——————————</li>
<li><a href="az.html">Ada &amp; Zangemann</a></li>
<li><a href="az.html#page-01">Chapitre 1</a></li>
<li><a href="az.html#page-10">Chapitre 2</a></li>
<li><a href="az.html#page-23">Chapitre 3</a></li>
<li><a href="az.html#page-35">Chapitre 4</a></li>
<li>——————————</li>
<li><a href="traduction.html">La traduction</a></li>
<li><a href="remerciements.html">Remerciements</a></li>
<li><a href="auteurs.html">Les auteurs</a></li>
<li><a href="colophon.html">Colophon</a></li>
<li class="livre"><a href="https://cfeditions.com/ada">Recevoir le livre…</a></li>
</ul>
</nav>
<article>
<h1>les auteurs</h1>
<div class="ada-page">
<!-- <img class="ada-une-ligne" src="images/ada-p52-title-alt-fr.jpg" loading="lazy" alt="À propos de l’auteur Matthias Kirschner" /> -->
<h2>
À propos de Matthias Kirschner
</h2>
<img class="ada-portrait-matthias" src="images/ada-p52.jpg" loading="lazy" alt="Portrait de Matthias Kirschner" aria-describedby="longdesc-ada-p52"/>
<div class="longdesc-wrapper" id="longdesc-ada-p52">Cette image est un portrait dessiné de Matthias Kirschner en noir et blanc, un jeune homme avec les cheveux frisés et une barbe de trois jours. Il porte un casque sur les oreilles, avec un micro articulé et nous regarde en souriant. Il semble parler et sa main est ouverte, paume vers le haut. (fin de la description) </div>
<p class="ada-bio">
Matthias était déjà fasciné par les ordinateurs et les logiciels lorsqu’il était enfant. Il a eu très tôt une connexion Internet grâce à laquelle il a beaucoup appris. Les enfants ont le droit de prendre leur avenir en main. C’est pourquoi Matthias s’engage pour que tout le monde puisse utiliser des logiciels de manière autonome. <br />Il veut aussi un jour se construire un skateboard électrique avec des logiciels libres.
</p>
<!-- <img class="ada-une-ligne ada-marge-avant" src="images/ada-p53-title-alt-fr.jpg" loading="lazy" alt="À propos de l’illustratrice Sandra Brandstätter " /> -->
<div class="clearer"></div>
<h2>
À propos de Sandra Brandstätter
</h2>
<img class="ada-portrait-sandra" src="images/ada-p53-reversed.jpg" loading="lazy" alt="Portrait de Sandra Brandstätter" aria-describedby="longdesc-ada-p53-reversed"/>
<div class="longdesc-wrapper" id="longdesc-ada-p53-reversed">Cette image est un portrait dessiné de Sandra Brandstätter en noir et blanc, une jeune femme avec les cheveux coupés en carré court et de grandes lunettes rondes. Elle a des écouteurs dans les oreilles, et semble songer en souriant, elle tient de sa main accoudée son crayon levé, dont le bout en gomme touche son menton. (fin de la description) </div>
<p class="ada-bio">
Sandra a toujours bien aimé bricoler avec des ciseaux, des pinces, de la colle, du fil, du tissu et du papier. Aujourd’hui, elle est illustratrice, autrice de bandes dessinées et créatrice de personnages pour des dessins animés et des séries d’animations, par exemple pour la série <span class="cf-titre">Trudes Tier (L’animal de Trude)</span> dans l’émission <span class="cf-titre">Sendung mit der Maus (L’émission avec la souris)</span>. À la machine à glaces, Sandra prendrait une glace crémeuse arc-en-ciel au goût citron-concombre avec beaucoup de perles de sucre.
</p>
</div>
</article>
<footer>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="az.html">Lire Ada &amp; Zangemann</a></li>
<li><a href="traduction.html">La traduction</a></li>
<li><a href="remerciements.html">Remerciements</a></li>
<li><a href="auteurs.html">Les auteurs</a></li>
<li><a href="colophon.html">Colophon</a></li>
<li><a href="mailto:ada@cfeditions.com?subject=Ada">Contact…</a></li>
<li class="livre"><a href="https://cfeditions.com/ada">Recevoir le livre…</a></li>
</ul>
<p class="soutien"><a href="https://cfeditions.com">C&amp;F éditions</a>, avec le soutien de la <a href="https://www.education.gouv.fr/direction-du-numerique-pour-l-education-dne-9983">Direction du numérique pour l’éducation du ministère de l’Éducation nationale et de la Jeunesse</a>.</p>
</footer>
<script src="./js/scripts.js" type="text/javascript"></script>
<script src="./js/ragadjust.js" type="text/javascript"></script>
<script type="text/javascript">
ragadjust('p', ['articles', 'determiners', 'pronouns', 'conjunctions', 'short_prepositions', 'prepositions'], ['en', 'mon']);
</script>
</body>
</html>
\ No newline at end of file
az-diaporama.html 0 → 100644
+ 615
− 0
Voir le fichier @ 4d24b37c
Ce diff est replié.
az.html 0 → 100644
+ 615
− 0
Voir le fichier @ 4d24b37c
Ce diff est replié.
colophon.html 0 → 100644
+ 130
− 0
Voir le fichier @ 4d24b37c
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ada &amp; Zangemann : colophon</title>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta name="author" content="Matthias Kirschner et Sandra Brandstätter"/>
<meta name="description" content="Ada et Zangemann esr un livre pour les enfants et jeunes ados qui pourrait bien leur transmettre le plaisir de bricoler. Un livre sur l’informatique libre, la camaraderie et le rôle des filles pour une technique au service de l’autonomie. Un conte vivant et superbement illustré."/>
<meta property="og:title" content="Ada &amp; Zangemann"/>
<meta property="og:url" content="https://ada-lelivre.fr/" />
<meta property="og:image" content="https://ada-lelivre.fr/images/ada-card.jpg" />
<meta property="og:image:alt" content="Ada bricole sur son établi."/>
<meta property="twitter:title" content="Ada &amp; Zangemann"/>
<meta property="twitter:description" content="Ada et Zangemann esr un livre pour les enfants et jeunes ados qui pourrait bien leur transmettre le plaisir de bricoler. Un livre sur l’informatique libre, la camaraderie et le rôle des filles pour une technique au service de l’autonomie. Un conte vivant et superbement illustré."/>
<meta property="twitter:image" content="https://ada-lelivre.fr/images/ada-card.jpg" />
<meta property="twitter:image:alt" content="Ada bricole sur son établi."/>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css/ada.css" media="all" rel="stylesheet" type="text/css">
<link href="css/navigation.css" media="all" rel="stylesheet" type="text/css">
<link href="css/responsive.css" media="all" rel="stylesheet" type="text/css">
<link href="css/tweaks.css" media="all" rel="stylesheet" type="text/css">
</head>
<body class="page colophon" lang="fr">
<nav class="main-menu">
<label for="menu-collapsed">🛹<span class="accessibility">Menu</span></label>
<input type="checkbox" id="menu-collapsed" name="menu-collapsed" />
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li>——————————</li>
<li><a href="az.html">Ada &amp; Zangemann</a></li>
<li><a href="az.html#page-01">Chapitre 1</a></li>
<li><a href="az.html#page-10">Chapitre 2</a></li>
<li><a href="az.html#page-23">Chapitre 3</a></li>
<li><a href="az.html#page-35">Chapitre 4</a></li>
<li>——————————</li>
<li><a href="traduction.html">La traduction</a></li>
<li><a href="remerciements.html">Remerciements</a></li>
<li><a href="auteurs.html">Les auteurs</a></li>
<li><a href="colophon.html">Colophon</a></li>
<li class="livre"><a href="https://cfeditions.com/ada">Recevoir le livre…</a></li>
</ul>
</nav>
<article>
<h1>Colophon</h1>
<div class="ada-page no-folio">
<p class="cf-paratexte">
Matthias Kirschner &amp; Sandra Brandstätter.<br />
Licence Creative Commons&#x00A0;: <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Attribution, Partage dans les mêmes conditions (CC BY-SA 4.0 FR)</a>.
</p>
<p class="cf-paratexte">
Édition originale <span class="cf-titre">Ada &amp; Zangemann, Ein Märchen über Software, Skateboards und Himbeereis</span> &copy; dpunkt.verlag GmbH, 2022.
</p>
<p class="cf-paratexte">
Cet ouvrage a été publié avec le soutien de la <a href="https://www.education.gouv.fr/direction-du-numerique-pour-l-education-dne-9983">Direction du numérique pour l’éducation du ministère de l’Éducation nationale et de la Jeunesse</a>.
<br /><br /> </p>
<p class="cf-colophon">
Cet ouvrage est composé par Nicolas Taffin en HTML et selon la spécification CSS pour les médias paginés, avec l’aide de PagedJS (<a href="https://pagedjs.org/">https://pagedjs.org/</a>).
</p>
<p class="cf-colophon">
La typographie est Luciole de Laurent Bourcellier & Jonathan Perez (licence CC BY), pensée autour d’une douzaine de critères spécifiques pour offrir la meilleure expérience de lecture possible aux personnes malvoyantes et réalisée avec beaucoup de soin (<a href="https://www.luciole-vision.com/">https://www.luciole-vision.com/</a>).
<br /><br />
</p>
<!-- <h2>
Page web du livre
</h2> -->
<a class="logo logo-fsfe" aria-describedby="longdesc-logo-fsfe" href="https://fsfe.org/">
<div class="longdesc-wrapper" id="longdesc-logo-fsfe">Logo de la fsfe, composé de trois étoiles bleue, cyan et vert clair et des lettres fsfe en bas de casse, dans un caractère fin et arrondi, bleu marine. (fin de la description) </div>
</a>
<p class="cf-paratexte">
<a href="https://fsfe.org/"><strong>Free Software Foundation Europe</strong></a> est une association à but non lucratif, qui aide les personnes à gérer la technologie de manière autonome. Les logiciels influencent tous les domaines de notre vie. Il est donc important que cette technologie nous donne des libertés au lieu de nous restreindre. Le Logiciel Libre (appelé aussi&#x00A0;FLOSS - <span class="cf-loc-etr">Free, Libre, Open Source Software</span>) donne à chacun le droit d’utiliser, de comprendre, de diffuser et d’améliorer les programmes. Le Logiciel Libre renforce alors les droits fondamentaux comme la liberté d’expression, la liberté de la presse et le droit à la vie privée.
</p>
<p class="cf-paratexte">
Sur le site consacré au livre, vous retrouverez plus d’informations et de documentation&#x00A0;: <a href="https://ada.fsfe.org">https://ada.fsfe.org</a>.
</p>
<p class="cf-paratexte">
<a href="mailto:ada@cfeditions.com?subject=Ada?subject=Ada">Écrivez-nous vos remarques, suggestions ou encouragements…</a>
</p>
<div class="bloc-pied">
<p><br /><br /></p>
<div class="logo logo-imprim-vert"></div>
<div class="logo logo-pefc"></div>
<p class="cf-colophon">
<a href="https://cfeditions.com">C&amp;F éditions</a><br />
35 C rue des Rosiers, 14000 Caen<br />
Collection Jeunesse – ISSN en cours<br />
édition imprimée <a href="https://cfeditions.com/ada">ISBN 978-2-37662-075-4</a><br />
édition PDF <a href="https://cfeditions.com/ada">ISBN 978-2-37662-077-8</a><br />
édition web <a href="https://ada-lelivre.fr">ISBN 978-2-37662-081-5</a><br />
édition epub <a href="https://cfeditions.com/ada">ISBN 978-2-37662-076-1</a><br />
</p>
</div>
</div>
</article>
<footer>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="az.html">Lire Ada &amp; Zangemann</a></li>
<li><a href="traduction.html">La traduction</a></li>
<li><a href="remerciements.html">Remerciements</a></li>
<li><a href="auteurs.html">Les auteurs</a></li>
<li><a href="colophon.html">Colophon</a></li>
<li><a href="mailto:ada@cfeditions.com?subject=Ada?subject=Ada">Contact…</a></li>
<li class="livre"><a href="https://cfeditions.com/ada">Recevoir le livre…</a></li>
</ul>
<p class="soutien"><a href="https://cfeditions.com">C&amp;F éditions</a>, avec le soutien de la <a href="https://www.education.gouv.fr/direction-du-numerique-pour-l-education-dne-9983">Direction du numérique pour l’éducation du ministère de l’Éducation nationale et de la Jeunesse</a>.</p>
</footer>
<script src="./js/scripts.js" type="text/javascript"></script>
<script src="./js/ragadjust.js" type="text/javascript"></script>
<script type="text/javascript">
ragadjust('p', ['articles', 'determiners', 'pronouns', 'conjunctions', 'short_prepositions', 'prepositions'], ['en', 'mon']);
</script>
</body>
</html>
\ No newline at end of file
css/.DS_Store 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
css/ada.css 0 → 100644
+ 572
− 0
Voir le fichier @ 4d24b37c
@import url(reset.css);
@import url(vars.css);
@import url(fonts.css);
/* spec */
html {
height: 100%;
margin: 0;
padding: 0;
height: -webkit-fill-available;
}
body {
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
font-family:"Luciole", Helvetica, serif;
font-size: 1.8vw;
line-height: 1.4;
text-align: left;
color: hsla(219, 17%, 17%, 1.0);
}
body.index {
background-color: var(--light-green);
}
body.presentation {
background-color: var(--cyan2);
}
body.remerciements {
background-color: var(--pink);
}
body.traduction {
background-color: var(--light-green4);
}
body.auteurs {
background-color: var(--light-green4);
}
body.colophon {
background-color: var(--yellow3);
}
article p {
margin-bottom: 0.7em;
}
/* toolbox elements par defaut */
.clearer {
clear:both;
display:block;
font-size:0;
height:0;
line-height:0;
overflow:hidden;
}
.accessibility, .accessible, .hidden {
display:none !important;
}
.sup, sup {
display:inline;
font-size:.8em;
line-height:0;
vertical-align: super;
}
em, i {
font-style:italic;
}
b, strong {
font-weight:600;
}
a {
color:#1B3493;
}
hr {
border-top:1px solid #999;
}
/* document standard */
article {
padding: 10vw;
min-height: 70vh;
font-size: 0.7em;
line-height: 1.5em;
}
article figure {
width: 100%;
text-align: center;
margin: 1em 0;
}
article img {
display: block;
max-width: 100%;
margin: auto;
}
.ada-bio {
margin: 1em 0 2em 0;
}
.ada-une-ligne {
max-height: 4em;
}
/* page à page */
/* .ada-page {
display: grid;
height: 100vh;
border: 1px solid red;
overflow: hidden;
scroll-snap-align: center;
}
p {
padding: 0.5em 1em;
}
.ada-text-group {
padding: 0.5em 0;
} */
/* element par element */
.ada-page {
display: block;
}
.ada-text-group{
display: contents;
}
.az p {
height: 100vh;
height: 100dvh;
overflow: hidden;
scroll-snap-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
padding: 0 10vw;
}
span.alinea {
display: block;
width: 100%;
margin: 0.5em 0;
text-indent: 0;
}
/* figures */
.az figure {
height: 100vh;
height: 100dvh;
overflow: hidden;
scroll-snap-align: center;
margin: 0;
text-align: center;
max-width: 100%;
position: relative;
}
.az img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.longdesc-wrapper {
font-size: 0.5em;
line-height: 1.4;
text-align: left;
color: #555;
visibility: collapse;
height: 1px;
overflow: hidden;
direction: ltr;
}
.longdesc-details {
font-size: 0.7em;
line-height: 1.4;
text-align: left;
color: #777;
}
/* texte */
p.paragraphe-premier, p.premier, p.cf-premier {
text-indent:0mm;
}
p.paragraphe-lettrine, p.lettrine {
text-indent:2em;
padding-top:5em;
}
p.paragraphe-lettrine:first-letter {
font-size: 1.2em;
font-weight: bold;
}
span.lettrine {
font-weight: bold;
}
span.accroche {
font-family:Luciole, sans-serif;
}
ol {
margin: 0 0 0 1em;
padding: 0;
}
ol li {
margin: 0;
padding: 0;
}
/* enrichissement inline */
.superbold{
font-family:Luciole, sans-serif;
font-weight:700;
font-size:0.9em;
}
.cf-titre, .cf-citation, .cf-loc-etr, .cf-emphase {
font-style:italic;
}
.cf-petites-capitales, .cf-siecle {
font-variant:small-caps;
}
.cf-en-valeur {
font-weight: bold;
}
.cf-question {
font-weight: bold;
padding: 1em 0 1em 0;
}
.cf-exposant {
display:inline;
font-size:.8em;
line-height:0;
vertical-align:super;
}
.cf-url, .cf-hashtag {
display:inline;
font-family: Cousine, monospace;
font-size:0.85em;
line-height:0;
color:black;
text-decoration:none;
letter-spacing:-0.5px;
}
.point-final{
font-size:1.2em;
vertical-align:baseline;
}
/* titres */
h1, h2, h3, h4, h5, h6 {
break-after: avoid;
break-inside: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
h1.gros-titre{
font-size:3em;
line-height:1.2;
text-align:left;
hyphens:none;
}
h1,h2,h3{
font-family:Luciole, sans-serif;
font-weight:700;
hyphens:none;
margin:0;
}
h1{
font-size:1.4em;
line-height:1.3;
padding:2em 0 1em 0;
text-align: left;
margin: 0 0 2em 0;
padding: 0;
text-transform: uppercase;
}
.index h1 {
margin-bottom: 0;
}
h2{
font-size:1.2em;
line-height:1.3;
padding:2em 0 1em 0;
}
h3{
font-size:1.2em;
line-height:1.3;
padding:1em 0 0.7em 0;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
text-indent: 0;
}
/* paratexte */
h6.paratexte{
font-size:1em;
line-height:1.4;
font-weight:normal;
margin:0.6em 0 0.3em 0;
}
h6.paratexte, p.paratexte, p.ouvrage {
text-align:left;
text-indent:0;
}
p.ouvrage {
margin:0 0 0.3em 0;
}
p.ouvrage em {
font-weight:600;
}
.bloc-pied {
margin: 1em 0 0 0;
}
.petit-texte p, .petit-texte h6{
font-size: 0.9em;
line-height: 1.4;
margin:0 0 0.4em 0;
}
.tout-petit-texte p, .tout-petit-texte h6 {
font-size: 0.8em;
line-height: 1.4;
margin:0 0 0.4em 0;
}
.tout-petit-texte p:last-child {
margin:0;
}
p.soutien {
margin: 1em 0;
font-size: 0.8em;
line-height: 1.5;
}
.cf-signature {
font-size: 0.85em;
line-height: 1.5em;
text-align: right;
margin-top: 2em;
}
.mention {
display: block;
font-family: "Luciole", Helvetica, serif;
font-size: 1em;
margin-bottom: 0.3em;
}
/* colophon */
.cf-colophon p {
font-family:"Luciole", Helvetica, serif;
font-size:0.85em;
margin-top: 0.3em;
margin-bottom: 0.5em;
text-align:left;
text-indent: 0;
}
a.logo {
display: block;
width: 7em;
height: 3em;
background-repeat: no-repeat;
background-size: contain;
}
.logo-fsfe {
background-image: url(../images/logo-fsfe.png);
float: left;
margin-bottom: 0.5em;
}
/* pages de titre */
.cf-page-titre {
text-align:center;
margin: 2em 2em;
}
.cf-page-titre .cf-auteur{
/*font-family:Luciole, sans-serif;*/
font-size:1em;
padding-top:2em;
padding-bottom:1em;
text-align:left;
font-weight:600;
text-indent:0;
}
.cf-page-titre h1{
font-size: 2em;
line-height: 1.2;
padding: 2em 0 0 0;
}
.cf-page-titre h1,.page-titre h2{
text-indent:0;
text-align:center;
}
.cf-page-titre h2{
margin:-1em 0;
font-size: 1.2em;
text-align:center;
line-height:1.3;
}
.cf-page-titre .cf-collection {
font-family:"Luciole", Helvetica, serif;
text-align:center;
margin: 2em 0 -1em 0;
text-transform: uppercase;
}
.cf-page-titre .spacer {
height: 2em;
}
.cf-page-titre .cf-editeur
{
font-family:"Luciole", Helvetica, serif;
font-size:0.9em;
line-height:1.1;
margin: 4em 0 .4em 0;
text-align:center;
text-indent:0;
}
/* fonds de couleur */
.back-yellow {
background-color: var(--yellow);
}
.back-cyan {
background-color: var(--cyan);
}
.back-green {
background-color: var(--green);
}
.back-light-green {
background-color: var(--light-green);
}
.back-lavender {
background-color: var(--lavender);
}
.back-pink {
background-color: var(--pink);
}
.back-gray {
background-color: var(--gray);
}
/* Lettrines */
.ada-lettrine {
display: block;
float: left;
height: 4em;
width: 2em;
background-repeat: no-repeat;
background-size: contain;
background-position: left bottom;
}
.ada-lettrine .lettre {
display: block;
font-size: 1em;
opacity: 0.0001;
text-align: right;
}
.ada-lettrine.i-cyan {
width: 2.5em;
background-image: url(../images/I-cyan.png);
}
.ada-lettrine.d-red {
width: 3.9em;
background-image: url(../images/D-red1.png);
}
.ada-lettrine.l-green {
width: 3em;
background-image: url(../images/L-olive.png);
}
.ada-lettrine.l-fuscia {
width: 3em;
background-image: url(../images/L-fuscia.png);
}
.ada-lettrine.l-cyan {
width: 3em;
background-image: url(../images/L-lightcyan.png);
}
.ada-lettrine.z-brown {
width: 3.4em;
background-image: url(../images/Z-brown.png);
}
.ada-lettrine.l-red {
width: 3em;
background-image: url(../images/L-red2.png);
}
.ada-lettrine.m-yellow {
width: 5em;
background-image: url(../images/M-yellow.png);
}
.ada-lettrine.t-pink {
width: 3.2em;
background-image: url(../images/T-pink.png);
}
.ada-lettrine.u-green {
width: 3.7em;
background-image: url(../images/U-green.png);
}
.ada-lettrine.a-violet {
width: 3.9em;
background-image: url(../images/A-violet.png);
}
.ada-lettrine.e-yellow {
width: 3em;
background-image: url(../images/E-yellow.png);
}
a.cta {
display: inline-block;
margin: 1em;
background-color: yellow;
color: var(--red);
padding: 1em 2em;
text-decoration: none;
transition: all 0.5s;
}
a.cta:hover {
background-color: var(--red);
color: yellow;
}
.editions figure {
background-color: white;
}
.editions figure img {
max-width: 50%;
margin: 0.5em auto;
}
\ No newline at end of file
css/fonts.css 0 → 100644
+ 33
− 0
Voir le fichier @ 4d24b37c
/* fonts */
@font-face{
font-family:"Luciole";
src:url(../fonts/Luciole-Regular.ttf);
font-weight:400;
font-style: normal;
}
@font-face{
font-family:"Luciole";
src:url(../fonts/Luciole-Regular-Italic.ttf);
font-weight:400;
font-style: italic;
}
@font-face{
font-family:"Luciole";
src:url(../fonts/Luciole-Bold.ttf);
font-weight:700;
font-style: normal;
}
@font-face{
font-family:"Luciole";
src:url(../fonts/Luciole-Bold-Italic.ttf);
font-weight:700;
font-style: italic;
}
/* monospace - code et url */
@font-face {
font-family:"Cousine";
src:url(../fonts/Cousine-Regular.ttf) format("truetype");
font-style:normal;
font-weight:400;
}
css/navigation.css 0 → 100644
+ 150
− 0
Voir le fichier @ 4d24b37c
/* navigation */
nav.main-menu {
position: absolute;
top: 0;
left: 0;
z-index: 200;
font-size: 1rem;
text-transform: uppercase;
padding: 1em;
}
nav.main-menu ul {
display: none;
list-style-type: none;
line-height: 1.8;
margin-top: 0em;
padding: 1em;
background-color: rgba(255, 255, 255, 0.96);
text-shadow: 0px 0px 7px rgba(255, 255, 255, 1);
border-radius: 1em;
border: 2px solid var(--light-green);
box-shadow: 0 0 5px var(--light-green);
max-height: calc(100vh - 5em);
overflow-y: auto;
}
nav.main-menu label {
font-size: 2.5em;
text-shadow: 3px 3px 4px rgba(255, 255, 255, 0.8);
cursor: pointer;
}
nav.main-menu input {
position: absolute;
cursor: pointer;
top: -100px;
left: -100px;
}
nav.main-menu li.livre a {
display: block;
height: 170px;
width: 100%;
background-repeat: no-repeat;
background-image: url(../images/ada-300.png);
background-position: left 2em;
background-size: 72%;
transition: all 1s;
}
nav.main-menu input[type=checkbox]:checked~ul {
display: block;
}
nav.main-menu a {
text-decoration: none;
color: black;
}
nav.main-menu a:hover {
text-decoration: none;
/* font-weight: 600; */
}
/* hint */
.hint {
position: absolute;
width: 100vw;
bottom: 2rem;
left: 0;
z-index: 200;
font-size: 3rem;
text-align: center;
animation: 2s ease-out 1s forwards sun-rise;
text-shadow: 5px 5px 7px rgba(0,0,0,0.3);
opacity: 0;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(0%);
opacity: 1;
}
to {
/* returns the sun to its default position */
transform: translateY(150%);
opacity: 0;
}
}
@keyframes to-left {
from {
/* pushes the sun down past the viewport */
transform: translateX(0%);
opacity: 1;
}
to {
/* returns the sun to its default position */
transform: translateX(-150%);
opacity: 0;
}
}
@keyframes to-right {
from {
/* pushes the sun down past the viewport */
transform: translateX(0%);
opacity: 1;
}
to {
/* returns the sun to its default position */
transform: translateX(150%);
opacity: 0;
}
}
/* Footer */
footer {
padding: 3vw 10vw;
font-size: 0.9rem;
line-height: 1.5em;
}
footer ul {
list-style-type: none;
columns: 2;
}
footer li {
}
footer a {
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
\ No newline at end of file
css/reset.css 0 → 100644
+ 11
− 0
Voir le fichier @ 4d24b37c
/* reset */
a,abbr,acronym,address,blockquote,body,caption,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,form,h1,h2,h3,h4,h5,h6,html,img,label,legend,li,ol,p,pre,q,span,table,tbody,td,tfoot,th,thead,tr,ul {
border:0;
margin:0;
padding:0;
line-height: inherit;
box-sizing: border-box;
}
css/responsive.css 0 → 100644
+ 149
− 0
Voir le fichier @ 4d24b37c
/* responsive */
@media print {
nav.main-menu {
display: none;
}
}
@media screen {
body.az {
overflow: hidden;
}
.conte {
height: 100vh;
height: 100dvh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
}
@media only screen and (min-width: 1300px) {
body {
font-size: 1.8vw;
}
article {
padding: 5vw 20vw;
}
footer {
font-size: 0.6em;
padding: 1vw 20vw 3vw 20vw;
}
nav.main-menu {
position: fixed;
}
body.page nav.main-menu ul {
display: block !important;
background-color: rgba(255,255,255,0.5);
}
}
@media only screen and (max-width: 1299px) {
body {
font-size: 2.5vw;
}
}
@media only screen and (min-width: 761px) {
.ada-portrait-matthias {
float: left;
width: 40%;
margin-top: 1.5em;
margin-right: 1em;
}
.ada-portrait-sandra {
float: right;
width: 40%;
margin-left: 1em;
}
}
@media only screen and (max-width: 760px) {
body {
font-size: 3vw;
}
article {
padding: 15vw 10vw;
font-size: 0.9em;
line-height: 1.5em;
}
nav.main-menu {
font-size: 16px;
}
figure.horizontal-scroll {
text-align: left;
overflow-x: auto;
}
figure.horizontal-scroll.on-screen:before {
position: absolute;
content:"👉";
text-shadow: 5px 5px 7px rgba(0,0,0,0.3);
font-size: 3em;
right: 10px;
top: 45%;
z-index: 150;
animation: 1s ease-out 0.5s forwards to-right;
}
figure.horizontal-scroll.reverse.on-screen:before {
content:"👈";
right: auto;
left: 10px;
animation: 1s ease-out 0.5s forwards to-left;
}
figure.horizontal-scroll.reverse {
direction: rtl;
}
figure.horizontal-scroll img {
width: auto;
height: 100%;
object-fit: contain;
padding: 15% 0;
}
p.auteur {
text-align: right;
}
a.cta {
margin: 1em 0;
}
.editions figure img {
max-width: 100%;
margin: 0.5em auto;
}
}
@media only screen and (max-width: 845px) and (orientation:landscape) {
body {
font-size: 2.5vw;
}
figure.horizontal-scroll.on-screen:before {
display: none;
}
figure img, figure.horizontal-scroll img {
padding: 0
}
figure.horizontal-scroll img {
width: 100%;
height: 100%;
}
}
@media only screen and (max-width: 400px) {
body {
font-size: 4.2vw;
}
article {
padding: 10vw;
font-size: 1em;
line-height: 1.5em;
}
article h1 {
text-align: right;
}
}
\ No newline at end of file
css/tweaks.css 0 → 100644
+ 118
− 0
Voir le fichier @ 4d24b37c
/* tweaks */
#ada04 img {
object-position: left bottom;
padding-bottom: 0;
}
#ada08 img {
padding: 4em;
}
#ada08a img {
object-position: right center;
}
#ada10 {
background-color: var(--light-green);
}
#ada10 img {
object-position: right bottom;
}
#ada11 {
background-color: var(--light-green3);
}
/* #ada11 img {
object-fit: cover;
object-position: left center;
} */
#ada12 {
background-color: var(--yellow);
}
#ada12 img {
object-position: left bottom;
padding-bottom: 0;
}
#ada13 img {
object-position: right bottom;
}
#ada16 img {
padding: 0;
}
#ada19 img {
padding: 4em;
}
#ada21 {
background-color: var(--yellow2);
}
#ada23 {
background-color: var(--light-green2);
}
#ada23 img {
object-position: center bottom;
}
#ada27 img {
/* object-fit: cover; */
/* object-position: right bottom; */
padding: 0;
}
#ada29 {
background-color: var(--pink);
}
#ada32 img {
padding: 0;
}
#ada34 {
background-color: var(--gray);
}
#ada40 {
background-color: var(--yellow3);
}
#ada40 img {
/* object-fit: cover; */
/* object-position: right center; */
}
#ada46:after {
display: block;
width: 100%;
height: 50%;
top: 0;
left: 0;
position: absolute;
background-color: var(--gray2);
content: " ";
z-index: 0;
}
#ada46 img {
position: relative;
z-index: 100;
padding: 0;
}
#ada51 img {
z-index: 100;
object-position: right top;
}
body.auteurs img {
mix-blend-mode: multiply;
}
\ No newline at end of file
css/vars.css 0 → 100644
+ 21
− 0
Voir le fichier @ 4d24b37c
/* colors */
:root {
--yellow: hsla(51, 95%, 73%, 1.0);
--yellow2: hsla(55, 91%, 73%, 1.0);
--yellow3: hsla(50, 100%, 78%, 1.0);
--green: hsla(174, 37%, 49%, 1.0);
--light-green: hsla(181, 34%, 74%, 1.0);
--light-green2: hsla(187, 36%, 69%, 1.0);
--light-green3: hsla(181, 46%, 70%, 1.0);
--light-green4: hsla(181, 34%, 82%, 1.0);
--cyan: hsla(203, 67%, 71%, 1.0);
--cyan2: hsla(203, 67%, 80%, 1.0);
--lavender: hsla(222, 53%, 78%, 1.0);
--pink: hsla(341, 74%, 82%, 1.0);
--gray: hsla(352, 7%, 81%, 1.0);
--gray2: hsla(165, 14%, 70%, 1.0);
--red: hsla(352, 95%, 63%, 1.0);
}
\ No newline at end of file
favicon.png 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
favicon.png

5,32 ko

fonts/Cousine-Regular.ttf 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
fonts/Luciole-Bold-Italic.ttf 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
fonts/Luciole-Bold.ttf 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
fonts/Luciole-Regular-Italic.ttf 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
fonts/Luciole-Regular.ttf 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
images/.DS_Store 0 → 100644
+ 0
− 0
Voir le fichier @ 4d24b37c
Fichier ajouté
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter