From 494916a0572188d76cb851391740ac3f1ffbd8a6 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Sat, 8 Oct 2022 16:03:35 +0200
Subject: [PATCH] add main style

---
 src/public/styles/style.css | 55 +++++++++++++++++++++++++++++++++++--
 src/templates/index.html    | 14 +++++++++-
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/public/styles/style.css b/src/public/styles/style.css
index 77280c4..a22faf2 100644
--- a/src/public/styles/style.css
+++ b/src/public/styles/style.css
@@ -15,6 +15,7 @@
         --link-color-hover: rgb(181, 162, 101);
         --grey: rgb(207, 216, 220);
         --shadow: rgba(0, 0, 0, 0.5);
+        --border: rgb(45, 40, 22);
     }
 }
 
@@ -27,6 +28,7 @@
         --link-color-hover: rgb(175, 154, 88);
         --grey: rgb(55, 71, 79);
         --shadow: rgba(125, 109, 60, 0.288);
+        --border: rgb(213, 202, 168);
     }
 }
 
@@ -56,13 +58,62 @@ main {
     margin-right: auto;
     margin-top: 2%;
     padding: 0.9% 0.9% 0.9% 0.9%;
-    width: 42%;
+    width: 62%;
     border-radius: 6px;
-    border: 1px solid rgb(170, 170, 170);
+    border: 1px solid var(--border);
     text-align: center;
 
     border-radius: 8px;
     box-shadow: 0 4px 30px 0 var(--shadow), 0 4px 30px 0 var(--shadow);
+
+    display: flex;
+    flex-direction: row;
+
+    padding-top: 0.5em;
+}
+
+.upload-area {
+    border: 2px dashed var(--border);
+    height: 70vh;
+    width: 65vw;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.desc-area {
+    text-align: left;
+    max-width: 30%;
+    padding-left: 1em;
+}
+
+/* Mobile display */
+@media only screen and (max-height: 850px) {
+    header > .text-title {
+        font-size: 1.5rem;
+    }
+
+    .upload-area {
+        height: 65vh;
+    }
+}
+
+@media only screen and (max-width: 850px) {
+    main {
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .upload-area {
+        width: 55vw;
+        height: 55vh;
+    }
+
+    .desc-area {
+        max-width: 80%;
+    }
 }
 
 footer {
diff --git a/src/templates/index.html b/src/templates/index.html
index e431f94..1d34717 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -15,7 +15,19 @@
         </header>
 
         <main>
-            <p>placeholder-main</p>
+            <div class="upload-area">
+                <header>Glissez pour déposer un fichier</header>
+                <input type="file" hidden />
+            </div>
+            <div class="desc-area">
+                <h2>Projet</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </div>
         </main>
 
         <footer class="text-center">