Initial commit. 4e version de la khnav.

This commit is contained in:
Zatalyz 2020-06-05 16:04:58 +02:00
commit b3817cbc35
30 changed files with 653 additions and 0 deletions

7
README.md Normal file
View file

@ -0,0 +1,7 @@
Si vous souhaitez modifier cette barre, gardez à l'esprit qu'elle sera appelée dans des CMS variés, embarquant leur propre css, librairies, etc.
- Préfixez toutes les classes et toutes les fonctions par .khnav_
- N'utilisez JAMAIS un terme générique. Ne modifiez pas le style des balises de base (body, html, div, etc).
- Tout doit fonctionner sans javascript. Mais le javascript peut apporter du confort d'utilisation, c'est un usage acceptable.
- Cette barre doit être accessible et responsive, vérifiez que chacune de vos modifications obéit à ces deux critères.
- Les liens doivent être absolus depuis la racine du site (après /var/www) dans la barre de nav pour marcher depuis tout les CMS.

248
css/khnav.css Normal file
View file

@ -0,0 +1,248 @@
/* Feuille css pour la barre générale de Khaganat et son footer */
/* violet khaganat : #8530bf */
.khnav_gen {
margin-top: 0;
padding-top: 0;
display:flex;
justify-content: space-between;
align-items: center;
z-index: 800;
background-color: white;
color: #8530bf;
border-bottom: 2px solid #8530bf;
}
.khnav_mobile, .khnav_input_mobile, .khnav_gen label {
display:none;
}
/* Partie toujours visible, sur la ligne principale */
.khnav_nav1, .khnav_connect {
list-style: none;
display:inline-flex;
padding: 0 1em;
margin: 0;
line-height: 3em;
z-index: 800;
}
.khnav_dropdown {
margin: 0 0.3em;
min-width: 6.6em;
}
.khnav_dropdown:hover, .khnav_dropdown:focus {
background-color: #8530bf;
color: white;
}
.khnav_dropdown .khnav_dropdown-toggle {
padding: 0 0.3em 0 1em;
}
.khnav_dropdown ul {
/*display:none; Pas accessible !!! */
clip: rect(0, 0, 0, 0); /* Déprécié mais ici pour les anciens navigateurs */
clip-path: ellipse(0px 0px at 0% 0%);
}
.khnav_dropdown:hover ul, .khnav_dropdown:focus ul {
display:block;
clip: initial;
clip-path: initial;
}
.khnav_dropdown-toggle {
}
.khnav_fleche {
display: inline-block;
border-top: 4px solid #000000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin: 0 0.5em;
}
/* Logo, au milieu (sauf sur mobile */
.khnav_logo {
position:absolute;
top: 0;
width: 100%;
}
.khnav_logo_container {
display: flex;
margin: 0 auto;
justify-content: center;
height: 3.5em;
}
.khnav_logo_bg {
background-color: #8530bf;
color:white;
display: flex;
align-items: center;
}
.khnav_logo_bg:after {
border-right: 2em solid transparent;
border-top: 3.5em solid #8530bf;
margin-right: -2em;
content: " ";
}
.khnav_logo_bg:before {
border-left: 2rem solid transparent;
border-top: 3.5rem solid #8530bf;
margin-left: -2em;
content: " ";
}
.khnav_logo_bg img {
max-width: 2em;
margin: 0;
padding:0;
padding-bottom: 0.3em;
vertical-align: inherit;
}
/*e éléments sur la droite */
/*.khnav_connect {
padding: 0 1em;
border: 1px solid #8530bf;
}*/
/* Dans les menus déroulants */
.khnav_dropdown-menu {
display: flex;
flex-direction:column;
padding:0;
list-style: none;
position: absolute;
z-index: 800;
margin:0;
line-height: 1.5em;
}
.khnav_biseaubottom {
border-style : solid;
border-color : white transparent transparent transparent;
border-width : 0.5em;
padding: 0;
background-color: transparent !important;
}
.khnav_dropdown-menu hr {
border: solid #9073ff ;
margin:0;
border-width: 0 0 1px;
}
.khnav_dropdown-menu li {
margin: 0;
background-color: white;
}
.khnav_dropdown-menu li a {
display:block;
padding: 0.1em 1em;
}
.khnav_dropdown-menu li a:hover, .khnav_dropdown-menu li a:focus {
background-color: #8530bf;
color: white;
}
/* Partie "description" des items de menus */
.khnav_dropdown-menu li a aside {
position: absolute;
left: 100%;
top: 0;
width:20em;
border: 1px solid #9073ff;
/*Cacher*/
clip: rect(0, 0, 0, 0); /* Déprécié mais ici pour les anciens navigateurs */
clip-path: ellipse(0px 0px at 0% 0%);
}
.khnav_dropdown-menu li a:hover aside, .khnav_dropdown-menu li a:focus aside {
display:block;
/* Montrer */
clip: initial;
clip-path: initial;
}
.khnav_dropdown-menu li a:hover aside h3, .khnav_dropdown-menu li a:focus aside h3 {
text-align: center;
margin:0;
background-color: #8530bf;
color: white;
padding: 0.5em;
}
.khnav_dropdown-menu li a:hover aside div, .khnav_dropdown-menu li a:focus aside div {
margin:0;
background-color: white;
color: #2d1040;
padding: 0.5em;
}
.khnav_dropdown-menu img {
max-width: 1.5em;
}
/* Pied de page */
#khfooter_bottom {
/*position: absolute;*/
bottom: 0;
width: 100%;
}
.khfooter {
padding: 0;
display: flex;
margin: 0 auto;
justify-content: center;
}
.khfooter a {
color:#8530bf;
padding: 0 0.75em;
}
.khfooter div {
background-color: white;
color: #8530bf;
line-height: 2.5em;
display: flex;
align-items: center;
}
.khfooter div img {
max-height: 1.25em;
padding: 0.5em;
}
.khfooter:after {
border-right: 2.5em solid transparent;
border-bottom: 2.5em solid white;
margin-right: -2.5em;
content: " ";
}
.khfooter:before {
border-left: 2.5rem solid transparent;
border-bottom: 2.5rem solid white;
margin-left: -2.5em;
content: " ";
}
/* Accessibilité */
/* lien d'évitement ; pour accessibilité */
.khnav_skip,
.khnav_skip a
{
position: absolute;
clip: rect(0, 0, 0, 0); /* Déprécié mais ici pour les anciens navigateurs */
clip-path: ellipse(0px 0px at 0% 0%);
}

