Add and update the SCSS used to generate annuaire.css.

Also update the related section in the README.

README.md

@@ -36,3 +36,19 @@ Vous êtes prêts à développer ! Lancez l'annuaire avec :
 ## Développement
 
 En manque d'inspiration ? N'hésitez pas à aller lire les issues ouvertes actuellement, il y en a pour tous les niveaux !
+
+### Style de l'annuaire (CSS et SCSS)
+
+Le style de l'annuaire repose sur deux fichiers CSS :
+
+- [`normalize.css`](https://necolas.github.io/normalize.css/), qui contient des règles visant à normaliser le style par défaut des éléments de la page;
+- `annuaire.css`, qui contient les règles qui définissent le style propre à l'annuaire.
+
+Le style de l'annuaire (`annuaire.css`) est en réalité écrit en [SASS](https://sass-lang.com/), un pré-processeur CSS.
+Si vous souhaitez modifier les règles de style, il faut donc modifier les fichiers du dossier `scss` (le fichier racine du SCSS étant `annuaire.scss`), puis utiliser [un outil comme `sass`](https://sass-lang.com/install) afin de générer une nouvelle version du fichier `annuaire.css`.
+
+Depuis la racine du dépot, vous pouvez par exemple exécuter la commande
+
+    sass --no-source-map --watch fiches/static/fiches/scss/annuaire.scss fiches/static/fiches/css/annuaire.css
+
+afin de lancer sass en mode _watch_, _i.e._ générer un nouveau fichier `annuaire.css` dès que l'un des fichiers SCSS dont dépend `annuaire.scss` est modifié.

fiches/static/fiches/css/annuaire.css

@@ -1,7 +1,8 @@
 @charset "UTF-8";
 #main-menu a a, #account-area a, a {
   text-decoration: none;
-  color: #FFDC00; }
+  color: #FFDC00;
+}
 
 #main-menu a a:hover, #account-area a:hover, a:hover,
 #main-menu a a:active,
@@ -10,45 +11,91 @@ a:active,
 #main-menu a a:focus,
 #account-area a:focus,
 a:focus {
-  color: #ffbb00; }
+  color: #ffbb00;
+}
 
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-areas: "aside main";
+  background-color: #301827;
+  color: #FFFFFF;
+  font-family: "Fira Sans", "Roboto", sans-serif;
+}
+
+#aside {
+  grid-area: aside;
+  padding: 0 0 0 10vw;
+  background-color: #1f0e19;
+  box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
+  z-index: 1000;
+}
+
+#main {
+  grid-area: main;
+  padding: 0 10vw 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #301827;
+  z-index: 500;
+}
+
+@media only screen and (max-width: 1200px) {
+  #header {
+    margin: 0;
+  }
+
+  #main {
+    margin: 0;
+  }
+}
 #menu {
   display: grid;
   float: right;
   width: 320px;
   grid-template-columns: auto;
   grid-template-rows: auto auto auto auto 120px;
-  grid-template-areas: "title" "language" "search" "menu" "account"; }
+  grid-template-areas: "title" "language" "search" "menu" "account";
+}
 
 #title {
   grid-area: title;
   margin: 0;
   padding: 20px 20px 0 20px;
   font-size: 2.2rem;
-  text-align: center; }
+  text-align: center;
-  #title a, #title a:hover, #title a:active, #title a:focus, #title a:visited {
+}
-    color: #FFFFFF; }
+#title a, #title a:hover, #title a:active, #title a:focus, #title a:visited {
+  color: #FFFFFF;
+}
 
 #search-area {
   grid-area: search;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   width: calc(100% - 40px);
   height: 50px;
   margin: 5px 0 20px 0;
-  padding: 0 20px; }
+  padding: 0 20px;
-  #search-area input {
+}
-    -webkit-box-flex: 1;
+#search-area input {
-        -ms-flex-positive: 1;
   flex-grow: 1;
   width: calc(100% - 10px);
   height: 100%;
   padding: 5px 10px;
   background-color: #FFFFFF;
   border: none;
