1 files changed, 50 insertions, 24 deletions

diff --git a/Static/Css/main.css b/Static/Css/main.css
index a602db3..ff1e229 100644
--- a/Static/Css/main.css
+++ b/Static/Css/main.css
@@ -1,4 +1,12 @@
 /* 
+############################################################################
+#                                                                          #
+# Description: Fichier principal regroupant les éléments communs à toutes  #
+#              les pages.                                                  #
+#                                                                          #
+############################################################################ 
+
+
 Sites web utilisés pour le CSS:
 https://css-tricks.com/guides/
 https://stackoverflow.com/
@@ -9,43 +17,46 @@ sur mon instance SearX https://searx.debulois.fr
 */
 
 :root {
+    /* Global */
     --mainSiteColor:           #c0392b;
     --bodyBg:                  #fafafa;  
     --separatorBg:              var(--bodyBg);
     --bg:                      white;
     --text:                    black;
-
+    /* Header & navbar */
     --navbarTextColor:          var(--text);
     --headerBg:                 var(--bg);
     --navBg:                   #f8f8f8;
-
+    /* Slideshow */
     --slideText:               whitesmoke;
     --slideBg:                 black;
     --slideStroke:             black;
-
+    /* Footer */
     --footerTextColor:         #636e72;
     --footerBgColor:           #2d3436;
-
-    --iconColor:               white;
-    --btnHoverBg:              #e74c3c;
-
+    /* Tableaux */
     --tableText:                var(--text);
     --tableBg:                  var(--bodyBg);
     --tdBorderColor:           rgba(0, 0, 0, 0.2);
     --tableStarUnchecked:      darkgray;
     --tableStarChecked:        orange;
-
+    /* Messages */
     --messageTextErrorColor:   red;
     --messageTextSuccessColor: green;
-
+    /* Input icon et button */
+    --iconColor:               white;
+    --btnHoverBg:              #e74c3c;
+    /* Input border */
     --inputBorder:              2px solid var(--mainSiteColor);
     --thBorder:                 2px solid var(--mainSiteColor);
     --tdBorder:                 2px solid var(--tdBorderColor);
     --iBorderRadius:            5px 0px 0px 5px;
     --inputBorderRadius:        0px 5px 5px 0px;
-
+    /* Fonts size */
     --fontSizeI:                20px;
     --fontSizeSlideP:           34px;
+    --fontSizeSmallPhone:       12px;
+    --fontSizeSmallLess:        14px;
     --fontSizeSmall:            16px;
     --fontSizeSmallPlus:        18px;
     --fontSizeMedium:           26px;
@@ -94,15 +105,16 @@ html {
 }
 
 body {
-    font-family:     SourceSansPro;
-    font-size:       var(--fontSizeSmall);
-    margin:          0px;
-    min-height:      100vh;
-    display:         flex;
-    flex-direction:  column;
-    justify-content: space-between;
+
+    min-height:       100vh;
+    font-family:      SourceSansPro;
+    display:          flex;
+    flex-direction:   column;
+    justify-content:  space-between;
+    margin:           0px;
     background-color: var(--bodyBg);
     color:            var(--textColor);
+    font-size:        var(--fontSizeSmall);
 }
 
 main {
@@ -120,24 +132,23 @@ main {
     border-left:       3px solid var(--mainSiteColor);
     border-radius:     3px;
     background-color:  var(--bg);
-    color:             var(--textColor);
 }
 
 main h2 {
     max-width:     80%;
-    font-size:     var(--fontSizeLarge);
     margin-left:   auto;
     margin-right:  auto;
     padding:       1.5% 3%;
+    font-size:     var(--fontSizeLarge);
     border-bottom: var(--mainSiteColor) 3px solid;
 }
 
 main h3 {
     max-width:     80%;
-    font-size:     var(--fontSizeMedium);
     margin-left:   auto;
     margin-right:  auto;
     padding:       0.5% 3%;
+    font-size:     var(--fontSizeMedium);
     border-bottom: var(--mainSiteColor) 2px solid;
 }
 
@@ -161,16 +172,16 @@ main table {
     display:         block;
     Overflow-x:      auto;
     Overflow-y:      auto;
-    color:           var(--textColor);
     padding:         1em;
     border-collapse: collapse;
+    width:           fit-content;
     max-width:       95%;
     margin-left:     auto;
     margin-right:    auto;
+    color:           var(--textColor);
 }
 
 main th {
-    font-size:        var(--fontSizeSmallPlus);
     border:           var(--thBorder);
     background-color: var(--tableBg);
 }
@@ -180,7 +191,6 @@ main td {
     background-color: var(--tableBg);
 }
 
-
 select {
     height:        1.6em;
     line-height:   1.6em;
@@ -191,6 +201,9 @@ select {
 main input[type="text"],
 main input[type="email"],
 main input[type="password"] {
+    padding:       2px;
+    height:        2.5em;
+    font-size:     calc(32px / 2.5);
     border:        var(--inputBorder);
     border-radius: var(--inputBorderRadius);
 }
@@ -198,7 +211,6 @@ main input[type="password"] {
 main input[type="submit"],
 main button {
     color:            var(--textColor);
-    font-size:        var(--fontSizeSmall);
     border:           var(--inputBorder);
     background-color: var(--bg);
     border-radius:    5px;
@@ -212,3 +224,17 @@ main button:hover {
     color:              var(--bg);
     background-color:   var(--btnHoverBg);
 }
+
+@media screen and (max-width: 768px) {
+    body {
+        font-size: var(--fontSizeSmallLess);
+    }
+
+    main h2 {
+        font-size: var(--fontSizeMedium);
+    }
+
+    main h3 {
+        font-size: var(--fontSizeSmallPlus);
+    }
+}
\ No newline at end of file