modifs css

Holusion · Feb 23, 2024 · daeb425 · daeb425
1 parent 424c0db
commit daeb425
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 25 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -84,13 +84,13 @@
     <footer>
       <nav id="navbar-bottom" role="navigation">
         <div class="alignement-footer">
-            <a class="alignement-footer" style="text-decoration: none;" xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/Holusion/eCorpus" rel="dct:source">
+            <a style="text-decoration: none;" xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/Holusion/eCorpus" rel="dct:source">
               <svg xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06Zm-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0Z"/></svg>
               &nbspon&nbsp
               <svg xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="45" height="16" viewBox="0 0 45 16"><path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"/></svg>
             </a>
           <span>
-            <span>&nbsp-&nbspLicensed under</span>
+            <span>&nbspLicensed under</span>
             <a rel="license" style="text-decoration:none;" href="http://creativecommons.org/licenses/by-sa/4.0/">
               (CC)BY-SA 4.0
             </a>

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -19,4 +19,4 @@ $main_width: 700px;
 
 $header_height: 150px;
 $navbar_height: 50px;
-$footer_height: 50px;
+$footer_height: 66px;
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -37,6 +37,10 @@ main {
   padding: 0 3rem 3rem 3rem;
   box-shadow: 5px 0px 10px $middlegrey-shadow, -5px 0px 10px $middlegrey-shadow;
 
+  @media screen and (max-width: #{$main_width} ){
+    padding: 0 1rem 3rem 1rem;
+  }
+
   h1, h2, h3, h4, h5, h6, [role="doc-noteref"] {
     scroll-margin-top: calc($navbar_height + 0.8rem);
   }
@@ -46,6 +50,10 @@ main {
       margin: 0 -3rem;
       width: calc(100% + 6rem);
       overflow-clip-margin:inherit;
+      @media screen and (max-width: #{$main_width} ){
+        margin: 0 -1rem;
+        width: calc(100% + 2rem);
+      }
     }
   }
 
@@ -152,6 +160,9 @@ nav{
     &:hover, &[aria-expanded="true"]{
       color: $yellow;
     }
+    // &:first-of-type{
+    //   font-weight: 600;
+    // }
   }
 }
 
