commit b3817cbc35676d309e51f47fa1047b1206f09276 Author: Zatalyz Date: Fri Jun 5 16:04:58 2020 +0200 Initial commit. 4e version de la khnav. diff --git a/README.md b/README.md new file mode 100644 index 0000000..0f45fdd --- /dev/null +++ b/README.md @@ -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. diff --git a/css/khnav.css b/css/khnav.css new file mode 100644 index 0000000..5811708 --- /dev/null +++ b/css/khnav.css @@ -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%); +} \ No newline at end of file diff --git a/css/khnav_mobile.css b/css/khnav_mobile.css new file mode 100644 index 0000000..16f2303 --- /dev/null +++ b/css/khnav_mobile.css @@ -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; +} + +} \ No newline at end of file diff --git a/img/blog.png b/img/blog.png new file mode 100644 index 0000000..c0b67dc Binary files /dev/null and b/img/blog.png differ diff --git a/img/chat.png b/img/chat.png new file mode 100644 index 0000000..8ebce7e Binary files /dev/null and b/img/chat.png differ diff --git a/img/close.png b/img/close.png new file mode 100644 index 0000000..7605d36 Binary files /dev/null and b/img/close.png differ diff --git a/img/cloud.png b/img/cloud.png new file mode 100644 index 0000000..8cab405 Binary files /dev/null and b/img/cloud.png differ diff --git a/img/contact.png b/img/contact.png new file mode 100644 index 0000000..5c12821 Binary files /dev/null and b/img/contact.png differ diff --git a/img/contact2.png b/img/contact2.png new file mode 100644 index 0000000..79a4425 Binary files /dev/null and b/img/contact2.png differ diff --git a/img/download.png b/img/download.png new file mode 100644 index 0000000..749f6a7 Binary files /dev/null and b/img/download.png differ diff --git a/img/forum.png b/img/forum.png new file mode 100644 index 0000000..5f86754 Binary files /dev/null and b/img/forum.png differ diff --git a/img/gitlab.png b/img/gitlab.png new file mode 100644 index 0000000..6ec7b9c Binary files /dev/null and b/img/gitlab.png differ diff --git a/img/home.png b/img/home.png new file mode 100644 index 0000000..541a602 Binary files /dev/null and b/img/home.png differ diff --git a/img/image.png b/img/image.png new file mode 100644 index 0000000..37b9279 Binary files /dev/null and b/img/image.png differ diff --git a/img/khaganat_logo_color200pxNotrans.png b/img/khaganat_logo_color200pxNotrans.png new file mode 100644 index 0000000..c54a26f Binary files /dev/null and b/img/khaganat_logo_color200pxNotrans.png differ diff --git a/img/legal.png b/img/legal.png new file mode 100644 index 0000000..1babaea Binary files /dev/null and b/img/legal.png differ diff --git a/img/licence.png b/img/licence.png new file mode 100644 index 0000000..3189944 Binary files /dev/null and b/img/licence.png differ diff --git a/img/mediateki.png b/img/mediateki.png new file mode 100644 index 0000000..3089b81 Binary files /dev/null and b/img/mediateki.png differ diff --git a/img/menu.png b/img/menu.png new file mode 100644 index 0000000..eb8bdd4 Binary files /dev/null and b/img/menu.png differ diff --git a/img/pad.png b/img/pad.png new file mode 100644 index 0000000..febba41 Binary files /dev/null and b/img/pad.png differ diff --git a/img/rss.png b/img/rss.png new file mode 100644 index 0000000..6c88d26 Binary files /dev/null and b/img/rss.png differ diff --git a/img/serveurjeu.png b/img/serveurjeu.png new file mode 100644 index 0000000..d7a3a5d Binary files /dev/null and b/img/serveurjeu.png differ diff --git a/img/soutien.png b/img/soutien.png new file mode 100644 index 0000000..2af59a4 Binary files /dev/null and b/img/soutien.png differ diff --git a/img/taf.png b/img/taf.png new file mode 100644 index 0000000..efbedfd Binary files /dev/null and b/img/taf.png differ diff --git a/img/tool.png b/img/tool.png new file mode 100644 index 0000000..c9e36a3 Binary files /dev/null and b/img/tool.png differ diff --git a/img/um1.png b/img/um1.png new file mode 100644 index 0000000..44447d4 Binary files /dev/null and b/img/um1.png differ diff --git a/img/visio.png b/img/visio.png new file mode 100644 index 0000000..56411bd Binary files /dev/null and b/img/visio.png differ diff --git a/img/wikhan.png b/img/wikhan.png new file mode 100644 index 0000000..7c221ea Binary files /dev/null and b/img/wikhan.png differ diff --git a/khnav_footer.php b/khnav_footer.php new file mode 100644 index 0000000..5fc333b --- /dev/null +++ b/khnav_footer.php @@ -0,0 +1,11 @@ + +
+
+
+ Licences + Mentions légales + Accueil du site + Contact +
+
+
diff --git a/khnav_header.php b/khnav_header.php new file mode 100644 index 0000000..afda7b0 --- /dev/null +++ b/khnav_header.php @@ -0,0 +1,270 @@ + + + + + + + + +
+
+ + Logo Khaganat + + + + +
+ + +
+ + + + +