From d0042dfa65c9a7674afcc4e77448cb6bb53981e3 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Fri, 13 Oct 2023 12:52:20 +0200
Subject: [PATCH] Update colors and sizes

---
 static/css/constants.css |  2 +-
 static/css/index.css     | 44 +++++++++++++++++++++++++++++++---------
 static/css/style.css     |  6 ++++++
 templates/index.html     |  6 ++++++
 4 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/static/css/constants.css b/static/css/constants.css
index 760d563..a68e57d 100644
--- a/static/css/constants.css
+++ b/static/css/constants.css
@@ -18,5 +18,5 @@
 
 /* Global parameters */
 :root {
-  --font-size: 17px;
+  --font-size: 1.15rem;
 }
diff --git a/static/css/index.css b/static/css/index.css
index 3f7c9bc..487b7bb 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,41 +1,50 @@
 /* Parameters light */
 @media (prefers-color-scheme: light) {
   :root {
-    --name-color: #e61515;
-    --pronouns-color: #646062;
+    --name-color: #d30f39;
+    --pronouns-color: #6c6f85;
+    --font-color: #4c4f69;
   }
 }
 
 /* Parameters dark */
 @media (prefers-color-scheme: dark) {
   :root {
-    --name-color: #ee9cc5;
-    --pronouns-color: #7c7579;
+    --name-color: #f38ba8;
+    --pronouns-color: #a6adc8;
+    --font-color: #c8d0ee;
   }
 }
 
+:root {
+  --title-weight: 600;
+}
+
 /* Page theme */
 main {
   color: var(--font-color);
   font-size: var(--font-size);
-  margin-inline: 25%;
+  margin-inline: 27%;
   padding: 2em 1em;
+  font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: var(--font-color);
 }
 
 /* Name header */
 .name {
-  font-size: 2.2rem;
+  font-size: calc(var(--font-size) * 2.5);
+  font-weight: var(--title-weight);
   color: var(--name-color);
 }
 
 .subname {
   margin-top: 0;
-  font-size: large;
+  font-size: calc(var(--font-size) * 1.07);
   margin-bottom: 1.5em;
 }
 
 .pronouns {
-  font-size: smaller;
+  font-size: calc(var(--font-size) * 0.8);
   color: var(--pronouns-color);
 }
 
@@ -45,8 +54,23 @@ main {
   float: right;
 }
 
+@media only screen and (max-width: 640px) {
+  main {
+    margin-inline: 0;
+  }
+  .avatar {
+    visibility: collapse;
+  }
+}
+
 /* Description */
-h1 {
-  font-weight: 600;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--title-weight);
+  font-size: calc(var(--font-size) * 1.6);
   margin-bottom: 0;
 }
diff --git a/static/css/style.css b/static/css/style.css
index d4e3614..7bcb88d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -25,6 +25,12 @@ a {
   padding: 10px;
 }
 
+@media only screen and (max-width: 640px) {
+  .navbar p::after {
+    padding: 4px;
+  }
+}
+
 .navbar li:last-child p::after {
   content: "";
 }
diff --git a/templates/index.html b/templates/index.html
index af8009a..c54e1c4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,6 +26,12 @@
         <p>Content de vous voir ici !</p>
       </article>
 
+      <!-- <article>
+        <h1>Awesome people</h1>
+        <img alt="273C15" />
+        <img alt="Azazouille" />
+      </article> -->
+
       {{/data}}
     </main>
   </body>