-    font-size: 1.4rem; }
+  font-size: 1.4rem;
-  #search-area button {
+}
+#search-area button {
   width: 50px;
   height: 100%;
   margin: 0;
@@ -59,290 +106,287 @@ a:focus {
   background-size: 50%;
   background-position: center;
   border: none;
-    -webkit-transition: 25ms ease-in-out;
+  transition: 25ms ease-in-out;
-    transition: 25ms ease-in-out; }
+}
-  #search-area button:hover {
+#search-area button:hover {
-    background-color: #FFDC00; }
+  background-color: #FFDC00;
+}
 
 #language_switch {
   grid-area: language;
   margin: 0 20px 25px 20px;
-  text-align: center; }
+  text-align: center;
-  #language_switch .language {
+}
+#language_switch .language {
   display: inline-block;
-    color: #DFDFDF; }
+  color: #DFDFDF;
-  #language_switch .language:hover {
+}
-    color: #FFDC00; }
+#language_switch .language:hover {
-  #language_switch .language::after,
+  color: #FFDC00;
-  #language_switch .current-language::after {
+}
+#language_switch .language::after,
+#language_switch .current-language::after {
   content: "·";
   display: inline-block;
   margin: 0 1ex;
-    color: #DFDFDF; }
+  color: #DFDFDF;
-  #language_switch .language:last-child::after {
+}
-    content: none; }
+#language_switch .language:last-child::after {
-  #language_switch .current-language {
+  content: none;
-    text-decoration: underline; }
+}
+#language_switch .current-language {
+  text-decoration: underline;
+}
 
-#main-menu a a, #account-area a {
+#account-area a, #main-menu a a {
   display: inline-block;
   width: 100%;
   margin: 5px 0;
   padding: 5px 10px;
   color: #FFDC00;
-  font-size: 1.2rem; }
+  font-size: 1.2rem;
-#main-menu a a:hover, #account-area a:hover {
+}
-  color: #ffbb00; }
+#account-area a:hover, #main-menu a a:hover {
+  color: #ffbb00;
+}
 
 #main-menu {
   grid-area: menu;
   padding: 20px;
   color: #FFFFFF;
-  text-align: center; }
+  text-align: center;
-  #main-menu a {
+}
+#main-menu a {
   display: inline-block;
   width: 100%;
   margin: 5px 0;
   padding: 5px 10px;
   color: #FFDC00;
-    font-size: 1.2rem; }
+  font-size: 1.2rem;
-  #main-menu a:hover {
+}
-    color: #ffbb00; }
+#main-menu a:hover {
+  color: #ffbb00;
+}
 
 #account-area {
   grid-area: account;
   display: block;
   padding: 20px;
-  text-align: center; }
+  text-align: center;
-  #account-area .clipper {
+}
-    font-family: "Source Code Pro", monospace; }
+#account-area .clipper {
+  font-family: "Source Code Pro", monospace;
+}
 
 #content-area {
-  color: #FFFFFF; }
+  color: #FFFFFF;
+}
 
 .content {
   max-width: 780px;
   width: 50vw;
-  margin: 20px; }
+  margin: 20px;
-  .content h2 {
+}
+.content h2 {
   margin: 50px 0 50px 0;
   padding: 0;
   font-size: 2rem;
-    text-align: center; }
+  text-align: center;
-  .content input {
+}
+.content input {
   min-height: 30px;
-    padding: 5px; }
+  padding: 5px;
-  .content input[type="button"],
+  border-radius: 0;
-  .content input[type="submit"] {
+}
+.content input[type=button],
+.content input[type=submit] {
   padding: 10px;
   background-color: #724162;
   border: none;
   font-size: 1.2rem;
   color: #FFFFFF;
-    -webkit-box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
   box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
-    -webkit-transition: 25ms ease-in-out;
+  transition: 25ms ease-in-out;
-    transition: 25ms ease-in-out; }
+}
-  .content input[type="button"]:hover,
+.content input[type=button]:hover,
-  .content input[type="submit"]:hover {
+.content input[type=submit]:hover {
-    background-color: #4e2d43; }
+  background-color: #4e2d43;
+}
 
 #content-home form {
   display: grid;
   width: 400px;
   margin: 0 auto;
   grid-template-columns: 150px 250px;
-  gap: 20px; }
+  gap: 20px;
-  #content-home form label {
+}
+#content-home form label {
   grid-column: 1;
   margin: 5px 0 0 0;