117
css/khnav_mobile.css Normal file
View file

@ -0,0 +1,117 @@
/* Feuille css, partie "moins de 900px de large" pour la barre générale de
Khaganat et son footer. */
@media screen and (max-width: 900px) {
.khnav_sticky {
position:sticky;
top:0;
z-index: 999;
height:3em;
}
.khnav_mobile {
display:flex;
width: 100%;
justify-content: space-between;
align-items: flex-start;
/*position:sticky;*/
top:0;
z-index: 999;
height:3em;
}
.khnav_logo {
display:none;
}
.khnav_mobile_square {
height:100%;
background-color:bisque;
display: flex;
}
.khnav_mobile > a {
height:100%;
}
.khnav_logo_mobile {
max-width: 2em;
margin: 0;
padding:0.5em;
vertical-align: inherit;
background-color: #8530bf;
}
.khnav_mobile_square label,
.khnav_open_menu, khnav_close_menu {
height:100%;
display: flex;
}
/* Pour afficher le menu au clic sur le bouton
"~" sélectionne tous les "nav ul" suivant
cf https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_CSS#Les_combinateurs
*/
.khnav_input_mobile[type=checkbox]:checked ~ nav ul {
display:flex;
}
.khnav_input_mobile[type=checkbox]:checked ~ nav {
border-bottom: 0.5em solid #8530bf !important ;
}
.khnav_gen {
flex-flow : column wrap;
border:none;
overflow: auto;
max-height: 80vh;
display:block;
}
.khnav_gen ul {
display: none;
flex-flow : column wrap;
width:100%;
background: #8530bf;
padding-left: 0;
color:white;
padding:0;
}
.khnav_dropdown ul {
display: flex;
position: relative;
clip: initial;
clip-path: initial;
}
.khnav_dropdown-toggle {
}
.khnav_fleche {
display: none;
}
.khnav_dropdown-menu li a:hover aside {
display: none;
}
.khnav_connect {
}
/* Pied de page */
.khfooter::before {
display: none;
}
.khfooter::after {
display: none;
}
.khfooter div {
flex-flow: row wrap;
justify-content: center;
}
}

