Good looking left header

2 files changed, 41 insertions, 27 deletions

diff --git a/left.m4 b/left.m4
index 96f1a89..0689480 100644
--- a/left.m4
+++ b/left.m4
@@ -1,32 +1,32 @@
 <aside id="side-bar">
 include(s/imgM/acheLogo.svg)
-    <h2> Ache </h2>
-    <div id="desc">  Étudiant en Math-Info <br />  <span id="about">GNU\Linux, C, C++, Python, Math, ... <br /> </span></div>
-    <nav>
-      <ul>
-        <li class="about_bar"><a href="https://twitter.com/arobase_che" title="Mon twitter abandonné">
+  <h2> Ache </h2>
+  <div id="desc"><div id="desc_intro">Éternel étudiant en Math-Info.<br><span class="about">Autodidacte passionné,<br>désormais ingénieur.</span></div><br>  <span class="about">GNU\Linux, C, C++, Python, Math, autohébergement, décentralisation, P2P, commun, ... <br> </span><br></div>
+  <nav>
+    <ul>
+        <li class="sommaire_blien"><a href="/" title="L'accueil">home</a>
+        </li><li class="sommaire_blien"><a href="http://git.ache.one/" title="Dépôt git personnel">git</a>
+        </li><li class="sommaire_blien"><a href="/contact/" title="Me contacter">contact</a>
+        </li>
+    </ul>
+  </nav>
+  <div class="lab"><a href="/" title="⚠️ Mon laboratoire ! ☢️">
+    include(s/imgM/lab.svg)
+    </a>
+    🚧 En cours 🚧
+  </div>
+
+  <nav id="ontheweb">
+    <ul>
+      <li class="about_bar"><a href="https://twitter.com/arobase_che" title="Mon twitter abandonné">
 include(s/imgM/twitterLogo.svg)
-        </a></li>
-        <li class="about_bar"><a href="http://git.ache.one" title="Dépôt git personnel">
+      </a></li>
+      <li class="about_bar"><a href="http://git.ache.one" title="Dépôt git personnel">
 include(s/imgM/gitLogo.svg)
-        </a></li>
-        <li class="about_bar"><a href="https://mastodon.xyz/@ache" title="Mon mastodon">
+      </a></li>
+      <li class="about_bar"><a href="https://mastodon.xyz/@ache" title="Mon mastodon">
 include(s/imgM/mastoLogo.svg)
-        </a></li>
-      </ul>
-    </nav>
-
-<div class="lab"><a href="/" title="⚠️ Mon laboratoire ! ☢️">
-include(s/imgM/lab.svg)
-</a>🚧 En cours 🚧</div>
-
-    <nav>
-      <ul>
-          <li class="sommaire_blien"><a href="/" title="L'accueil">home</a>
-          </li><li class="sommaire_blien"><a href="http://git.ache.one/" title="Dépôt git personnel">git</a>
-          </li><li class="sommaire_blien"><a href="/contact/" title="Me contacter">contact</a>
-          </li>
-      </ul>
-    </nav>
-
+      </a></li>
+    </ul>
+  </nav>
 </aside>
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index 07fe61c..7cf6396 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -66,11 +66,20 @@
     }
   }
 }
+#desc_intro {
+  padding-left: 10px;
+  padding-right: 10px;
+  text-shadow: 2px 3px 0 #DDD;
+}
 #desc {
   font-size: 90%;
   margin-top: 15px;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 1.05em;
+  font-family: monospace, "Helvetica Neue", Arial, sans-serif;
 }
-#about {
+.about {
   font-size: 0.8em;
   color: #666;
 }
@@ -85,6 +94,11 @@
   text-shadow: 0 1px 0 #DDD;
   margin: auto;
 }
+#ontheweb {
+  @media screen and (max-height: 519px) {
+    visibility: hidden;
+  }
+}
 
 .lab {
   height: 200px;