-    text-align: right; }
+  text-align: right;
-  #content-home form input {
+}
-    grid-column: 2; }
+#content-home form input {
-  #content-home form select {
+  grid-column: 2;
-    grid-column: 2; }
+}
-  #content-home form input[type="submit"] {
+#content-home form select {
+  grid-column: 2;
+}
+#content-home form input[type=submit] {
   width: 100%;
-    margin: 20px 0 50px 0; }
+  margin: 20px 0 50px 0;
-  #content-home form .wide-form-entry {
+}
-    grid-column: 1/3; }
+#content-home form .wide-form-entry {
-  #content-home form .checkbox label {
+  grid-column: 1/3;
-    display: inline; }
+}
-  #content-home form .checkbox input[type="checkbox"] {
+#content-home form .checkbox label {
   display: inline;
-    width: 1rem;
+}
-    float: right; }
 
 #content-view-profile {
   display: grid;
   grid-template-rows: 150px auto auto;
   grid-template-columns: 3fr 1fr;
   grid-template-areas: "header    header" "infos     infos" "free-text free-text";
-  gap: 20px; }
+  gap: 20px;
-  #content-view-profile .content-header {
+}
+#content-view-profile .content-header {
   grid-area: header;
-    display: -webkit-box;
-    display: -ms-flexbox;
   display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
   justify-content: center;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
   align-items: center;
-    height: 150px; }
+  height: 150px;
-  #content-view-profile .name {
+}
+#content-view-profile .name {
   margin: 0;
   padding: 0;
-    font-size: 2rem; }
+  font-size: 2rem;
-    #content-view-profile .name .alias {
+}
+#content-view-profile .name .alias {
   display: block;
   color: #DFDFDF;
   font-size: 1.2rem;
   font-weight: normal;
-      text-align: center; }
+  text-align: center;
-  #content-view-profile .photo {
+}
+#content-view-profile .photo {
   height: 150px;
   margin: 0 20px 0 0;
   border-radius: 150px;
-    border: 2px solid rgba(31, 14, 25, 0.3); }
+  border: 2px solid rgba(31, 14, 25, 0.3);
-  #content-view-profile .label {
+}
+#content-view-profile .label {
   margin: 0 0 5px 0;
   font-style: italic;
   color: #FFDC00;
-    font-size: 1.2rem; }
+  font-size: 1.2rem;
-  #content-view-profile .label, #content-view-profile .value {
+}
-    display: block; }
+#content-view-profile .label, #content-view-profile .value {
-  #content-view-profile .infos {
+  display: block;
+}
+#content-view-profile .infos {
   grid-area: infos;
   display: grid;
   grid-template-columns: 1fr 1fr;
-    gap: 20px; }
+  gap: 20px;
-    #content-view-profile .infos > * {
+}
+#content-view-profile .infos > * {
   display: inline-block;
   margin: 0;
   padding: 10px;
   background-color: #3b1e31;
-      -webkit-box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
+  box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
-              box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3); }
+}
-  #content-view-profile .free-text {
+#content-view-profile .free-text {
   grid-area: free-text;
-    padding: 10px; }
+  padding: 10px;
-    #content-view-profile .free-text .label {
+}
-      display: none; }
+#content-view-profile .free-text .label {
-    #content-view-profile .free-text .value {
+  display: none;
+}
+#content-view-profile .free-text .value {
   margin: 0;
-      padding: 0; }
+  padding: 0;
+}
 
 #content-edit-profile form {
   width: 400px;
-  margin: 0 auto; }
+  margin: 0 auto;
-  #content-edit-profile form .form-entry {
+}
+#content-edit-profile form .form-entry {
   display: block;
   width: 100%;
   margin: 0 0 20px 0;
   padding: 10px;
   background-color: #3b1e31;