BIN
img/blog.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,003 B

BIN
img/chat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
img/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
img/cloud.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/contact.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
img/contact2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
img/download.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
img/forum.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
img/gitlab.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
img/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
img/image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/legal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
img/licence.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
img/mediateki.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
img/menu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 612 B

BIN
img/pad.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

BIN
img/rss.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
img/serveurjeu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
img/soutien.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
img/taf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/tool.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
img/um1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
img/visio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

BIN
img/wikhan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 630 B

11
khnav_footer.php Normal file
View file

@ -0,0 +1,11 @@
<!-- Pied de page Général Khaganat -->
<div id="khfooter_bottom">
<div class="khfooter">
<div>
<a href="https://khaganat.net/wikhan/fr:licence" title="Licences"><img src="/khnav/img/licence.png" alt="Licences"></a>
<a href="https://khaganat.net/bienvenue/fr:mention" title="Mentions légales"><img src="/khnav/img/legal.png" alt="Mentions légales"></a>
<a href="https://khaganat.net/index.php" title="Accueil du site"><img src="/khnav/img/home.png" alt="Accueil du site"></a>
<a href="https://khaganat.net/wikhan/fr:tag:users:administrateur:start" title="Contact"><img src="/khnav/img/contact.png" alt="Contact"></a>
</div>
</div>
</div>

270
khnav_header.php Normal file
View file

