Merge pull request #66 from ThomasRubini/css_vars_header_footer
This commit is contained in:
Thomas Rubini
GitHub
commit
8c07bf49d4
@ -4,7 +4,7 @@ $array_header = array(
|
||||
"Recette" => "/Recipe/view/36",
|
||||
"+" => "/recipe/edit",
|
||||
"Rechercher" => "rechercher",
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 30.933594 32.527344 C 30.785156 30.914063 30.84375 29.789063 30.84375 28.316406 C 31.574219 27.933594 32.882813 25.492188 33.101563 23.429688 C 33.675781 23.382813 34.582031 22.824219 34.847656 20.613281 C 34.988281 19.425781 34.421875 18.757813 34.074219 18.546875 C 35.007813 15.738281 36.949219 7.046875 30.488281 6.148438 C 29.820313 4.980469 28.117188 4.390625 25.90625 4.390625 C 17.050781 4.554688 15.984375 11.078125 17.925781 18.546875 C 17.578125 18.757813 17.011719 19.425781 17.152344 20.613281 C 17.421875 22.824219 18.324219 23.382813 18.898438 23.429688 C 19.117188 25.492188 20.476563 27.933594 21.210938 28.316406 C 21.210938 29.789063 21.265625 30.914063 21.117188 32.527344 C 19.367188 37.238281 7.546875 35.914063 7 45 L 45 45 C 44.453125 35.914063 32.683594 37.238281 30.933594 32.527344 Z"/></svg>' => "/user/view"
|
||||
'<img src="/static/img/defaultProfil.svg" type="image/svg+xml">' => "/user/view"
|
||||
);
|
||||
?>
|
||||
<header>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<h1>Error 404</h1>
|
||||
<h2>La page n'a pas été trouvée 😥</h2>
|
||||
<a href="/">Retourner à l'accueil<a>
|
||||
<main>
|
||||
<h1>Error 404</h1>
|
||||
<h2>La page n'a pas été trouvée 😥</h2>
|
||||
<a href="/">Retourner à l'accueil</a>
|
||||
</main>
|
||||
|
||||
@ -12,5 +12,3 @@
|
||||
?>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
@ -3,10 +3,11 @@
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>My sweet MVC</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<?php View::show('common/header'); ?>
|
||||
<?php echo $A_view['body'] ?>
|
||||
<?php View::show('common/footer'); ?>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 30.933594 32.527344 C 30.785156 30.914063 30.84375 29.789063 30.84375 28.316406 C 31.574219 27.933594 32.882813 25.492188 33.101563 23.429688 C 33.675781 23.382813 34.582031 22.824219 34.847656 20.613281 C 34.988281 19.425781 34.421875 18.757813 34.074219 18.546875 C 35.007813 15.738281 36.949219 7.046875 30.488281 6.148438 C 29.820313 4.980469 28.117188 4.390625 25.90625 4.390625 C 17.050781 4.554688 15.984375 11.078125 17.925781 18.546875 C 17.578125 18.757813 17.011719 19.425781 17.152344 20.613281 C 17.421875 22.824219 18.324219 23.382813 18.898438 23.429688 C 19.117188 25.492188 20.476563 27.933594 21.210938 28.316406 C 21.210938 29.789063 21.265625 30.914063 21.117188 32.527344 C 19.367188 37.238281 7.546875 35.914063 7 45 L 45 45 C 44.453125 35.914063 32.683594 37.238281 30.933594 32.527344 Z"/></svg>
|
||||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 41" width="38" height="41">
|
||||
<path d="m38 41h-38c0.5-9.1 12.4-7.8 14.1-12.5 0.2-1.6 0.1-2.7 0.1-4.2-0.7-0.4-2.1-2.8-2.3-4.9-0.6 0-1.5-0.6-1.7-2.8-0.2-1.2 0.4-1.8 0.7-2.1-1.9-7.4-0.8-13.9 8-14.1 2.2 0 3.9 0.6 4.6 1.7 6.4 0.9 4.5 9.6 3.6 12.4 0.3 0.3 0.9 0.9 0.7 2.1-0.2 2.2-1.1 2.8-1.7 2.8-0.2 2.1-1.5 4.5-2.3 4.9 0 1.5 0 2.6 0.1 4.2 1.8 4.7 13.6 3.4 14.1 12.5z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 919 B After Width: | Height: | Size: 441 B |
125
static/style.css
Normal file
125
static/style.css
Normal file
@ -0,0 +1,125 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: 'Nunito', 'Arial';
|
||||
/* vars */
|
||||
/*--principal-pastel: hsl(341, 100%, 95%);*/
|
||||
/*--principal-brightest: hsl(341, 85%, 89%);*/
|
||||
/*--principal-light: hsl(342, 95%, 79%);*/
|
||||
--principal-neurtal: hsl(341, 94%, 65%);
|
||||
/*--principal-dark: hsl(342, 72%, 49%);*/
|
||||
/*--principal-darker: hsl(342, 62%, 37%);*/
|
||||
/*--principal-darkest: hsl(342, 78%, 19%);*/
|
||||
|
||||
--secondary-pastel: hsl(30, 33%, 98%);
|
||||
/*--secondary-brightest: hsl(29, 56%, 91%);*/
|
||||
/*--secondary-light: hsl(30, 59%, 83%);*/
|
||||
/*--secondary-neurtal: hsl(31, 54%, 69%);*/
|
||||
/*--secondary-dark: hsl(30, 66%, 63%);*/
|
||||
/*--secondary-darker: hsl(30, 46%, 46%);*/
|
||||
/*--secondary-darkest: hsl(30, 64%, 29%);*/
|
||||
|
||||
--grey-dark: hsl(340, 2%, 63%);
|
||||
|
||||
--size-1: 1px;
|
||||
--size-xs: 3px;
|
||||
--size-s: 5px;
|
||||
--size-m: 10px;
|
||||
--size-l: 16px;
|
||||
--size-xl: 26px;
|
||||
--size-max: 52px;
|
||||
|
||||
--border-radius: var(--size-l);
|
||||
--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);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--secondary-pastel);
|
||||
}
|
||||
|
||||
body > header {
|
||||
height: var(--size-max);
|
||||
box-shadow: var(--shadow);
|
||||
padding: var(--size-m);
|
||||
font-size: var(--size-xl);
|
||||
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 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body > header > nav > ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--size-m);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body > header > nav > ul > li::marker {
|
||||
content: none;
|
||||
}
|
||||
body > header > nav > ul > li {
|
||||
background: var(--principal-neurtal);
|
||||
border-radius: var(--border-radius);
|
||||
height: 100%;
|
||||
padding-left: var(--size-l);
|
||||
padding-right: var(--size-l);
|
||||
}
|
||||
body > header > nav > ul > li:first-child {
|
||||
background: none;
|
||||
border-radius: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
body > header > nav > ul > li {
|
||||
display: flex;
|
||||
align-items: center; /* aligns the contents of the <a> element vertically */
|
||||
height: 100%; /* sets the height of the <a> element to 100% of the parent <li> element */
|
||||
}
|
||||
|
||||
body > header > nav > ul > li > a {
|
||||
color: var(--secondary-pastel);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body > header > nav > ul > li:first-child > a > img {
|
||||
height: var(--size-max);
|
||||
}
|
||||
body > header > nav > ul > li:last-child {
|
||||
border: var(--border) var(--principal-neurtal);
|
||||
background: none;
|
||||
}
|
||||
body > header > nav > ul > li:last-child > a > img {
|
||||
height: calc(var(--size-max) - var(--size-xl));
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-max);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
width: 100vw;
|
||||
background: var(--grey-dark);
|
||||
color: var(--secondary-pastel);
|
||||
font-size: var(--size-xl);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user