-    -webkit-box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
+  box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
-            box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3); }
+}
-    #content-edit-profile form .form-entry > * {
+#content-edit-profile form .form-entry > * {
-      display: block; }
+  display: block;
-    #content-edit-profile form .form-entry label {
+}
+#content-edit-profile form .form-entry label {
   margin: 0 0 5px 0;
   color: #FFDC00;
   font-size: 1.2rem;
   font-style: italic;
-      text-align: left; }
+  text-align: left;
-    #content-edit-profile form .form-entry input, #content-edit-profile form .form-entry select {
+}
-      width: 100%; }
+#content-edit-profile form .form-entry input, #content-edit-profile form .form-entry select {
-  #content-edit-profile form .form-entry.checkbox > * {
-    display: inline;
-    width: auto; }
-  #content-edit-profile form input[type="submit"] {
   width: 100%;
-    margin: 20px 0 50px 0; }
+}
-  #content-edit-profile form .checkbox label {
+#content-edit-profile form .form-entry.checkbox > * {
-    display: inline; }
+  display: inline;
-  #content-edit-profile form .checkbox input[type="checkbox"] {
+  width: auto;
+}
+#content-edit-profile form input[type=submit] {
+  width: 100%;
+  margin: 20px 0 50px 0;
+}
+#content-edit-profile form .checkbox label {
+  display: inline;
+}
+#content-edit-profile form .checkbox input[type=checkbox] {
   display: block;
   width: auto;
-    float: right; }
+  float: right;
+}
 #content-edit-profile #free-text-edit-form textarea {
   width: 100%;
-  padding: 5px; }
+  padding: 5px;
+}
 #content-edit-profile #photo-edit-form .current-photo {
   margin: 0 0 20px 0;
-  text-align: center; }
+  text-align: center;
-  #content-edit-profile #photo-edit-form .current-photo img {
+}
+#content-edit-profile #photo-edit-form .current-photo img {
   width: 150px;
   height: 150px;
   margin: 0 20px 0 0;
   border-radius: 150px;
   border: 2px solid rgba(31, 14, 25, 0.3);
-    -o-object-fit: cover;
+  object-fit: cover;
-       object-fit: cover; }
+}
 #content-edit-profile #photo-edit-form .photo-edit-controls .control {
-  margin: 0 0 10px 0; }
+  margin: 0 0 10px 0;
+}
 #content-edit-profile #photo-edit-form .photo-edit-controls .control:last-child {
-  margin: 0; }
+  margin: 0;
+}
 #content-edit-profile #photo-edit-form .photo-edit-controls label {
   font-size: 1rem;
   color: #FFDC00;
-  font-style: italic; }
+  font-style: italic;
-#content-edit-profile #photo-edit-form .photo-edit-controls input[type="file"] {
+}
-  text-align: center; }
+#content-edit-profile #photo-edit-form .photo-edit-controls input[type=file] {
+  text-align: center;
+}
 
 #footer {
   max-width: 780px;
   padding: 20px;
   color: #DFDFDF;
-  text-align: center; }
+  text-align: center;
-  #footer .thanks {
+}
+#footer .thanks {
   display: block;
-    text-align: center; }
+  text-align: center;
-
+}
-* {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box; }
-
-body, html {
-  height: 100%; }
-
-body {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-areas: "aside main";
-  background-color: #301827;
-  color: #FFFFFF;
-  font-family: "Fira Sans", "Roboto", sans-serif; }
-
-#aside {
-  grid-area: aside;
-  padding: 0 0 0 10vw;
-  background-color: #1f0e19;
-  -webkit-box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
-          box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
-  z-index: 1000; }
-
-#main {
-  grid-area: main;
-  padding: 0 10vw 0 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  background-color: #301827;
-  z-index: 500; }
-
-@media only screen and (max-width: 1200px) {
-  #header {
-    margin: 0; }
-
-  #main {
-    margin: 0; } }

