Add shadows

content/pages/community.md

@@ -4,41 +4,37 @@ Authors: AFPy
 Summary: Communauté
 
 
-## Forum de discussion
+### Forum de discussion
 
-Afin d'échanger avec la communauté, un forum de discussion est disponible et traite de
-tous les sujets autour de Python.
+Afin d'échanger avec la communauté, un [forum de discussion](https://discuss.afpy.org/) est disponible et traite de tous les sujets autour de Python.
 
 
-## Salons de discussion
+### Salons de discussion
 
-L'AFPy est présente sur IRC et Discord.
+L'AFPy est présente sur [IRC](https://www.afpy.org/irc) et [Discord](https://www.afpy.org/discord).
 
 
-## Rencontres
+### Rencontres
 
 Afin de partager autour du langage Python, de ses pratiques, de sa technique et de son
 écosystème, des évènements sont organisés régulièrement dans divers lieux.
 
-* Amiens
-* Bordeaux
-* Bruxelles
-* Grenoble
-* Lille
-* Lyon
-* Nantes
-* Montpellier
+* [Amiens](https://www.meetup.com/fr-FR/Python-Amiens)
+* [Bordeaux](https://www.meetup.com/fr-FR/py-bdx/)
+* [Bruxelles](https://www.meetup.com/fr-FR/Belgium-Python-Meetup-aka-AperoPythonBe/)
+* [Grenoble](https://www.meetup.com/fr-FR/Groupe-dutilisateurs-Python-Grenoble/)
+* [Lille](https://www.meetup.com/fr-FR/Lille-py/)
+* [Lyon](https://www.meetup.com/fr-FR/Python-AFPY-Lyon/)
+* [Nantes](https://www.meetup.com/fr-FR/Nantes-Python-Meetup/)
+* [Montpellier](https://www.meetup.com/fr-FR/Meetup-Python-Montpellier/)
+* [Rennes](https://www.meetup.com/fr-FR/python-rennes/)
 
 
-## PyConFr
+### PyConFR
 
-La PyConFr est un évènement organisé chaque année depuis 10+ ans par l'AFPy. Cette conférence est gratuite, entièrement organisée par des bénévoles et regroupe développeu·ses·rs, chercheu·ses·rs, étudiant·e·s et amat·rices·eurs autour d'une même passion pour le langage de programmation Python.
-
-PyConFr
+La [PyConFR](https://www.pycon.fr/) est un évènement organisé chaque année depuis 10+ ans par l'AFPy. Cette conférence est gratuite, entièrement organisée par des bénévoles et regroupe développeu·ses·rs, chercheu·ses·rs, étudiant·e·s et amat·rices·eurs autour d'une même passion pour le langage de programmation Python.
 
 
-## April
+### April
 
-Pionnière du logiciel libre en France, l'April est depuis 1996 un acteur majeur de la démocratisation et de la diffusion du logiciel libre et des standards ouverts auprès du grand public, des professionnels et des institutions dans l'espace francophone.
-
-April
+Pionnière du logiciel libre en France, l'[April](https://april.org/campagne/) est depuis 1996 un acteur majeur de la démocratisation et de la diffusion du logiciel libre et des standards ouverts auprès du grand public, des professionnels et des institutions dans l'espace francophone.

content/pages/membership.md

@@ -4,11 +4,11 @@ Authors: AFPy
 Summary: Adhésion
 
 
-## Pourquoi Adhérer ?
+### Pourquoi Adhérer ?
 
-### Adhérer pour soutenir les actions de l'AFPy
+#### Adhérer pour soutenir les actions de l'AFPy
 
-* Organiser les PyConFr
+* Organiser les PyConFR
 * Traduire la documentation
 * Organiser des MeetUp
 * Développer la platerforme HackInScience
@@ -16,14 +16,14 @@ Summary: Adhésion
 * Héberger une liste d’offre emploi liés à Python
 * Être membre de l’April pour soutenir le logiciel libre
 
-### Ce que permet l'adhésion à l'AFPy
+#### Ce que permet l'adhésion à l'AFPy
 
 * Participer au vote à l’Assemblée Générale
 * Pouvoir devenir membre du Comité Directeur
 * Utiliser le BigBlueButton de l’association
 * Avoir le badge Adhérent sur Discourse
 
-### Ce qu'on aimerait faire aussi
+#### Ce qu'on aimerait faire aussi
 
 * Des ateliers python dans les lycées
 * Mettre en place une certification Python
@@ -32,8 +32,8 @@ Summary: Adhésion
 * Rémunérer des gens faisant vivre l’association
 
 
-## Adhérez à l'AFPy
+### Adhérez à l'AFPy
 
 <iframe id="haWidget" src="https://www.helloasso.com/associations/afpy/adhesions/adhesion-2023-a-l-afpy/widget"></iframe>
 
-Si le widget ne fonctionne pas, essayez cette page : https://www.helloasso.com/associations/afpy/adhesions/adhesion-2023-a-l-afpy
+Si le widget ne fonctionne pas, essayez cette page : [https://www.helloasso.com/associations/afpy/adhesions/adhesion-2023-a-l-afpy](https://www.helloasso.com/associations/afpy/adhesions/adhesion-2023-a-l-afpy)

content/pages/who.md

@@ -3,12 +3,12 @@ Slug: qui-sommes-nous
 Authors: AFPy
 
 
-## L’association
+### L’association
 
 L’association « A.F.P.Y. » , Association Francophone Python, fondée le 11 décembre 2004 sous le régime de la loi du 1er juillet 1901 a pour but la vulgarisation auprès d’un public francophone du langage de programmation python et de ses applications.
 
 
-## Bureau et Comité Directeur
+### Bureau et Comité Directeur
 
 Les membres du comité directeur 2023 sont :
 

themes/afpy/static/css/w3.css

@@ -1,235 +0,0 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
-html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
-/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
-html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
-article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
-audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
-audio:not([controls]){display:none;height:0}[hidden],template{display:none}
-a{background-color:transparent}a:active,a:hover{outline-width:0}
-abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
-b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
-small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
-sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
-code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
-button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
-button,input{overflow:visible}button,select{text-transform:none}
-button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
-button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
-button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
-fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
-legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
-[type=checkbox],[type=radio]{padding:0}
-[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
-[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
-[type=search]::-webkit-search-decoration{-webkit-appearance:none}
-::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
-/* End extract */
-html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
-h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
-.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
-h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
-hr{border:0;border-top:1px solid #eee;margin:20px 0}
-.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
-.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
-.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
-.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
-.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
-.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
-.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
-.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
-.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
-.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
-.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
-.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
-.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
-.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
-.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
-.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
-.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
-.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
-.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
-.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
-.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
-.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
-.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
-.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
-.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
-.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
-.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
-.w3-main,#main{transition:margin-left .4s}
-.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
-.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
-.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
-.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
-.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
-.w3-bar .w3-button{white-space:normal}
-.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
-.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
-.w3-responsive{display:block;overflow-x:auto}
-.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
-.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
-.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
-.s1{width:8.33333%}.s2{width:16.66666%}.s3{width:24.99999%}.s4{width:33.33333%}
-.s5{width:41.66666%}.s6{width:49.99999%}.s7{width:58.33333%}.s8{width:66.66666%}
-.s9{width:74.99999%}.s10{width:83.33333%}.s11{width:91.66666%}.s12{width:99.99999%}
-@media (min-width:601px){.m1{width:8.33333%}.m2{width:16.66666%}.m3,.w3-quarter{width:24.99999%}.m4,.w3-third{width:33.33333%}
-.m5{width:41.66666%}.m6,.w3-half{width:49.99999%}.m7{width:58.33333%}.m8,.w3-twothird{width:66.66666%}
-.m9,.w3-threequarter{width:74.99999%}.m10{width:83.33333%}.m11{width:91.66666%}.m12{width:99.99999%}}
-@media (min-width:993px){.l1{width:8.33333%}.l2{width:16.66666%}.l3{width:24.99999%}.l4{width:33.33333%}
-.l5{width:41.66666%}.l6{width:49.99999%}.l7{width:58.33333%}.l8{width:66.66666%}
-.l9{width:74.99999%}.l10{width:83.33333%}.l11{width:91.66666%}.l12{width:99.99999%}}
-.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
-.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
-.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
-.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
-.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
-@media (max-width:1205px){.w3-auto{max-width:95%}}
-@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
-.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
-.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
-.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
-@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
-@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
-@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
-@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
-.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
-.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
-.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
-.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
-.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
-.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
-.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
-.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
-.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
-.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
-.w3-display-position{position:absolute}
-.w3-circle{border-radius:50%}
-.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
-.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
-.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
-.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
-.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
-.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
-.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
-.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
-.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
-.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
-.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
-.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
-.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
-.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
-.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
-.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
-.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
-.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
-.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
-.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
-.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
-.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
-.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
-.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
-.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
-.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
-.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
-.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
-.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
-.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
-.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
-.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
-.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
-.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
-.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
-.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
-.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
-.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
-.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
-.w3-left{float:left!important}.w3-right{float:right!important}
-.w3-button:hover{color:#000!important;background-color:#ccc!important}
-.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
-.w3-hover-none:hover{box-shadow:none!important}
-/* Colors */
-.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
-.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
-.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
-.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
-.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
-.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
-.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
-.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
-.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
-.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
-.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
-.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
-.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
-.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
-.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
-.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
-.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
-.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
-.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
-.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
-.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
-.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
-.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
-.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
-.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
-.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
-.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
-.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
-.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
-.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
-.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
-.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
-.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
-.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
-.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
-.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
-.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
-.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
-.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
-.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
-.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
-.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
-.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
-.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
-.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
-.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
-.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
-.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
-.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
-.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
-.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
-.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
-.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
-.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
-.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
-.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
-.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
-.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
-.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
-.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
-.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
-.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
-.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
-.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
-.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
-.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
-.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
-.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
-.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
-.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
-.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
-.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
-.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
-.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
-.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
-.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
-.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
-.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
-.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
-.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
-.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
-.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
-.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

themes/afpy/static/css/website.css

@@ -1,10 +1,365 @@
-@import "w3.css";
-@import "all.min.css";
+/* Fonts */
+@font-face{
+  font-family: Atkinson;
+  src: url(../webfonts/Atkinson-Hyperlegible-Regular-102.ttf);
+}
 
-@font-face{font-family:atkinson;src:url(../webfonts/Atkinson-Hyperlegible-Regular-102.ttf)}
-body, h1, h2, h3, h4, h5, h6{font-family:atkinson}
-img{width:100%}
-.logo{width:3em}
-iframe{background:#eaeaea;border:0;height:55em;width:100%}
-.w3-margin-bottom-32{margin-bottom:32px!important}
-.uppercase{text-transform:uppercase}
+
+/* Variables */
+
+:root {
+  --black: #0e0e0e;
+  --blue: #327bd6;
+  --dark-green: #32ada9;
+  --green: #ebff32;
+  --grey: #c9c9c9;
+  --light-orange: #ff6f3255;
+  --orange: #ff6f32;
+  --purple: #84326b;
+  --white: #ffffff;
+}
+
+
+/* Common */
+
+html {
+  background: var(--white);
+  color: var(--black);
+  font-family: Atkinson;
+  font-size: 14pt;
+  line-height: 1.5;
+  overflow-x: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a, a:visited {
+  color: var(--dark-green);
+  transition: 0.2s;
+}
+
+a:hover,
+.active {
+  background: var(--green);
+}
+
+iframe {
+  border: none;
+  box-shadow: 0 0 1em 0 var(--grey);
+  height: 45em;
+  width: 100%;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+li {
+  list-style: none;
+  margin: 0.5em auto;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+/* Titles */
+
+#introduction h3::after,
+#page-qui-sommes-nous h3::after,
+#page-communaute h3::after,
+#page-adhesions h3::after {
+  background: var(--light-orange);
+  content: "";
+  display: block;
+  height: 0.2em;
+  width: 1.5em;
+}
+
+/* Header and Footer */
+
+header {
+  background: var(--white);
+  border-bottom: var(--grey) 1px solid;
+  display: flex;
+  height: 4em;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+}
+
+header a:first-of-type {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+header img {
+  display: block;
+  margin: 0.5em 1em 0.5em 5em;
+}
+
+header h1 {
+  margin: auto;
+}
+
+header a,
+footer a,
+header a:visited,
+footer a:visited {
+  color: var(--black);
+  text-decoration: inherit;
+}
+
+header nav {
+  margin: 0 4.5em 0 auto;
+}
+
+header nav ul,
+footer ul {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+}
+
+header nav li,
+footer li {
+  margin: auto 0.5em;
+}
+
+footer {
+  background: var(--white);
+  border-top: var(--grey) 1px solid;
+  height: 4em;
+  width: 100vw;
+}
+
+footer ul {
+  justify-content: center;
+}
+
+@media (max-width: 920px) {
+  header h1 {
+    display: none;
+  }
+
+  header img {
+    margin: 0.5em;;
+  }
+
+  header nav {
+    display: block;
+    height: 4em;
+    margin-right: 0;
+    overflow: hidden;
+    transition-delay: 0.5s;
+    transition-property: z-index;
+    width: 3em;
+    z-index: 3;
+  }
+
+  header::before,
+  header nav::before {
+    align-items: center;
+    background: var(--white);
+    color: var(--black);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+  }
+
+  header::before {
+    content: "⨯";
+    height: 1rem;
+    padding: 1rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 1rem;
+    z-index: 2;
+  }
+
+  header nav::before {
+    content: "☰";
+    margin-bottom: 1em;
+  }
+
+  header nav:hover {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: center;
+    width: 100%;
+    z-index: 1;
+  }
+
+  header nav:hover ul {
+    background: var(--white);
+    border-left: 1px solid var(--grey);
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  header nav:hover li:last-child {
+    margin-left: 0;
+  }
+
+  header nav:hover li {
+    margin: 0.75em 0;
+  }
+
+  header nav:hover a {
+    padding: 0.5em;
+  }
+
+  header nav:hover ~ * {
+    display: block !important;
+    height: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+  }
+
+  header nav:hover::before {
+    display: none;
+  }
+
+  footer ul {
+    display: initial;
+  }
+
+  footer ul li {
+    margin: 0.5em;
+  }
+}
+
+/* Main */
+
+main {
+  flex-grow: 1;
+  margin: 4em auto;
+}
+
+main > section {
+  padding: 2rem 25rem;
+}
+
+@media (max-width: 920px) {
+  main {
+    margin: 2em auto 0.5em auto;
+  }
+
+  main > section {
+    padding: 1rem;
+  }
+}
+
+/* Page Index */
+
+#page-index h2 {
+  text-align: center;
+}
+
+#introduction section {
+  display: grid;
+  gap: 3em;
+  grid-auto-columns: 45%;
+  grid-template-areas: "a a";
+  justify-content: center;
+}
+
+#introduction section article {
+  border: var(--grey) 1px solid;
+  box-shadow: 0 0 1em 0 var(--grey);
+  padding: 1em;
+}
+
+#introduction section + p {
+  margin-top: 2em;
+  text-align: center;
+}
+
+@media (max-width: 920px) {
+  #introduction section {
+    display: block;
+  }
+
+  #introduction section article {
+    margin: 1em auto;
+  }
+}
+
+/* News and Jobs */
+
+.news-jobs > article {
+  border: var(--grey) 1px solid;
+  box-shadow: 0 0 1em 0 var(--grey);
+  margin: 3em auto;
+}
+
+.news-jobs > article section:first-of-type {
+  background: var(--light-orange);
+  padding: 1em;
+}
+
+.news-jobs > article section:last-of-type ul,
+.news-jobs > article section:last-of-type li,
+.news-jobs > article section:last-of-type p {
+  display: inline;
+}
+
+.news-jobs > article section:last-of-type li:not(:last-of-type)::after {
+  content: ", ";
+}
+
+.news-jobs h3 {
+  margin: 0;
+}
+
+.news-jobs h3 a {
+  color: inherit;
+}
+
+.news-jobs time {
+  float: right;
+}
+
+.news-jobs div {
+    padding: 1em;
+}
+
+.news-jobs section {
+    padding: 1em;
+}
+
+.news-jobs > ul:last-of-type {
+  display: flex;
+  flex-wrap: wrap;
+  margin: auto;
+  width: 30%;
+}
+
+.news-jobs > ul:last-of-type a {
+  padding: 0.5em;
+  text-decoration: none;
+}
+
+/* Who, Community, Membership */
+
+#page-qui-sommes-nous main li,
+#page-communaute main li,
+#page-adhesions main li {
+  list-style: initial;
+}
+
+#page-adhesions h4 {
+  margin-bottom: 0.5em;
+}

themes/afpy/templates/archives.html

@@ -3,12 +3,14 @@
 {% block title %}{{ SITENAME }} - Archives{% endblock %}
 
 {% block content %}
-<h1>Archives for {{ SITENAME }}</h1>
+  <section>
+    <h2>Archives for {{ SITENAME }}</h2>
 
-<dl>
-{% for article in dates %}
-    <dt>{{ article.locale_date }}</dt>
-    <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
-{% endfor %}
-</dl>
+    <dl>
+      {% for article in dates %}
+      <dt>{{ article.locale_date }}</dt>
+      <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+      {% endfor %}
+    </dl>
+  </section>
 {% endblock %}

themes/afpy/templates/article.html

@@ -18,48 +18,55 @@
   {% for tag in article.tags %}
     <meta name="tags" content="{{tag}}" />
   {% endfor %}
-
 {% endblock %}
 
 {% block content %}
-  <header>
-    <h1 class="entry-title">
-      <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
-         title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
- {% import 'translations.html' as translations with context %}
- {{ translations.translations_for(article) }}
-  </header>
-  <footer class="post-info">
-    <time class="published" datetime="{{ article.date.isoformat() }}">
-      {{ article.locale_date }}
-    </time>
-    {% if article.modified %}
-    <time class="modified" datetime="{{ article.modified.isoformat() }}">
-      {{ article.locale_modified }}
-    </time>
-    {% endif %}
-    {% if article.authors %}
-    <address class="vcard author">
-      Par {% for author in article.authors %}
-          <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
-        {% endfor %}
-    </address>
-    {% endif %}
-    {% if article.category %}
-    <div class="category">
+  <section>
+    <h2>{{ article.title }}</h2>
+    {% import 'translations.html' as translations with context %}
+    {{ translations.translations_for(article) }}
+    <aside>
+      <time datetime="{{ article.date.isoformat() }}">
+        {{ article.locale_date }}
+      </time>
+
+      {% if article.modified %}
+      <time datetime="{{ article.modified.isoformat() }}">
+        {{ article.locale_modified }}
+      </time>
+      {% endif %}
+
+      {% if article.authors %}
+      <section>
+        <p>Par</p>
+        <ul>
+          {% for author in article.authors %}
+          <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a></li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {% if article.category %}
+      <p>
         Categorie : <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
-    </div>
-    {% endif %}
-    {% if article.tags %}
-    <div class="tags">
-        Tags :
-        {% for tag in article.tags %}
-            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
-        {% endfor %}
-    </div>
-    {% endif %}
-  </footer><!-- /.post-info -->
-  <article>
-    {{ article.content }}
-  </article>
+      </p>
+      {% endif %}
+
+      {% if article.tags %}
+      <section>
+        <p>Tags</p>
+        <ul>
+          {% for tag in article.tags %}
+          <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+    </aside>
+
+    <article>
+      {{ article.content }}
+    </article>
+  </section>
 {% endblock %}

themes/afpy/templates/author.html

@@ -3,6 +3,8 @@
 {% block title %}{{ SITENAME }} - Articles by {{ author }}{% endblock %}
 
 {% block content_title %}
-<h1>Articles by {{ author }}</h1>
+<section>
+  <h2>Articles by {{ author }}</h2>
+</section>
 {% endblock %}
 

themes/afpy/templates/authors.html

@@ -3,10 +3,12 @@
 {% block title %}{{ SITENAME }} - Authors{% endblock %}
 
 {% block content %}
-    <h1>Authors on {{ SITENAME }}</h1>
+  <section>
+    <h2>Authors on {{ SITENAME }}</h2>
     <ul>
     {% for author, articles in authors|sort %}
         <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> ({{ articles|count }})</li>
     {% endfor %}
     </ul>
+  </section>
 {% endblock %}

themes/afpy/templates/base.html

@@ -7,66 +7,46 @@
     <meta name="generator" content="Pelican" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="author" content="AFPy" />
-    <meta name="Description" content="" />
-    <meta name="Keywords" content="" />
     <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
     <link rel="stylesheet" href="/static/css/website.css">
     {% endblock head %}
   </head>
 
-  <body>
+  {% set name = output_file.split('/')[-1].split('.')[0] %}
+  <body id="page-{{ name }}">
     <header>
-      <!-- Navigation bar -->
-      <div class="w3-bar w3-card w3-border-bottom w3-large">
-        <a href="/" class="w3-bar-item w3-button w3-hover-orange"><img src="/static/img/logo.svg" class="w3-margin-right logo" alt="Association Francophone Python" /> <span class="w3-margin-left">AFPY</span></a>
-        <div class="w3-hide-medium w3-hide-small">
-          <a href="/pages/adhesions" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Adhésion</a>
-          <a href="/pages/communaute" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Communauté</a>
-          <a href="/category/jobs" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Offres d'emploi</a>
-          <a href="/category/news" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Actualités</a>
-          <a href="/pages/qui-sommes-nous" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Qui sommes-nous ?</a>
-          <a href="/" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Accueil</a>
-        </div>
+      <a href="/">
+        <img src="/static/img/logo.svg" alt="AFPy logo">
+        <h1>AFPy</h1>
+      </a>
 
-        <!-- Toggle menu on small screens -->
-        <a class="w3-bar-item w3-button w3-right w3-hide-large w3-padding-large w3-hover-orange w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
-      </div>
-      <!-- Navigation bar on small screens -->
-      <div id="navSmall" class="w3-bar-block w3-white w3-card w3-hide w3-large">
-        <a href="/" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Accueil</a>
-        <a href="/pages/qui-sommes-nous" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Qui sommes-nous ?</a>
-        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Actualités</a>
-        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Offres d'emploi</a>
-        <a href="/pages/communaute" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Communauté</a>
-        <a href="/pages/adhesions" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Adhésion</a>
-      </div>
+      <nav>
+        <ul>
+          <li><a href="/" {% if name == "index" %}class="active"{% endif %}>Accueil</a></li>
+          <li><a href="/pages/qui-sommes-nous" {% if name == "qui-sommes-nous" %}class="active"{% endif %}>Qui sommes-nous ?</a></li>
+          <li><a href="/category/news" {% if name == "news" %}class="active"{% endif %}>Actualités</a></li>
+          <li><a href="/category/jobs" {% if name == "jobs" %}class="active"{% endif %}>Offres d'emploi</a></li>
+          <li><a href="/pages/communaute" {% if name == "communaute" %}class="active"{% endif %}>Communauté</a></li>
+          <li><a href="/pages/adhesions" {% if name == "adhesions" %}class="active"{% endif %}>Adhésion</a></li>
+        </ul>
+      </nav>
     </header>
 
-    <main class="w3-content w3-padding">
+    <main>
     {% block content %}
     {% endblock %}
     </main>
 
-    <!-- Footer -->
-    <footer class="w3-container w3-orange w3-card-4 w3-center w3-padding">
-      <a href="/pages/contact" class="w3-button w3-hover-grey uppercase">Contact</a>
-      <a href="/pages/charte" class="w3-button w3-hover-grey uppercase">Charte</a>
-      <a href="/pages/mentions-legales" class="w3-button w3-hover-grey uppercase">Mentions légales</a>
-      <a href="/pages/flux-rss" class="w3-button w3-hover-grey uppercase">Flux RSS</a>
-      <a href="https://mamot.fr/@AFPy" class="w3-button w3-hover-grey uppercase">Mastodon</a>
-      <a href="https://twitter.com/asso_python_fr" class="w3-button w3-hover-grey uppercase">Twitter</a>
+    <footer>
+      <ul>
+        <li><a href="/pages/contact">Contact</a></li>
+        <li><a href="/pages/charte">Charte</a></li>
+        <li><a href="/pages/mentions-legales">Mentions légales</a></li>
+        <li><a href="/pages/flux-rss">Flux RSS</a></li>
+        <li><a href="https://mamot.fr/@AFPy">Mastodon</a></li>
+        <li><a href="https://twitter.com/asso_python_fr">Twitter</a></li>
+        <li><a href="https://www.linkedin.com/company/afpy">LinkedIn</a></li>
+      </ul>
     </footer>
-
-    <script>
-    // Used to toggle the menu on small screens
-    function myFunction() {
-      var x = document.getElementById("navSmall");
-      if (x.className.indexOf("w3-hide") == -1) {
-        x.className += " w3-hide";
-      } else {
-        x.className = x.className.replace(" w3-hide", "");
-      }
-    }
-    </script>
   </body>
 </html>

themes/afpy/templates/categories.html

@@ -3,10 +3,12 @@
 {% block title %}{{ SITENAME }} - Categories{% endblock %}
 
 {% block content %}
-    <h1>Categories on {{ SITENAME }}</h1>
+  <section>
+    <h2>Categories on {{ SITENAME }}</h2>
     <ul>
     {% for category, articles in categories|sort %}
         <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li>
     {% endfor %}
     </ul>
+  </section>
 {% endblock %}

themes/afpy/templates/category.html

@@ -3,31 +3,28 @@
 {% block title %}{{ SITENAME }} - {{ category }}{% endblock %}
 
 {% block content %}
-  <section class="w3-content w3-padding w3-center">
-    <h1>{{ "Actualités" if category=="news" else "Offres d'emploi" }}</h1>
-    <div class="w3-row-padding">
+  <section class="news-jobs">
+    <h2>{{ "Actualités" if category=="news" else "Offres d'emploi" }}</h2>
       {% for article in articles_page.object_list if article.category == category %}
-      <article class="w3-left-align w3-card w3-margin w3-margin-bottom-32">
-        <header class="w3-container w3-orange">
-          <time class="w3-right w3-margin-top" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-          <h2 class=""><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
-        </header>
-        <div class="w3-container">
-          <p>{{ article.summary }}</p>
-        </div>
-        <footer class="w3-container">
-          <div class="w3-right">
-            <address class="w3-margin-bottom">Par
-            {% for author in article.authors %}{{ author }}{% endfor %}
-            </address>
-          </div>
-        </footer>
+      <article>
+        <section>
+          <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
+          <h3><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h3>
+        </section>
+        <div>{{ article.summary }}</div>
+        <section>
+          <p>Par</p>
+          <ul>
+            {% for author in article.authors %}
+            <li>{{ author }}</li>
+            {% endfor %}
+          </ul>
+        </section>
       </article>
       {% endfor %}
       {% if articles_page.has_other_pages() %}
           {% include 'pagination.html' %}
       {% endif %}
-    </div>
   </section>
 {% endblock %}
 

themes/afpy/templates/gosquared.html

@@ -1,14 +0,0 @@
-{% if GOSQUARED_SITENAME %}
-<script type="text/javascript">
-    var GoSquared={};
-    GoSquared.acct = "{{ GOSQUARED_SITENAME }}";
-    (function(w){
-        function gs(){
-            w._gstc_lt=+(new Date); var d=document;
-            var g = d.createElement("script"); g.type = "text/javascript"; g.async = true; g.src = "https://d1l6p2sc9645hc.cloudfront.net/tracker.js";
-            var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(g, s);
-        }
-        w.addEventListener?w.addEventListener("load",gs,false):w.attachEvent("onload",gs);
-    })(window);
-</script>
-{% endif %}

themes/afpy/templates/index.html

@@ -1,77 +1,67 @@
 {% extends "base.html" %}
 {% block content %}
-  <section class="w3-content w3-padding w3-center w3-hide-small">
-    <h1>l'AFPy c'est</h1>
-    <div class="w3-row-padding">
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Une communauté</h2>
-          <div class="w3-left-align">
-            <p>Un forum dynamique (Discourse)</p>
-            <p>Des salons de discussion en temps réel (IRC & Discord)</p>
-            <p>&nbsp;</p>
-          </div>
-        </div>
-      </div>
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Des événements</h2>
-          <div class="w3-left-align">
-            <p>L'organisation annuelle de la <a href="https://pycon.fr/">PyConFr</a></p>
-            <p>Les <a href="https://discuss.afpy.org/c/meetups/12">Meetups</a></p>
-            <p>Les ateliers de traduction</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="w3-row-padding w3-center">
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Des outils</h2>
-          <div class="w3-left-align">
-            <p>Une plateforme de Visio-conférence (Big Blue Button)</p>
-            <p>Un gestionnaire de dépôts (Gitea)</p>
-            <p>Un site d'apprentissage par exercices : <a href="https://hackinscience.org/">Hackinscience</a> (Licence CC0)</p>
-          </div>
-        </div>
-      </div>
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Du contenu</h2>
-          <div class="w3-left-align">
-            <p>Des offres d'emploi</p>
-            <p>La traduction de <a href="https://docs.python.org/fr">la documentation de Python</a> (Licence MIT)</p>
-            <p>&nbsp;</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p>Il est possible de soutenir les projets de l'AFPy <a href="/pages/adhesions">en cotisant ou en effectuant un don.</a></p>
+  <section id="introduction">
+    <h2>l'AFPy c'est</h2>
+    <section>
+      <article>
+        <h3>Une communauté</h3>
+        <ul>
+          <li>Un <a href="https://discuss.afpy.org/">forum dynamique</a> (Discourse)</li>
+          <li>Des salons de discussion en temps réel (<a href="https://www.afpy.org/irc">IRC</a> & <a href="https://www.afpy.org/discord">Discord</a>)</li>
+        </ul>
+      </article>
+
+      <article>
+        <h3>Des événements</h3>
+        <ul>
+          <li>L'organisation annuelle de la <a href="https://pycon.fr/">PyConFR</a></li>
+          <li>Les <a href="https://discuss.afpy.org/c/meetups/12">Meetups</a></li>
+          <li>Les ateliers de traduction</li>
+        </ul>
+      </article>
+
+      <article>
+        <h3>Des outils</h3>
+        <ul>
+          <li>Une plateforme de Visio-conférence (Big Blue Button)</li>
+          <li>Un <a href="https://git.afpy.org/">gestionnaire de dépôts</a> (Gitea)</li>
+          <li>Un site d'apprentissage par exercices : <a href="https://hackinscience.org/">Hackinscience</a> (Licence CC0)</li>
+        </ul>
+      </article>
+
+      <article>
+        <h3>Du contenu</h3>
+        <ul>
+          <li>Des offres d'emploi</li>
+          <li>La traduction de <a href="https://docs.python.org/fr">la documentation de Python</a> (Licence MIT)</li>
+          <li>&nbsp;</li>
+        </ul>
+      </article>
+    </section>
+
+    <p>Il est possible de soutenir les projets de l'AFPy <a href="/pages/adhesions">en cotisant ou en effectuant un don</a>.</p>
   </section>
 
-  <section class="w3-content w3-padding w3-center">
-    <h1>Dernières actualités</h1>
-    <div class="w3-row-padding">
-      {% for article in articles if article.category == "news" %}
+  <section class="news-jobs">
+    <h2>Dernières actualités</h2>
+    {% for article in articles if article.category == "news" %}
       {% if loop.index < 4 %}
-      <article class="w3-left-align w3-card w3-margin w3-margin-bottom-32">
-        <header class="w3-container w3-orange">
-          <time class="w3-right w3-margin-top" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-          <h2 class=""><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
-        </header>
-        <div class="w3-container">
-          <p>{{ article.summary }}</p>
-        </div>
-        <footer class="w3-container">
-          <div class="w3-right">
-            <address class="w3-margin-bottom">Par
-            {% for author in article.authors %}{{ author }}{% endfor %}
-            </address>
-          </div>
-        </footer>
+      <article>
+        <section>
+          <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
+          <h3><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h3>
+        </section>
+        <div>{{ article.summary }}</div>
+        <section>
+          <p>Par</p>
+          <ul>
+            {% for author in article.authors %}
+            <li>{{ author }}</li>
+            {% endfor %}
+          </ul>
+        </section>
       </article>
       {% endif %}
-      {% endfor %}
-    </div>
+    {% endfor %}
   </section>
 {% endblock content %}

themes/afpy/templates/page.html

@@ -13,15 +13,17 @@
 {% endblock %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+  <section>
+    <h2>{{ page.title }}</h2>
     {% import 'translations.html' as translations with context %}
     {{ translations.translations_for(page) }}
 
     {{ page.content }}
 
     {% if page.modified %}
-        <p>
-        Last updated: {{ page.locale_modified }}
-        </p>
+    <aside>
+      <p>Last updated: {{ page.locale_modified }}</p>
+    </aside>
     {% endif %}
+  </section>
 {% endblock %}

themes/afpy/templates/pagination.html

@@ -1,19 +1,17 @@
 {% if DEFAULT_PAGINATION %}
 {% set first_page = articles_paginator.page(1) %}
 {% set last_page = articles_paginator.page(articles_paginator.num_pages) %}
-<p class="w3-bar">
+<ul>
   {% if articles_page.has_previous() %}
-  <a href="{{ SITEURL }}/{{ articles_previous_page.url }}" class="w3-button w3-hover-orange">&laquo;</a>
-  {% else %}
-  <span class="w3-padding">&laquo;</span>
+  <li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}">&laquo;</a></li>
   {% endif %}
+
   {% for page in range(1, articles_paginator.num_pages + 1) %}
-  <a href="{{ SITEURL }}/{{ articles_paginator.page(page).url }}" class="w3-button w3-hover-orange">{{ page }}</a>
+  <li><a href="{{ SITEURL }}/{{ articles_paginator.page(page).url }}">{{ page }}</a></li>
   {% endfor %}
+
   {% if articles_page.has_next() %}
-  <a href="{{ SITEURL }}/{{ articles_next_page.url }}" class="w3-button w3-hover-orange">&raquo;</a>
-  {% else %}
-  <span class="w3-padding">&raquo;</span>
+  <li><a href="{{ SITEURL }}/{{ articles_next_page.url }}">&raquo;</a></li>
   {% endif %}
 </p>
 {% endif %}

themes/afpy/templates/period_archives.html

@@ -3,12 +3,14 @@
 {% block title %}{{ SITENAME }} - {{ period | reverse | join(' ') }} archives{% endblock %}
 
 {% block content %}
-<h1>Archives for {{ period | reverse | join(' ') }}</h1>
+  <section>
+    <h2>Archives for {{ period | reverse | join(' ') }}</h2>
 
-<dl>
-{% for article in dates %}
-    <dt>{{ article.locale_date }}</dt>
-    <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
-{% endfor %}
-</dl>
+    <dl>
+      {% for article in dates %}
+      <dt>{{ article.locale_date }}</dt>
+      <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+      {% endfor %}
+    </dl>
+  </section>
 {% endblock %}

themes/afpy/templates/tag.html

@@ -3,5 +3,7 @@
 {% block title %}{{ SITENAME }} - {{ tag }} tag{% endblock %}
 
 {% block content_title %}
-<h1>Articles tagged with {{ tag }}</h1>
+  <section>
+    <h2>Articles tagged with {{ tag }}</h2>
+  </section>
 {% endblock %}

themes/afpy/templates/tags.html

@@ -3,10 +3,12 @@
 {% block title %}{{ SITENAME }} - Tags{% endblock %}
 
 {% block content %}
-    <h1>Tags for {{ SITENAME }}</h1>
+  <section>
+    <h2>Tags for {{ SITENAME }}</h2>
     <ul>
     {% for tag, articles in tags|sort %}
         <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})</li>
     {% endfor %}
     </ul>
+  </section>
 {% endblock %}