From da6159618a3eced69f316b7387a965097e7ce466 Mon Sep 17 00:00:00 2001
From: Gaspard Jankowiak <gaspard@math.janko.fr>
Date: Mon, 20 Dec 2021 15:43:54 +0100
Subject: [PATCH] [css] tweaks

---
 css/screen.scss | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/css/screen.scss b/css/screen.scss
index 0e117e6..b33c73b 100644
--- a/css/screen.scss
+++ b/css/screen.scss
@@ -12,7 +12,7 @@ $highlight: #ccc;
 
 $width: 800px;
 $margin: 17px;
-$in_width: $width - $margin;
+$in_width: $width - 2*$margin;
 $small-width: 500px;
 
 /* reset */
@@ -73,9 +73,10 @@ code { font-family: mono; }
 
 code.language-ssh-key { word-wrap: break-word; word-break: break-all; white-space: pre-line; }
 
-nav { text-align: center; font-size: 120%; margin: 1em 0; }
-nav ul li { display: inline; margin: 0; clear: both; padding: 0 10px 0 11px; }
-nav ul li:nth-child(n+2) { border-left: 1px solid $rule; }
+nav { text-align: center; font-size: 1.2em; margin: 1em 0; }
+nav ul { display: flex; flex-flow: row wrap; list-style: none; justify-content: space-around; }
+nav ul li { margin: 0; clear: both; padding: 0 10px 0 11px; }
+// nav ul li:nth-child(n+2) { border-left: 1px solid $rule; }
 
 footer { font-size: 75%; padding-bottom: 175px; }
 
@@ -102,7 +103,8 @@ ol li:hover { border-right: 3px solid $links; padding-right: 7px; }
 .right, .float-right { float: right; margin-left: 1em; }
 .clear { clear: both; }
 
-.switcher { float: left; }
+.switcher { text-align: center; font-size: 2em; margin: 0.5em 0; }
+.switcher > a:hover { text-decoration: none; }
 
 .credits { color: $dim; }
 
@@ -122,9 +124,11 @@ ol li:hover { border-right: 3px solid $links; padding-right: 7px; }
 
 #portrait { margin: 0 15px 15px 0; padding: 23px 0 18px 0; width: 150px; display: inline-block; vertical-align:middle; }
 
-#info span { display: inline-block; width: 100%; max-width: 618px; vertical-align: middle; }
+#info { display: flex; flex-flow: row wrap; width: 100%; justify-content: space-evenly; align-items: center; }
+#info a { flex-basis: 160px; }
+#resume { flex-basis: 450px; flex-grow: 2; }
 
-#page_subtitle { font-family: "OpenSansLight",sans; font-size: 2em; margin: 1em; text-align: center; }
+#page_subtitle { font-family: "OpenSansLight",sans; font-size: 2em; margin: 1em; text-align: center; line-height: 1em; }
 
 #main_email { padding: 0.5em; }
 
@@ -132,16 +136,16 @@ ol li:hover { border-right: 3px solid $links; padding-right: 7px; }
 
 @media (max-width: $small-width) {
     body { font-size: 80%; }
-    .switcher { float: none; }
 }
 
 @media (max-width: $width) {
-#outter-wrapper { width: 100%; }
-header h1 { font-size: 1.2em; }
-header { font-size: 1em; }
-body { padding: 0 $margin; }
-#foot_image { display: none; }
-footer { display: none; }
+  #outter-wrapper { width: 100%; }
+  header h1 { font-size: 1.2em; }
+  header { font-size: 1em; }
+  nav { font-size: 1.5em; line-height: 1.5em; }
+  body { padding: 0 $margin; }
+  #foot_image { display: none; }
+  footer { display: none; }
 }
 
 @keyframes clouds {