@@ -174,7 +185,7 @@ ul{
 
 
 .retrait{
-  margin-left: 40px;
+  margin-left: 0px;
 }
 .retrait li{
   margin-bottom: 1rem;
@@ -205,6 +216,7 @@ footer a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 
 .langues-navbar2{
@@ -223,17 +235,19 @@ footer a:hover {
   max-width: $sidebar_width;
   background-color: $darkgrey;
   height: fit-content;
-  overflow: hidden;
+  // overflow: hidden;
 
   &.nav-left{
     grid-area: nav-left;
     position: relative;
+    padding: 0;
+
 
     .navbar-toggle{
       display: none;
       background: $yellow;
       border-radius: 4px;
-      color: white;
+      color: $darkgrey;
       fill: currentColor;
       padding: 4px;
     }
@@ -243,9 +257,11 @@ footer a:hover {
       width: 0;
       margin: .5rem;
       transition: width 0.35s linear;
+      padding: 0.7rem 0 1rem 0;
+
       &.show{
         width: 300px;
-        padding-right: 24px;
+        // padding-right: 24px;
       }
       .navbar-toggle{
         display: block;
@@ -276,17 +292,27 @@ footer a:hover {
 
 
   ul{
-    padding: 1rem 1rem 1rem 0;
+    // padding: 1rem 1rem 1rem 0;
+    padding: 0;
+
+    @media screen and (max-width: #{$main_width} ){
+      // padding: 1rem 0 0.7rem 0;
+    }
 
     li, li a{
-      min-width: 200px;
+      // min-width: 240px;
       width: 100%;
-      padding-right: 0;
+      // max-width: calc(300px - 1.1rem);
       color: white;
-      padding: 0.1rem 0.5rem 0.1rem 1rem;
+      padding: 0.1rem 0rem 0.1rem 1rem;
       margin-top: 0.3rem;
-      @media screen and (max-width: #{$sidebar_width * 2 + $main_width} ){
-        padding-left: 0.5rem;
+      overflow: hidden;
+      @media screen and (max-width: #{$main_width} ){
+        padding: 0.1rem 0rem 0.1rem 1rem;
+        max-width: 100%;
+      }
+      ul > li {
+        // padding-bottom: 2rem;
       }
     }
   }
@@ -295,7 +321,11 @@ footer a:hover {
 //   border-left: 1px white solid;
 // }
 
-
+// #doc-nav-left{
+//   @media screen and (max-width: #{$main_width} ){
+//     padding: 0.7rem 0 1rem 0;
+//   }
+// }
 
 //////////////////////////////
 /// TITLES
@@ -390,7 +420,11 @@ main{
   text-align: end;
   padding-top: 0.5rem;
   margin-right: 3rem;
-  }  
+  } 
+  li{
+    line-height: 1.4rem;
+
+  } 
 }
 
 
@@ -565,10 +599,17 @@ main{
 
 blockquote{
   margin: 0.5rem;
-  padding: 0 5rem;
+  padding: 0 3rem;
   max-width: inherit;
+  @media screen and (max-width: #{$main_width} ){
+    padding: 0 2rem;
+  }
+  @media screen and (max-width: 500px){
+    padding: 0;
+  }
 }
 
+
 blockquote > p {
   font-weight: 600;
   background-color: $yellow3;
@@ -664,11 +705,22 @@ div > ul > li:has(> .voyager-btn:first-child){
 
 .logo-grid{
   display: grid;
-  grid-template-columns: repeat(3, 128px);
+  grid-template-columns: repeat(3, 145px);
   align-content: space-around;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
+  @media screen and (max-width: #{$main_width} ){
+    grid-template-columns: repeat(3, 90px);
+  }
+
+}
+.logo-grid > img{
+  min-width: 90px;
+  margin: auto;
+  @media screen and (max-width: #{$main_width} ){
+    max-width: 90px;
+  }
 }
 
 
@@ -678,15 +730,18 @@ div > ul > li:has(> .voyager-btn:first-child){
 .list-group {
   display: flex;
   flex-direction: column;
-  padding: 0;
   border-left: 1px white solid;
+  width: 300px;
   &.collapse {
     display: none;
-    border-left: 0px white solid;
+    border-left: none;
     &.show {
       display: flex;
     }
   }
+  @media screen and (max-width: #{$sidebar_width * 2 + $main_width}){
+    border-left: none;
+  }
 
   .list-group-item {
     .dropdown-toggle {
@@ -701,6 +756,11 @@ div > ul > li:has(> .voyager-btn:first-child){
     }
   }
 }
+// .list-group2{
+//   display: flex;
+//   flex-direction: column;
+//   padding: 0;
+// }
 
 //////////////////////////////
 /// POSTS

diff --git a/fr/about.html b/fr/about.html
@@ -21,10 +21,8 @@ <h3>L’orfèvrerie médiévale à l’épreuve de la modélisation numérique</
         modèles
         numériques au travers de différents mediums.
     </p>
-    <div>
         <img src="/assets/img/packshot.webp" alt="Collection initiale d'objets de la campagne de numérisation eThesaurus">
 
-    </div>
 
 </section>
 
@@ -116,7 +114,6 @@ <h4>Mars 2023</h4>
             évolution.</i>
     </p>
 </section>
-<section >
     <div class="logo-grid">
         <img src="/assets/img/about/logo-IRHiS_128.webp"
             alt="logo du laboratoire IRHIS, université de Lille (France)">

diff --git a/fr/index.html b/fr/index.html
@@ -74,10 +74,8 @@ <h3>Numérisation d'objets</h3>
     <div class="section">
         <h3>Caractéristiques d'eCorpus</h3>
     </div>
+    {% include voyager.html embed="croix-reliquaire" class="h-100 larg100" %}
 
-    <div class="larg100">
-        {% include voyager.html embed="croix-reliquaire" class="h-100 larg100" %}
-    </div>
     <div class="section">
         <h4>Complet</h4>
         <p>