diff options
Diffstat (limited to 'public/css')
| -rw-r--r-- | public/css/body.css | 2 | ||||
| -rw-r--r-- | public/css/foot.css | 26 | ||||
| -rw-r--r-- | public/css/head.css | 76 | ||||
| -rw-r--r-- | public/css/menu.css | 12 |
4 files changed, 68 insertions, 48 deletions
diff --git a/public/css/body.css b/public/css/body.css index cadf955..57afe92 100644 --- a/public/css/body.css +++ b/public/css/body.css | |||
| @@ -71,7 +71,7 @@ section .fetch_articles | |||
| 71 | 71 | ||
| 72 | .section_child | 72 | .section_child |
| 73 | { | 73 | { |
| 74 | gap: 15px; /* fonctionne avec flexbox et grid */ | 74 | gap: 15px; /* fonctionne avec flexbox et grid, mais pas avec firefox 52 (win XP/vista) */ |
| 75 | margin-top: 15px; | 75 | margin-top: 15px; |
| 76 | } | 76 | } |
| 77 | .fullwidth > .section_child | 77 | .fullwidth > .section_child |
diff --git a/public/css/foot.css b/public/css/foot.css index 38284e3..ed65666 100644 --- a/public/css/foot.css +++ b/public/css/foot.css | |||
| @@ -79,16 +79,16 @@ footer .data > div | |||
| 79 | margin: 0 3px; | 79 | margin: 0 3px; |
| 80 | }*/ | 80 | }*/ |
| 81 | 81 | ||
| 82 | #footer_logo_img | 82 | #footer_logo_content |
| 83 | { | 83 | { |
| 84 | max-width: 288px; | 84 | max-width: 288px; |
| 85 | min-width: 150px; | 85 | min-width: 150px; |
| 86 | } | 86 | } |
| 87 | @media screen and (max-width: 1000px) | 87 | @media screen and (max-width: 800px) |
| 88 | { | 88 | { |
| 89 | .footer .contact | 89 | footer .contact |
| 90 | { | 90 | { |
| 91 | width: 70px; | 91 | font-size: smaller; |
| 92 | } | 92 | } |
| 93 | } | 93 | } |
| 94 | 94 | ||
| @@ -119,10 +119,6 @@ footer .data > div | |||
| 119 | color: black; | 119 | color: black; |
| 120 | text-decoration: none; | 120 | text-decoration: none; |
| 121 | } | 121 | } |
| 122 | .empty_admin_zone | ||
| 123 | { | ||
| 124 | height: 70px; | ||
| 125 | } | ||
| 126 | .logged_in | 122 | .logged_in |
| 127 | { | 123 | { |
| 128 | /*height: 70px;*/ | 124 | /*height: 70px;*/ |
| @@ -149,6 +145,20 @@ footer .data > div | |||
| 149 | background-color: yellow; | 145 | background-color: yellow; |
| 150 | border-radius: 4px; | 146 | border-radius: 4px; |
| 151 | } | 147 | } |
| 148 | @media screen and (max-width: 550px){ | ||
| 149 | .logged_in, .logged_in button | ||
| 150 | { | ||
| 151 | font-size: 96%; | ||
| 152 | } | ||
| 153 | .admin_buttons_zone | ||
| 154 | { | ||
| 155 | margin: 3px; | ||
| 156 | } | ||
| 157 | } | ||
| 158 | .empty_admin_zone | ||
| 159 | { | ||
| 160 | height: 93px; /* 40 => 1 ligne, 70/64 => 2 lignes, 93/83 => 3 lignes */ | ||
| 161 | } | ||
| 152 | .modif_mode | 162 | .modif_mode |
| 153 | { | 163 | { |
| 154 | background-color: #ffae1a; /* orange clair soupe de poisson */ | 164 | background-color: #ffae1a; /* orange clair soupe de poisson */ |
diff --git a/public/css/head.css b/public/css/head.css index 4206044..c178d3a 100644 --- a/public/css/head.css +++ b/public/css/head.css | |||
| @@ -21,35 +21,26 @@ header | |||
| 21 | { | 21 | { |
| 22 | max-height: 24px; | 22 | max-height: 24px; |
| 23 | } | 23 | } |
| 24 | 24 | .header_additional_inputs | |
| 25 | { | ||
| 26 | display: flex; | ||
| 27 | flex-wrap: wrap; | ||
| 28 | justify-content: space-evenly; | ||
| 29 | align-items: center; | ||
| 30 | margin-top: 10px; | ||
| 31 | } | ||
| 25 | .header_content | 32 | .header_content |
| 26 | { | 33 | { |
| 27 | padding: 20px 0; | 34 | margin-top: 10px; |
| 35 | padding-bottom: 20px; | ||
| 28 | display: grid; | 36 | display: grid; |
| 29 | grid-template-columns: 1fr 1fr 1fr; | 37 | grid-template-columns: 1fr 1fr 1fr; |
| 30 | align-items: end; | 38 | align-items: end; |
| 31 | } | 39 | } |
| 32 | /*.header_left_col | 40 | /*.header_left_col |
| 33 | {}*/ | 41 | {}*/ |
| 34 | @media screen and (max-width: 1000px){ | ||
| 35 | .header_content{ | ||
| 36 | padding: 18px 0; | ||
| 37 | } | ||
| 38 | } | ||
| 39 | @media screen and (max-width: 450px){ | ||
| 40 | .header_content | ||
| 41 | { | ||
| 42 | /*grid-template-columns: 1fr 2fr 1fr;*/ | ||
| 43 | display: block; | ||
| 44 | padding: 18px; | ||
| 45 | } | ||
| 46 | #header_logo | ||
| 47 | { | ||
| 48 | display: none; | ||
| 49 | } | ||
| 50 | } | ||
| 51 | 42 | ||
| 52 | .site_title | 43 | .header_center_col |
| 53 | { | 44 | { |
| 54 | background-color: #ffffff7f; | 45 | background-color: #ffffff7f; |
| 55 | border-radius: 10px; | 46 | border-radius: 10px; |
| @@ -73,7 +64,7 @@ header h2 | |||
| 73 | header img | 64 | header img |
| 74 | { | 65 | { |
| 75 | vertical-align: bottom; /* supprime espace sous l'image */ | 66 | vertical-align: bottom; /* supprime espace sous l'image */ |
| 76 | max-width: 150px; | 67 | max-width: 180px; |
| 77 | max-height: 100px; | 68 | max-height: 100px; |
| 78 | } | 69 | } |
| 79 | header a | 70 | header a |
| @@ -81,25 +72,48 @@ header a | |||
| 81 | color: unset; /* ne plus hériter */ | 72 | color: unset; /* ne plus hériter */ |
| 82 | text-decoration: none; | 73 | text-decoration: none; |
| 83 | } | 74 | } |
| 84 | .editing_zone > div | ||
| 85 | { | ||
| 86 | /*display: inline;*/ /* à l'ancienne */ | ||
| 87 | } | ||
| 88 | /*.header_right_col | 75 | /*.header_right_col |
| 89 | {}*/ | 76 | {}*/ |
| 90 | .social | 77 | #header_social |
| 91 | { | 78 | { |
| 92 | /*align-self: end;*/ | 79 | display: flex; |
| 93 | /*padding: 4px;*/ | 80 | justify-content: center; |
| 94 | } | 81 | } |
| 95 | .social a img | 82 | #header_social_content img |
| 96 | { | 83 | { |
| 97 | width: 25px; | 84 | width: 28px; |
| 98 | background-color: #ffffffb3; | 85 | background-color: #ffffffb3; |
| 99 | border-radius: 50%; | 86 | border-radius: 50%; |
| 100 | } | 87 | } |
| 101 | 88 | ||
| 102 | .social img:hover | 89 | #header_social_content img:hover |
| 103 | { | 90 | { |
| 104 | background-color: yellow; | 91 | background-color: yellow; |
| 105 | } | 92 | } |
| 93 | #header_social_input | ||
| 94 | { | ||
| 95 | background-color: #ffffff7f; | ||
| 96 | border-radius: 10px; | ||
| 97 | padding: 5px; | ||
| 98 | } | ||
| 99 | |||
| 100 | @media screen and (max-width: 1000px){ | ||
| 101 | .header_content{ | ||
| 102 | padding: 15px 0; | ||
| 103 | } | ||
| 104 | header img | ||
| 105 | { | ||
| 106 | max-width: 160px; | ||
| 107 | } | ||
| 108 | } | ||
| 109 | @media screen and (max-width: 500px){ | ||
| 110 | .header_content | ||
| 111 | { | ||
| 112 | display: block; | ||
| 113 | padding: 10px; | ||
| 114 | } | ||
| 115 | #header_logo | ||
| 116 | { | ||
| 117 | display: none; | ||
| 118 | } | ||
| 119 | } \ No newline at end of file | ||
diff --git a/public/css/menu.css b/public/css/menu.css index ac77d50..0dfb840 100644 --- a/public/css/menu.css +++ b/public/css/menu.css | |||
| @@ -58,7 +58,7 @@ | |||
| 58 | 58 | ||
| 59 | .menu button | 59 | .menu button |
| 60 | { | 60 | { |
| 61 | margin: 5px; | 61 | margin: 4px 0; |
| 62 | } | 62 | } |
| 63 | .menu_entry_checkbox | 63 | .menu_entry_checkbox |
| 64 | { | 64 | { |
| @@ -109,15 +109,11 @@ | |||
| 109 | flex-wrap: wrap; | 109 | flex-wrap: wrap; |
| 110 | align-items: center; | 110 | align-items: center; |
| 111 | } | 111 | } |
| 112 | .menu .url | 112 | .menu .url_content input |
| 113 | { | ||
| 114 | text-wrap: nowrap; | ||
| 115 | } | ||
| 116 | .menu .url input[type=url] | ||
| 117 | { | 113 | { |
| 118 | width: 50%; | 114 | width: 50%; |
| 119 | } | 115 | } |
| 120 | 116 | ||
| 121 | @media screen and (min-width: 80rem) { | 117 | /*@media screen and (min-width: 80rem) { |
| 122 | i{} | 118 | i{} |
| 123 | } \ No newline at end of file | 119 | }*/ \ No newline at end of file |