fiches/static/fiches/scss/_colors.scss

@@ -0,0 +1,30 @@
+// Webpage
+$page-background: #301827; // #222222;
+$aside-background: #1f0e19; // #000000;
+$main-background: $page-background;
+
+$shadow: rgba(31, 14, 25, 0.3);
+
+$page-text: #FFFFFF;
+$page-text-secondary: #DFDFDF;
+$page-text-emph: #FFDC00;
+
+$page-link: #FFDC00; // #7FDBFF;
+$page-link-hover: #ffbb00; // #FF851B;
+
+$page-button-background: #724162;
+$page-button-background-hover: #4e2d43;
+$page-button-text: #FFFFFF;
+
+// Main menu
+$main-menu-text: #FFFFFF;
+$main-menu-link: $page-link;
+$main-menu-link-hover: $page-link-hover;
+
+// Content
+$content-background: $main-background;
+$content-frame-background: #3b1e31;
+$content-text: #FFFFFF;
+
+
+

fiches/static/fiches/scss/_common.scss

@@ -0,0 +1,53 @@
+@use "colors";
+@use "links";
+
+* {
+    box-sizing: border-box;
+}
+
+a { @extend %link; }
+
+
+body, html {
+    height: 100%;
+}
+
+body {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-areas:
+        "aside main";
+
+    background-color: colors.$page-background;
+    color: colors.$page-text;
+    font-family: "Fira Sans", "Roboto", sans-serif;
+}
+
+#aside {
+    grid-area: aside;
+    padding: 0 0 0 10vw;
+    background-color: colors.$aside-background;
+    box-shadow: 4px 0 0 colors.$shadow;
+    z-index: 1000;
+}
+
+#main {
+    grid-area: main;
+    padding: 0 10vw 0 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: colors.$main-background;
+    z-index: 500;
+}
+
+@media only screen and (max-width: 1200px) {
+    #header {
+        margin: 0;
+    }
+    
+    #main {
+        margin: 0;
+    }
+}
+

fiches/static/fiches/scss/_content.scss

