From f427fe80ad8fab0416beed8ba55c5275d8bd3366 Mon Sep 17 00:00:00 2001
From: Adrien Bourmault <neox@os-k.eu>
Date: Thu, 7 Apr 2022 13:16:09 +0200
Subject: [PATCH] Footer et liste articles responsives

---
 styles.css | 147 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 99 insertions(+), 48 deletions(-)

diff --git a/styles.css b/styles.css
index ce2e00b..2509f25 100644
--- a/styles.css
+++ b/styles.css
@@ -231,54 +231,6 @@ div#a-lec_infos {
    font-weight:                  normal;
 }
 
-/* On screens that are less than 700px wide, make the sidebar into a topbar */
-@media screen and (max-width: 700px) {
-
-   section#a-lec_page-wrapper {
-    display:                block;
-    margin:                 0 25px;
-  }
- 
-   aside#a-lec_sidebar {
-      background: none;
-   }
-   
-   .a-lec_latest-posts {
-      margin-left: -35px;
-   }
-   
-   #a-lec_footer {
-      display: block;
-      padding: 5px;
-   }
-   
-   #a-lec_footer .a-lec_paragraph{
-      margin-bottom: 30px;
-      font-size: 80%;
-      border:                       2px solid var(--a-lec_blue);
-      border-top : unset;
-      border-left: unset;
-      border-right: unset;
-      padding: 15px;
-   }
-   
-   #a-lec_footer  h1 {
-      margin-top: 10px;
-      font-size: 115%;
-      padding: 15px;
-      margin-bottom: -20px;
-   }
-   
-   #a-lec_footer li {
-      text-align: center;
-   }
-}
-/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
-@media screen and (max-width: 400px) {
-
-}
-
-
 /*
 ========================================================================
    ARTICLE
@@ -571,3 +523,102 @@ h1,h2,h3,h4,h5,h6 {
       margin-left:         75px;
    }
 
+/*
+========================================================================
+   LITTLE SCREENS
+========================================================================
+*/
+@media screen and (max-width: 700px) {
+
+   section#a-lec_page-wrapper {
+    display:                block;
+    margin:                 0 25px;
+  }
+ 
+   aside#a-lec_sidebar {
+      background: none;
+   }
+   
+   .a-lec_latest-posts {
+      margin-left: -35px;
+   }
+   
+   div#a-lec_metas {
+      margin:                       10px -10px 0px 0px;
+   }
+   
+   article#a-lec_index {
+      margin-left: -10px;
+   }
+   
+   #a-lec_footer {
+      display: block;
+      padding: 5px;
+   }
+   
+   #a-lec_footer .a-lec_paragraph{
+      margin-bottom: 30px;
+      font-size: 80%;
+      border:                       2px solid var(--a-lec_blue);
+      border-top : unset;
+      border-left: unset;
+      border-right: unset;
+      padding: 15px;
+   }
+   
+   #a-lec_footer  h1 {
+      margin-top: 10px;
+      font-size: 115%;
+      padding: 15px;
+      margin-bottom: -20px;
+   }
+   
+   #a-lec_footer li {
+      text-align: center;
+   }
+   
+   #a-lec_banner,
+   #a-lec_footer {
+      display:                 block;
+   }
+   
+   #a-lec_site-logo img {
+      all: unset;
+      display: inline-block;
+      float: left;
+      position: relative;
+      width:                   100%;
+      height:                  35%;
+   }
+   
+   #a-lec_site-titles {
+      all: unset;
+   }
+   
+   
+   #a-lec_site-name a {
+      margin-top: -30px;
+      margin-bottom: -20px;
+      position: relative;
+      float: left;
+   }
+   
+
+   #a-lec_site-name a:hover {
+      margin-top: -30px;
+      margin-bottom: -20px;
+      position: relative;
+      float: left;
+      font-size: 3rem;
+   }
+   
+    #a-lec_site-description {
+       all: unset;
+       margin-top: 15px;
+       position: relative;
+       float: left;
+       font-size: 1rem;
+       text-align: center;
+   }
+
+}