save

static/assets/css/games.css

@@ -0,0 +1,66 @@
+.games {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-bottom: 30px;
+}
+
+.game {
+    min-width: 200px;
+    min-height: 200px;
+    display: block;
+    border-radius: 15px;
+    border: 1px solid #ffffff;
+    cursor: pointer;
+    transition: .4s;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0px 0px 10px #00000020;
+    margin: 10px;
+}
+
+.game:hover {
+    box-shadow: 0px 0px 20px #00000030;
+    filter: brightness(95%);
+    transform: translateY(-2px);
+    border-color: #ffffff;
+}
+
+.game>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    object-position: center;
+}
+
+.game:after {
+    content: '';
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+.game>h3 {
+    position: absolute;
+    bottom: 25px;
+    left: 20px;
+    color: #fff;
+    font-size: 25px;
+    z-index: 10;
+}
+
+.game>span {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    color: #fff;
+    z-index: 10;
+    font-size: 15px;
+}

static/assets/css/main.css

@@ -1,5 +1,7 @@
 @import url('/assets/css/fonts.css');
 @import url('/assets/css/themes.css');
+@import url('/assets/css/games.css');
+@import url('/assets/css/nav.css');
 
 /*Please try to keep this organized*/
 
@@ -10,25 +12,11 @@
 html,
 body {
     margin: 0px;
+    background-color: var(--background-color);
+    color: var(--text);
 }
 
-.navbar {
-    width: calc(100%-margin);
-    position: sticky;
-    display: flex;
-    justify-content: space-between;
-    margin: 10px;
-}
-
-.navbar>.title>img {
-    width: 75px;
-    border-radius: 10px;
-}
-
-.navbar>.title>span {
-    font-family: 'Lato-Black';
-    font-size: 60px;
-    margin-left: 13px;
-    position: relative;
-    bottom: 13px;
+a {
+    color: var(--text);
+    text-decoration: none;
 }

static/assets/css/nav.css

@@ -0,0 +1,32 @@
+.navbar {
+    width: calc(100%-margin);
+    position: sticky;
+    display: flex;
+    justify-content: space-between;
+    margin: 10px;
+}
+
+.navbar>.title>img {
+    width: 75px;
+    border-radius: 10px;
+}
+
+.navbar>.title>span {
+    font-family: 'Lato-Black';
+    font-size: 60px;
+    margin-left: 13px;
+    position: relative;
+    bottom: 13px;
+}
+
+.navbar>.end {
+    display: flex;
+    justify-content: space-between;
+}
+
+.navbar>.end>a {
+    margin: 1rem;
+    padding: 1rem;
+    background: var(--nav-color);
+    border-radius: 10px;
+}

static/assets/css/themes.css

@@ -3,6 +3,7 @@ Here is the theme template.
 Make sure there is a space between the theme selector and the target.
 */
 
-body[data-theme="theme name"] .exampleclass {
-    content: 'examplecontent';
+body[data-theme='dark']  {
+    --background-color: #000;
+    --text: #fff;
 }

static/assets/js/main.js

@@ -1,7 +1,4 @@
 import Theme from '/assets/js/themes.js';
-/*Please link all javascript files here using import*/
-
-console.log(Theme);
 
 fetch('/assets/misc/nav.html')
     .then(res => res.text())
@@ -11,9 +8,13 @@ fetch('/assets/misc/nav.html')
         alert('Failed to load navbar');
 
         if (confirm('Try again?')) location.reload();
-    })
+    });
 
-/*setTimeout(() => {
+onbeforeunload = (e) => {
+    return e;
+}
+
+const registerLinks = () => {
     document.querySelectorAll('a').forEach(a => {
         a.onclick = (e) => {
             if (a.dataset.link !== 'true') {
@@ -22,23 +23,43 @@ fetch('/assets/misc/nav.html')
 
             if (a.href.startsWith(location.origin)) {
                 if (window.location.href !== a.href) {
-                    fetch(a.href)
-                        .then(res => res.text())
-                        .then(content => {
-                            setTimeout(() => {
-                                window.history.pushState({}, '', a.href);
+                    const frame = document.createElement('iframe');
+                    frame.src = a.href;
+                    frame.style = 'display: none';
+                    document.body.appendChild(frame);
 
-                                document.documentElement.innerHTML = content;
-                            }, 500);
-                        }).catch(e => {
-                            a.setAttribute('data-link', 'true');
-                            a.click();
-                        });
+                    frame.contentWindow.addEventListener('DOMContentLoaded', () => {
+                        document.body.style.display = 'none';
+
+                        setTimeout(() => {
+                            window.history.pushState({}, '', a.href);
+                            document.documentElement.innerHTML = frame.contentDocument.documentElement.innerHTML;
+                            document.body.style.display = 'none';
+
+                            registerLinks();
+
+                            setTimeout(() => {
+                                document.body.style.display = 'block';
+                            }, 100);
+                        }, 500);
+                    });
                 }
             } else {
+                alert('buh');
+
                 a.setAttribute('data-link', 'true');
                 a.click();
             }
         }
     });
-}, 500)*/
+}
+
+if (window.self === window.top) {
+    const load = setInterval(() => {
+        if (loaded) {
+            clearInterval(load);
+
+            registerLinks();
+        }
+    }, 100);
+}

static/games.html

@@ -13,7 +13,13 @@
 
 <body>
     <div class="content">
-
+        <div class="games">
+            <a href="#game" class="game">
+                <img class="gamesimg" src="game_img.png">
+                <h3>Title</h3>
+                <span>Description</span>
+            </a>
+        </div>
     </div>
 
     <script src="/assets/js/main.js" type="module"></script>