Version 0.2.0 - PREVERSION - Ajout de certaines fonctionnalités

public/stylesheets/style.css

@@ -85,6 +85,10 @@ html {
   color: #f01000!important; 
 }
 
+.lightred {
+  color: #ff5d51 !important;
+}
+
 .blue {
 
   color: rgb(66, 242, 255) !important;
@@ -251,6 +255,65 @@ a {
   background-color: #605e5863;
 }
 
+.panel-box {
+
+  width: 900px;
+  height: 500px;
+  border-radius: 0.5vw;
+  display: flex;
+  padding: 2%;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #605e5863;
+  gap: 50px;
+}
+
+.subpanel-box {
+
+  width: 900px;
+  height: 50px;
+  border-radius: 0.5vw;
+  padding: 2%;
+  display: flex;
+  justify-content: space-between;
+  background-color: #605e5863;
+}
+
+.subpanel-image {
+
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+}
+
+.subpanel-user {
+
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.subpanel-userinfo {
+  text-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.subpanel-username {
+
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.68);
+  margin-block: 0 !important;
+}
+
+
+.subpanel-dispname {
+
+  margin-block: 0 !important;
+}
+
 .m-align {
 
     margin-right: auto !important;
@@ -274,9 +337,71 @@ a {
 .LOG_body {
 
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    gap: 10px;
     align-items: center;
     height: 100vh;
     padding: 0 !important;
     margin: 0 !important;
+}
+
+/*INDEX Specs*/
+
+@media (max-width: 640px) {
+
+  .views-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+  
+  }
+  
+  
+} 
+
+@media (min-width: 640px) {
+
+  .views-box {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+  
+  }
+  
+
+}
+
+
+.view {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: 0.1s;
+
+}
+
+.view:hover {
+
+  cursor: pointer;
+  color: #ff5d51;
+  text-shadow: 0px 3px 2px #070607;
+}
+.view:active {
+
+  cursor: pointer;
+  color: #ff5d5194;
+}
+
+.view-image {
+
+  font-size: 72px;
 }