wireframe tags

style.css

@@ -5,16 +5,25 @@
 
   body {
     background-color: white;
+    margin: 0;
   }
 
-  /* audio,
+  /* RESET */
+  audio,
   canvas,
   iframe,
   img,
   svg,
   video {
     vertical-align: middle;
-  } */
+  }
+
+  ul,
+  li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 
   /* PARAMÈTRE DE BASE DE BOUTTON */
   .button {
@@ -59,7 +68,6 @@
     position: inherit;
     width: 100vw;
     left: 0;
-    /* background-color: rgb(255, 255, 255, 0.75%); */
     background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%);
   }
 
@@ -99,7 +107,8 @@
     font-size: 1rem;
   }
 
-  form input {
+  form input,
+  select {
     position: relative;
     border-color: #c104fc;
     border-radius: 5px;
@@ -108,20 +117,13 @@
     padding: 0.5rem;
     width: auto;
     overflow: visible;
-  }
-
-  form select {
-    position: relative;
-    border-color: #c104fc;
-    border-radius: 5px;
-    border-style: solid;
-    margin: 1rem;
-    padding: 0.5rem;
+    outline: none;
     background-color: white;
   }
 
-  select {
-    background: orange;
+  form input:focus,
+  select:focus {
+    border: 3px solid rgba(77, 168, 112, 1);
   }
 
   #enter input {
@@ -130,6 +132,17 @@
     font-weight: bold;
     padding: 1.2rem;
     border-radius: 16px;
+    background-color: none;
+    color: rgb(193, 4, 252);
+    border: 1px solid rgb(193, 4, 252);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  #enter input:hover {
+    background-color: rgb(193, 4, 252);
+    color: white;
   }
 
   form .boutton {
@@ -155,56 +168,51 @@
 
 
   /* GRILLE HOMEPAGE */
-  .grid-section {
-    position: relative;
-    display: grid;
-    /* margin-top:20vh; */
-    margin-right: 1vw;
-    grid-template-columns: repeat(5, 1fr);
-    grid-gap: 10px;
-    grid-auto-rows: minmax(100px, auto);
-  }
 
   .grid-section {
     top: 15vh;
-    padding: 1rem;
-    /* display: block; */
-  }
-
-  ul,
-  li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+    position: relative;
+    display: grid;
+    /* grid-auto-rows: minmax(100px, auto); */
   }
 
   /* MOSAIC MEMOIRE */
 
   .grid1 {
-    grid-column: 1 / 5;
-    grid-row: 1 / 12;
+    position: relative;
+    grid-column: 1 / 6;
+    width: 100%;
+    margin: none;
+    padding: 1rem;
+    left: 0;
+    /* margin-right: 20vw; */
   }
 
   #mosaic ul {
     -webkit-flex-direction: row;
     flex-direction: row;
     align-items: flex-start;
+    flex-wrap: nowrap;
+    /* default value; can be omitted */
   }
 
   #mosaic li {
+    /* display: flex; */
     float: left;
     overflow: hidden;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    width: 33.333333333%;
-    position: relative;
+    max-width: 23%;
+    /* position: relative; */
     overflow: hidden;
     padding: 1rem;
+    margin: 0.5rem;
   }
 
   #mosaic img {
     max-width: 100%;
+    border-radius: 16px;
   }
 
   #mosaic a {
@@ -227,31 +235,43 @@
     border-radius: 16px;
   }
 
-  /* LISTE ANNÉE */
+  /* LISTE ANNÉE, tag, etc */
 
   .grid2 {
-    grid-column: 5 / 5;
-    grid-row: 1 / 12;
-    position: fixed;
+    position: relative;
+    display: flex;
+    grid-column: 6/ 6;
     right: 0;
+    padding: 2rem;
+    font-size: 0.8rem;
+    /* overflow: auto; */
+    justify-items: left;
+    height: 100vh;
+
+  }
+
+  .list ul {
+    margin: 1rem;
+    height: auto;
+    width: 100%;
+    align-items: center;
+  }
+
+  .list li {
+    /* -webkit-flex-direction: row;
+    flex-direction: row;
+    align-self: flex-start;
+    float: right; */
+    /* display: block; */
+    width: fit-content;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     margin: 1rem;
   }
 
-  #list ul {
-    flex-direction: column;
-    padding: 0 5rem 0 5rem;
-    width: 10vw;
-  }
-
-
-  #list a {
-    /* -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; */
-    /* float: left; */
-    display: block;
-    width: fit-content;
-    padding: 0.3rem;
+  .list a {
+    padding: 0.4rem;
     background-color: #c104fc;
     color: white;
     border-radius: 12px;
@@ -260,8 +280,14 @@
     text-decoration: none;
     font-weight: bold;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
   }
 
-  #list a:hover {
+  .list a:hover {
     color: rgba(77, 168, 112, 1);
+  }
+
+  .list hr{
+    color: #c104fc;
+    width: 50%;
   }