From 6b590330b5dc54cd6dfa60721d90c8decb87f0c3 Mon Sep 17 00:00:00 2001
From: Capelier-Marla <marla.capelier@etu.univ-amu.fr>
Date: Wed, 25 Jan 2023 15:55:34 +0100
Subject: [PATCH] setted style for aside part (categories)

---
 static/style.css | 58 +++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/static/style.css b/static/style.css
index 88370c3..d0b08cd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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 {
     font-family: 'Nunito', 'Arial';
@@ -6,7 +6,7 @@
     /*--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-neutral:    hsl(341, 94%, 65%);
     /*--principal-dark:       hsl(342, 72%, 49%);*/
     /*--principal-darker:     hsl(342, 62%, 37%);*/
     /*--principal-darkest:    hsl(342, 78%, 19%);*/
@@ -14,7 +14,7 @@
     --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-neutral:    hsl(31, 54%, 69%);*/
     /*--secondary-dark:       hsl(30, 66%, 63%);*/
     /*--secondary-darker:     hsl(30, 46%, 46%);*/
     /*--secondary-darkest:    hsl(30, 64%, 29%);*/
@@ -42,6 +42,9 @@
 
 body {
     background: var(--secondary-pastel);
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
 }
 
 body > header {
@@ -75,7 +78,7 @@ body > header > nav > ul > li::marker {
     content: none;
 }
 body > header > nav > ul > li {
-    background: var(--principal-neurtal);
+    background: var(--principal-neutral);
     border-radius: var(--border-radius);
     height: 100%;
     padding-left: var(--size-l);
@@ -103,13 +106,58 @@ 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);
+    border: var(--border) var(--principal-neutral);
     background: none;
 }
 body > header > nav > ul > li:last-child > a > img {
     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 {
     display: flex;