feat: responsive design

Fixes #24
fix(a11y): correction du contraste sur la sidebar
2024-07-05 10:54:06 +02:00 · 2024-07-05 10:07:30 +02:00 · 2024-07-05 10:02:38 +02:00
16 changed files with 143 additions and 38 deletions
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@ -1,11 +1,8 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
+
-  <div>
+<h1>{{ eleventyNavigation.key }}</h1>
    {{ content | safe }}
  </div>
 </main>
 <aside>
  <div id="more-info">
@ -13,3 +10,9 @@ layout: layouts/parent.njk
  {{ content | toc | safe }}
  </div>
 </aside>
 <main id="skip">
  <div>
    {{ content | safe }}
  </div>
 </main>
--- a/_includes/layouts/parent.njk
+++ b/_includes/layouts/parent.njk
@ -19,6 +19,13 @@
 	</head>
 	<body>
 		<svg class="d-none" alt="">
 			<symbol id="icon-bars" viewBox="0 0 32 32">
 				<path d="M30 24v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 15v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 6v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1z"></path>
 			</symbol>
 		</svg>
 		<a href="#skip" class="visually-hidden">Skip to main content</a>
 		<nav id="sidebar">
 				{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({anchorClass: "itemLink",activeAnchorClass: "active",activeListItemClass: "active",activeKey: eleventyNavigation.key, listClass: "nav", listItemClass: "item"}) | safe }}
@ -26,10 +33,13 @@
 		<div class="wrapper">
 		  {{ content | safe }}
 			<footer><a href="https://quarante-douze.net/"><img src="/img/qdouze.gif" alt="" /><span class="visually-hidden">Site hébergé par Fanstuff Garden.</span></a>  <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" alt="" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
 		</div>
 		<footer><a href="https://quarante-douze.net/"><img src="/img/qdouze.gif" alt="" /><span class="visually-hidden">Site hébergé par Fanstuff Garden.</span></a>  <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" alt="" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
-		<!-- Current page: {{ page.url | htmlBaseUrl }} -->
+		<button id="mobile-button" class="menu-button"><svg class="icon icon-bars" alt=""><use xlink:href="#icon-bars"></use></svg> <span class="sr-only">Afficher le menu</span></button>
 		<script src="/js/mobile-sidebar.js"></script>
 	</body>
 </html>
--- a/content/about.md
+++ b/content/about.md
@ -6,8 +6,6 @@ eleventyNavigation:
  order: 0
 ---
 # À propos
 {{ metadata.title }} est un site de présentation de site web et créateurs web indépendants (créateurs au sens large) francophone, visant à permettre de découvrir des sujets ou des projets intéressants.
 ## Pourquoi ?
--- a/content/autres.md
+++ b/content/autres.md
@ -5,8 +5,6 @@ eleventyNavigation:
  order: 2
 ---
 # La gare - Sites similaires
 La gare recense d'autres projets similaire à celui de {{ metadata.title }}, c'est à dire d'autres travaux de curations qui peuvent exister à travers le web. À noter que contrairement aux *quatiers*, cette liste ne contient pas que des sites francophones, mais aussi des listings anglophones.
 ## Sites légers
