feat: responsive design
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Fixes #24
This commit is contained in:
Kazhnuz
parent
b79d6132fb
commit
f971b96b02
15 changed files with 142 additions and 37 deletions
|
|
@ -1,11 +1,8 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<h1>{{ eleventyNavigation.key }}</h1>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
</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>
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 ?
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 !
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
width:280px;
|
||||
min-width:var(--sidebar-width);
|
||||
width:var(--sidebar-width);
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
#more-info {
|
||||
|
|
@ -329,11 +335,109 @@ aside {
|
|||
|
||||
footer {
|
||||
text-align:right;
|
||||
margin: auto;
|
||||
width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
10
public/js/mobile-sidebar.js
Normal file
10
public/js/mobile-sidebar.js
Normal 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');
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue