quarante-douze/tramway
1
0
Fork 0
Code Wiki Activity

feat: responsive design
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Fixes #24
This commit is contained in:
Kazhnuz 2024-07-05 10:54:06 +02:00
parent b79d6132fb
commit f971b96b02
15 changed files with 142 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
_includes/layouts/base.njk
View file

@ -1,11 +1,8 @@
--- ---
layout: layouts/parent.njk layout: layouts/parent.njk
--- ---
<main id="skip">
<div> <h1>{{ eleventyNavigation.key }}</h1>
{{ content | safe }}
</div>
</main>
<aside> <aside>
<div id="more-info"> <div id="more-info">
@ -13,3 +10,9 @@ layout: layouts/parent.njk
{{ content | toc | safe }} {{ content | toc | safe }}
</div> </div>
</aside> </aside>
<main id="skip">
<div>
{{ content | safe }}
</div>
</main>

14
_includes/layouts/parent.njk
View file

@ -19,6 +19,13 @@
</head> </head>
<body> <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> <a href="#skip" class="visually-hidden">Skip to main content</a>
<nav id="sidebar"> <nav id="sidebar">
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({anchorClass: "itemLink",activeAnchorClass: "active",activeListItemClass: "active",activeKey: eleventyNavigation.key, listClass: "nav", listItemClass: "item"}) | safe }} {{ 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"> <div class="wrapper">
{{ content | safe }} {{ content | safe }}
</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> <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>
<!-- 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> </body>
</html> </html>

2
content/about.md
View file

@ -6,8 +6,6 @@ eleventyNavigation:
order: 0 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. {{ 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 ? ## Pourquoi ?

2
content/autres.md
View file

@ -5,8 +5,6 @@ eleventyNavigation:
order: 2 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. 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 ## Sites légers

2
content/contribuer.md
View file

@ -5,8 +5,6 @@ eleventyNavigation:
order: 10 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. {{ 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 ! Il y a plusieurs manière de contribuer à la liste et de nous aider à la rendre le mieux possible !

2
content/districts/arcadia.md
View file

@ -7,8 +7,6 @@ eleventyNavigation:
description: Jeux vidéos, jeux en ligne et jeux de sociétés. 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. 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 ## Sites de jeux-vidéo

2
content/districts/cyberspace.md
View file

@ -7,8 +7,6 @@ eleventyNavigation:
description: Informatique, technologie et tout ce qui tourne autour. 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. 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 ## Disussions informatiques

2
content/districts/index.md
View file

@ -5,8 +5,6 @@ eleventyNavigation:
order: 1 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 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. 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.

2
content/districts/lgbt.md
View file

@ -7,8 +7,6 @@ eleventyNavigation:
description: Sites liés aux questions LGBT+ 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+"). 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 ## Sites d'associations

2
content/districts/mediatheque.md
View file

@ -7,8 +7,6 @@ eleventyNavigation:
description: Littérature, BD, films et musique. 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 ! 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 ## Source de textes

2
content/districts/resto.md
View file

@ -7,8 +7,6 @@ eleventyNavigation:
description: Alimentation et lifestyle. 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é. 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 ## Végé & vegan

2
content/districts/universite.md
View file

@ -7,8 +7,6 @@ eleventyNavigation:
description: Sciences de la nature et sciences sociales. 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. 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 ## Sciences sociales

4
content/plateformes.md
View file

@ -1,12 +1,10 @@
--- ---
layout: layouts/base.njk layout: layouts/base.njk
eleventyNavigation: eleventyNavigation:
key: Services du web indé key: Plateformes indépendantes
order: 9 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 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. 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.

118
public/css/index.css
View file

@ -33,6 +33,8 @@
--color-gray-20: #e0e0e0; --color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0; --color-gray-50: #C0C0C0;
--color-gray-90: #2f2f2f; --color-gray-90: #2f2f2f;
--sidebar-width: 280px;
--main-width: 800px;
/* --text-color is assigned to --color-gray-_ above */ /* --text-color is assigned to --color-gray-_ above */
--text-color-link: #c92a2a; --text-color-link: #c92a2a;
@ -73,6 +75,7 @@ body {
min-height:100%; min-height:100%;
font-family: var(--font-family); font-family: var(--font-family);
color: var(--text-color); color: var(--text-color);
font-size: 16px;
} }
body { body {
@ -80,7 +83,7 @@ body {
} }
.wrapper { .wrapper {
width: 800px; max-width: var(--main-width);
margin: auto; margin: auto;
position: relative; position: relative;
} }
@ -204,15 +207,17 @@ header h1 a[href] {
box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.4); box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.4);
} }
#sidebar.shown {
left: 0;
}
#sidebar > ul > li { #sidebar > ul > li {
margin:0; margin:0;
padding:3px; padding:3px;
} }
main { main {
background-color: var(--background-color);
line-height:1.5rem; line-height:1.5rem;
width: 800px;
margin: auto; margin: auto;
} }
@ -318,8 +323,9 @@ aside {
} }
#sidebar { #sidebar {
min-width:280px; min-width:var(--sidebar-width);
width:280px; width:var(--sidebar-width);
z-index:10;
} }
#more-info { #more-info {
@ -329,11 +335,109 @@ aside {
footer { footer {
text-align:right; text-align:right;
margin: auto; width: 100%;
width: 800px;
} }
iframe { iframe {
border: none; 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;
}
}

10
public/js/mobile-sidebar.js Normal file
View file

@ -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');
}
});