From fe6019e5f084ab65cba4acbfaced4ab20db96aef Mon Sep 17 00:00:00 2001 From: jluiselli Date: Tue, 15 Sep 2020 15:33:13 +0200 Subject: [PATCH] added CSS (Merci Camille!) --- .gitignore | 2 + fiches/static/fiches/css/annuaire.css | 348 ++++++++++++++++++++++++ fiches/static/fiches/css/normalize.css | 349 ++++++++++++++++++++++++ fiches/static/fiches/css/style.css | 351 ------------------------- fiches/templates/fiches/base.html | 115 ++++---- 5 files changed, 758 insertions(+), 407 deletions(-) create mode 100644 fiches/static/fiches/css/annuaire.css create mode 100644 fiches/static/fiches/css/normalize.css delete mode 100644 fiches/static/fiches/css/style.css diff --git a/.gitignore b/.gitignore index ea2e335..a07b7d1 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ /venv/ *.sqlite3 +fiches/templates/fiches/base_old.html +fiches/static/fiches/css_old/ diff --git a/fiches/static/fiches/css/annuaire.css b/fiches/static/fiches/css/annuaire.css new file mode 100644 index 0000000..fa88a84 --- /dev/null +++ b/fiches/static/fiches/css/annuaire.css @@ -0,0 +1,348 @@ +@charset "UTF-8"; +#main-menu a a, #account-area a, a { + text-decoration: none; + color: #FFDC00; } + +#main-menu a a:hover, #account-area a:hover, a:hover, +#main-menu a a:active, +#account-area a:active, +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; } + +* { + -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; } } diff --git a/fiches/static/fiches/css/normalize.css b/fiches/static/fiches/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/fiches/static/fiches/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/fiches/static/fiches/css/style.css b/fiches/static/fiches/css/style.css deleted file mode 100644 index a5780d0..0000000 --- a/fiches/static/fiches/css/style.css +++ /dev/null @@ -1,351 +0,0 @@ -html { - background-color: black; - color: #FFF; - font-family: Verdana, Verdana, Geneva, sans-serif; -} - -body { - margin: 0 0 0.8em 0; - min-height: 538px; -} - -img { - border: 0; -} - -a:link { - background-color: inherit; - color: #7978DA; - text-decoration: none; -} - -a:visited { - background-color: inherit; - color: #9CA6FF; - text-decoration: none; -} - -a:hover { - background-color: inherit; - color: #006CE3; - text-decoration: underline; -} - -p { - margin-top: 0.6em; - margin-bottom: 0.6em; -} - -.ens { - color: #89C4FF; - background-color: inherit; -} - -.tiny { - font-size: 0.8em; -} - -.verytiny { - font-size: 0.7em; -} - -.dark { - color: #666; - background-color: inherit; -} - -.center { - text-align: center; -} - -.right { - float: right; -} - -.spacer { - width: 100%; - clear: both; -} - -.error { - font-weight: bold; - color: #FB0000; - background-color: inherit; -} - -.warning { - font-weight: bold; - color: #FF8A00; - background-color: inherit; -} - -.mainspacer { - width: 100%; - height: 0.8em; -} - -.success { - font-weight: bold; - color: #00E000; - background-color: inherit; -} - -.success a:link { - background-color: inherit; - color: #008800; - text-decoration: none; -} - -.success a:visited { - background-color: inherit; - color: #008800; - text-decoration: none; -} - -.success a:hover { - background-color: inherit; - color: #4FFF4F; - text-decoration: underline; -} - -.block { - background-color: #333; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - text-align: justify; - padding: 0.5em 0.5em; - margin: 0 1em 1em 1em; -} - -#main { - padding-top: 0.5em; - margin-left: 1em; - background-color: transparent; - color: #FFF; - width: 40em; - float: left; -} - -#header { - margin: 0 1em 0 1em; - float: left; - text-align: center; -} - -#header h1 { - margin-top: 0; - font-family: Georgia, sans-serif; -} - -#header h1 a:link, #header h1 a:visited { - color: #FFF; - background-color: inherit; - text-decoration: none; -} - -#header h1 a:hover { - text-decoration: underline; -} - -#language_switch { - margin-top: 0.5em; - float: left; -} - -#language_switch form { - float: left; - padding: 0; - margin-left: 0.5em; -} - -#content { -} - -#content h3 { - margin-top: 0; - margin-bottom: 0.2em; -} - -#content h4 { - margin-top: 0.5em; - margin-bottom: 0.2em; -} - -#footer { - padding: 0.2em 0; - margin: 1em 5em 0 5em; - clear: both; - background-color: #333; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - text-align: center; -} - -#contact { - margin: 0.5em 8em 0 8em; -} - -#search { - margin-bottom: 1em; -} - -.errorlist { - display: inline; - margin-top: 0; - margin-bottom: 0; - padding-left: 0; -} - -.errorlist li { - display: inline; - font-weight: bold; - color: #E00000; - background-color: inherit; -} - -#advanced_search { - border: 1px solid #CCC; - padding: 0.5em; - margin-bottom: 1em; -} - -.advanced_filter { - width: 50%; - margin-top: 1px; - margin-bottom: 1px; - float: left; -} - -.advanced_filter input { - max-width: 60%; -} - -.submit_button { - text-align: center; -} - -.add_delete_button { - text-align: right; - margin: 0.3em; -} - -#pdflink { - text-align: right; - font-size: 0.8em; -} - -#picture { - width: 8em; - float: left; -} - -#picture img { - margin-top: 0.3em; - max-width: 8em; -} - -#infos { - padding-left: 1em; - float: left; - width: 31em; -} - -#ficheedit { - margin-top: 0; - padding-top: 0; -} - -.editfield { - padding-top: 0.2em; - padding-bottom: 0.2em; -} - -.editfield input { -} - -.editfield textarea { - margin-left: auto; - margin-right: auto; - margin-top:0.2em; - display: block; - width: 98%; - height: 3em; -} - -.message { - margin-top: 0.3em; - margin-bottom: 0.3em; - text-align: center; -} - -.long_message { - margin-top: 0.6em; - margin-bottom: 0.6em; - text-align: justify; -} - -fieldset.address .editfield textarea, fieldset.quote .editfield textarea { - height: 3em; -} - -fieldset.address, fieldset.quote { - padding-bottom: 0.2em; -} - -#main-login-container { - width: 500px; - margin: 3.5em auto; -} - -#main-login-container h3.error { - text-align: center; - width: 100%; - margin-bottom: 20px; - font-size: 1.3em; - font-family: 'Droid Serif', serif; -} - -#main-login { - width: 500px; - border: 15px solid #333; - -webkit-border-radius: 20px; - -moz-border-radius: 20px; - border-radius: 20px; -} - -#main-login.login_block { - padding: 2em; - box-shadow: 0 0 100px #AAA inset; -} - -a#login_clipper, a#login_outsider { - float: left; - display: block; - width: 250px; - height: 200px; - text-align: center; - font-family: 'Droid Serif', serif; - font-size: 1.3em; - font-weight: bold; - line-height: 190px; - text-decoration: none; - color: #FFF; -} - -a#login_clipper { - background-color: #123E96; - box-shadow: 0 0 100px #040C78 inset; -} - -a#login_clipper:hover { - background-color: #164BB6; -} - -a#login_outsider { - background-color: #961221; - box-shadow: 0 0 100px #780411 inset; -} - -a#login_outsider:hover { - background-color: #B31729; -} diff --git a/fiches/templates/fiches/base.html b/fiches/templates/fiches/base.html index 2731e34..df23177 100644 --- a/fiches/templates/fiches/base.html +++ b/fiches/templates/fiches/base.html @@ -1,31 +1,37 @@ {% load i18n %} {% load staticfiles %} - + - - - - {% block title_onglet %}{% trans "Annuaire des élèves de l'ENS" %}{% endblock %} - - + + + + + {% block title_onglet %}{% trans "Annuaire des élèves de l'ENS" %}{% endblock %} + + + + + + +
+ + +
+
+ + {% block contentspacer %}{% endblock %} + {% block content %}{% endblock %} + +
+ +
+ + \ No newline at end of file