DjalimSimaila/MVC_Recettes
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made footer stick to the bottom

Browse Source
This commit is contained in:
Capelier-Marla 2023-01-24 16:23:08 +01:00
parent 1449a37d7a
commit b5015ecc86
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Views/errors/404.php
View File

@ -1,3 +1,5 @@
<h1>Error 404</h1> <main>
<h2>La page n'a pas été trouvée 😥</h2> <h1>Error 404</h1>
<a href="/">Retourner à l'accueil<a> <h2>La page n'a pas été trouvée 😥</h2>
<a href="/">Retourner à l'accueil</a>
</main>

44
static/style.css
View File

@ -21,16 +21,16 @@
--grey-dark: hsl(340, 2%, 63%); --grey-dark: hsl(340, 2%, 63%);
--size-0: 1px; --size-1: 1px;
--size-1: 3px; --size-xs: 3px;
--size-2: 5px; --size-s: 5px;
--size-3: 10px; --size-m: 10px;
--size-4: 16px; --size-l: 16px;
--size-5: 26px; --size-xl: 26px;
--size-6: 52px; --size-max: 52px;
--border-radius: var(--size-4); --border-radius: var(--size-l);
--border: solid var(--size-1); /* don't forget to choose a color after */ --border: solid var(--size-xs); /* don't forget to choose a color after */
--shadow: 2px 2px 18px -2px rgba(0,0,0,0.4), 2px 2px 4px 2px rgba(0,0,0,0.3); --shadow: 2px 2px 18px -2px rgba(0,0,0,0.4), 2px 2px 4px 2px rgba(0,0,0,0.3);
} }
@ -45,11 +45,17 @@ body {
} }
body > header { body > header {
height: var(--size-6); height: var(--size-max);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: var(--size-3); padding: var(--size-m);
font-size: var(--size-5); font-size: var(--size-xl);
background: var(--secondary-pastel); background: var(--secondary-pastel);
position: sticky;
top: 0;
}
body > main {
min-height: calc(100vh - 200px - var(--size-max) - 2*var(--size-m));
} }
body > header > nav { body > header > nav {
@ -61,7 +67,7 @@ body > header > nav > ul {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: var(--size-3); gap: var(--size-m);
height: 100%; height: 100%;
} }
@ -72,8 +78,8 @@ body > header > nav > ul > li {
background: var(--principal-neurtal); background: var(--principal-neurtal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
height: 100%; height: 100%;
padding-left: var(--size-4); padding-left: var(--size-l);
padding-right: var(--size-4); padding-right: var(--size-l);
} }
body > header > nav > ul > li:first-child { body > header > nav > ul > li:first-child {
background: none; background: none;
@ -94,26 +100,26 @@ body > header > nav > ul > li > a {
} }
body > header > nav > ul > li:first-child > a > img { body > header > nav > ul > li:first-child > a > img {
height: var(--size-6); height: var(--size-max);
} }
body > header > nav > ul > li:last-child { body > header > nav > ul > li:last-child {
border: var(--border) var(--principal-neurtal); border: var(--border) var(--principal-neurtal);
background: none; background: none;
} }
body > header > nav > ul > li:last-child > a > img { body > header > nav > ul > li:last-child > a > img {
height: calc(var(--size-6) - var(--size-5)); height: calc(var(--size-max) - var(--size-xl));
} }
footer { footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--size-6); gap: var(--size-max);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 200px; height: 200px;
width: 100vw; width: 100vw;
background: var(--grey-dark); background: var(--grey-dark);
color: var(--secondary-pastel); color: var(--secondary-pastel);
font-size: var(--size-5); font-size: var(--size-xl);
} }