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

setted style for aside part (categories)

Browse Source
This commit is contained in:
Capelier-Marla 2023-01-25 15:55:34 +01:00
parent 755ea94775
commit 6b590330b5
1 changed files with 53 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
static/style.css
View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap');
:root { :root {
font-family: 'Nunito', 'Arial'; font-family: 'Nunito', 'Arial';
@ -6,7 +6,7 @@
/*--principal-pastel: hsl(341, 100%, 95%);*/ /*--principal-pastel: hsl(341, 100%, 95%);*/
/*--principal-brightest: hsl(341, 85%, 89%);*/ /*--principal-brightest: hsl(341, 85%, 89%);*/
/*--principal-light: hsl(342, 95%, 79%);*/ /*--principal-light: hsl(342, 95%, 79%);*/
--principal-neurtal: hsl(341, 94%, 65%); --principal-neutral: hsl(341, 94%, 65%);
/*--principal-dark: hsl(342, 72%, 49%);*/ /*--principal-dark: hsl(342, 72%, 49%);*/
/*--principal-darker: hsl(342, 62%, 37%);*/ /*--principal-darker: hsl(342, 62%, 37%);*/
/*--principal-darkest: hsl(342, 78%, 19%);*/ /*--principal-darkest: hsl(342, 78%, 19%);*/
@ -14,7 +14,7 @@
--secondary-pastel: hsl(30, 33%, 98%); --secondary-pastel: hsl(30, 33%, 98%);
/*--secondary-brightest: hsl(29, 56%, 91%);*/ /*--secondary-brightest: hsl(29, 56%, 91%);*/
/*--secondary-light: hsl(30, 59%, 83%);*/ /*--secondary-light: hsl(30, 59%, 83%);*/
/*--secondary-neurtal: hsl(31, 54%, 69%);*/ /*--secondary-neutral: hsl(31, 54%, 69%);*/
/*--secondary-dark: hsl(30, 66%, 63%);*/ /*--secondary-dark: hsl(30, 66%, 63%);*/
/*--secondary-darker: hsl(30, 46%, 46%);*/ /*--secondary-darker: hsl(30, 46%, 46%);*/
/*--secondary-darkest: hsl(30, 64%, 29%);*/ /*--secondary-darkest: hsl(30, 64%, 29%);*/
@ -42,6 +42,9 @@
body { body {
background: var(--secondary-pastel); background: var(--secondary-pastel);
display: flex;
flex-direction: column;
overflow-x: hidden;
} }
body > header { body > header {
@ -75,7 +78,7 @@ body > header > nav > ul > li::marker {
content: none; content: none;
} }
body > header > nav > ul > li { body > header > nav > ul > li {
background: var(--principal-neurtal); background: var(--principal-neutral);
border-radius: var(--border-radius); border-radius: var(--border-radius);
height: 100%; height: 100%;
padding-left: var(--size-l); padding-left: var(--size-l);
@ -103,13 +106,58 @@ body > header > nav > ul > li:first-child > a > img {
height: var(--size-max); 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-neutral);
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-max) - var(--size-xl)); height: calc(var(--size-max) - var(--size-xl));
} }
main:has(aside) {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--size-max);
margin-top: var(--size-xl);
width: 100vw;
}
aside {
background: var(--secondary-pastel);
border-radius: var(--border-radius);
padding: var(--size-xl);
padding-left: calc(var(--size-xl) * 1.5);
box-shadow: var(--shadow);
height: fit-content;
}
aside ul {
display: flex;
flex-direction: column;
gap: var(--size-s);
}
aside li:has(h3)::marker{
content: none;
}
aside li h3 {
font-size: var(--size-xl);
font-weight: 700;
color: var(--principal-neutral);
margin-bottom: var(--size-m);
}
aside a {
color: black;
text-decoration: none;
}
aside a:hover {
text-decoration: underline;
}
body > main > article > section > h1 {
font-size: var(--size-xl);
width: 100%;
border-bottom: var(--border) var(--principal-neutral);
margin-bottom: var(--size-xl);
}
footer { footer {
display: flex; display: flex;