--- a/content/contribuer.md
+++ b/content/contribuer.md
@ -5,8 +5,6 @@ eleventyNavigation:
  order: 10
 ---
 # Contribuer à {{ metadata.title }}
 {{ metadata.title }} est un projet open-source, dont [le code source est disponible sur Codeberg](https://codeberg.org/Kazhnuz/tramweb/) et qui est hébergé par Quarante-Douze. Toutes les contributions sont les bienvenues, tant qu'elles participent à aider à construire un annuaire de site web sain et anti-oppression.
 Il y a plusieurs manière de contribuer à la liste et de nous aider à la rendre le mieux possible !
--- a/content/districts/arcadia.md
+++ b/content/districts/arcadia.md
@ -7,8 +7,6 @@ eleventyNavigation:
  description: Jeux vidéos, jeux en ligne et jeux de sociétés.
 ---
 # La salle d'arcade
 Arcadia est le district des jeux vidéos et de tout ce qui est jeux en général. Cela peut être aussi bien pour *parler* de jeux vidéo que pour jouer à des jeux.
 ## Sites de jeux-vidéo
--- a/content/districts/cyberspace.md
+++ b/content/districts/cyberspace.md
@ -7,8 +7,6 @@ eleventyNavigation:
  description: Informatique, technologie et tout ce qui tourne autour.
 ---
 # Le cyberspace
 Le cyberspace est le district qui parle de numérique et de technologie en générale ! Ici, vous retrouverez tout ce qui est lié à la bidouille, aux ordinateurs, mais aussi potentiellements aux autres types de matériels.
 ## Disussions informatiques
--- a/content/districts/index.md
+++ b/content/districts/index.md
@ -5,8 +5,6 @@ eleventyNavigation:
  order: 1
 ---
 # Les quartiers
 Les quartiers sont le coeur de {{ metadata.title }} (et sont inspiré des districts de Goecities/Neocities districts). Il s'agit des grands types de sujets dans lesquels sont regroupés les sites. 
 Les noms sont inspirés (mais ne seront pas forcément repris tel quel) de [la liste des districts](http://www.geocities.ws/NapaValley/2022/cities.html) de Neocities.
--- a/content/districts/lgbt.md
+++ b/content/districts/lgbt.md
@ -7,8 +7,6 @@ eleventyNavigation:
  description: Sites liés aux questions LGBT+
 ---
 # Le centre LGBT+
 Le centre LGBT+ est l'ensemble des sites liés aux questions LGBT+ ! Il a sa propre page plutôt que d'être une sous-partie pour pouvoir regrouper (à noter que cependant, les sites de personnes LGBTs n'y sont pas mis sauf si iels parlent principalement de sujets LGBT+ Genre quelqu'un parlant de cinéma mais qui serait bi sera dans la section cinéma, sauf si son site est spécialisé en "le cinéma et les identités LGBT+").
 ## Sites d'associations
--- a/content/districts/mediatheque.md
+++ b/content/districts/mediatheque.md
@ -7,8 +7,6 @@ eleventyNavigation:
  description: Littérature, BD, films et musique.
 ---
 # La médiathèque
 La médiathèque est le district de la création ! Littérature, BD, films, musiques… ici vous pourrez trouver un accès à de nombreuses créations qui peuvent vous intéresser !
 ## Source de textes
--- a/content/districts/resto.md
+++ b/content/districts/resto.md
@ -7,8 +7,6 @@ eleventyNavigation:
  description: Alimentation et lifestyle.
 ---
 # Les bars et restaurants
 Les bars et restaurants sont le quartier de la nourriture, de l'alimentation et des modes de vies ! Vegetarisme, alimentation, et autres choix pour mener sa vie y sont discuté.
 ## Végé & vegan
--- a/content/districts/universite.md
+++ b/content/districts/universite.md
@ -7,8 +7,6 @@ eleventyNavigation:
  description: Sciences de la nature et sciences sociales.
 ---
 # L'université
 L'université est le district des sciences de la natures et des sciences sociales. Vous y pourrez trouver de nombreux endroits qui parlent d'informations scientifiques et universitaires.
 ## Sciences sociales
--- a/content/plateformes.md
+++ b/content/plateformes.md
@ -1,12 +1,10 @@
 ---
 layout: layouts/base.njk
 eleventyNavigation:
-  key: Services du web indé
+  key: Plateformes indépendantes
  order: 9
 ---
 # Plateformes indépendants
 Cette liste de site est séparée des autres, parce que le but est de présenter les "plateformes" et services du web indépendants. Tout ce qui est hébergements, moteurs de recherches, etc. à pour but d'être ici. Le but de ce site est de montrer qu'il existe des alternatives au web corporate même en terme de services.
 Cette liste, contrairement aux autres, **contient des sites anglphones** puisqu'elle traite de services notamment d'hébergement, et où vous pourrez trouver de nombreux sites.
--- a/public/css/index.css
+++ b/public/css/index.css
@ -33,6 +33,8 @@
  --color-gray-20: #e0e0e0;
  --color-gray-50: #C0C0C0;
  --color-gray-90: #2f2f2f;
  --sidebar-width: 280px;
  --main-width: 800px;
 	/* --text-color is assigned to --color-gray-_ above */
 	--text-color-link: #c92a2a;
@ -40,7 +42,7 @@
 	--text-color-link-visited: #c92a2a;
  --background-color: #fafafa;
-  --background-menu: #495057;
+  --background-menu: #212529;
 	--text-color: var(--color-gray-90);
@ -73,6 +75,7 @@ body {
 	min-height:100%;
 	font-family: var(--font-family);
 	color: var(--text-color);
  font-size: 16px;
 }
 body {
@ -80,7 +83,7 @@ body {
 }
 .wrapper {
-  width: 800px;
+  max-width: var(--main-width);
  margin: auto;
  position: relative;
 }
@ -204,15 +207,17 @@ header h1 a[href] {
  box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.4);
 }
 #sidebar.shown {
  left: 0;
 }
 #sidebar > ul > li {
  margin:0;
  padding:3px;
 }
 main {
  background-color: var(--background-color);
  line-height:1.5rem;
  width: 800px;
  margin: auto;
 }