@@ -0,0 +1,274 @@
+@use "colors";
+
+#content-area {
+    color: colors.$content-text;  
+}
+
+.content {
+    max-width: 780px;
+    width: 50vw;
+    margin: 20px;
+
+    h2 {
+        margin: 50px 0 50px 0;
+        padding: 0;
+        font-size: 2rem;
+        text-align: center;
+    }
+
+    input {
+        min-height: 30px;
+        padding: 5px;
+        border-radius: 0;
+    }
+
+    input[type="button"],
+    input[type="submit"] {
+        padding: 10px;
+        background-color: colors.$page-button-background;
+        border: none;
+        font-size: 1.2rem;
+        color: colors.$page-button-text;
+        box-shadow: 2px 2px 0 colors.$shadow;
+        transition: 25ms ease-in-out;
+    }
+
+    input[type="button"]:hover,
+    input[type="submit"]:hover {
+        background-color: colors.$page-button-background-hover;
+    }
+}
+
+#content-home {
+    form {
+        display: grid;
+        width: 400px;
+        margin: 0 auto;
+        grid-template-columns: 150px 250px;
+        gap: 20px;
+        
+        label {
+            grid-column: 1;
+            margin: 5px 0 0 0;
+            text-align: right;
+
+            // font-style: italic;
+            // color: colors.$page-text-emph;
+        }
+
+        input {
+            grid-column: 2;
+        }
+
+        select {
+            grid-column: 2;
+        }
+
+        input[type="submit"] {
+            width: 100%;
+            margin: 20px 0 50px 0;
+        }
+
+        .wide-form-entry {
+            grid-column: 1/3;
+        }
+
+        .checkbox {
+            label {
+                display: inline;
+            }
+
+            // input[type="checkbox"] {
+            //     display: inline;
+            //     width: 1rem;
+            //     float: right; 
+            // }
+        }
+    }
+}
+
+#content-view-profile {
+    display: grid;
+    grid-template-rows: 150px auto auto;
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas:
+        "header    header"
+        "infos     infos"
+        "free-text free-text";
+    gap: 20px;
+
+    .content-header {
+        grid-area: header;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 150px;
+    }
+
+    .name {
+        margin: 0;
+        padding: 0;
+        font-size: 2rem;
+
+        .alias {
+            display: block;
+            color: colors.$page-text-secondary;
+            font-size: 1.2rem;
+            font-weight: normal;
+            text-align: center;
+        }
+    }
+   
+    .photo {
+        height: 150px;
+        margin: 0 20px 0 0;
+        border-radius: 150px;
+        border: 2px solid colors.$shadow;
+    }
+
+    .label {
+        margin: 0 0 5px 0;
+        // font-weight: bold;
+        font-style: italic;
+        color: colors.$page-text-emph;
+        font-size: 1.2rem;
+    }
+
+    .label, .value {
+        display: block;
+    }
+
+    .infos {
+        grid-area: infos;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+
+        > * {
+            display: inline-block;
+            margin: 0;
+            padding: 10px;
+            background-color: colors.$content-frame-background;
+            box-shadow: 2px 2px 0 colors.$shadow;
+        }
+    }
+
+    .free-text {
+        grid-area: free-text;
+        padding: 10px;
+
+        .label {
+            display: none;
+        }
+
+        .value {
+            margin: 0;
+            padding: 0;
+        }
+    }
+}
+
+#content-edit-profile {
+    form {
+        width: 400px;
+        margin: 0 auto;
+
+        .form-entry {
+            display: block;
+            width: 100%;
+            margin: 0 0 20px 0;
+            padding: 10px;
+            background-color: colors.$content-frame-background;
+            box-shadow: 2px 2px 0 colors.$shadow;
+    
+            > * {
+                display: block;
+            }
+    
+            label {
+                margin: 0 0 5px 0;
+                color: colors.$page-text-emph;
+                font-size: 1.2rem;
+                font-style: italic;
+                text-align: left;
+            }
+    
+            input, select {
+                width: 100%;
+            }
+        }
+    
+        .form-entry.checkbox {
+            > * {
+                display: inline;
+                width: auto;
+            }
+        }
+
+        input[type="submit"] {
+            width: 100%;
+            margin: 20px 0 50px 0;
+        }
+
+        .checkbox {
+            label {
+                display: inline;
+            }
+
+            input[type="checkbox"] {
+                display: block;
+                width: auto;
+                float: right; 
+            }
+        }
+    }
+
+    #free-text-edit-form {
+        textarea {
+            width: 100%;
+            padding: 5px;
+        }
+    }
+
+    #photo-edit-form {
+        .current-photo {
+            margin: 0 0 20px 0;
+            text-align: center;
+
+            img {
+                width: 150px;
+                height: 150px;
+                margin: 0 20px 0 0;
+                border-radius: 150px;
+                border: 2px solid colors.$shadow;
+                object-fit: cover;
+            }
+        }
+
+        .photo-edit-controls {
+            .control {
+                margin: 0 0 10px 0;
+            }
+
+            .control:last-child {
+                margin: 0;
+            }
+
+            label {
+                font-size: 1rem;
+                color: colors.$page-text-emph;
+                font-style: italic;
+            }
+
+            // input[type="checkbox"] {
+            //     display: inline-block;
+            //     width: 1rem;
+            //     float: right; 
+            // }
+
+            input[type="file"] {
+                text-align: center;
+            }
+        }
+    }
+}

fiches/static/fiches/scss/_footer.scss

@@ -0,0 +1,13 @@
+@use "colors";
+
+#footer {
+    max-width: 780px;
+    padding: 20px;
+    color: colors.$page-text-secondary;
+    text-align: center;
+    
+    .thanks {
+        display: block;
+        text-align: center;
+    }
+}

fiches/static/fiches/scss/_header.scss

