logo header

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -16,11 +16,7 @@
   margin-top: -3rem;
 }
 
-.programme p {
-  font-family: $font-family-default;
-  font-weight: 500;
-  font-style: italic;
-}
+
 
 #header #navbar ul.navigation li a {
     font-family: "Sarabun", sans-serif;
@@ -42,6 +38,16 @@
 
   }
 
+#logo {
+    display: flex;
+    flex-direction: row;
+
+}
+
+#logo img {
+  padding: 1rem;
+}
+
 
 .callout {
   padding-top: 0.5rem;
@@ -56,12 +62,6 @@
   padding-bottom: 5rem;
 }
 
-// h2 {
-//   font-size: 30px;
-//   font-weight: lighter;
-//   line-height: 35px;
-// }
-
 .titre_bsn {
   display: block;
   margin-left: 40%;
@@ -87,8 +87,6 @@
   padding-bottom: 8rem;
 }
 
-
-
     .programme {
       max-width: 45%;
       padding: 1.5rem;
@@ -102,9 +100,13 @@
     }
 
     .programme img {
-      max-width: 30%;
+      max-height: 15%;
+    }
+    .programme p {
+      font-family: $font-family-default;
+      font-weight: 500;
+      font-style: italic;
     }
-
     .programmes :hover {
       background-color: #000;
       color: #ffffff;
@@ -192,49 +194,83 @@
       line-height: 20px;
     }
 
-        .mozaique {
-          // background-color: #fff;
-          display: flex;
 
-          justify-items: center;
-          position: relative;
-          margin-right: 10%;
-          // margin-bottom: 6rem;
-          margin-left: 10%;
-        }
 
-        // .mozaique :hover {
-        //   background-color: #000;
-        //   color: #fff;
-        // }
 
-            .info {
-              background-color: #fff;
-              display:flex;
-              flex-direction: column;
 
-            }
-            .info:hover {
-                background-color: #000;
-                color: #fff;
-            }
+.mozaique {
+  // background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  max-width: 65%;
 
-            .portrait img {
-              max-width:15rem !important;
-              background: transparent !important;
-            }
+  align-items: stretch;
+  position: relative;
+  margin-right: 10%;
+  // margin-bottom: 6rem;
+  margin-left: 15%;
+  height: auto;
+
+}
+
+// .mozaique :hover {
+//   background-color: #000;
+//   color: #fff;
+// }
+
+    .info {
+      background-color: #fff;
+      display:flex;
+      flex-direction: column;
+      font-family: $font-family-default;
+
+
+    }
+    .info:hover {
+        background-color: #000;
+        color: #fff;
+        transition:0.2s ease-in-out;
+    }
+
+    .info h5 {
+      font-weight: 900;
+      font-size: 1.3rem;
+      margin: 0;
+      padding-top: 1rem;
+      padding-left: 1rem;
+    }
+
+    .info h6 {
+      font-weight: 300;
+      font-size: 1.1rem;
+      font-style: italic;
+      margin: 0;
+      padding-left: 1rem;
+      padding-bottom: 1rem;
+    }
+
+.portrait {
+  max-width:15rem !important;
+  background: transparent !important;
+}
+
+.2columns {
+  max-width: 25%;
+}
 
 .bouton {
-  margin: 0 30rem;
   border: solid;
   background-color: transparent;
   text-transform: uppercase;
+  align-self: flex-end;
+  margin-right: 2rem;
 }
 //
 // .bouton :hover {
 //     background-color: #000;
 // }
 
+
 // pop in biographie
 
 #modal{