style detailing

Author: tjvsx

src/css/custom.css

@@ -25,6 +25,10 @@ html[data-theme='dark'] {
   --ifm-color-primary-lighter: #948fff;
   --ifm-color-primary-lightest: #c6c3ff;
 }
+a:hover {
+  color: #4de9f5;
+}
+/* bioflourescent night mode colorway experiments */
 /* html[data-theme='dark'] {
   --ifm-color-primary: #4de9f5;
   --ifm-color-primary-dark: #2fe5f3;
@@ -34,6 +38,7 @@ html[data-theme='dark'] {
   --ifm-color-primary-lighter: #7beff8;
   --ifm-color-primary-lightest: #a8f4fa;
 } */
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

src/pages/index.js

@@ -2,10 +2,15 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import Loadable from '@docusaurus/react-loadable'
 import CoverSection from './sections/CoverSection'
+import loading from './loading.module.css';
 
 const LandingPage = Loadable({
   loader: () => import('./LandingPage'),
-  loading: () => <div>Loading...</div>
+  loading: () => 
+  <div className={loading.loader}>
+    <h1 className={loading.sliding}>🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏 🌎 🌍 🌏
+    </h1>
+  </div>
 });
 
 export default function Home() {

src/pages/index.module.css

@@ -159,7 +159,9 @@ html[data-theme=dark] .svg_img {
   --invert_amount: 100%;
 }
 
+a {
 
+}
 
 
 .buttons {

src/pages/loading.module.css

@@ -0,0 +1,19 @@
+.loader {
+  width: 100%;
+  opacity: 0.3;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sliding {
+  margin: auto;
+  font-size: xx-large;
+  animation: 69s loader linear forwards;
+    transform:translateX(-100%);
+}
+
+@keyframes loader {
+  to {
+    transform:translateX(0);
+  }
+}