more theming: search block, multiblock header, generale layout, fonts, colors, background

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -1,3 +1,123 @@
+@import "partials/colors";
+@import "partials/fonts";
+
+a, a:visited{
+  text-decoration: none;
+  color: inherit;
+}
+
 body{
-  // background-color: red;
-}
+  margin: 0;
+  background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
+  background-repeat: repeat;
+  background-position: center;
+}
+
+div.layout-container{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  header[role="banner"]{
+    padding: 0.5em;
+    flex: 0 1 content; 
+    z-index: 100;
+  }
+  main[role="main"]{
+    flex: 1 1 auto; 
+    overflow-y: scroll;
+  }
+  footer[role="contentinfo"]{
+    flex: 0 1 content; 
+    z-index: 100;
+  }
+}
+
+
+
+
+header[role="banner"]{ 
+  background-color: #fff;
+  box-shadow: 0 -5px 15px #000;
+  
+  .header-middle{
+    display: flex;
+    justify-content:space-between;
+    align-items: baseline;
+    padding: 0.2em 2em;
+  }
+  
+  #block-mathallo-formulairederecherche{
+    form{
+      display: flex;
+      align-items: baseline;
+    }
+  }
+  
+  #block-mathallo-identitedusite{
+    a{
+      color: $bleu_site;
+      text-decoration: none;
+      font-family: 'Fredoka';
+      font-size: 2em;
+      text-transform:uppercase;
+      font-weight: 500;
+    }
+  }
+
+  .header-right{
+
+    #block-mathallo-navigationprincipale{
+      ul{
+        display: flex;
+        list-style: none;
+        li:not(:first-child){
+          margin-left: 1em;
+        }
+      }
+    }
+  }
+} // end of header[role="banner"]{
+
+main[role="main"]{
+  >div.layout-content{
+    padding:5em 0;
+    article{
+      background-color: #fff;
+      padding:2em;
+      box-shadow: 0 0 10px rgba(0,0,0,0.25);
+      max-width: 50em;
+      // position: absolute;
+      // top:25%;
+      // left: 25%;
+      margin: 5em auto 0;
+
+      h2{
+        @include titre_h2;
+        margin:0;
+      }
+    }
+  }
+}
+
+
+footer[role="contentinfo"]{
+  background-color: #fff;
+  box-shadow: 0 5px 15px #000;
+  padding: 0.2em 2em;  
+  #block-mathallo-navigationprincipale-2{
+    ul{
+      display: flex;
+      list-style: none;
+      padding: 0;
+      li:not(:first-child){
+        margin-left: 1em;
+
+      }
+      a{
+        color: $bleu_typo;
+      }
+    }
+  }
+
+}