@@ -0,0 +1,163 @@
+@use "colors";
+@use "links";
+
+// $title-height: 120px;
+$search-bar-height: 50px;
+$account-area-height: 120px;
+
+#menu {
+    display: grid;
+    float: right;
+    width: 320px;
+    // height: 100%;
+    grid-template-columns: auto;
+    grid-template-rows: auto auto auto auto $account-area-height;
+    grid-template-areas:
+        "title"
+        "language"
+        "search"
+        "menu"
+        "account";
+}
+
+#title {
+    grid-area: title;
+    // height: $title-height;
+    // width: 20vw;
+    margin: 0;
+    padding: 20px 20px 0 20px;
+    font-size: 2.2rem;
+    text-align: center;
+    // line-height: $title-height;
+    // vertical-align: middle;
+
+    a, a:hover, a:active, a:focus, a:visited {
+        color: #FFFFFF;
+    }
+}
+
+#search-area {
+    grid-area: search;
+    display: flex;
+    width: calc(100% - 40px);
+    height: $search-bar-height;
+    margin: 5px 0 20px 0;
+    padding: 0 20px;
+    // background-color: #FFFFFF;
+
+    input {
+        flex-grow: 1;
+        width: calc(100% - 10px);
+        height: 100%;
+        padding: 5px 10px;
+        background-color: #FFFFFF;
+        border: none;
+        font-size: 1.4rem;;
+    }
+
+    button {
+        width: 50px;
+        height: 100%;
+        margin: 0;
+        color: transparent;
+        background-color: #FFFFFF;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+        background-repeat: no-repeat;
+        background-size: 50%;
+        background-position: center;
+        border: none;
+        transition: 25ms ease-in-out;
+    }
+
+    button:hover {
+        background-color: colors.$main-menu-link;
+    }
+}
+
+#language_switch {
+    grid-area: language;
+    margin: 0 20px 25px 20px;
+    text-align: center;
+
+    .language {
+        display: inline-block;
+        // text-decoration: underline;
+        color: colors.$page-text-secondary;
+    }
+
+    .language:hover {
+        color: colors.$main-menu-link;
+    }
+
+    .language::after,
+    .current-language::after {
+        content: "·";
+        display: inline-block;
+        margin: 0 1ex;
+        color: colors.$page-text-secondary;
+    }
+
+    .language:last-child::after {
+        content: none;
+    }
+
+    .current-language {
+        text-decoration: underline;
+    }
+}
+
+%menu-link {
+    a {
+        @extend %link;
+        display: inline-block;
+        width: 100%;
+        margin: 5px 0;
+        padding: 5px 10px;
+        // border: 1px solid colors.$main-menu-link;
+        color: colors.$main-menu-link;
+        font-size: 1.2rem;
+    }
+
+    a:hover {
+        // background-color: colors.$main-menu-link;
+        color: colors.$main-menu-link-hover;
+    }
+}
+
+#main-menu {
+    // display: flex;
+    grid-area: menu;
+    // width: 20vw;
+    padding: 20px;
+    color: colors.$main-menu-text;
+    text-align: center;
+
+    a {
+        @extend %menu-link;
+        display: inline-block;
+        width: 100%;
+        margin: 5px 0;
+        padding: 5px 10px;
+        // border: 1px solid colors.$main-menu-link;
+        color: colors.$main-menu-link;
+        font-size: 1.2rem;
+    }
+
+    a:hover {
+        // background-color: colors.$main-menu-link;
+        color: colors.$main-menu-link-hover;
+    }
+}
+
+#account-area {
+    grid-area: account;
+    display: block;
+    padding: 20px;
+    text-align: center;
+
+    @extend %menu-link;
+
+    .clipper {
+        font-family: "Source Code Pro", monospace;
+    }
+}

fiches/static/fiches/scss/_links.scss

@@ -0,0 +1,12 @@
+@use "colors";
+
+%link {
+    text-decoration: none;
+    color: colors.$page-link;
+}
+
+%link:hover,
+%link:active,
+%link:focus {
+    color: colors.$page-link-hover;
+}

fiches/static/fiches/scss/annuaire.scss

@@ -0,0 +1,4 @@
+@use "common";
+@use "header";
+@use "content";
+@use "footer";