add some style to links, seperate root redir

3 files changed, 378 insertions, 2 deletions

diff --git a/links/css/main.css b/links/css/main.css
index e69de29..2e93e89 100644
--- a/links/css/main.css
+++ b/links/css/main.css
@@ -0,0 +1,331 @@
+/* BACKGROUND SPARKLES CSS */
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
+
+html,
+body {
+    margin: 0 0;
+    padding: 0 0;
+    text-align: center;
+    font-size: 0;
+    background-color: #fdfcf3;
+}
+
+body svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+/* LOADING ANIMATION */
+/* body {
+**   text-align: center;
+**   padding-top: 20%;
+**   background: #fdfdfd;
+** }
+*/
+.loader-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fdfdfd;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.loader {
+    width: 100px;
+    height: 100px;
+    display: inline-table;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    border-spacing: 0.3em;
+}
+
+.loader row {
+    display: table-row;
+}
+
+.loader row span {
+    display: table-cell;
+    position: relative;
+    background: #1d1f20;
+    opacity: 0;
+    -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate;
+    animation: flicker 0.5985999999999999s ease-out infinite alternate;
+    /* Added standard property to fix compatbiliy issues */
+}
+
+@-webkit-keyframes flicker {
+
+    from,
+    20% {
+        opacity: 0;
+    }
+
+    100%,
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes flicker {
+
+    /* Added standard property to fix compatbiliy issues */
+    from,
+    20% {
+        opacity: 0;
+    }
+
+    100%,
+    to {
+        opacity: 1;
+    }
+}
+
+.loader row:nth-child(1) span:nth-child(1) {
+    -webkit-animation-delay: .50s;
+    animation-delay: .50s;
+}
+
+/* Added standard property to fix compatbiliy issues */
+.loader row:nth-child(1) span:nth-child(2) {
+    -webkit-animation-delay: .70s;
+    animation-delay: .70s;
+}
+
+.loader row:nth-child(1) span:nth-child(3) {
+    -webkit-animation-delay: .60s;
+    animation-delay: .60s;
+}
+
+.loader row:nth-child(2) span:nth-child(1) {
+    -webkit-animation-delay: .20s;
+    animation-delay: .20s;
+}
+
+.loader row:nth-child(2) span:nth-child(2) {
+    -webkit-animation-delay: .80s;
+    animation-delay: .80s;
+}
+
+.loader row:nth-child(2) span:nth-child(3) {
+    -webkit-animation-delay: .90s;
+    animation-delay: .90s;
+}
+
+.loader row:nth-child(3) span:nth-child(1) {
+    -webkit-animation-delay: .10s;
+    animation-delay: .10s;
+}
+
+.loader row:nth-child(3) span:nth-child(2) {
+    -webkit-animation-delay: .30s;
+    animation-delay: .30s;
+}
+
+.loader row:nth-child(3) span:nth-child(3) {
+    -webkit-animation-delay: .40s;
+    animation-delay: .40s;
+}
+
+/* ORINGINAL SITE CSS */
+html {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+html,
+body {
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+}
+
+body {
+    font: normal 20px/1.4 'Inter', sans-serif;
+    margin: 0 1em;
+    padding: 1em 0;
+    color: #000;
+    background: none;
+}
+
+@supports (font-variation-settings: normal) {
+    body {
+        font-family: 'Inter var', sans-serif;
+    }
+}
+
+main {
+    /* margin: auto; ** This is only needed for mobile */
+    font-size: 6vh;
+    line-height: 1.2;
+    max-width: 75vh;
+}
+
+/* I was trying to figure out how to only call the <a> tags from index.html, so it wouldn't change the values for other <a> tags, and I tried everything,
+** or so I thought, and I figured out I had to do `.links a` by scrolling up and saw `.loader row span` which wasn't even the correct syntax but I removed
+** the `row` and IT WORKED! I actually got so happy lol. - 2:15 AM, 8/7/2019
+*/
+.links a {
+    color: inherit;
+    text-decoration: none;
+    background-color: #ffdc73;
+    /* hsl(200, 100%, 80% */
+    -webkit-box-shadow: 0 7px 30px -10px #ffdc73, 0 7px 30px -10px #ffdc73;
+    box-shadow: 0 7px 30px -10px #ffdc73, 0 7px 30px -10px #ffdc73;
+    -webkit-transition: background-color 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out;
+}
+
+/* #ffdc73 box-shadow should usually be only box-shadow, but I made it two so it would be more visable.
+// Secondary box-shadow, rgba(154,160,185,0.05)
+*/
+.links a:hover,
+.links a:focus {
+    outline: none;
+    background-color: #282936;
+    color: #fff;
+    -webkit-transition: color 0.15s ease-in-out;
+    transition: color 0.15s ease-in-out;
+    -webkit-box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936;
+    box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936;
+    /* rgba(166,173,201,0.2) */
+    -webkit-transition: -webkit-box-shadow 0.15s ease-in-out;
+    transition: -webkit-box-shadow 0.15s ease-in-out;
+    transition: box-shadow 0.15s ease-in-out;
+    transition: box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+}
+
+/* NAVIGATION MENU */
+.navigation-bar {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 100%;
+    flex: 1 0 100%;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.nav {
+    overflow: hidden;
+    max-width: 100%;
+    background-color: #fff;
+    padding: 0 20px;
+    border-radius: 40px;
+    -webkit-box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
+    box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
+    position: absolute;
+    /* Only reason it's centered. */
+    /* Manual position adjusting
+  ** top: 0;
+  ** left: 0;
+  */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.nav-item {
+    color: #83818c;
+    padding: 20px;
+    text-decoration: none;
+    -webkit-transition: .3s;
+    transition: .3s;
+    margin: 0 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 500;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.nav-item:before {
+    content: "";
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background-color: #dfe2ea;
+    border-radius: 8px 8px 0 0;
+    opacity: 0;
+    -webkit-transition: .3s;
+    transition: .3s;
+}
+
+.nav-item:not(.is-active):hover:before {
+    opacity: 1;
+    bottom: 0;
+}
+
+.nav-item:not(.is-active):hover {
+    color: #333;
+}
+
+.nav-indicator {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    -webkit-transition: .4s;
+    transition: .4s;
+    height: 5px;
+    z-index: 1;
+    border-radius: 8px 8px 0 0;
+}
+
+@media (max-width: 580px) {
+    .nav {
+        overflow: auto;
+    }
+}
diff --git a/links/index.html b/links/index.html
index 22e5c10..37b07fd 100644
--- a/links/index.html
+++ b/links/index.html
@@ -7,10 +7,56 @@
     <title>s1nical - Links</title>
     <!-- CSS Links -->
     <link rel="stylesheet" href="/links/css/main.css">
+    <!-- External Libraries via CDN -->
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic' rel='stylesheet' type='text/css'>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <!-- Invisible Scripts -->
-    <script src="/links/js/main.js"></script>
+    <script src="/js/redirect-to-root.js"></script>
+    <script src="/js/hide-context-menu.js"></script>
+    <script src="/js/loader-animation.js"></script>
 </head>
 <body>
     <!-- Page not ready yet, redirects to index.html in root. -->
+
+    <!-- Scripts -->
+    <script src="/js/background-sparkles.js"></script>
+
+    <!-- Navigation Bar -->
+    <div class="navigation-bar">
+        <nav class="nav">
+            <a href="/" class="nav-item" active-color="orange">Home</a>
+            <!-- Had `is-active` after it but removed it due to not highlighting. -->
+            <a href="/about/" class="nav-item" active-color="green">About</a> <!-- About -->
+            <!--<a href="/dino/" class="nav-item" active-color="blue">Dino</a> <!-- Testimonials -->
+            <!--<a href="/doge" class="nav-item" active-color="red">Doge</a> <!-- Blog -->
+            <!--<a href="/cars/" class="nav-item" active-color="rebeccapurple">Cars</a> <!-- Contact -->
+            <a href="https://nani.s1n.pw" class="nav-item" active-color="rebeccapurple">Nani?!</a>
+            <span class="nav-indicator"></span>
+        </nav>
+    </div>
+
+    <!-- Loading Animation -->
+    <div class="loader-wrapper">
+        <div class="loader">
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+        </div>
+    </div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/links/js/main.js b/links/js/main.js
deleted file mode 100644
index 0086524..0000000
--- a/links/js/main.js
+++ /dev/null
@@ -1 +0,0 @@
-location.href = "/index.html"
\ No newline at end of file