Version 0.1.1 - Ajout d'une page de login et de style

public/stylesheets/style.css

@@ -1,11 +1,17 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 
 body {
   padding: 2%;
-  background-color: #323031;
+  background: linear-gradient(120deg, #323031 40%, rgba(241,0,0,1) 100%);
   color: white;
-  font-size: 1vw;
+  font-size: 20px;
   font-family: 'Roboto', sans-serif !important;
+  
+}
+
+html {
+  min-height: 100%;
+  margin: 0;
 }
 
 /*Button*/
@@ -19,7 +25,7 @@ body {
   color: currentColor;
   padding: 0.5vw;
   transition: 0.2s;
-  
+  cursor: pointer;
 }
 
 .btn span {
@@ -48,20 +54,27 @@ body {
  
 }
 
+.btn span a {
+  text-decoration: none;
+}
+
 /* Miniaturiez Button */
 
 .min {
 
-  width: 2vw !important;
-  height: 2vw !important;
+  width: 40px !important;
+  height: 40px !important;
   border-radius: 100% !important;
   font-size: 1vw !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transition: 0.2s;
+  padding: 0 !important;
 }
   
+.min span {
+
+  font-size: 20px !important;
+
+}
 
 
 
@@ -69,7 +82,7 @@ body {
 
 .red {
 
-  color: rgb(255, 63, 63) !important; 
+  color: #f01000!important; 
 }
 
 .blue {
@@ -85,4 +98,185 @@ body {
 .green {
 
   color: rgb(64, 248, 64) !important;
+}
+
+/*Balise Properties*/
+
+code {
+
+  background-color: #3D3B3C;
+  padding: 0.3vw;
+  border-radius: 0.5vw;
+}
+
+p {
+  margin-block-start: 0.5em !important;
+  margin-block-end: 0.5em !important;
+}
+
+a {
+  color: currentColor;
+}
+
+/*Lists*/
+
+.center {
+
+  text-align: center !important;
+  
+
+}
+
+.col {
+
+  display: flex;
+  flex-direction: column;
+  gap: 2vw;
+
+}
+
+@media (max-width: 500px) {
+
+  .row {
+
+  
+    display: flex;
+    flex-direction: column;
+    gap: 2vw;
+  
+  }
+  
+} 
+
+@media (min-width: 500px) {
+
+.row {
+
+  
+  display: flex;
+  flex-direction: row;
+  gap: 2vw;
+  
+}
+
+}
+
+/* Fields */
+
+.field {
+
+  width: fit-content;
+  border-radius: 5px;
+  padding-bottom: 0.3vw;
+  padding-top: 0.3vw;
+  padding-left: 0.5vw;
+  border: 1px solid white;
+  background-color: transparent;
+  transition: 0.2s;
+  color: white;
+}
+
+.field:focus {
+  color: black;
+  outline: none;
+  background-color: white;
+  box-shadow: 0px 0px 8px #C1BDB3 ;
+}
+
+
+
+
+/* Logo */
+
+@media (max-width: 640px) {
+
+  .logo {
+
+    font-family: 'Gunship', sans-serif;
+    text-shadow: 0px 0px 10px #ffffff;
+    font-size: 50px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .logo-img {
+  
+    width: 70px;
+    margin-right: 10px;
+  }
+  
+  
+} 
+
+@media (min-width: 640px) {
+
+  .logo {
+
+    font-family: 'Gunship', sans-serif;
+    text-shadow: 0px 0px 10px #ffffff;
+    font-size: 50px;
+    display: flex;
+
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+  }
+  
+  .logo-img {
+  
+    width: 70px;
+    margin-right: 10px;
+  }
+  
+
+}
+
+
+
+/* Form Box */
+
+
+.form-box {
+
+  width: 500px;
+  height: 400px;
+  border-radius: 0.5vw;
+  display: flex;
+  padding: 2%;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #605e5863;
+}
+
+.m-align {
+
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+.t-center {
+
+  text-align: center;
+}
+
+
+/* LOGIN Specs */
+
+.LOG_btn {
+
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+
+.LOG_body {
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 0 !important;
+    margin: 0 !important;
 }