chore(examples/media): add mentions in footer (#4958)

algolia · Nov 17, 2021 · 7747c50c037b1a73cf74e9e82986a0c303822e5a · 7747c50
1 parent 1b3e500
commit 7747c50c037b1a73cf74e9e82986a0c303822e5a
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 39 deletions.
diff --git a/examples/media/index.html b/examples/media/index.html
@@ -195,28 +195,34 @@ <h2 class="container-filters-title">
       </section>
     </main>
 
-    <aside class="back-to-top">
-      <a href="#" title="Back to top">
-        <svg viewBow="0 0 40 40">
-          <defs>
-            <linearGradient id="d" x1="100%" x2="0%" y1="100%" y2="0%">
-              <stop offset="0%" stop-color="#764ba2" />
-              <stop offset="100%" stop-color="#667eea" />
-            </linearGradient>
-          </defs>
-          <g fill="none" fill-rule="evenodd">
-            <circle cx="20" cy="20" r="20" fill="url('#d')" />
-            <path
-              stroke="#FFF"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              d="M28 20l-8-8-8 8m8 8V12"
-            />
-          </g>
-        </svg>
-      </a>
-    </aside>
+    <footer class="footer">
+      <aside class="back-to-top">
+        <a href="#" title="Back to top">
+          <svg viewBow="0 0 40 40">
+            <defs>
+              <linearGradient id="d" x1="100%" x2="0%" y1="100%" y2="0%">
+                <stop offset="0%" stop-color="#764ba2" />
+                <stop offset="100%" stop-color="#667eea" />
+              </linearGradient>
+            </defs>
+            <g fill="none" fill-rule="evenodd">
+              <circle cx="20" cy="20" r="20" fill="url('#d')" />
+              <path
+                stroke="#FFF"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="3"
+                d="M28 20l-8-8-8 8m8 8V12"
+              />
+            </g>
+          </svg>
+        </a>
+      </aside>
+      <div class="mentions">
+        <p>InstantSearch.js is an open-source, production-ready library that lets you quickly build a search interface in your front-end application.</p>
+        <p>This demo uses data from the Algolia blog. Follow <a href="https://algolia.com/blog">this link</a> to benefit from the official blog experience.</p>
+      </div>
+    </footer>
 
     <script src="./src/app.ts"></script>
   </body>

diff --git a/examples/media/src/app.css b/examples/media/src/app.css
@@ -118,23 +118,6 @@ strong {
   margin-right: 4rem;
 }
 
-/* Back to top */
-
-.back-to-top {
-  bottom: 2.5rem;
-  position: fixed;
-  right: 2.5rem;
-}
-
-.back-to-top {
-  height: 2.5rem;
-  width: 2.5rem;
-}
-
-.filtering .back-to-top {
-  display: none;
-}
-
 /* SearchBox */
 
 .header .searchbox-container {
@@ -468,6 +451,7 @@ strong {
   padding: 1rem 1.8rem;
   overflow-y: scroll;
   padding-bottom: 157px;
+  z-index: 1;
 }
 
 .container-filters-panel-mobile .ais-NumericMenu-labelText,
@@ -591,6 +575,49 @@ body.filtering {
   display: none;
 }
 
+/* Footer */
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.back-to-top {
+  margin: 0 2.5rem 1rem auto;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.filtering .back-to-top {
+  display: none;
+}
+
+.mentions {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #dadada;
+  background-color: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(10px);
+  text-align: center;
+}
+
+.mentions p {
+  margin: 0;
+}
+
+.mentions a {
+  color: #aa93dd;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.mentions a:hover {
+  opacity: 0.75;
+}
+
 /* Hide all desktop-specific design on mobile */
 @media (max-width: 899px) {
   [data-layout='desktop'] {