static/css/constants.css

@@ -18,5 +18,5 @@
 
 /* Global parameters */
 :root {
-  --font-size: 17px;
+  --font-size: 1.15rem;
 }

static/css/index.css

@@ -1,41 +1,50 @@
 /* Parameters light */
 @media (prefers-color-scheme: light) {
   :root {
-    --name-color: #e61515;
+    --name-color: #d30f39;
-    --pronouns-color: #646062;
+    --pronouns-color: #6c6f85;
+    --font-color: #4c4f69;
   }
 }
 
 /* Parameters dark */
 @media (prefers-color-scheme: dark) {
   :root {
-    --name-color: #ee9cc5;
+    --name-color: #f38ba8;
-    --pronouns-color: #7c7579;
+    --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 {
+h1,
-  font-weight: 600;
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--title-weight);
+  font-size: calc(var(--font-size) * 1.6);
   margin-bottom: 0;
 }

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: "";
 }

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>