@ -318,8 +323,9 @@ aside {
 }
 #sidebar {
-  min-width:280px;
+  min-width:var(--sidebar-width);
-  width:280px;
+  width:var(--sidebar-width);
  z-index:10;
 }
 #more-info {
@ -329,11 +335,109 @@ aside {
 footer {
  text-align:right;
-  margin: auto;
+  width: 100%;
  width: 800px;
 }
 iframe {
  border: none;
 }
 .menu-button {
  display: none;
 }
@media screen and (max-width: 1400px) {
  .wrapper {
    margin-left: var(--sidebar-width);
    position: relative;
  }
  aside {
    position: static !important;
  }
  #more-info {
    position: static;
    border-left: 3px solid #e03131;
    padding: 6px;
  }
 }
 .d-none {
  display: none;
 }
 .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  color: currentColor;
  position: relative;
 }
 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  transition-delay: .8s;
  transition-property: opacity;
  transition-duration: 0.2s;
 }
@media screen and (max-width: 1000px) {
  #sidebar {
    left: calc(-1* var(--sidebar-width));
  }
  .wrapper {
    margin: .5rem;
  }
  .menu-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 0.75em;
    border: none;
    font-size: 1.2rem;
    display: flex;
    align-content: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 999px;
    z-index: 12;
  }
  .menu-button:hover {
    background-color: var(--text-color-link);
  }
 }
@media screen and (max-width: 600px) {
  header h1 a[href] {
    font-size: 5rem;
  }
 }
@media screen and (max-width: 460px) {
  header h1 a[href] {
    font-size: 4.5rem;
  }
 }
@media screen and (max-width: 390px) {
  header h1 a[href] {
    font-size: 4rem;
  }
 }
--- a/public/img/back.jpg
+++ b/public/img/back.jpg
--- a/public/js/mobile-sidebar.js
+++ b/public/js/mobile-sidebar.js
@ -0,0 +1,10 @@
 document.getElementById('mobile-button').addEventListener('click', function () {
  const sidebar = document.getElementById('sidebar');
  if (!sidebar.classList.contains('shown')) {
    sidebar.classList.remove('hidden');
    sidebar.classList.add('shown');
  } else {
    sidebar.classList.remove('shown');
    sidebar.classList.add('hidden');
  }
 });
Author	SHA1	Message	Date
Kazhnuz	f971b96b02	feat: responsive design All checks were successful continuous-integration/drone/push Build is passing Details Fixes #24	2024-07-05 10:54:06 +02:00
Kazhnuz	b79d6132fb	fix(a11y): correction du contraste sur la sidebar	2024-07-05 10:07:30 +02:00
Kazhnuz	18853eac60	fix: utilisation d'une image plus petite pour le fond	2024-07-05 10:02:38 +02:00