From 93ed2d0e932c8006a2dc3d908b6d7a7feef2367c Mon Sep 17 00:00:00 2001
From: Joris Guyonvarch
Date: Wed, 27 Aug 2025 21:20:23 +0200
Subject: Setup more sober style

---
 public/index.html |  2 +-
 public/main.css   | 46 ++++++++++++++++++++--------------------------
 2 files changed, 21 insertions(+), 27 deletions(-)

(limited to 'public')

diff --git a/public/index.html b/public/index.html
index 4e7d912..21ceb5c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -189,7 +189,7 @@
     <div class="project-footer">
       <ul class="technos">
         <li>Rust
-        <li>Gtk 4
+        <li>Gtk4
         <li>SQLite
       </ul>
       <a href="https://git.guyonvarch.me/calendar" target="_blank">code</a>
diff --git a/public/main.css b/public/main.css
index 4b9a933..6f2c44e 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,16 +1,15 @@
 /* Constants */
 
 :root {
-  --color-green: #22a200;
 
-  --color-header: var(--color-green);
-  --color-title: var(--color-green);
-  --color-border: #bebebe;
   --color-light-background: #eee;
+  --color-light-foreground: #282828;
   --color-link: #0377bb;
+  --color-border: #dadada;
 
   --font-size-cat: 0.75rem;
   --font-size-dog: 1rem;
+  --font-size-bigdog: 1.125rem;
   --font-size-lion: 1.25rem;
   --font-size-bear: 1.5rem;
   --font-size-cow: 1.75rem;
@@ -49,7 +48,7 @@
 body {
   margin: 0;
   line-height: var(--font-size-bear);
-  font-family: sans-serif;
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   max-width: calc(800px - var(--spacing-dog));
   margin: 0 auto;
 }
@@ -58,22 +57,14 @@ body {
 
 header {
   display: flex;
-  background-color: var(--color-header);
-  color: white;
-  margin-bottom: var(--spacing-horse);
+  font-weight: lighter;
+  text-align: center;
   padding: var(--spacing-dog);
-  font-size: var(--font-size-lion);
+  font-size: var(--font-size-dog);
   display: flex;
   justify-content: center;
 }
 
-@media screen and (min-width: 800px) {
-  header {
-    border-bottom-left-radius: var(--border-radius-bee);
-    border-bottom-right-radius: var(--border-radius-bee);
-  }
-}
-
 /* Main */
 
 @media screen and (max-width: 799px) {
@@ -113,7 +104,7 @@ section {
 img:not(.contact) {
   border: solid 1px var(--color-border);
   border-radius: var(--border-radius-mouse);
-  margin-bottom: var(--spacing-dog);
+  margin-bottom: var(--spacing-mouse);
   width: 100%;
   max-width: 800px;
 }
@@ -121,10 +112,10 @@ img:not(.contact) {
 /* Title */
 
 h1 {
-  color: var(--color-title);
-  font-size: var(--font-size-lion);
-  font-weight: bold;
-  border-bottom: 0.1rem solid var(--color-title);
+  font-size: var(--font-size-bigdog);
+  text-align: center;
+  padding-bottom: var(--spacing-cat);
+  border-bottom: 2px dashed var(--color-border);
   margin: 0 0 var(--spacing-horse);
 }
 
@@ -136,8 +127,8 @@ h2 {
   display: inline-block;
   font-size: var(--font-size-lion);
   margin: 0;
-  font-weight: bold;
-  margin: 0 0 var(--spacing-dog);
+  font-weight: normal;
+  margin: 0 0 var(--spacing-cat);
 }
 
 .subtitle {
@@ -162,7 +153,7 @@ a {
 }
 
 a:hover {
-  filter: brightness(150%);
+  filter: brightness(130%);
 }
 
 /* Lists */
@@ -207,9 +198,12 @@ ul.technos {
 ul.technos > li {
   background-color: var(--color-light-background);
   border-radius: var(--border-radius-bee);
-  padding: 0 var(--spacing-cat);
-  font-size: var(--font-size-cat);
+  padding: 0 var(--spacing-mouse);
+  font-size: 0.6rem;
   line-height: var(--font-size-lion);
+  border: 1px solid var(--color-border);
+  text-transform: lowercase;
+  color: var(--color-light-foreground);
 }
 
 /* Project footer */
-- 
cgit v1.2.3