Add and update the SCSS used to generate annuaire.css.
Also update the related section in the README.
This commit is contained in:
Daru13
parent
1fa503cc4f
commit
a718b6afc5
9 changed files with 920 additions and 311 deletions
18
README.md
18
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 !
|
||||
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é.
|
||||
|
|
@ -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,<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;
|
||||
-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,<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;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
|
|
|||
30
fiches/static/fiches/scss/_colors.scss
Normal file
30
fiches/static/fiches/scss/_colors.scss
Normal file
|
|
@ -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;
|
||||
|
||||
|
||||
|
||||
53
fiches/static/fiches/scss/_common.scss
Normal file
53
fiches/static/fiches/scss/_common.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
274
fiches/static/fiches/scss/_content.scss
Normal file
274
fiches/static/fiches/scss/_content.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
fiches/static/fiches/scss/_footer.scss
Normal file
13
fiches/static/fiches/scss/_footer.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
163
fiches/static/fiches/scss/_header.scss
Normal file
163
fiches/static/fiches/scss/_header.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
12
fiches/static/fiches/scss/_links.scss
Normal file
12
fiches/static/fiches/scss/_links.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
4
fiches/static/fiches/scss/annuaire.scss
Normal file
4
fiches/static/fiches/scss/annuaire.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@use "common";
|
||||
@use "header";
|
||||
@use "content";
|
||||
@use "footer";
|
||||
Loading…
Reference in a new issue