diff --git a/README.md b/README.md
index 8985f51..f9707b6 100644
--- a/README.md
+++ b/README.md
@@ -35,4 +35,20 @@ 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 !
\ No newline at end of file
+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é.
\ No newline at end of file
diff --git a/fiches/static/fiches/css/annuaire.css b/fiches/static/fiches/css/annuaire.css
index fa88a84..2fa8773 100644
--- a/fiches/static/fiches/css/annuaire.css
+++ b/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,303 +11,16 @@ a:active,
#main-menu a a:focus,
#account-area a:focus,
a:focus {
- color: #ffbb00; }
-
-#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"; }
-
-#title {
- grid-area: title;
- margin: 0;
- padding: 20px 20px 0 20px;
- font-size: 2.2rem;
- text-align: center; }
- #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; }
- #search-area input {
- -webkit-box-flex: 1;
- -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; }
- #search-area button {
- width: 50px;
- height: 100%;
- margin: 0;
- color: transparent;
- background-color: #FFFFFF;
- background-image: url('data:image/svg+xml;utf8,');
- background-repeat: no-repeat;
- background-size: 50%;
- background-position: center;
- border: none;
- -webkit-transition: 25ms ease-in-out;
- transition: 25ms ease-in-out; }
- #search-area button:hover {
- background-color: #FFDC00; }
-
-#language_switch {
- grid-area: language;
- margin: 0 20px 25px 20px;
- text-align: center; }
- #language_switch .language {
- display: inline-block;
- color: #DFDFDF; }
- #language_switch .language:hover {
- color: #FFDC00; }
- #language_switch .language::after,
- #language_switch .current-language::after {
- content: "·";
- display: inline-block;
- margin: 0 1ex;
- color: #DFDFDF; }
- #language_switch .language:last-child::after {
- content: none; }
- #language_switch .current-language {
- text-decoration: underline; }
-
-#main-menu a a, #account-area a {
- display: inline-block;
- width: 100%;
- margin: 5px 0;
- padding: 5px 10px;
- color: #FFDC00;
- font-size: 1.2rem; }
-#main-menu a a:hover, #account-area a:hover {
- color: #ffbb00; }
-
-#main-menu {
- grid-area: menu;
- padding: 20px;
- color: #FFFFFF;
- text-align: center; }
- #main-menu a {
- display: inline-block;
- width: 100%;
- margin: 5px 0;
- padding: 5px 10px;
- color: #FFDC00;
- font-size: 1.2rem; }
- #main-menu a:hover {
- color: #ffbb00; }
-
-#account-area {
- grid-area: account;
- display: block;
- padding: 20px;
- text-align: center; }
- #account-area .clipper {
- font-family: "Source Code Pro", monospace; }
-
-#content-area {
- color: #FFFFFF; }
-
-.content {
- max-width: 780px;
- width: 50vw;
- margin: 20px; }
- .content h2 {
- margin: 50px 0 50px 0;
- padding: 0;
- font-size: 2rem;
- text-align: center; }
- .content input {
- min-height: 30px;
- padding: 5px; }
- .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; }
- .content input[type="button"]:hover,
- .content input[type="submit"]:hover {
- background-color: #4e2d43; }
-
-#content-home form {
- display: grid;
- width: 400px;
- margin: 0 auto;
- grid-template-columns: 150px 250px;
- gap: 20px; }
- #content-home form label {
- grid-column: 1;
- margin: 5px 0 0 0;
- text-align: right; }
- #content-home form input {
- grid-column: 2; }
- #content-home form select {
- grid-column: 2; }
- #content-home form input[type="submit"] {
- width: 100%;
- margin: 20px 0 50px 0; }
- #content-home form .wide-form-entry {
- grid-column: 1/3; }
- #content-home form .checkbox label {
- display: inline; }
- #content-home form .checkbox 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-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; }
- #content-view-profile .name {
- margin: 0;
- padding: 0;
- font-size: 2rem; }
- #content-view-profile .name .alias {
- display: block;
- color: #DFDFDF;
- font-size: 1.2rem;
- font-weight: normal;
- text-align: center; }
- #content-view-profile .photo {
- height: 150px;
- margin: 0 20px 0 0;
- border-radius: 150px;
- border: 2px solid rgba(31, 14, 25, 0.3); }
- #content-view-profile .label {
- margin: 0 0 5px 0;
- font-style: italic;
- color: #FFDC00;
- font-size: 1.2rem; }
- #content-view-profile .label, #content-view-profile .value {
- display: block; }
- #content-view-profile .infos {
- grid-area: infos;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 20px; }
- #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); }
- #content-view-profile .free-text {
- grid-area: free-text;
- padding: 10px; }
- #content-view-profile .free-text .label {
- display: none; }
- #content-view-profile .free-text .value {
- margin: 0;
- padding: 0; }
-
-#content-edit-profile form {
- width: 400px;
- margin: 0 auto; }
- #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); }
- #content-edit-profile form .form-entry > * {
- display: block; }
- #content-edit-profile form .form-entry label {
- margin: 0 0 5px 0;
- color: #FFDC00;
- font-size: 1.2rem;
- font-style: italic;
- 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.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 {
- display: inline; }
- #content-edit-profile form .checkbox input[type="checkbox"] {
- display: block;
- width: auto;
- float: right; }
-#content-edit-profile #free-text-edit-form textarea {
- width: 100%;
- padding: 5px; }
-#content-edit-profile #photo-edit-form .current-photo {
- margin: 0 0 20px 0;
- text-align: center; }
- #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; }
-#content-edit-profile #photo-edit-form .photo-edit-controls .control {
- margin: 0 0 10px 0; }
-#content-edit-profile #photo-edit-form .photo-edit-controls .control:last-child {
- margin: 0; }
-#content-edit-profile #photo-edit-form .photo-edit-controls label {
- font-size: 1rem;
- color: #FFDC00;
- font-style: italic; }
-#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; }
- #footer .thanks {
- display: block;
- text-align: center; }
+ color: #ffbb00;
+}
* {
- -webkit-box-sizing: border-box;
- box-sizing: border-box; }
+ box-sizing: border-box;
+}
body, html {
- height: 100%; }
+ height: 100%;
+}
body {
display: grid;
@@ -314,35 +28,365 @@ body {
grid-template-areas: "aside main";
background-color: #301827;
color: #FFFFFF;
- font-family: "Fira Sans", "Roboto", sans-serif; }
+ 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; }
+ 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;
+ flex-direction: column;
+ justify-content: space-between;
background-color: #301827;
- z-index: 500; }
+ z-index: 500;
+}
@media only screen and (max-width: 1200px) {
#header {
- margin: 0; }
+ margin: 0;
+ }
#main {
- margin: 0; } }
+ 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";
+}
+
+#title {
+ grid-area: title;
+ margin: 0;
+ padding: 20px 20px 0 20px;
+ font-size: 2.2rem;
+ text-align: center;
+}
+#title a, #title a:hover, #title a:active, #title a:focus, #title a:visited {
+ color: #FFFFFF;
+}
+
+#search-area {
+ grid-area: search;
+ display: flex;
+ width: calc(100% - 40px);
+ height: 50px;
+ margin: 5px 0 20px 0;
+ padding: 0 20px;
+}
+#search-area input {
+ flex-grow: 1;
+ width: calc(100% - 10px);
+ height: 100%;
+ padding: 5px 10px;
+ background-color: #FFFFFF;
+ border: none;
+ font-size: 1.4rem;
+}
+#search-area button {
+ width: 50px;
+ height: 100%;
+ margin: 0;
+ color: transparent;
+ background-color: #FFFFFF;
+ background-image: url('data:image/svg+xml;utf8,');
+ background-repeat: no-repeat;
+ background-size: 50%;
+ background-position: center;
+ border: none;
+ transition: 25ms ease-in-out;
+}
+#search-area button:hover {
+ background-color: #FFDC00;
+}
+
+#language_switch {
+ grid-area: language;
+ margin: 0 20px 25px 20px;
+ text-align: center;
+}
+#language_switch .language {
+ display: inline-block;
+ color: #DFDFDF;
+}
+#language_switch .language:hover {
+ color: #FFDC00;
+}
+#language_switch .language::after,
+#language_switch .current-language::after {
+ content: "·";
+ display: inline-block;
+ margin: 0 1ex;
+ color: #DFDFDF;
+}
+#language_switch .language:last-child::after {
+ content: none;
+}
+#language_switch .current-language {
+ text-decoration: underline;
+}
+
+#account-area a, #main-menu a a {
+ display: inline-block;
+ width: 100%;
+ margin: 5px 0;
+ padding: 5px 10px;
+ color: #FFDC00;
+ font-size: 1.2rem;
+}
+#account-area a:hover, #main-menu a a:hover {
+ color: #ffbb00;
+}
+
+#main-menu {
+ grid-area: menu;
+ padding: 20px;
+ color: #FFFFFF;
+ text-align: center;
+}
+#main-menu a {
+ display: inline-block;
+ width: 100%;
+ margin: 5px 0;
+ padding: 5px 10px;
+ color: #FFDC00;
+ font-size: 1.2rem;
+}
+#main-menu a:hover {
+ color: #ffbb00;
+}
+
+#account-area {
+ grid-area: account;
+ display: block;
+ padding: 20px;
+ text-align: center;
+}
+#account-area .clipper {
+ font-family: "Source Code Pro", monospace;
+}
+
+#content-area {
+ color: #FFFFFF;
+}
+
+.content {
+ max-width: 780px;
+ width: 50vw;
+ margin: 20px;
+}
+.content h2 {
+ margin: 50px 0 50px 0;
+ padding: 0;
+ font-size: 2rem;
+ text-align: center;
+}
+.content input {
+ min-height: 30px;
+ padding: 5px;
+ border-radius: 0;
+}
+.content input[type=button],
+.content input[type=submit] {
+ padding: 10px;
+ background-color: #724162;
+ border: none;
+ font-size: 1.2rem;
+ color: #FFFFFF;
+ box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
+ transition: 25ms ease-in-out;
+}
+.content input[type=button]:hover,
+.content input[type=submit]:hover {
+ background-color: #4e2d43;
+}
+
+#content-home form {
+ display: grid;
+ width: 400px;
+ margin: 0 auto;
+ grid-template-columns: 150px 250px;
+ gap: 20px;
+}
+#content-home form label {
+ grid-column: 1;
+ margin: 5px 0 0 0;
+ text-align: right;
+}
+#content-home form input {
+ grid-column: 2;
+}
+#content-home form select {
+ grid-column: 2;
+}
+#content-home form input[type=submit] {
+ width: 100%;
+ margin: 20px 0 50px 0;
+}
+#content-home form .wide-form-entry {
+ grid-column: 1/3;
+}
+#content-home form .checkbox label {
+ display: inline;
+}
+
+#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-view-profile .content-header {
+ grid-area: header;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 150px;
+}
+#content-view-profile .name {
+ margin: 0;
+ padding: 0;
+ font-size: 2rem;
+}
+#content-view-profile .name .alias {
+ display: block;
+ color: #DFDFDF;
+ font-size: 1.2rem;
+ font-weight: normal;
+ text-align: center;
+}
+#content-view-profile .photo {
+ height: 150px;
+ margin: 0 20px 0 0;
+ border-radius: 150px;
+ border: 2px solid rgba(31, 14, 25, 0.3);
+}
+#content-view-profile .label {
+ margin: 0 0 5px 0;
+ font-style: italic;
+ color: #FFDC00;
+ font-size: 1.2rem;
+}
+#content-view-profile .label, #content-view-profile .value {
+ display: block;
+}
+#content-view-profile .infos {
+ grid-area: infos;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+#content-view-profile .infos > * {
+ display: inline-block;
+ margin: 0;
+ padding: 10px;
+ background-color: #3b1e31;
+ box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
+}
+#content-view-profile .free-text {
+ grid-area: free-text;
+ padding: 10px;
+}
+#content-view-profile .free-text .label {
+ display: none;
+}
+#content-view-profile .free-text .value {
+ margin: 0;
+ padding: 0;
+}
+
+#content-edit-profile form {
+ width: 400px;
+ margin: 0 auto;
+}
+#content-edit-profile form .form-entry {
+ display: block;
+ width: 100%;
+ margin: 0 0 20px 0;
+ padding: 10px;
+ background-color: #3b1e31;
+ box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
+}
+#content-edit-profile form .form-entry > * {
+ display: block;
+}
+#content-edit-profile form .form-entry label {
+ margin: 0 0 5px 0;
+ color: #FFDC00;
+ font-size: 1.2rem;
+ font-style: italic;
+ 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.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 {
+ display: inline;
+}
+#content-edit-profile form .checkbox input[type=checkbox] {
+ display: block;
+ width: auto;
+ float: right;
+}
+#content-edit-profile #free-text-edit-form textarea {
+ width: 100%;
+ padding: 5px;
+}
+#content-edit-profile #photo-edit-form .current-photo {
+ margin: 0 0 20px 0;
+ text-align: center;
+}
+#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);
+ object-fit: cover;
+}
+#content-edit-profile #photo-edit-form .photo-edit-controls .control {
+ margin: 0 0 10px 0;
+}
+#content-edit-profile #photo-edit-form .photo-edit-controls .control:last-child {
+ margin: 0;
+}
+#content-edit-profile #photo-edit-form .photo-edit-controls label {
+ font-size: 1rem;
+ color: #FFDC00;
+ font-style: italic;
+}
+#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;
+}
+#footer .thanks {
+ display: block;
+ text-align: center;
+}
diff --git a/fiches/static/fiches/scss/_colors.scss b/fiches/static/fiches/scss/_colors.scss
new file mode 100644
index 0000000..749d5f4
--- /dev/null
+++ b/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;
+
+
+
diff --git a/fiches/static/fiches/scss/_common.scss b/fiches/static/fiches/scss/_common.scss
new file mode 100644
index 0000000..357552e
--- /dev/null
+++ b/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;
+ }
+}
+
diff --git a/fiches/static/fiches/scss/_content.scss b/fiches/static/fiches/scss/_content.scss
new file mode 100644
index 0000000..222c728
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/fiches/static/fiches/scss/_footer.scss b/fiches/static/fiches/scss/_footer.scss
new file mode 100644
index 0000000..7c6513a
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/fiches/static/fiches/scss/_header.scss b/fiches/static/fiches/scss/_header.scss
new file mode 100644
index 0000000..cca8860
--- /dev/null
+++ b/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,');
+ 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;
+ }
+}
\ No newline at end of file
diff --git a/fiches/static/fiches/scss/_links.scss b/fiches/static/fiches/scss/_links.scss
new file mode 100644
index 0000000..f536785
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/fiches/static/fiches/scss/annuaire.scss b/fiches/static/fiches/scss/annuaire.scss
new file mode 100644
index 0000000..d9217eb
--- /dev/null
+++ b/fiches/static/fiches/scss/annuaire.scss
@@ -0,0 +1,4 @@
+@use "common";
+@use "header";
+@use "content";
+@use "footer";
\ No newline at end of file