From ded6d4c4312094334811969d9530f3c31d703a69 Mon Sep 17 00:00:00 2001
From: neox <neox@gnu.org>
Date: Thu, 29 Feb 2024 10:50:08 +0100
Subject: [PATCH] template/styles.css: travail sur header

---
 template/styles.css | 58 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/template/styles.css b/template/styles.css
index 8e0105b..5136cbe 100644
--- a/template/styles.css
+++ b/template/styles.css
@@ -228,14 +228,20 @@ code.bcode_code {}
  * Header (Wensite Logo, Description)
 */
 
-a#site_link {}
+a#site_link {
+   display: flex;
+}
 header#header {
    background-attachment:    fixed;
    background-image:         url(../template/electronic.jpg);
    background-position:      0 0;
-   display:                 flex;
+   display:                  flex;
+   flex-direction:           row;
+}
+
+div#header_logo {
+   display:                  flex;
 }
-div#header_logo {}
 img#header_logo_image {
    align-items:             start;
    width:                   160px;
@@ -243,14 +249,13 @@ img#header_logo_image {
    color:                   #FFF;
    font-weight:             bold;
    font-size:               300%;
-   margin: 20px;
+   margin:                  20px;
 }
-div#header_abouts {}
-p#header_title {
+div#header_abouts {
    display:                 flex;
    flex-direction:          column;
-   align-items:             center;
-
+}
+p#header_title {
    padding-left:            50px;
    color:                   #FFF;
    font-weight:             bold;
@@ -260,7 +265,7 @@ p#header_about {
    font-weight:             normal;
    color:                   #FFF;
    font-size:               130%;
-   margin-top:              15px;
+   margin:                  50px;
 }
 
 
@@ -288,7 +293,7 @@ div.sidebar_post_about {}
 p.sidebar_post_about_p {}
 
 
-/* ============================================================================
+/* ----------------------------------------------------------------------------
  * Footer (Website) 
 */
 footer#footer {
@@ -332,3 +337,36 @@ div#footer_credit {}
 p#footer_copyright {}
 p#footer_tyto {}
 a.footer_cr_link {}
+
+/* ----------------------------------------------------------------------------
+ * Small screens
+*/
+@media screen and (max-width: 700px) {
+   header#header {
+      flex-direction:           column;
+   }
+
+   img#header_logo_image {
+      all: unset;
+      display: inline-block;
+      width:                   100%;
+      margin-top:              20px;
+      height:                  min(20vw,20vh);
+   }
+   
+   p#header_title {
+      padding-left:            0px;
+      color:                   #FFF;
+      font-weight:             bold;
+      font-size:               180%;
+      text-align:              center;
+   }
+
+   p#header_about {
+      padding-left:            0px;
+      margin-top:              0px;
+      color:                   #FFF;
+      font-size:               100%;
+      text-align:              center;
+   }
+}