@ -0,0 +1,270 @@
<!-- Appelle les feuilles de style propres à la barre et au footer génériques -->
<link href="/khnav/css/khnav.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/khnav/css/khnav_mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 900px)" />
<!-- Lien d'évitement, pour la navigation en mode texte -->
<div class="khnav_skip" id="menu_start"><a title="Passer la barre de navigation générale" href="#menu_end">Passer le menu Khaganat</a></div>
<!-- Partie responsive (visible uniquement sur petit écran -->
<div class="khnav_sticky">
<div class="khnav_mobile">
<span class="khnav_mobile_square">
<a href="#"><img class="khnav_logo_mobile" src="/khnav/img/khaganat_logo_color200pxNotrans.png" alt="Logo Khaganat"></a>
</span>
<span class="khnav_mobile_square">
<label for="khnav_menu_mobile" class="khnav_burger">
<!-- TODO : Partie à améliorer, mais ça fait le taf -->
<img class="khnav_open_menu" src="/khnav/img/menu.png" alt="Menu">
</label>
</span>
</div>
<input type="checkbox" id="khnav_menu_mobile" role="button" class="khnav_input_mobile">
<nav class="khnav_gen" id="khnavbar">
<!-- Partie gauche -->
<ul class="khnav_nav1">
<!-- Partie Khaganat du menu -->
<li class="khnav_dropdown">
<span class="khnav_dropdown-toggle" >Khaganat</span><span class="khnav_fleche"></span>
<ul class="khnav_dropdown-menu">
<li>
<a href="/wikhan/"><img src="/khnav/img/wikhan.png">
Wikhan : Documentation
<aside>
<h3>Le wiki du projet Khaganat</h3>
<div>Toutes les informations sur l'organisation de Khaganat, des tutos, le détail des licences et de la charte, bref tout ce qui a trait à Khaganat même !</div>
</aside>
</a>
</li>
<li>
<a href="/blog/"><img src="/khnav/img/blog.png">
Blog
<aside>
<h3>L'actualité de Khaganat</h3>
<div>Chroniques régulières autours du projet Khaganat pour suivre son avancement et les travaux ne trouvant pas encore leur place au niveau des wikis.</div>
</aside>
</a>
</li>
<li>
<a href="/wikhan/fr:new"><img src="/khnav/img/rss.png">
Dernières modifications
<aside>
<h3>Dernières modifications</h3>
<div>Les derniers trucs qui ont bougé sur les wikis et le forum sont condensés dans cette page.</div>
</aside>
</a>
</li>
<hr>
<li>
<a href="/forum/"><img src="/khnav/img/forum.png">
Forum
<aside>
<h3>Discuter autour du projet</h3>
<div>Le forum est notre espace déchange dinformations autour de Khaganat. Il prolonge naturellement le salon XMPP et permet une discussion construite et une prise de recul dans la manière d'aborder le projet.</div>
</aside>
</a>
</li>
<li>
<a href="/irc/"><img src="/khnav/img/chat.png">
Chat
<aside>
<h3>Les Chats (clavardage) du projet</h3>
<div>Le salon XMPP : c'est le lieu premier des contacts, des échanges, fusent les idées autours du projet.</div>
</aside>
</a>
</li>
<li>
<a href="mailto:contact@khaganat.net"><img src="/khnav/img/contact2.png">
Contact
<aside>
<h3>Contacter l'association Khaganat</h3>
<div>Vous souhaitez prendre contact avec nous par mail ?</div>
</aside>
</a>
</li>
<hr>
<li>
<a href="/photos/"><img src="/khnav/img/image.png">
Images
<aside>
<h3>Galerie d'images</h3>
<div>Un espace convivial pour organiser et partager nos images liées à Khaganat.</div>
</aside>
</a>
</li>
<li>
<a href="https://pad.khaganat.net/"><img src="/khnav/img/pad.png">
Pad
<aside>
<h3>Écrire collaborativement</h3>
<div>Écrivons tous ensemble sur le même document dans une interface de rédaction collective en ligne. Aucune inscription requise, on se donne un pseudo, une couleur et on se lance !</div>
</aside>
</a>
</li>
<li>
<a href="/taf/fr:start"><img src="/khnav/img/taf.png">
Les trucs à faire
<aside>
<h3>Que faire aujourd'hui ?</h3>
<div>La liste des tâches à faire, leur avancement et qui s'en occupe. Ou qui il faut aller motiver à coup de guimauve pour que ça avance. C'est aussi ici qu'on peut indiquer les bugs.</div>
</aside>
</a>
</li>
<li>
<a href="https://git.khaganat.net/groups/khaganat"><img src="/khnav/img/gitlab.png">
Dépôts code et média
<aside>
<h3>Gitlab</h3>
<div>Pour contribuer au code et aux assets des différents projets de Khaganat, ou les télécharger.</div>
</aside>
</a>
</li>
<li>
<a href="/wikhan/fr:readonly:download"><img src="/khnav/img/download.png">
Téléchargements
<aside>
<h3>Téléchargements</h3>
<div>Les clients de jeu, ainsi que des bidouilles à télécharger si besoin.
</div>
</aside>
</a>
</li>
<li>
<a href="/tools/index.php"><img src="/khnav/img/tool.png">
Outils
<aside>
<h3>Outils</h3>
<div>Petits outils variés, bidouilles web en tout genre pour aider dans certaines tâches.
</div>
</aside>
</a>
</li>
<li>
<a href="https://kloud.khaganat.net/"><img src="/khnav/img/cloud.png">
Kloud
<aside>
<h3>Kloud</h3>
<div>Pour partager des fichiers. Tout le monde peut s'inscrire, mais limité à 100Mo par personne si vous n'êtes pas validé.
</div>
</aside>
</a>
</li>
<li>
<a href="https://meet.jabberfr.org/Khaganat"><img src="/khnav/img/visio.png">
Visioconférence
<aside>
<h3>Visioconférence</h3>
<div>Salon audio et vidéo, accessible sans compte, via le navigateur. Allumez vos micro ! /!\ Ce n'est pas notre outil principal d'échange, préférez le salon XMPP.
</div>
</aside>
</a>
</li>
<hr>
<li>
<a href="/bienvenue/fr:soutien"><img src="/khnav/img/soutien.png">
Nous soutenir
<aside>
<h3>Aider Khaganat</h3>
<div>Notre projet vit grâce aux dons, en nature, en temps ou en argent. Découvrez comment nous aider, afin que nous puissions aller encore plus loin !
</div>
</aside>
</a>
</li>
<li class="khnav_biseaubottom"></li>
</ul>
</li>
<!-- Partie Khanat du menu -->
<li class="khnav_dropdown">
<span class="khnav_dropdown-toggle">Khanat</span><span class="khnav_fleche"></span>
<ul class="khnav_dropdown-menu">
<li>
<a href="/um1/fr:start"><img src="/khnav/img/um1.png">
UM1, l'Encyclopédie
<aside>
<h3>Encyclopédie du Khanat</h3>
<div>Le Khanat est l'univers créé collectivement pour servir de cadre aux premières aventures vécues par les participants au projet Khaganat. L'Unité Mémorielle 1 (UM1) présente le savoir connu à tous les niveaux de Khanat.</div>
</aside>
</a>
</li>
<li>
<a href="/mediateki/fr:start" ><img src="/khnav/img/mediateki.png">
Mediateki : la bibliothèque
<aside>
<h3>La Grande Bibliothèque</h3>
<div>La Mediateki, ou Grande Bibliothèque, regroupe un exemplaire de chaque création sur le Khanat. Littérature, arts graphiques, musique, on peut trouver de tout, sous toutes les formes.</div>
</aside>
</a>
</li>
<hr>
<li>
<a href="http://lirria.khaganat.net"><img src="/khnav/img/serveurjeu.png">
Lirria
<aside>
<h3>Serveur de jeu Lirria</h3>
<div>Serveur de jeu basé sur le monde de Khanat. /!\ Actuellement tellement en test que ça ne mérite même pas le nom d'alpha !</div>
</aside>
</a>
</li>
<li class="khnav_biseaubottom"></li>
</ul>
</li>
</ul>
<!-- Outils sur la droite -->
<!--<ul class="khnav_connect">
<li class="khnav_dropdown">
<span class="khnav_dropdown-toggle" >Outils</span><span class="khnav_fleche"></span>
<ul class="khnav_dropdown-menu">
<li>
<a href="#"><img src="/khnav/img/icon.png">
Connexion
<aside>
<h3>Titre</h3>
<div>Description</div>
</aside>
</a>
</li>
<li>
<a href="#"><img src="/khnav/img/icon.png">
Inscription
<aside>
<h3>Titre</h3>
<div>Description</div>
</aside>
</a>
</li>
<li>
<a href="#"><img src="/khnav/img/icon.png">
Thème... etc
<aside>
<h3>Titre</h3>
<div>Description</div>
</aside>
</a>
</li>
</ul>
</li>
</ul>
-->
<!-- le logo (qui est au milieu visuellement) -->
<div class="khnav_logo">
<div class="khnav_logo_container">
<div class="khnav_logo_bg">
<a href="/"><img src="/khnav/img/khaganat_logo_color200pxNotrans.png" alt="Logo Khaganat"></a>
</div>
</div>
</div>
</nav>
</div>
<!-- ancre du lien d'évitement -->
<div class="khnav_skip" id="menu_end"><a title="Retour au début du menu" href="#menu_start">Retour au début du menu Khaganat</a></div>
<!--<script src="/khnav/khnavbar.js"></script>-->