Quellcode durchsuchen

animation glissement h1 nsb

ouidade vor 3 Jahren
Ursprung
Commit
fab3e52792

+ 17 - 2
user/themes/epau-antimatter/css-compiled/template.css

@@ -825,7 +825,10 @@ ul.pagination {
   padding: 0 .1em;
   vertical-align: top; }
 
-#header #navbar ul.navigation li a:hover {
+#header #navbar ul.navigation li:last-child:after {
+  content: "" !important; }
+
+#header #navbar ul.navigation li:last-child #header #navbar ul.navigation li a:hover {
   font-weight: 900; }
 
 #header.scrolled #navbar ul.navigation li a {
@@ -883,9 +886,20 @@ ul.pagination {
   100% {
     width: 100%; } }
 
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%; }
+  to {
+    margin-left: 0%;
+    width: 100%; } }
+
 .after-h1 .test {
   animation: anim 2.5s 1 normal ease-in-out forwards; }
 
+.after-h1 .souligne {
+  animation: glissement 2.5s 1 normal ease-in-out forwards; }
+
 .programmes {
   display: flex;
   flex-wrap: wrap;
@@ -1041,7 +1055,8 @@ ul.pagination {
   background-color: transparent;
   text-transform: uppercase;
   align-self: flex-end;
-  margin: auto; }
+  margin: auto;
+  margin-bottom: 2rem; }
 
 .modal {
   position: fixed;

+ 24 - 8
user/themes/epau-antimatter/scss/template/_custom.scss

@@ -49,6 +49,13 @@
   vertical-align: top;
 }
 
+#header #navbar ul.navigation li:last-child:after {
+  content: "" !important;
+}
+
+
+#header #navbar ul.navigation li:last-child
+
 #header #navbar ul.navigation li a:hover {
   font-weight: 900;
 }
@@ -117,6 +124,7 @@
       }
 }
 
+
 .titre_bsn {
 
   display: block;
@@ -138,23 +146,30 @@
   0% {width: 0%;}
 
   100% {width: 100%;}
-
 }
 
-.after-h1 {
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
 
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+.after-h1 {
   .test {
     // opacity: 0;
     // transition: opacity 1s ease-in-out;
     animation: anim 2.5s 1 normal ease-in-out forwards;
   }
+  .souligne {
+    animation: glissement 2.5s 1 normal ease-in-out forwards;
+  }
 }
-  // &:hover {
-  //   .test {
-  //       opacity: 1;
-  //   }
-    // opacity: 1;
-    // transition: width 5s ease-in-out;
+
 
 
 
@@ -449,6 +464,7 @@
   text-transform: uppercase;
   align-self: flex-end;
   margin:auto;
+  margin-bottom: 2rem;
 }
 //
 // .bouton :hover {

+ 1 - 1
user/themes/epau-antimatter/templates/modular/accueil.html.twig

@@ -26,7 +26,7 @@
 
   <h1>EPAU</h1>
 
-  <div class="test" >
+  <div class="souligne" >
     <svg width="100%" height="0.5rem">
      <rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
    </svg>

+ 1 - 1
user/themes/epau-antimatter/templates/modular/gouvernance.html.twig

@@ -5,7 +5,7 @@
 
     <h1>Gouvernance</h1>
 
-    <div class="test" >
+    <div class="souligne" >
       <svg width="100%" height="0.5rem">
        <rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
      </svg>