responsive marquee

FinFO-app · Mar 31, 2019 · 6f918ea · 6f918ea
1 parent a740669
commit 6f918ea
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 27 deletions.
diff --git a/_includes/_footer.html b/_includes/_footer.html
@@ -103,4 +103,9 @@ <h5 class="white-text">External Links</h5>
                 FinFO</a>
         </div>
     </div>
+    <style id="marquee_style">
+	</style>
+    <script>
+
+    </script>
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,12 +1,20 @@
 <!doctype html>
 <html lang="en">
 {% include _head.html %}
-<body>
+<body onLoad="em_init()" onresize="em_init()">
 {% include _nav.html %}
 {{ content }}
 {% include _footer.html %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 <script>
+	function _(a){return document.getElementById(a);}
+	function em_init(){
+		load_marquee();
+	}
+    function load_marquee(){
+		//partner_con
+		_("marquee_style").innerHTML="@media screen and (min-width: 600px) {.marquee__content { width: 300% !important; display: flex; line-height: 30px; animation: marquee 9s linear infinite forwards; &:hover { animation-play-state: paused; } } .list-inline { display: flex; justify-content: space-around; width: 33.33%; /* reset list */ list-style: none; padding: 0; margin: 0; } @keyframes marquee { 0% { transform: translateX(0%); } 50% { transform: translateX(-"+_("partner_con1_child").offsetWidth-_("partner_con1").offsetWidth+50+"px); } 100% { transform: translateX(0%); } }}"
+	}
     document.addEventListener('DOMContentLoaded', function () {
         var sideNav = document.querySelectorAll('.sidenav');
         var sideNavInstance = M.Sidenav.init(sideNav);

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -136,30 +136,6 @@ html {scroll-behavior: smooth;}
     background: linear-gradient(to left, white 5%, transparent 100%);
   }
 }
-
-.marquee__content {
-  width: 300% !important;
-  display: flex;
-  line-height: 30px;
-  animation: marquee 10s linear infinite forwards;
-  &:hover {
-    animation-play-state: paused;
-  } 
-}
-
-.list-inline {
-  display: flex;
-  justify-content: space-around;
-  width: 33.33%;
-  /* reset list */
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-@keyframes marquee {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-66.6%); }
-}
 @media only screen and (min-width: 992px) {
 
     nav .brand-logo {

diff --git a/index.html b/index.html
@@ -136,9 +136,9 @@ <h5 class="white-text" style="margin: 0">
 
 
 
-<div class="container" style="overflow:hidden;">
+<div class="container" style="overflow:hidden;" id="partner_con">
     <h3 class="green-text">Partners</h3>
-    <div class="row marquee__content container">
+    <div class="row marquee__content container" id="partner_con1_child">
     {% for partner in site.data.partners %}
     <div class="col s12 m4 l3">
         <p style="text-align:center">{{ partner.type }}</p>