From 22d67c08216935b64d46e291067f76b8cfb69c52 Mon Sep 17 00:00:00 2001
From: Pontoporeia <spam3@happyngreen.fr>
Date: Wed, 21 Dec 2022 19:09:02 +0100
Subject: [PATCH] finition de la homepage

---
 index.html |  6 +++---
 style.css  | 60 ++++++++++++++++++++++++++++++++++--------------------
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 393c457..a234c9b 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,9 @@
     <div class=" grid-section">
       <section class="grid1">
         <ul id="mosaic">
-          <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt="">Yeah I'm still searchin'<span></span></a></li>
-          <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span>Froncer les sourcils</span></a></li>
-          <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span>Design Spéculatif: La guerre des imaginaires</span></a></li>
+          <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt=""><span><strong>Yeah I'm still searchin'</strong><br>Meryll Hardt</span></a></li>
+          <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span><strong>Froncer les sourcils</strong><br>Olivier Bertrand</span></a></li>
+          <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
         </ul>
       </section>
       <section class="grid2">
diff --git a/style.css b/style.css
index b55123b..3ba7dc6 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,15 @@
     background-color: white;
   }
 
+  /* audio,
+  canvas,
+  iframe,
+  img,
+  svg,
+  video {
+    vertical-align: middle;
+  } */
+
   /* PARAMÈTRE DE BASE DE BOUTTON */
   .button {
     margin: 0;
@@ -25,7 +34,7 @@
     top: 0;
     left: 0;
     margin: 0;
-    padding: 1.2rem;
+    padding: 1rem;
     height: auto;
     width: 100%;
     text-decoration: none;
@@ -50,8 +59,8 @@
     position: inherit;
     width: 100vw;
     left: 0;
-    background-color: white;
-    background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 40%);
+    /* background-color: rgb(255, 255, 255, 0.75%); */
+    background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%);
   }
 
   .menu-content {
@@ -68,7 +77,7 @@
     border: 1px solid rgb(193, 4, 252);
     text-align: center;
     text-decoration: none;
-    font-size: 0.8rem;
+    font-size: 1rem;
     transition-duration: 0.4s;
     cursor: pointer;
     border-radius: 16px;
@@ -145,7 +154,7 @@
   }
 
 
-  /* GRILLE */
+  /* GRILLE HOMEPAGE */
   .grid-section {
     position: relative;
     display: grid;
@@ -162,21 +171,6 @@
     /* display: block; */
   }
 
-  .grid1 {
-    grid-column: 1 / 5;
-    grid-row: 1 / 12;
-  }
-
-  .grid2 {
-    grid-column: 5 / 5;
-    grid-row: 1 / 12;
-    position: fixed;
-    right: 0;
-    margin: 1rem;
-  }
-
-
-
   ul,
   li {
     list-style-type: none;
@@ -184,9 +178,17 @@
     padding: 0;
   }
 
+  /* MOSAIC MEMOIRE */
+
+  .grid1 {
+    grid-column: 1 / 5;
+    grid-row: 1 / 12;
+  }
+
   #mosaic ul {
     -webkit-flex-direction: row;
     flex-direction: row;
+    align-items: flex-start;
   }
 
   #mosaic li {
@@ -205,8 +207,7 @@
     max-width: 100%;
   }
 
-  #mosaic span,
-  a {
+  #mosaic a {
     text-decoration: none;
     outline: none;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
@@ -214,6 +215,11 @@
     width: auto;
   }
 
+  #mosaic span {
+    display: block;
+    margin: 1rem;
+  }
+
   #mosaic li:hover {
     color: #c104fc;
     border-color: #c104fc;
@@ -221,6 +227,16 @@
     border-radius: 16px;
   }
 
+  /* LISTE ANNÉE */
+
+  .grid2 {
+    grid-column: 5 / 5;
+    grid-row: 1 / 12;
+    position: fixed;
+    right: 0;
+    margin: 1rem;
+  }
+
   #list ul {
     flex-direction: column;
     padding: 0 5rem 0 5rem;