diff --git a/css/index.css b/css/index.css index 4e6e951..0fd09b5 100644 --- a/css/index.css +++ b/css/index.css @@ -1,4 +1,6 @@ #news { overflow: auto; height: 150px; + border: solid black; + padding-left: 1em; } diff --git a/css/style.css b/css/style.css index a77c56e..478a619 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,10 @@ body { margin: 0; - /*display: flex; - flex-direction: column;*/ display: grid; - min-height: 100vh; - /*grid-template-rows: auto 1fr auto;*/ - grid-template-columns: 0.2fr 1fr; + grid-template-areas: + "header header" + "menu main" + "footer footer"; } header { @@ -14,7 +13,7 @@ header { margin-top: 2em; margin-left: 3em; margin-right: 3em; - grid-column: 1 / 3; + grid-area: header; } header a { @@ -59,7 +58,7 @@ header h2 { margin: 2em 0 2em 3em; display: flex; flex-direction: column; - grid-column: 1; + grid-area: menu; } #header-links a { @@ -74,13 +73,14 @@ header h2 { #main { margin: 2em 3em 5em 1em; + grid-area: main; } footer { background-color: #304B99; padding: 1em; padding-bottom: 0; - grid-column: 1/4; + grid-area: footer; } #buttons { @@ -130,3 +130,46 @@ footer { #buttons div { margin-bottom: 1em; } + +@media only screen and (max-width: 641px) { + body { + grid-template-areas: + "header header" + "main main" + "menu menu" + "footer footer"; + } + + #header-links { + position: sticky; + bottom: 0; + margin-left: 0; + margin-top: 0; + flex-direction: row; + background-color: white; + border-top: solid black; + flex-wrap: wrap; + } + + header { + display: flex; + flex-direction: column; + } + + #lang { + justify-items: center; + } + + #main { + margin: 2em 1em 2em 1em; + } + + #footer-main { + display: flex; + flex-direction: column; + } + + .pred-buttons { + align-self: center; + } +} diff --git a/header.html b/header.html index 51a68f2..d4dbdc5 100644 --- a/header.html +++ b/header.html @@ -2,6 +2,7 @@ <html lang="%lang%"> <head> <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Security-Policy" content="default-src 'self';"> <link rel="icon" href="/img/favicon.gif" type="image/gif" /> <link rel="stylesheet" href="/css/style.css" /> diff --git a/lang/en/index.html b/lang/en/index.html index 54e03ea..270f411 100644 --- a/lang/en/index.html +++ b/lang/en/index.html @@ -37,7 +37,9 @@ rel="stylesheet" href="/css/index.css" <p><code>13-04-2022:</code> add this section.</p> </div> - <hr /> + <!-- + <hr /> + --> <!-- <h3>A propos de l'annuaire</h3> diff --git a/lang/fr/index.html b/lang/fr/index.html index 50fbb4c..39d65e6 100644 --- a/lang/fr/index.html +++ b/lang/fr/index.html @@ -37,7 +37,9 @@ rel="stylesheet" href="/css/index.css" <p><code>13-04-2022:</code> ajout de cette section.</p> </div> - <hr /> + <!-- + <hr /> + --> <!-- <h2>L'annuaire est temporairement supprimé.</h2>