first version of infinite scrolling

public/s/css/f0ck.css

@@ -1197,7 +1197,9 @@ body {
   overscroll-behavior-y: contain;
   overflow: unset;
   font-size: 14px;
-  height: /* 100%; */auto;
+  height:
+    /* 100%; */
+    auto;
 }
 
 .wrapper {
@@ -1318,6 +1320,13 @@ div.posts>a:hover::after {
   grid-template-columns: auto 1fr 0fr;
   justify-content: start;
   border-bottom: 1px solid var(--nav-border-color);
+  background: var(--nav-bg);
+  transition: background 0.2s ease;
+}
+
+.navbar.scrolled {
+  background: #000 !important;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 }
 
 .navbar-brand {
@@ -1424,7 +1433,7 @@ ul.navbar-nav li.nav-item {
 }
 
 .nav-link[data-toggle="dropdown"].ddcontent::after {
-  content: "\00a0("attr(content) ")\00a0\25bc";
+  content: "\00a0(" attr(content) ")\00a0\25bc";
 }
 
 .nav-link[data-toggle="dropdown"]:not(.ddcontent)::after {
@@ -1608,7 +1617,7 @@ span.placeholder {
 }
 
 @media (max-width: 1325px) {
-/* ranking page - idea */
+  /* ranking page - idea */
   /* .ranking {
     grid-template-columns: 1fr 1fr !important;
   } */
@@ -1783,8 +1792,9 @@ span.placeholder {
 .index-container {
   width: 100%;
   padding: 5px;
-/*   background-color: var(--navigation-links-bg);
- */}
+  /*   background-color: var(--navigation-links-bg);
+ */
+}
 
 @media (min-width: 361px) {
   .embed-responsive-image {
@@ -2779,7 +2789,9 @@ ul.navbar-nav-guests li.nav-item {
   margin-right: .5rem;
 }
 
-.navbar-expand-lg .navbar-nav-guests .nav-link, .pagination > a, .pagination > span {
+.navbar-expand-lg .navbar-nav-guests .nav-link,
+.pagination>a,
+.pagination>span {
   padding-right: .5rem;
   padding-left: .5rem;
 }
@@ -2792,7 +2804,7 @@ ul.navbar-nav-guests li.nav-item {
     margin: 0;
     padding: 5px;
   }
-  
+
   ul.navbar-nav-guests li.nav-item {
     margin-right: unset;
   }
@@ -2812,16 +2824,20 @@ ul.navbar-nav-guests li.nav-item {
 
 /* Pagination Responsiveness */
 @media (max-width: 799px) {
-  .navbar-expand-lg .navbar-nav-guests .nav-link, .pagination > a, .pagination > span {
+
+  .navbar-expand-lg .navbar-nav-guests .nav-link,
+  .pagination>a,
+  .pagination>span {
     padding-right: 2px;
     padding-left: 2px;
   }
-  
-  .pagination > a, .pagination > span {
+
+  .pagination>a,
+  .pagination>span {
     margin-right: 2px;
     margin-left: 2px;
   }
-  
+
   .pagination {
     justify-content: center !important;
   }
@@ -2830,15 +2846,19 @@ ul.navbar-nav-guests li.nav-item {
 /* fadeIn effect */
 @keyframes fadeIn {
   0% {
-      opacity: 0;
+    opacity: 0;
   }
+
   100% {
-      opacity: 1;
+    opacity: 1;
   }
 }
 
-img#f0ck-image, div.imageDoor, div.posts a, video {
-    animation: 1s ease-out 0s 1 fadeInFX;
+img#f0ck-image,
+div.imageDoor,
+div.posts a,
+video {
+  animation: 1s ease-out 0s 1 fadeInFX;
 }
 
 /* f0ckgle */
@@ -2867,7 +2887,7 @@ img#f0ck-image, div.imageDoor, div.posts a, video {
   background: var(--nav-bg);
   padding: 5px;
 }
-    
+
 .profile_head_avatar {
   margin: 0;
 }
@@ -2892,11 +2912,13 @@ img#f0ck-image, div.imageDoor, div.posts a, video {
   padding: 5px;
 }
 
-.f0cks h5, .favs h5 {
+.f0cks h5,
+.favs h5 {
   background: var(--dropdown-bg);
 }
 
-.f0cks-header, .favs-header {
+.f0cks-header,
+.favs-header {
   display: grid;
   grid-template-columns: 1fr auto;
   background: var(--img-border-color);
@@ -2940,46 +2962,50 @@ button#togglebg {
   0% {
     opacity: 0;
   }
-100% {
+
+  100% {
     opacity: 1;
-  } 
+  }
 }
 
 @keyframes fadeOutFX {
   0% {
     opacity: 1;
   }
-100% {
+
+  100% {
     opacity: 0;
-  } 
+  }
 }
 
 
 @keyframes fadeIn {
   0% {
-      opacity: 0;
-    }
+    opacity: 0;
+  }
+
   100% {
-      opacity: 0.2;
-    } 
+    opacity: 0.2;
+  }
 }
 
 @keyframes fadeOut {
-    0% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 0;
+  }
 }
 
 .fader-in {
-    animation: fadeIn  .8s steps(100) forwards;
+  animation: fadeIn .8s steps(100) forwards;
 }
 
 .fader-out {
-    animation: fadeOut  .8s steps(100) forwards
-} 
+  animation: fadeOut .8s steps(100) forwards
+}
 
 .settings {
   display: grid;
@@ -3004,6 +3030,7 @@ input#s_avatar {
 #s_avatar:hover {
   background: #ffffff0f;
 }
+
 .theforceofthree {
   display: grid;
   grid-template-columns: 0.4fr 1fr 0.4fr;
@@ -3011,4 +3038,24 @@ input#s_avatar {
 
 .upload {
   padding: 10px;
+}
+
+/* Infinite scroll loading indicator */
+.loading-spinner {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--footbar-color);
+  animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+
+  50% {
+    opacity: 1;
+  }
 }