diff options
| -rw-r--r-- | .gitignore | 6 | ||||
| -rw-r--r-- | about/index.html | 179 | ||||
| -rw-r--r-- | academic/index.html | 0 | ||||
| -rw-r--r-- | blog/index.html | 142 | ||||
| -rw-r--r-- | blog/post.html | 62 | ||||
| -rw-r--r-- | blog/simpliCity/beta02/index.html | 274 | ||||
| -rw-r--r-- | blog/simpliCity/well-that-was-dumb/index.html | 386 | ||||
| -rw-r--r-- | data/posts.json | 26 | ||||
| -rw-r--r-- | data/posts/0.md | 2 | ||||
| -rw-r--r-- | data/posts/1.md | 32 | ||||
| -rw-r--r-- | index.html | 270 | ||||
| -rw-r--r-- | packages/markdown-it-container.mjs | 139 | ||||
| -rw-r--r-- | projects/index.html | 236 | ||||
| -rw-r--r-- | projects/simpliCity/index.html | 222 | ||||
| -rw-r--r-- | projects/tank-shooter/index.html | 228 | ||||
| -rw-r--r-- | scripts/blog.js | 113 | ||||
| -rw-r--r-- | scripts/onload.js | 35 | ||||
| -rw-r--r-- | scripts/scroll.js | 156 | ||||
| -rw-r--r-- | scripts/video.js | 32 | ||||
| -rw-r--r-- | style.css | 1176 |
20 files changed, 2062 insertions, 1654 deletions
@@ -1,3 +1,3 @@ -temp -conf -logs +temp
+conf
+logs
diff --git a/about/index.html b/about/index.html index 530b38b..ded10f1 100644 --- a/about/index.html +++ b/about/index.html @@ -1,94 +1,85 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>About Me • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> -</head> - -<body> - <script defer src="/scripts/scroll.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <section style="border-top: none;"> - <div class="center-grid"> - <div class="div-sizing"> - <div class="flex-container"> - <img src="/assets/images/hero/logo.png" alt="" - style="box-sizing: border-box; height: 240px; width: 240px; object-fit: cover;" class="img"> - <div style="padding: 30px; color: gray;"> - <span><i class="fa-solid fa-suitcase"></i> Student</span> - <br> - <span><i class="fa-solid fa-star"></i> Software Development</span> - <br> - <span>🇮🇩 Indonesia</span> - <br> - <span><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaa@gmail.com" - class="link">athaalaa@gmail.com</a></span> - <br> - <span><i class="fa-brands fa-github"></i> <a href="https://github.com/altaf-creator/" - class="link">altaf-creator</a></span> - <br> - <span><i class="fa-brands fa-youtube"></i> <a href="https://youtube.com/@altafcreator/" - class="link">altaf-creator</a></span> - <br> - <span><i class="fa-brands fa-instagram"></i> <a href="https://instagram.com/athaalaa.altaf9/" - class="link">athaalaa.altaf9</a></span> - <br> - </div> - </div> - <p> - <span class="big-text">About Me</span><br> - <span>Hey there! I'm <span class="colored-text">Altaf</span>. I am a middle school student from - <span class="colored-text">Indonesia</span> who likes to code as a <span - class="colored-text">hobby</span>. I mostly make games and websites, but also likes to try - new things.</span> - </p> - </div> - </div> - </div> - </section> - <section style="height: 50vh;"> - <div class="center-grid"> - <div class="div-sizing"> - <div> - <span class="big-text" style="margin-left: 10px;">Socials</span> - <br> - <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button" - style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" - target="_blank"><i class="fa-brands fa-youtube"></i></a> - <a href="https://www.instagram.com/athaalaa.altaf9/" class="button" - style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" - target="_blank"><i class="fa-brands fa-instagram"></i></a> - <a href="https://github.com/altaf-creator" class="button" - style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" - target="_blank"><i class="fa-brands fa-github"></i></a> - <a href="mailto:athaalaa@gmail.com" class="button" - style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i - class="fa-solid fa-envelope" target="_blank"></i></a> - <a href="https://discord.gg/Mg5WFqrHk3" class="button" - style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i - class="fa-brands fa-discord" target="_blank"></i></a> - </div> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>About Me • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+ <script defer src="/scripts/scroll.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <section style="border-top: none;">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <div class="flex-container">
+ <img src="/assets/images/hero/logo.png" alt=""
+ style="box-sizing: border-box; height: 240px; width: 240px; object-fit: cover;" class="img">
+ <div style="padding: 30px; color: gray;">
+ <span><i class="fa-solid fa-suitcase"></i> Student</span>
+ <br>
+ <span><i class="fa-solid fa-star"></i> Software Development</span>
+ <br>
+ <span>🇮🇩 Indonesia</span>
+ <br>
+ <span><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaa@gmail.com"
+ class="link">athaalaa@gmail.com</a></span>
+ <br>
+ <span><i class="fa-brands fa-github"></i> <a href="https://github.com/altaf-creator/"
+ class="link">altaf-creator</a></span>
+ <br>
+ <span><i class="fa-brands fa-youtube"></i> <a href="https://youtube.com/@altafcreator/"
+ class="link">altaf-creator</a></span>
+ <br>
+ <span><i class="fa-brands fa-instagram"></i> <a href="https://instagram.com/athaalaa.altaf9/"
+ class="link">athaalaa.altaf9</a></span>
+ <br>
+ </div>
+ </div>
+ <p>
+ <span class="big-text">About Me</span><br>
+ <span>Hey there! I'm <span class="colored-text">Altaf</span>. I am a middle school student from
+ <span class="colored-text">Indonesia</span> who likes to code as a <span
+ class="colored-text">hobby</span>. I mostly make games and websites, but also likes to try
+ new things.</span>
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section style="height: 50vh;">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <div>
+ <span class="big-text" style="margin-left: 10px;">Socials</span>
+ <br>
+ <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>
+ <a href="https://www.instagram.com/athaalaa.altaf9/" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+ <a href="https://github.com/altaf-creator" class="button button-social" target="_blank"><i class="fa-brands fa-github"></i></a>
+ <a href="mailto:athaalaa@gmail.com" class="button button-social" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+ <a href="https://discord.gg/Mg5WFqrHk3" class="button button-social" target="_blank"><i class="fa-brands fa-discord"></i></a>
+ <a href="https://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></i></a>
+ </div>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/academic/index.html b/academic/index.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/academic/index.html diff --git a/blog/index.html b/blog/index.html index 89ad846..51554e8 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,69 +1,73 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>Blog • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> -</head> - -<body> - <script defer src="/scripts/scroll.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <section style="border-top: none;"> - <div class="center-grid"> - <div class="div-sizing"> - <div class="flex-container flex-container-column flex-center-content"> - <span class="heading">Blog</span> - <div class="card" tabindex="9999"> - <img src="/assets/images/blog/33_cover.png" - alt=""> - <div> - <div class="flex-container-normal"> <span class="colored-text">Devlog</span>, <span class="colored-text"> simpliCity</span></div> - <a href="simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a> - <p>Wed, 16 August 2023</p> - </div> - </div> - <div class="card" tabindex="9999"> - <img src="/assets/images/blog/newsite.png" - alt=""> - <div> - <div class="flex-container-normal"><span class="colored-text">Devlog</span></div> - <a href="" class="link">A new website! (again)</a> - <p>Fri, 11 August 2023</p> - </div> - </div> - <div class="card" tabindex="9999"> - <img src="/assets/images/blog/beta0.2_cover.png" - alt=""> - <div> - <div class="flex-container-normal"><span class="colored-text">simpliCity</span></div> - <a href="simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a> - <p>Wed, 26 July 2023</p> - </div> - </div> - - </div> - </div> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>Blog • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body onload="postList();">
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/blog.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <section style="border-top: none;">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <div class="flex-container flex-container-column flex-center-content" id="blog-container">
+ <span class="heading">Blog</span>
+ <div class="card" tabindex="9999">
+ <img src="/assets/images/blog/33_cover.png"
+ alt="">
+ <div>
+ <div class="flex-container-normal chip-container">
+ <span class="chip">Devlog</span>
+ <span class="chip">simpliCity</span>
+ </div>
+ <a href="simpliCity/well-that-was-dumb/" class="link">Well that was dumb. (33nd Week of 2023)</a>
+ <p>Wed, 16 August 2023</p>
+ </div>
+ </div>
+ <div class="card" tabindex="9999">
+ <img src="/assets/images/blog/newsite.png"
+ alt="">
+ <div>
+ <div class="flex-container-normal"><span class="colored-text">Devlog</span></div>
+ <a href="" class="link">A new website! (again)</a>
+ <p>Fri, 11 August 2023</p>
+ </div>
+ </div>
+ <div class="card" tabindex="9999">
+ <img src="/assets/images/blog/beta0.2_cover.png"
+ alt="">
+ <div>
+ <div class="flex-container-normal"><span class="colored-text">simpliCity</span></div>
+ <a href="simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a>
+ <p>Wed, 26 July 2023</p>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/blog/post.html b/blog/post.html new file mode 100644 index 0000000..b172f9f --- /dev/null +++ b/blog/post.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/style.css"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <title>Blog / Loading... • altaf-creator</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.js"></script> + <script src="/packages/markdown-it-container.mjs" type="module application/javascript"></script> + <style> + .center-grid { + min-height: 0; + } + </style> +</head> + +<body onload="blog(getUrlVars()['post'])"> + <script defer src="/scripts/blog.js"></script> + <script defer src="/scripts/scroll.js"></script> + <script defer src="/scripts/onload.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <a href="/about/" class="link">About Me</a> + <a href="/projects/" class="link">Projects</a> + <a href="/blog/" class="link">(dev)Blog</a> + </div> + </div> + <div class="sidebar" id="sidebar"> + <a href="/"> + <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> + </a> + <span>altaf-creator</span> + </div> + <div class="sidebar-progress-container" id="progressContainer"> + </div> + <section style="border-top: none; padding-top: 50px;" class="normal-section"> + <div class="banner-shadow"> + <img src="" alt="" class="banner img" id="banner"> + </div> + <div class="center-grid"> + <div class="div-sizing"> + <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;"> + <div id="tag-container" class="chip-container flex-container-normal "> + </div> + <h1 style="text-align: left; margin: 0;" id="title">Loading title...</h1> + <span style="color: rgba(0, 0, 0, 0.5);" id="date">Date</span><br> + <span>Written by <span class="colored-text" id="author">author</span></span> + </div> + </div> + </div> + </section> + <div id="content"> + <h1>Hello, world!</h1> + <p>i'm exhausted.</p> + </div> +</body> + +</html> diff --git a/blog/simpliCity/beta02/index.html b/blog/simpliCity/beta02/index.html index c2a29a8..b9b348d 100644 --- a/blog/simpliCity/beta02/index.html +++ b/blog/simpliCity/beta02/index.html @@ -1,138 +1,138 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>Blog / beta0.2: The Visual Update is Out! • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> - - <style> - .center-grid { - min-height: 0; - } - </style> -</head> - -<body onload="addNodes()"> - <script defer src="/scripts/scroll.js"></script> - <script defer src="/scripts/onload.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <div class="sidebar-progress-container" id="progressContainer"> - </div> - <section style="border-top: none; padding-top: 50px;" class="normal-section"> - <div class="banner-shadow"> - <img src="/assets/images/blog/beta0.2_banner.png" alt="" class="banner img"> - </div> - <div class="center-grid"> - <div class="div-sizing"> - <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;"> - <span class="colored-text">simpliCity</span> - <h1 style="text-align: left; margin: 0;">beta0.2: The Visual Update is Out!</h1> - <span style="color: rgba(0, 0, 0, 0.5);">Wednesday, 26 July 2023</span><br> - <span>Written by <span class="colored-text">altaf-creator</span></span> - </div> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>Introduction</h1> - <p>Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW! - 🥳 <br>This update contains a lot of content features, bugfixes, and improvements from the last - update. </p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h2>Notable Additions</h2> - <p>Starting from NEW buildings, there is now;</p> - <ul> - <li>Factories</li> - <li>A soup restaurant</li> - <li>Restoran Padang</li> - <li>miniMart</li> - <li>Big Ben</li> - <li>Fountains</li> - <li>House remodel + new models</li> - <li>School remodel</li> - <li>Lamp remodel</li> - <li>Connected roads</li> - <li>Fences</li> - </ul> - - <p>And then the new game ambience;</p> - <ul> - <li>Better ambient lightning</li> - <li>Better skybox coloring</li> - <li>Clouds!</li> - <li>Better ambience</li> - <li>Window lights</li> - </ul> - - <p>Last but certainly not least, big changes to UI!</p> - <ul> - <li>a COMPLETE UI overhaul</li> - <li>Loading screen</li> - <li>UI Sounds</li> - <li>Hotbar organization</li> - </ul> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h2>Changes & Bugfixes</h2> - <ul> - <li>Citizen arrival and depart rate modifications</li> - <li>Performance optimizations</li> - <li>Small improvements</li> - <li>Land expansions are now limited to 3x3</li> - <li>Useful tooltips</li> - <li>Better tooltip positioning</li> - <li>Fixed credit overlapping text</li> - </ul> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>Closing</h1> - <p> - And that's (probably) the end of the beta0.2 update. You can already update the game on steam right - now! I wanted to say thank you everyone for all of your support, suggestions, and help on building - simpliCity. <br><br> - Once again, thank you everyone for reading. <br> - This is Altaf. <br> - Stay safe, and see you in the next update on <a href="/blog/" class="link">The Altaf (dev)Blog</a>! - </p> - - <span style="color: rgba(0, 0, 0, 0.5);">Steam News Link: <a - href="https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135" - class="link">https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135</a></span> - </div> - </div> - </section> -</body> - +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>Blog / beta0.2: The Visual Update is Out! • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+
+ <style>
+ .center-grid {
+ min-height: 0;
+ }
+ </style>
+</head>
+
+<body onload="addNodes()">
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/onload.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <div class="sidebar-progress-container" id="progressContainer">
+ </div>
+ <section style="border-top: none; padding-top: 50px;" class="normal-section">
+ <div class="banner-shadow">
+ <img src="/assets/images/blog/beta0.2_banner.png" alt="" class="banner img">
+ </div>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;">
+ <span class="colored-text">simpliCity</span>
+ <h1 style="text-align: left; margin: 0;">beta0.2: The Visual Update is Out!</h1>
+ <span style="color: rgba(0, 0, 0, 0.5);">Wednesday, 26 July 2023</span><br>
+ <span>Written by <span class="colored-text">altaf-creator</span></span>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>Introduction</h1>
+ <p>Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW!
+ 🥳 <br>This update contains a lot of content features, bugfixes, and improvements from the last
+ update. </p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h2>Notable Additions</h2>
+ <p>Starting from NEW buildings, there is now;</p>
+ <ul>
+ <li>Factories</li>
+ <li>A soup restaurant</li>
+ <li>Restoran Padang</li>
+ <li>miniMart</li>
+ <li>Big Ben</li>
+ <li>Fountains</li>
+ <li>House remodel + new models</li>
+ <li>School remodel</li>
+ <li>Lamp remodel</li>
+ <li>Connected roads</li>
+ <li>Fences</li>
+ </ul>
+
+ <p>And then the new game ambience;</p>
+ <ul>
+ <li>Better ambient lightning</li>
+ <li>Better skybox coloring</li>
+ <li>Clouds!</li>
+ <li>Better ambience</li>
+ <li>Window lights</li>
+ </ul>
+
+ <p>Last but certainly not least, big changes to UI!</p>
+ <ul>
+ <li>a COMPLETE UI overhaul</li>
+ <li>Loading screen</li>
+ <li>UI Sounds</li>
+ <li>Hotbar organization</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h2>Changes & Bugfixes</h2>
+ <ul>
+ <li>Citizen arrival and depart rate modifications</li>
+ <li>Performance optimizations</li>
+ <li>Small improvements</li>
+ <li>Land expansions are now limited to 3x3</li>
+ <li>Useful tooltips</li>
+ <li>Better tooltip positioning</li>
+ <li>Fixed credit overlapping text</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>Closing</h1>
+ <p>
+ And that's (probably) the end of the beta0.2 update. You can already update the game on steam right
+ now! I wanted to say thank you everyone for all of your support, suggestions, and help on building
+ simpliCity. <br><br>
+ Once again, thank you everyone for reading. <br>
+ This is Altaf. <br>
+ Stay safe, and see you in the next update on <a href="/blog/" class="link">The Altaf (dev)Blog</a>!
+ </p>
+
+ <span style="color: rgba(0, 0, 0, 0.5);">Steam News Link: <a
+ href="https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135"
+ class="link">https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135</a></span>
+ </div>
+ </div>
+ </section>
+</body>
+
</html>
\ No newline at end of file diff --git a/blog/simpliCity/well-that-was-dumb/index.html b/blog/simpliCity/well-that-was-dumb/index.html index 8489006..4d33bf3 100644 --- a/blog/simpliCity/well-that-was-dumb/index.html +++ b/blog/simpliCity/well-that-was-dumb/index.html @@ -1,193 +1,193 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>Blog / This Week's Devlog: Well that was dumb. (33nd Week of 2023) • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> - - <style> - .center-grid { - min-height: 0; - } - </style> -</head> - -<body onload="addNodes()"> - <script defer src="/scripts/scroll.js"></script> - <script defer src="/scripts/onload.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <div class="sidebar-progress-container" id="progressContainer"> - </div> - <section style="border-top: none; padding-top: 50px;" class="normal-section"> - <div class="banner-shadow"> - <img src="/assets/images/blog/33_banner.png" alt="" class="banner img"> - </div> - <div class="center-grid"> - <div class="div-sizing"> - <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;"> - <div> - <span class="colored-text">Devlog</span>, <span class="colored-text">simpliCity</span> - </div> - <h1 style="text-align: left; margin: 0;">This Week's Devlog: Well that was dumb. (33nd Week of 2023) - </h1> - <span style="color: rgba(0, 0, 0, 0.5);">Wednesday, 16 August 2023</span><br> - <span>Written by <span class="colored-text">altaf-creator</span></span> - </div> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>Opening</h1> - <p>Hello, friends! Welcome back to the 5th.. or 6th.. (later editor note: it's 5th) weekly devlog! I - want to apologize for not posting weekly devlogs for the past few weeks. In this devlog, I would - like to tell you about my new projects and a stupid accident that I have did / occured.</p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>New Projects</h1> - <p>Usually after I published a new update for my games, I often take a break for a few days or weeks. I - also sometimes like to start a new side-project. And in this week, I have started some - side-projects. Some of them are;</p> - <ol> - <li>This website update.</li> - <li>A new game. I have some different ideas for my new game, so I am currently deciding which game - should I make for this new project.</li> - </ol> - <p>Now you may wonder, why did I create a new game? Well it was because...</p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>The (dumb?) Accident</h1> - <p>Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that - no human could ever even begin to comperhend, aka deleted all the project files. <br> The long story - is...</p> - - <h2>The Beginning</h2> - <p>It was a normal day. I was thinking of backing up simpliCity using GitHub. Because currently, - simpliCity project folder doesn't have any more copies apart from my drive. A month before, I have - made a (local) Git repository in my drive. So uploading the simpliCity repo to GitHub should be - simple, right?</p> - - <h2>The Problem</h2> - <p>First, I made a new repo in GitHub, connect the git repo to the GitHub repo using <b>git remote</b>, - rename the master branch to main, and push it to GitHub using <b>git push</b>-</p> - <pre>fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB</pre> - <p>..Alright then. Turns out I included the temporary, automatically-generated Unity project files and - folder. To fix this, I added the .gitignore template for Unity to tell Git to simply ignore the - files and folder, and upload it again-</p> - <pre>fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB</pre> - <p>Still the same error. Turns out that I have to remove the history of the ignored file, alias I have - to make git forget about all of the temp files. <b>And this is where I messed up.</b></p> - <p>After executing the command to do that, I accidentally removed the entire Git commit history. "That's - fine," I thought. So I executed another command to finish an operation, and I noticed something - weird in the files. - </p> - <p>The Assets folder, aka the most important folder in the project, is <b>gone</b>. I have no idea what - I did there, but the project was gone. I was panicking, spammed Ctrl + Z in VSCode and Windows - Explorer, checked the recycle bin, and tried to undo the previous git operation, and tried to fetch - the last commit. - <br>I forgot that the entire git commit history is gone. Git cannot help me. The project is also not - yet uploaded to GitHub, so the only <b>current</b> copy of the project is on my disk, and it's gone. - </p> - <p>I was confused, didn't know what just happened. So I tried downloading various data recovery tool, - because I know when a file is deleted, it's not entirely erased from the disk, just flagged as empty - and other programs can overwrite it. And it works! ..for just a few files. The Assets folder was - already overwritten with another data. I have tried many, many programs, and nothing works.<br> - Which means the Assets folder, is permanently deleted. I was sad, confused, and shocked (nah not - really, but kinda sad). I <b>really</b> did permanently delete almost a year worth of work, and the - worst part, I didn't know how and also can avoid it by being more careful.</p> - - <h2>The Light at The End of The Tunnel?</h2> - <p>I did mention that I did not have any more copies for the current simpliCity project file (which is - beta0.2.1), turns out that I actually have <b>one</b> old copy of beta0.1 (modified) project file. I - also have the latest beta0.2 build, and all of the assets. </p> - <p>So, what does that mean? Well it can mean that I can recover my project, but it needs more work. How - you may ask?</p> - <ol> - <li>First, I will decompile my game to get all the new scripts from the latest build using ILSpy. - </li> - <li>Download the old copy, and open it in Unity.</li> - <li>Update all the scripts to the new one.</li> - <li>Update all of the old objects to the new one to adapt to the new scripts.</li> - <li>Update all of the old assets to the new assets in my OneDrive.</li> - <li>Finish it up and polish it. And it's done! It will not be an exact copy, but all of the new - features should still be recovered. And probably will be improved.</li> - </ol> - <p>But this needs time. For now, I have decided to stop simpliCity development, and start a new - projects. Why? My gamedev journey is still long, and I cannot stick to the same projects for months - or years. I decided that this is the time for me to move on, and learn new things.</p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>What does it mean for simpliCity?</h1> - <p>This means that simpliCity development will be on hold for quite some time until I recovered the - project. This also means that I will make a new game! Yay! Finally!</p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>What can we learn</h1> - <p>What can we learn from my mistake?</p> - <ol> - <li>Back up all of your projects and files. Do NOT have only 1 copy of your project. Have it on a - second drive, and also online services like Google Drive and OneDrive. Do this so if something - happens to the original, you still have a copy of it.</li> - <li>Back up regularly. If you have a back-up but it's old, that is still the same (but better) than - having no back-ups at all. Back up your project every week or at least month.</li> - <li>Be careful in things that you don't know. Especially file management and Git. Git is hard. And - annoying.</li> - <li>It's time to learn new things and move on. It is ok to make a big project and spend years on it, - but you should also try and making many side-projects and improve over time.</li> - </ol> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid"> - <div class="div-sizing"> - <h1>Closing</h1> - <p>We have reached the end of this devlog. becase I feel I want to say sorry to everyone for - dissapointing you because of this mistake. I also want to say please learn from this mistake. Better - be safe than sorry! Also thank you, <b>thank you</b> everyone for staying with me in this journey. - </p> - <p> - And that's it for this week. Thank you so much everyone for reading. <br> - This is Altaf. <br> - Stay safe, and see you next week on <a href="/blog/" class="link">The Altaf (dev)Blog</a>! - </p> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>Blog / This Week's Devlog: Well that was dumb. (33nd Week of 2023) • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+
+ <style>
+ .center-grid {
+ min-height: 0;
+ }
+ </style>
+</head>
+
+<body onload="addNodes()">
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/onload.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <div class="sidebar-progress-container" id="progressContainer">
+ </div>
+ <section style="border-top: none; padding-top: 50px;" class="normal-section">
+ <div class="banner-shadow">
+ <img src="/assets/images/blog/33_banner.png" alt="" class="banner img">
+ </div>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;">
+ <div>
+ <span class="colored-text">Devlog</span>, <span class="colored-text">simpliCity</span>
+ </div>
+ <h1 style="text-align: left; margin: 0;">This Week's Devlog: Well that was dumb. (33nd Week of 2023)
+ </h1>
+ <span style="color: rgba(0, 0, 0, 0.5);">Wednesday, 16 August 2023</span><br>
+ <span>Written by <span class="colored-text">altaf-creator</span></span>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>Opening</h1>
+ <p>Hello, friends! Welcome back to the 5th.. or 6th.. (later editor note: it's 5th) weekly devlog! I
+ want to apologize for not posting weekly devlogs for the past few weeks. In this devlog, I would
+ like to tell you about my new projects and a stupid accident that I have did / occured.</p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>New Projects</h1>
+ <p>Usually after I published a new update for my games, I often take a break for a few days or weeks. I
+ also sometimes like to start a new side-project. And in this week, I have started some
+ side-projects. Some of them are;</p>
+ <ol>
+ <li>This website update.</li>
+ <li>A new game. I have some different ideas for my new game, so I am currently deciding which game
+ should I make for this new project.</li>
+ </ol>
+ <p>Now you may wonder, why did I create a new game? Well it was because...</p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>The (dumb?) Accident</h1>
+ <p>Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that
+ no human could ever even begin to comperhend, aka deleted all the project files. <br> The long story
+ is...</p>
+
+ <h2>The Beginning</h2>
+ <p>It was a normal day. I was thinking of backing up simpliCity using GitHub. Because currently,
+ simpliCity project folder doesn't have any more copies apart from my drive. A month before, I have
+ made a (local) Git repository in my drive. So uploading the simpliCity repo to GitHub should be
+ simple, right?</p>
+
+ <h2>The Problem</h2>
+ <p>First, I made a new repo in GitHub, connect the git repo to the GitHub repo using <b>git remote</b>,
+ rename the master branch to main, and push it to GitHub using <b>git push</b>-</p>
+ <pre>fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB</pre>
+ <p>..Alright then. Turns out I included the temporary, automatically-generated Unity project files and
+ folder. To fix this, I added the .gitignore template for Unity to tell Git to simply ignore the
+ files and folder, and upload it again-</p>
+ <pre>fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB</pre>
+ <p>Still the same error. Turns out that I have to remove the history of the ignored file, alias I have
+ to make git forget about all of the temp files. <b>And this is where I messed up.</b></p>
+ <p>After executing the command to do that, I accidentally removed the entire Git commit history. "That's
+ fine," I thought. So I executed another command to finish an operation, and I noticed something
+ weird in the files.
+ </p>
+ <p>The Assets folder, aka the most important folder in the project, is <b>gone</b>. I have no idea what
+ I did there, but the project was gone. I was panicking, spammed Ctrl + Z in VSCode and Windows
+ Explorer, checked the recycle bin, and tried to undo the previous git operation, and tried to fetch
+ the last commit.
+ <br>I forgot that the entire git commit history is gone. Git cannot help me. The project is also not
+ yet uploaded to GitHub, so the only <b>current</b> copy of the project is on my disk, and it's gone.
+ </p>
+ <p>I was confused, didn't know what just happened. So I tried downloading various data recovery tool,
+ because I know when a file is deleted, it's not entirely erased from the disk, just flagged as empty
+ and other programs can overwrite it. And it works! ..for just a few files. The Assets folder was
+ already overwritten with another data. I have tried many, many programs, and nothing works.<br>
+ Which means the Assets folder, is permanently deleted. I was sad, confused, and shocked (nah not
+ really, but kinda sad). I <b>really</b> did permanently delete almost a year worth of work, and the
+ worst part, I didn't know how and also can avoid it by being more careful.</p>
+
+ <h2>The Light at The End of The Tunnel?</h2>
+ <p>I did mention that I did not have any more copies for the current simpliCity project file (which is
+ beta0.2.1), turns out that I actually have <b>one</b> old copy of beta0.1 (modified) project file. I
+ also have the latest beta0.2 build, and all of the assets. </p>
+ <p>So, what does that mean? Well it can mean that I can recover my project, but it needs more work. How
+ you may ask?</p>
+ <ol>
+ <li>First, I will decompile my game to get all the new scripts from the latest build using ILSpy.
+ </li>
+ <li>Download the old copy, and open it in Unity.</li>
+ <li>Update all the scripts to the new one.</li>
+ <li>Update all of the old objects to the new one to adapt to the new scripts.</li>
+ <li>Update all of the old assets to the new assets in my OneDrive.</li>
+ <li>Finish it up and polish it. And it's done! It will not be an exact copy, but all of the new
+ features should still be recovered. And probably will be improved.</li>
+ </ol>
+ <p>But this needs time. For now, I have decided to stop simpliCity development, and start a new
+ projects. Why? My gamedev journey is still long, and I cannot stick to the same projects for months
+ or years. I decided that this is the time for me to move on, and learn new things.</p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>What does it mean for simpliCity?</h1>
+ <p>This means that simpliCity development will be on hold for quite some time until I recovered the
+ project. This also means that I will make a new game! Yay! Finally!</p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>What can we learn</h1>
+ <p>What can we learn from my mistake?</p>
+ <ol>
+ <li>Back up all of your projects and files. Do NOT have only 1 copy of your project. Have it on a
+ second drive, and also online services like Google Drive and OneDrive. Do this so if something
+ happens to the original, you still have a copy of it.</li>
+ <li>Back up regularly. If you have a back-up but it's old, that is still the same (but better) than
+ having no back-ups at all. Back up your project every week or at least month.</li>
+ <li>Be careful in things that you don't know. Especially file management and Git. Git is hard. And
+ annoying.</li>
+ <li>It's time to learn new things and move on. It is ok to make a big project and spend years on it,
+ but you should also try and making many side-projects and improve over time.</li>
+ </ol>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>Closing</h1>
+ <p>We have reached the end of this devlog. becase I feel I want to say sorry to everyone for
+ dissapointing you because of this mistake. I also want to say please learn from this mistake. Better
+ be safe than sorry! Also thank you, <b>thank you</b> everyone for staying with me in this journey.
+ </p>
+ <p>
+ And that's it for this week. Thank you so much everyone for reading. <br>
+ This is Altaf. <br>
+ Stay safe, and see you next week on <a href="/blog/" class="link">The Altaf (dev)Blog</a>!
+ </p>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/data/posts.json b/data/posts.json new file mode 100644 index 0000000..240b4d7 --- /dev/null +++ b/data/posts.json @@ -0,0 +1,26 @@ +{ "posts": + [ + { + "id" : 0, + "title" : "beta0.2: The Visual Update is Out!", + "description" : "", + "date" : "Wed, 26 July 2023", + "author" : "altaf-creator", + "tags" : ["simpliCity", "Devlog"], + "thumbnail" : "/assets/images/blog/beta0.2_cover.png", + "banner" : "/assets/images/blog/beta0.2_banner.png", + "path" : "/data/posts/0.md" + }, + { + "id" : 1, + "title" : "Well that was dumb. (33nd Week of 2023)", + "description" : "", + "date" : "Wed, 16 August 2023", + "author" : "altaf-creator", + "tags" : ["simpliCity", "Devlog"], + "thumbnail" : "/assets/images/blog/33_cover.png", + "banner" : "/assets/images/blog/33_banner.png", + "path" : "/data/posts/1.md" + } + ] +} diff --git a/data/posts/0.md b/data/posts/0.md new file mode 100644 index 0000000..9884eb2 --- /dev/null +++ b/data/posts/0.md @@ -0,0 +1,2 @@ +# hello, wolrd! +0.md diff --git a/data/posts/1.md b/data/posts/1.md new file mode 100644 index 0000000..f4c6bbd --- /dev/null +++ b/data/posts/1.md @@ -0,0 +1,32 @@ +-+-+-+ +# Opening +Hello, friends! Welcome back to the 5th.. or 6th.. (later editor note: it's 5th) weekly devlog! I want to apologize for not posting weekly devlogs for the past few weeks. In this devlog, I would like to tell you about my new projects and a stupid accident that I have did / occurred. ++-+-+- + +-+-+-+ +# New Projects +Usually after I published a new update for my games, I often take a break for a few days or weeks. I also sometimes like to start a new side-project. And in this week, I have started some side-projects. Some of them are; + +1. This website update. +2. A new game. I have some different ideas for my new game, so I am currently deciding which game should I make for this new project. + +Now you may wonder, why did I create a new game? Well it was because... ++-+-+- + +-+-+-+ +# New Projects +Usually after I published a new update for my games, I often take a break for a few days or weeks. I also sometimes like to start a new side-project. And in this week, I have started some side-projects. Some of them are; + +1. This website update. +2. A new game. I have some different ideas for my new game, so I am currently deciding which game should I make for this new project. + +Now you may wonder, why did I create a new game? Well it was because... ++-+-+- + +-+-+-+ +# The (dumb?) Accident +Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that no human could ever even begin to comperhend, aka. deleted all the project files. +The long story is... + + ++-+-+- @@ -1,131 +1,139 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>This is altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> -</head> - -<body onload="addNodes()"> - <script defer src="/scripts/onload.js"></script> - <script defer src="/scripts/scroll.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <div class="sidebar-progress-container" id="progressContainer"> - </div> - <section style="background-color: #8ACFE5; border-top: none;"> - <div class="home-img" - style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); "> - </div> - <span class="home-title" style="z-index: 0;">Altaf</span> - <div class="home-img" - style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); "> -</div> - <a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity - ↗</a> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing"> - <span class="big-text">Hey there!</span> - <br> - <span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span> - <br> - <a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a> - </div> - </div> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing" style="height: 100%;"> - <div class="flex-container flex-container-column"> - <h1>Project Highlights</h1> - <div class="flex-container flex" style="min-height: 600px;"> - <div class="flex full-img-card" - style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); "> - <a href="/projects/simpliCity/" class="fill-div gradient-overlay"> - <span>simpliCity</span> - </a> - - </div> - <div class="flex full-img-card" - style="background-image: url(/assets/images/game-hero/tank_screenshot.png);"> - <a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay"> - <span>Tank Shooter</span> - </a> - - </div> - <div class="flex full-img-card" - style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);"> - <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay"> - <span>MarkdownEditor</span> - </a> - - </div> - </div> - <a href="projects/" class="button" style="margin-left: auto; margin-right: auto;">View More</a> - </div> - </div> - </div> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing"> - <h1 class="center">Blog Posts</h1> - <div class="flex-container flex-center"> - <div class="card" tabindex="9999"> - <img src="/assets/images/blog/33_cover.png" - alt=""> - <div> - <div class="flex-container-normal"> <span class="colored-text">Devlog</span>, <span class="colored-text"> simpliCity</span></div> - <a href="blog/simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a> - <p>Wed, 16 August 2023</p> - </div> - </div> - <div class="card" tabindex="9999"> - <img src="/assets/images/blog/beta0.2_cover.png" - alt=""> - <div> - <div class="flex-container-normal"><span class="colored-text">simpliCity</span></div> - <a href="blog/simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a> - <p>Wed, 26 July 2023</p> - </div> - </div> - </div> - <div class="flex-container flex-center"> - <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a> - </div> - <hr> - <h1 class="center">Socials</h1> - <div class="center-grid" style="min-height: 0;"> - <div> - <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" target="_blank"><i class="fa-brands fa-youtube"></i></a> - <a href="https://www.instagram.com/athaalaa.altaf9/" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" target="_blank"><i class="fa-brands fa-instagram"></i></a> - <a href="https://github.com/altaf-creator" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" target="_blank"><i class="fa-brands fa-github"></i></a> - <a href="mailto:athaalaa@gmail.com" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i class="fa-solid fa-envelope" target="_blank"></i></a> - <a href="https://discord.gg/Mg5WFqrHk3" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i class="fa-brands fa-discord" target="_blank"></i></a> - </div> - </div> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>This is altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body onload="addNodes()">
+ <script defer src="/scripts/onload.js"></script>
+ <script defer src="/scripts/scroll.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <div class="sidebar-progress-container" id="progressContainer">
+ </div>
+ <section style="background-color: #8ACFE5; border-top: none;">
+ <div class="home-img"
+ style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); ">
+ </div>
+ <span class="home-title" style="z-index: 0;">Altaf</span>
+ <div class="home-img"
+ style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); ">
+</div>
+ <a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity
+ ↗</a>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <span class="big-text">Hey there!</span>
+ <br>
+ <span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span>
+ <br>
+ <a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing" style="height: 100%;">
+ <div class="flex-container flex-container-column">
+ <h1>Project Highlights</h1>
+ <div class="flex-container flex" style="min-height: 600px;">
+ <div class="flex full-img-card"
+ style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
+ <a href="/projects/simpliCity/" class="fill-div gradient-overlay">
+ <span>simpliCity</span>
+ </a>
+
+ </div>
+ <div class="flex full-img-card"
+ style="background-image: url(/assets/images/game-hero/tank_screenshot.png);">
+ <a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay">
+ <span>Tank Shooter</span>
+ </a>
+
+ </div>
+ <div class="flex full-img-card"
+ style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">
+ <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">
+ <span>MarkdownEditor</span>
+ </a>
+
+ </div>
+ </div>
+ <a href="projects/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1 id="center">Academic History</h1>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1 class="center">Blog Posts</h1>
+ <div class="flex-container flex-center">
+ <div class="card" tabindex="9999">
+ <img src="/assets/images/blog/33_cover.png"
+ alt="">
+ <div>
+ <div class="flex-container-normal"> <span class="colored-text">Devlog</span>, <span class="colored-text"> simpliCity</span></div>
+ <a href="blog/simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a>
+ <p>Wed, 16 August 2023</p>
+ </div>
+ </div>
+ <div class="card" tabindex="9999">
+ <img src="/assets/images/blog/beta0.2_cover.png"
+ alt="">
+ <div>
+ <div class="flex-container-normal"><span class="colored-text">simpliCity</span></div>
+ <a href="blog/simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a>
+ <p>Wed, 26 July 2023</p>
+ </div>
+ </div>
+ </div>
+ <div class="flex-container flex-center">
+ <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>
+ </div>
+ <hr>
+ <h1 class="center">Socials</h1>
+ <div class="center-grid" style="min-height: 0;">
+ <div>
+ <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>
+ <a href="https://www.instagram.com/athaalaa.altaf9/" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+ <a href="https://github.com/altaf-creator" class="button button-social" target="_blank"><i class="fa-brands fa-github"></i></a>
+ <a href="mailto:athaalaa@gmail.com" class="button button-social" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+ <a href="https://discord.gg/Mg5WFqrHk3" class="button button-social" target="_blank"><i class="fa-brands fa-discord"></i></a>
+ <a href="https://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></i></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/packages/markdown-it-container.mjs b/packages/markdown-it-container.mjs new file mode 100644 index 0000000..2643284 --- /dev/null +++ b/packages/markdown-it-container.mjs @@ -0,0 +1,139 @@ +// Process block-level custom containers +// +export default function container_plugin (md, name, options) { + // Second param may be useful if you decide + // to increase minimal allowed marker length + function validateDefault (params/*, markup */) { + return params.trim().split(' ', 2)[0] === name + } + + function renderDefault (tokens, idx, _options, env, slf) { + // add a class to the opening tag + if (tokens[idx].nesting === 1) { + tokens[idx].attrJoin('class', name) + } + + return slf.renderToken(tokens, idx, _options, env, slf) + } + + options = options || {} + + const min_markers = 3 + const marker_str = options.marker || ':' + const marker_char = marker_str.charCodeAt(0) + const marker_len = marker_str.length + const validate = options.validate || validateDefault + const render = options.render || renderDefault + + function container (state, startLine, endLine, silent) { + let pos + let auto_closed = false + let start = state.bMarks[startLine] + state.tShift[startLine] + let max = state.eMarks[startLine] + + // Check out the first character quickly, + // this should filter out most of non-containers + // + if (marker_char !== state.src.charCodeAt(start)) { return false } + + // Check out the rest of the marker string + // + for (pos = start + 1; pos <= max; pos++) { + if (marker_str[(pos - start) % marker_len] !== state.src[pos]) { + break + } + } + + const marker_count = Math.floor((pos - start) / marker_len) + if (marker_count < min_markers) { return false } + pos -= (pos - start) % marker_len + + const markup = state.src.slice(start, pos) + const params = state.src.slice(pos, max) + if (!validate(params, markup)) { return false } + + // Since start is found, we can report success here in validation mode + // + if (silent) { return true } + + // Search for the end of the block + // + let nextLine = startLine + + for (;;) { + nextLine++ + if (nextLine >= endLine) { + // unclosed block should be autoclosed by end of document. + // also block seems to be autoclosed by end of parent + break + } + + start = state.bMarks[nextLine] + state.tShift[nextLine] + max = state.eMarks[nextLine] + + if (start < max && state.sCount[nextLine] < state.blkIndent) { + // non-empty line with negative indent should stop the list: + // - ``` + // test + break + } + + if (marker_char !== state.src.charCodeAt(start)) { continue } + + if (state.sCount[nextLine] - state.blkIndent >= 4) { + // closing fence should be indented less than 4 spaces + continue + } + + for (pos = start + 1; pos <= max; pos++) { + if (marker_str[(pos - start) % marker_len] !== state.src[pos]) { + break + } + } + + // closing code fence must be at least as long as the opening one + if (Math.floor((pos - start) / marker_len) < marker_count) { continue } + + // make sure tail has spaces only + pos -= (pos - start) % marker_len + pos = state.skipSpaces(pos) + + if (pos < max) { continue } + + // found! + auto_closed = true + break + } + + const old_parent = state.parentType + const old_line_max = state.lineMax + state.parentType = 'container' + + // this will prevent lazy continuations from ever going past our end marker + state.lineMax = nextLine + + const token_o = state.push('container_' + name + '_open', 'div', 1) + token_o.markup = markup + token_o.block = true + token_o.info = params + token_o.map = [startLine, nextLine] + + state.md.block.tokenize(state, startLine + 1, nextLine) + + const token_c = state.push('container_' + name + '_close', 'div', -1) + token_c.markup = state.src.slice(start, pos) + token_c.block = true + + state.parentType = old_parent + state.lineMax = old_line_max + state.line = nextLine + (auto_closed ? 1 : 0) + + return true + } + + md.block.ruler.before('fence', 'container_' + name, container, { + alt: ['paragraph', 'reference', 'blockquote', 'list'] + }) + md.renderer.rules['container_' + name + '_open'] = render + md.renderer.rules['container_' + name + '_close'] = render +}; diff --git a/projects/index.html b/projects/index.html index b2477c7..9af538a 100644 --- a/projects/index.html +++ b/projects/index.html @@ -1,118 +1,118 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>Projects • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> -</head> - -<body> - <script defer src="/scripts/scroll.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <section style="border-top: none;"> - <div class="center-grid"> - <div class="div-sizing" style="max-width: none;"> - <div class="flex-container flex-container-column"> - <span class="heading">Projects</span> - <div class="flex-container flex" style="height: 800px;"> - <div class="flex full-img-card" - style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); "> - <a href="/projects/simpliCity/" class="fill-div gradient-overlay"> - <span>simpliCity</span> - </a> - - </div> - <div class="flex full-img-card" - style="background-image: url(/assets/images/game-hero/tank_screenshot.png);"> - <a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay"> - <span>Tank Shooter</span> - </a> - - </div> - <div class="flex full-img-card" - style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);"> - <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay"> - <span>MarkdownEditor</span> - </a> - </div> - </div> - <div class="flex-container-normal flex"> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/depths-of-knowledge_cover.png); "> - <a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay"> - <span>Depths of Knowledge</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/farmer_screenshot.png); "> - <a href="https://altaf-creator.itch.io/farmers-universe" class="fill-div gradient-overlay"> - <span>Farmer's Universe</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/quran_screenshot.png); "> - <a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay"> - <span>OpenQuran</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/duck_screenshot.png); "> - <a href="https://play.unity.com/mg/other/webgl-flappy-duck-1-0" class="fill-div gradient-overlay"> - <span>Flappy Duck</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/ball_screenshot.png); "> - <a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay"> - <span>Ball Run</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/space_hero.png); "> - <a href="https://github.com/altaf-creator/Space-Shooter-Game" class="fill-div gradient-overlay"> - <span>Space Shooter Game</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/math_screenshot.png); "> - <a href="https:/altaf-creator.github.io/easy-math-game/" class="fill-div gradient-overlay"> - <span>Easy Math Game</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/microbit_screenshot.png); "> - <a href="https://github.com/altaf-creator/microbit-calculator" class="fill-div gradient-overlay"> - <span>micro:bit Calculator</span> - </a> - </div> - <div class="flex full-img-card gallery-card" - style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); "> - <a href="" class="fill-div gradient-overlay"> - <span>C Wordle</span> - </a> - </div> - </div> - </div> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>Projects • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+ <script defer src="/scripts/scroll.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <section style="border-top: none;">
+ <div class="center-grid">
+ <div class="div-sizing" style="max-width: none;">
+ <div class="flex-container flex-container-column">
+ <span class="heading">Projects</span>
+ <div class="flex-container flex" style="height: 800px;">
+ <div class="flex full-img-card"
+ style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
+ <a href="/projects/simpliCity/" class="fill-div gradient-overlay">
+ <span>simpliCity</span>
+ </a>
+
+ </div>
+ <div class="flex full-img-card"
+ style="background-image: url(/assets/images/game-hero/tank_screenshot.png);">
+ <a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay">
+ <span>Tank Shooter</span>
+ </a>
+
+ </div>
+ <div class="flex full-img-card"
+ style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">
+ <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">
+ <span>MarkdownEditor</span>
+ </a>
+ </div>
+ </div>
+ <div class="flex-container-normal flex">
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/depths-of-knowledge_cover.png); ">
+ <a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">
+ <span>Depths of Knowledge</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/farmer_screenshot.png); ">
+ <a href="https://altaf-creator.itch.io/farmers-universe" class="fill-div gradient-overlay">
+ <span>Farmer's Universe</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/quran_screenshot.png); ">
+ <a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay">
+ <span>OpenQuran</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/duck_screenshot.png); ">
+ <a href="https://play.unity.com/mg/other/webgl-flappy-duck-1-0" class="fill-div gradient-overlay">
+ <span>Flappy Duck</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/ball_screenshot.png); ">
+ <a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay">
+ <span>Ball Run</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/space_hero.png); ">
+ <a href="https://github.com/altaf-creator/Space-Shooter-Game" class="fill-div gradient-overlay">
+ <span>Space Shooter Game</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/math_screenshot.png); ">
+ <a href="https:/altaf-creator.github.io/easy-math-game/" class="fill-div gradient-overlay">
+ <span>Easy Math Game</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/microbit_screenshot.png); ">
+ <a href="https://github.com/altaf-creator/microbit-calculator" class="fill-div gradient-overlay">
+ <span>micro:bit Calculator</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">
+ <a href="" class="fill-div gradient-overlay">
+ <span>C Wordle</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/projects/simpliCity/index.html b/projects/simpliCity/index.html index dd2a876..943e715 100644 --- a/projects/simpliCity/index.html +++ b/projects/simpliCity/index.html @@ -1,111 +1,111 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>simpliCity • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> -</head> - -<body onload="addNodes()"> - <script defer src="/scripts/onload.js"></script> - <script defer src="/scripts/scroll.js"></script> - <script defer src="/scripts/video.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <div class="sidebar-progress-container" id="progressContainer"> - </div> - <div class="banner-top-bar flex-container"> - <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a> - <img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt=""> - </div> - <section style="border-top: none; overflow: hidden;" id="simpliCity-img"> - <video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video> - <div class="banner-bottom-bar flex-container"> - <div class="flex"> - <a class="button" href="#" onclick="playVideo('video')">▶ Trailer</a> - <i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i> - </div> - <div class="flex-right"> - <a class="button" href="#"><i class="fa-brands fa-windows"></i> Download Demo</a> - <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a> - </div> - </div> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing"> - <h1>What is simpliCity?</h1> - <p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p> - <p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p> - <h1>This Game Offers:</h1> - <ul> - <li>30+ different buildings</li> - <li>Save & load system</li> - <li>Simple worker system</li> - <li>Relaxing feel & atmosphere</li> - <li>Simple residential system</li> - <li>Sandbox mode if you want no challanges at all</li> - </ul> - <h1>Gameplay</h1> - <p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p> - <h1>Feedback & Discord</h1> - <p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid" style="min-height: 0px;"> - <div class="div-sizing"> - <h1>Minimum System Requirements</h1> - <ul> - <li><b>Operating System:</b> Windows 8+ 64-bit</li> - <li><b>Processor:</b> Intel Dual Core 2GHz</li> - <li><b>Memory:</b> 2 GB of RAM</li> - <li><b>Graphics:</b> Intergrated Graphics Card</li> - <li><b>DirectX:</b> Version 11</li> - <li><b>Storage:</b> 512 MB available space</li> - </ul> - </div> - </div> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing"> - <h1>Downloads</h1> - <div class="flex-container"> - <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a> - <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a> - </div> - <h1>Older Versions (coming soon)</h1> - <div class="flex-container"> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a> - </div> - <h1>Changelogs (coming soon)</h1> - <a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>simpliCity • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body onload="addNodes()">
+ <script defer src="/scripts/onload.js"></script>
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/video.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <div class="sidebar-progress-container" id="progressContainer">
+ </div>
+ <div class="banner-top-bar flex-container">
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
+ <img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
+ </div>
+ <section style="border-top: none; overflow: hidden;" id="simpliCity-img">
+ <video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video>
+ <div class="banner-bottom-bar flex-container">
+ <div class="flex">
+ <a class="button" href="#" onclick="playVideo('video')">▶ Trailer</a>
+ <i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i>
+ </div>
+ <div class="flex-right">
+ <a class="button" href="#"><i class="fa-brands fa-windows"></i> Download Demo</a>
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>What is simpliCity?</h1>
+ <p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p>
+ <p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p>
+ <h1>This Game Offers:</h1>
+ <ul>
+ <li>30+ different buildings</li>
+ <li>Save & load system</li>
+ <li>Simple worker system</li>
+ <li>Relaxing feel & atmosphere</li>
+ <li>Simple residential system</li>
+ <li>Sandbox mode if you want no challanges at all</li>
+ </ul>
+ <h1>Gameplay</h1>
+ <p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p>
+ <h1>Feedback & Discord</h1>
+ <p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid" style="min-height: 0px;">
+ <div class="div-sizing">
+ <h1>Minimum System Requirements</h1>
+ <ul>
+ <li><b>Operating System:</b> Windows 8+ 64-bit</li>
+ <li><b>Processor:</b> Intel Dual Core 2GHz</li>
+ <li><b>Memory:</b> 2 GB of RAM</li>
+ <li><b>Graphics:</b> Intergrated Graphics Card</li>
+ <li><b>DirectX:</b> Version 11</li>
+ <li><b>Storage:</b> 512 MB available space</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>Downloads</h1>
+ <div class="flex-container">
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
+ <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
+ </div>
+ <h1>Older Versions (coming soon)</h1>
+ <div class="flex-container">
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
+ </div>
+ <h1>Changelogs (coming soon)</h1>
+ <a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/projects/tank-shooter/index.html b/projects/tank-shooter/index.html index 3a79dc9..62e2795 100644 --- a/projects/tank-shooter/index.html +++ b/projects/tank-shooter/index.html @@ -1,114 +1,114 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style.css"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>simpliCity • altaf-creator</title> - <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> -</head> - -<body onload="addNodes()"> - <script defer src="/scripts/onload.js"></script> - <script defer src="/scripts/scroll.js"></script> - <script defer src="/scripts/video.js"></script> - <div class="floating-nav-container"> - <div class="floating-nav"> - <a href="/about/" class="link">About Me</a> - <a href="/projects/" class="link">Projects</a> - <a href="/blog/" class="link">(dev)Blog</a> - </div> - </div> - <div class="sidebar" id="sidebar"> - <a href="/"> - <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> - </a> - <span>altaf-creator</span> - </div> - <div class="sidebar-progress-container" id="progressContainer"> - </div> - <div class="banner-top-bar flex-container"> - <a class="button" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a> - <a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a> - <img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt=""> - </div> - <section style="border-top: none; overflow: hidden;" id="simpliCity-img"> - <video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video> - <div class="banner-bottom-bar flex-container"> - <div class="flex desktop" style="margin-left: 20px;"> - <i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i> - <i class="fa-brands fa-android" title="Android"></i> - <i class="fa-solid fa-globe" title="Web Browsers (desktop only)"></i> - </div> - <div class="flex-right"> - <a class="button desktop" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a> - <a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a> - <a class="button" href="#"><i class="fa-solid fa-globe"></i> itch.io (Browser)</a> - </div> - </div> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing"> - <h1>What is simpliCity?</h1> - <p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p> - <p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p> - <h1>This Game Offers:</h1> - <ul> - <li>30+ different buildings</li> - <li>Save & load system</li> - <li>Simple worker system</li> - <li>Relaxing feel & atmosphere</li> - <li>Simple residential system</li> - <li>Sandbox mode if you want no challanges at all</li> - </ul> - <h1>Gameplay</h1> - <p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p> - <h1>Feedback & Discord</h1> - <p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p> - </div> - </div> - </section> - <section class="normal-section"> - <div class="center-grid" style="min-height: 0px;"> - <div class="div-sizing"> - <h1>Minimum System Requirements</h1> - <ul> - <li><b>Operating System:</b> Windows 8+ 64-bit</li> - <li><b>Processor:</b> Intel Dual Core 2GHz</li> - <li><b>Memory:</b> 2 GB of RAM</li> - <li><b>Graphics:</b> Intergrated Graphics Card</li> - <li><b>DirectX:</b> Version 11</li> - <li><b>Storage:</b> 512 MB available space</li> - </ul> - </div> - </div> - </section> - <section> - <div class="center-grid"> - <div class="div-sizing"> - <h1>Downloads</h1> - <div class="flex-container"> - <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a> - <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a> - </div> - <h1>Older Versions (coming soon)</h1> - <div class="flex-container"> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a> - <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a> - </div> - <h1>Changelogs (coming soon)</h1> - <a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a> - </div> - </div> - </section> -</body> - -</html> +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+ <title>simpliCity • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+
+<body onload="addNodes()">
+ <script defer src="/scripts/onload.js"></script>
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/video.js"></script>
+ <div class="floating-nav-container">
+ <div class="floating-nav">
+ <a href="/about/" class="link">About Me</a>
+ <a href="/projects/" class="link">Projects</a>
+ <a href="/blog/" class="link">(dev)Blog</a>
+ </div>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <a href="/">
+ <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+ </a>
+ <span>altaf-creator</span>
+ </div>
+ <div class="sidebar-progress-container" id="progressContainer">
+ </div>
+ <div class="banner-top-bar flex-container">
+ <a class="button" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a>
+ <a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a>
+ <img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
+ </div>
+ <section style="border-top: none; overflow: hidden;" id="simpliCity-img">
+ <video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video>
+ <div class="banner-bottom-bar flex-container">
+ <div class="flex desktop" style="margin-left: 20px;">
+ <i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i>
+ <i class="fa-brands fa-android" title="Android"></i>
+ <i class="fa-solid fa-globe" title="Web Browsers (desktop only)"></i>
+ </div>
+ <div class="flex-right">
+ <a class="button desktop" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a>
+ <a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a>
+ <a class="button" href="#"><i class="fa-solid fa-globe"></i> itch.io (Browser)</a>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>What is simpliCity?</h1>
+ <p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p>
+ <p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p>
+ <h1>This Game Offers:</h1>
+ <ul>
+ <li>30+ different buildings</li>
+ <li>Save & load system</li>
+ <li>Simple worker system</li>
+ <li>Relaxing feel & atmosphere</li>
+ <li>Simple residential system</li>
+ <li>Sandbox mode if you want no challanges at all</li>
+ </ul>
+ <h1>Gameplay</h1>
+ <p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p>
+ <h1>Feedback & Discord</h1>
+ <p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p>
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
+ <div class="center-grid" style="min-height: 0px;">
+ <div class="div-sizing">
+ <h1>Minimum System Requirements</h1>
+ <ul>
+ <li><b>Operating System:</b> Windows 8+ 64-bit</li>
+ <li><b>Processor:</b> Intel Dual Core 2GHz</li>
+ <li><b>Memory:</b> 2 GB of RAM</li>
+ <li><b>Graphics:</b> Intergrated Graphics Card</li>
+ <li><b>DirectX:</b> Version 11</li>
+ <li><b>Storage:</b> 512 MB available space</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
+ <h1>Downloads</h1>
+ <div class="flex-container">
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
+ <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
+ </div>
+ <h1>Older Versions (coming soon)</h1>
+ <div class="flex-container">
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
+ </div>
+ <h1>Changelogs (coming soon)</h1>
+ <a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a>
+ </div>
+ </div>
+ </section>
+</body>
+
+</html>
diff --git a/scripts/blog.js b/scripts/blog.js new file mode 100644 index 0000000..cef9a28 --- /dev/null +++ b/scripts/blog.js @@ -0,0 +1,113 @@ +var evaluatedTags = ""; +const clamp = (val, min, max) => Math.min(Math.max(val, min), max) + +function postList(n = 0) { + fetch("/data/posts.json") + .then((response) => response.json()) + .then((data) => { + n = clamp(n, 0, data.posts.length); + if (n < 1) { + n = data.posts.length; + } + + // i ❤ for loops + for (var i = n - 1; i >= 0; i--) { + console.log("dkfjlaafjsdk" + i) + postCard(data.posts[i]); + } + }); +} + +function postCard(post) { + var blogContainer = document.getElementById("blog-container"); + + var title = post.title; + var date = post.date; + var author = post.author; + var tags = post.tags; + var thumbnail = post.thumbnail; + var id = post.id; + + evaluatedTags = ""; + tags.forEach(createTags) + + var template = ` + <div class="card" tabindex="9999"> + <img src="${thumbnail}" + alt=""> + <div> + <div class="flex-container-normal chip-container"> + ${evaluatedTags} + </div> + <a href="/blog/post.html?post=${id}" class="link">${title}</a> + <p>${date}</p> + </div> + </div> + ` + + blogContainer.innerHTML += template; +} + +function createTags(tag) { + evaluatedTags += `<span class="chip">${tag}</span>` +} + +function getUrlVars() { + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + for (var i = 0; i < hashes.length; i++) { + hash = hashes[i].split('='); + vars.push(hash[0]); + vars[hash[0]] = hash[1]; + } + return vars; +} + +// DEPENDENCIES +// * /scripts/scroll.js +function loadPost(n) { + const md = markdownit({ + 'html': true + }) + + fetch("/data/posts.json") + .then((response) => response.json()) + .then((data) => { + var post = data.posts[n]; + + var banner = document.getElementById("banner"); + var title = document.getElementById("title"); + var date = document.getElementById("date"); + var author = document.getElementById("author"); + var tags = document.getElementById("tag-container"); + var content = document.getElementById("content"); + + banner.src = post.banner; + title.innerHTML = post.title; + date.innerHTML = post.date; + author.innerHTML = post.author; + post.tags.forEach(createTags); + tags.innerHTML = evaluatedTags; + + fetch(post.path) + .then((response) => response.text()) + .then((data) => { + data = data.replaceAll("-+-+-+", ` +<section class="normal-section"> +<div class="center-grid"> +<div class="div-sizing" id="content"> +`) + data = data.replaceAll("+-+-+-", ` +</div> +</div> +</section> +`) + + console.log(data); + + + var result = md.render(data); + content.innerHTML = result; + }).then(() => addNodes()); + }); +} diff --git a/scripts/onload.js b/scripts/onload.js index 165f80d..9d9226e 100644 --- a/scripts/onload.js +++ b/scripts/onload.js @@ -1,15 +1,20 @@ -function addNodes() { - const collection = document.getElementsByTagName("section"); - const container = document.getElementById("progressContainer"); - - for (var i = 0; i < collection.length; i++) { - var node = document.createElement("a"); - node.className = "node"; - container.appendChild(node); - if (collection.item(i).getAttribute('id') == null) { - collection.item(i).setAttribute('id', `section-${i}`); - } - node.setAttribute('id', `node-${i}`) - node.href = `#${collection.item(i).getAttribute('id')}` - } -} +function addNodes() {
+ const collection = document.getElementsByTagName("section");
+ const container = document.getElementById("progressContainer");
+
+ for (var i = 0; i < collection.length; i++) {
+ var node = document.createElement("a");
+ node.className = "node";
+ container.appendChild(node);
+ if (collection.item(i).getAttribute('id') == null) {
+ collection.item(i).setAttribute('id', `section-${i}`);
+ }
+ node.setAttribute('id', `node-${i}`)
+ node.href = `#${collection.item(i).getAttribute('id')}`
+ }
+}
+
+function blog(n) {
+ // addNodes is called in loadPost(n);
+ loadPost(n);
+}
diff --git a/scripts/scroll.js b/scripts/scroll.js index 6c20890..f745db4 100644 --- a/scripts/scroll.js +++ b/scripts/scroll.js @@ -1,76 +1,80 @@ -document.addEventListener('scroll', function () { - progress(); - hideSidebar(); -}); - -function progress() { - const sections = document.getElementsByTagName("section"); - const nodes = document.getElementsByClassName("node"); - - if (nodes[0]) { - for (var i = 0; i < sections.length; i++) { - if (isInViewport(sections[i])) { - nodes[i].style.width = "22px"; - nodes[i].style.height = "22px"; - nodes[i].style.backgroundColor = "black"; - } - else { - nodes[i].style.width = "13px"; - nodes[i].style.height = "13px"; - nodes[i].style.backgroundColor = "#555"; - } - } - } -} - -function hideSidebar() { - const sidebar = document.getElementById("sidebar"); - const progressContainer = document.getElementById("progressContainer"); - const sections = document.getElementsByTagName("section"); - - if (screen.width <= 600) { - if (window.scrollY >= 100) { - sidebar.style.left = "-80px"; - - for (var i = 0; i < sections.length; i++) { - sections[i].style.marginLeft = 0; - } - - if (progressContainer) { - progressContainer.style.left = "-11px"; - } - } - else { - sidebar.style.left = "0"; - - for (var i = 0; i < sections.length; i++) { - sections[i].style.marginLeft = "70px"; - } - - if (progressContainer) { - progressContainer.style.left = "61px"; - } - } - } - else { - sidebar.style.left = "0"; - progressContainer.style.left = "61px"; - } -} - -function isInViewport(element) { - const rect = element.getBoundingClientRect(); - const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); - const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); - const elementHeight = rect.height; - const elementWidth = rect.width; - const halfElementHeight = elementHeight / 2; - const halfElementWidth = elementWidth / 2; - - return ( - visibleHeight >= halfElementHeight && - visibleWidth >= halfElementWidth - ); -} - - +document.addEventListener('scroll', function () {
+ progress();
+ hideSidebar();
+});
+
+function progress() {
+ const sections = document.getElementsByTagName("section");
+ const nodes = document.getElementsByClassName("node");
+
+ if (nodes[0]) {
+ for (var i = 0; i < sections.length; i++) {
+ if (isInViewport(sections[i])) {
+ nodes[i].style.width = "22px";
+ nodes[i].style.height = "22px";
+ nodes[i].style.backgroundColor = "black";
+ }
+ else {
+ nodes[i].style.width = "13px";
+ nodes[i].style.height = "13px";
+ nodes[i].style.backgroundColor = "#555";
+ }
+ }
+ }
+}
+
+function hideSidebar() {
+ const sidebar = document.getElementById("sidebar");
+ const progressContainer = document.getElementById("progressContainer");
+ const sections = document.getElementsByTagName("section");
+
+ if (!progressContainer) {
+ return;
+ }
+
+ if (screen.width <= 600) {
+ if (window.scrollY >= 100) {
+ sidebar.style.left = "-80px";
+
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.marginLeft = 0;
+ }
+
+ if (progressContainer) {
+ progressContainer.style.left = "-11px";
+ }
+ }
+ else {
+ sidebar.style.left = "0";
+
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.marginLeft = "70px";
+ }
+
+ if (progressContainer) {
+ progressContainer.style.left = "61px";
+ }
+ }
+ }
+ else {
+ sidebar.style.left = "0";
+ progressContainer.style.left = "61px";
+ }
+}
+
+function isInViewport(element) {
+ const rect = element.getBoundingClientRect();
+ const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+ const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
+ const elementHeight = rect.height;
+ const elementWidth = rect.width;
+ const halfElementHeight = elementHeight / 2;
+ const halfElementWidth = elementWidth / 2;
+
+ return (
+ visibleHeight >= halfElementHeight &&
+ visibleWidth >= halfElementWidth
+ );
+}
+
+
diff --git a/scripts/video.js b/scripts/video.js index e1d5948..b74587e 100644 --- a/scripts/video.js +++ b/scripts/video.js @@ -1,16 +1,16 @@ -function playVideo(elementId) { - var element = document.getElementById(elementId); - - element.style.visibility = "visible"; - element.style.opacity = "100%"; - element.play(); -} - -function stopVideo(elementId) { - var element = document.getElementById(elementId); - - element.style.visibility = "hidden"; - element.style.opacity = "0%"; - element.pause(); - element.currentTime = 0; -} +function playVideo(elementId) {
+ var element = document.getElementById(elementId);
+
+ element.style.visibility = "visible";
+ element.style.opacity = "100%";
+ element.play();
+}
+
+function stopVideo(elementId) {
+ var element = document.getElementById(elementId);
+
+ element.style.visibility = "hidden";
+ element.style.opacity = "0%";
+ element.pause();
+ element.currentTime = 0;
+}
@@ -1,577 +1,599 @@ -@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,150;0,200;0,400;0,500;0,600;0,700;0,800;1,100;1,150;1,200;1,400;1,500;1,600;1,700;1,800&display=swap'); - -:root { - --accent1: #00BA62; - --accent2: #008C94; - --accent: #00A37B; -} - -::-moz-selection { /* Code for Firefox */ - color: white; - background: black; -} - -::selection { - color: white; - background: black; -} - -html { - overflow-x: none; -} - -body { - margin: 0; - padding: 0; - height: 100vh; - width: 100%; - font-family: 'JetBrains Mono', monospace; - word-wrap: break-word; - text-overflow: ellipsis; -} - -h1 { - font-size: 1.7rem; -} - -section { - padding-inline: 50px; - min-height: 100%; - border-top: 2px solid rgba(0, 0, 0, 0.7); - position: relative; - z-index: 2; - margin-left: 70px; - background-color: white; - transition: margin-left .3s; -} - -hr { - border: none; - background-color: black; - height: 2px; - margin: 20px; -} - -pre::before { - content: "> "; - color: #00A37B; -} - -pre { - font-size: large; - background-color: #00000010; - padding: 10px; - border-radius: 5px; - color: #444; -} - -.desktop { - visibility: visible; -} - -.center { - text-align: center; -} - -.normal-section { - padding-bottom: 30px; - min-height: 0; - height: fit-content; -} - -.heading { - font-size: 2.5rem; - font-weight: 600; - display: block; - margin-top: 1rem; - margin-bottom: 1rem; -} - -.colored-text { - background: -webkit-linear-gradient(45deg, var(--accent1), var(--accent2)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.floating-nav-container { - display: block; - position: fixed; - top: 20px; - right: 20px; - filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.15)); - z-index: 9999; -} - -.floating-nav { - box-sizing: border-box; - background-color: white; - padding: 20px; - height: 50px; - display: flex; - gap: 20px; - align-items: center; - clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); -} - -.sidebar { - background-color: white; - position: fixed; - height: 100%; - width: 70px; - border-right: 2px solid rgba(0, 0, 0, 0.7); - z-index: 9998; - display: flex; - flex-direction: column; - align-items: center; - transition: left .3s; -} - -.sidebar > span { - font-size: xx-large; - text-orientation: sideways; - writing-mode: vertical-lr; - margin-top: 30px; - display: block; - text-overflow: ellipsis; - white-space: nowrap; - word-wrap: break-word; - overflow: hidden; - box-sizing: border-box; - max-height: 80% !important; -} - -.sidebar-img { - height: 50px; - clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); - margin-top: 20px; -} - -.home-img { - height: 100%; - width: 100%; - margin: 0; - background-size: cover; - background-position: center; - position: absolute; - top: 0; - right: 0; -} - -.sidebar-progress-container { - width: 20px; - height: 100vh; - position: fixed; - top: 0; - left: 61px; - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - z-index: 10000; - transition: left .3s; -} - -.node { - width: 13px; - height: 13px; - margin-top: 50px; - margin-bottom: 50px; - background-color: #555; - border-radius: 20px; - transition: all .3s cubic-bezier(0, .38, .48, 1.35); -} - -@keyframes title { - from { - bottom: 30%; - color: transparent; - letter-spacing: -10px; - } - - to { - letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); - color: #FFFFFF5A; - bottom: 46%; - } -} - -.home-title { - right: 0; - font-weight: 800; - font-size: clamp(1rem, -0.875rem + 20vw, 400px); - color: #FFFFFF5A; - position: fixed; - text-align: center; - width: calc(100% - 70px); - line-height: 65%; - bottom: 46%; - z-index: 0; - letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); - animation-name: title; - animation-duration: 3s; - user-select: none; -} - -.div-sizing { - width: 100%; - max-width: 1200px; - padding: 30px; - box-sizing: border-box; -} - -.img { - clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px)); -} - -.center-grid { - display: grid; - place-items: center; - min-height: 100vh; - width: 100%; -} - -.center-absolute { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.grid { - display: grid; - grid-auto-flow: column; -} - -.big-text { - font-size: clamp(1rem, -0.875rem + 30vw, 2rem); - max-width: 80%; -} - -.link { - text-decoration: none; - background: linear-gradient(180deg, transparent calc(100% - 2px), black 0); - /* thanks MIT very cool */ - transition: all .2s; - color: black; - background-color: transparent; - z-index: 9999; -} - -.link:hover { - background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0); - color: #000000FA; -} - -.link:focus { - color: #00000085; - background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0); -} - -.flex { - flex-grow: 1; -} - -.flex-container { - display: flex; - flex-direction: row; - width: 100%; - flex-wrap: wrap; -} - -.flex-center { - flex-direction: column; - place-items: center; -} - -.flex-center-content { - place-content: center; -} - -.flex-container-normal { - display: flex; - width: 100%; - flex-wrap: wrap; -} - -.flex-container-column { - flex-direction: column; - height: 100%; -} - -.flex-right { - display: flex; - flex-direction: row; - justify-content: right; -} - -.item-left { - place-self: start; -} - -.item-center { - place-self: center; -} - -.full-img-card { - background-color: var(--accent); - margin: 5px; - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.full-img-card > a { - text-decoration: none; - box-sizing: border-box; - position: relative; - overflow: hidden; -} - -.full-img-card > a:hover { - box-shadow: inset white 0 0 0 4px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; -} - -.full-img-card > a:focus { - background-color: rgba(0, 0, 0, 0.1); - box-shadow: inset white 0 0 0 2.5px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; -} - -.full-img-card > a:active { - background-color: rgba(0, 0, 0, 0.24) !important; -} - -.full-img-card > a > span { - font-size: 2rem; - font-weight: 500; - color: white; - position: absolute; - bottom: 2rem; - left: 2rem; -} - -.full-img-card > a:hover > span { - background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); -} - -.banner-bottom-bar { - height: auto; - width: 100%; - background-color: #0008; - backdrop-filter: blur(10px); - position: absolute; - bottom: 0; - left: 0; - z-index: 4; - align-items: center; - color: white; -} - -.banner-top-bar > img { - height: 40px; -} - -.banner-bottom-bar > i { - font-size: 1.1rem; - display: inline-block; -} - -.banner-top-bar { - position: fixed; - z-index: 3; - height: 69px; - width: 100%; - background-color: #0008; - backdrop-filter: blur(10px); - top: 0; - left: 70px; - color: white; - box-sizing: border-box; - align-content: center; -} - -.banner-video { - position: absolute; - z-index: 4; - top: 0; - left: 0; - min-width: calc(100vw - 70px); - min-height: 100%; - width: calc(100vw - 70px); - height: auto; - background-size: cover; - overflow: hidden; - object-fit: cover; - opacity: 0; - transition: all .5s; - visibility: hidden; -} - -.card { - height: 200px; - max-width: 800px; - width: 100%; - display: flex; - flex-direction: row; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px; - margin-bottom: 15px; - margin-top: 15px; -} - -.card:hover { - box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px; -} - -.card > * { - flex: 1 1; - width: 50%; -} - -.card > div { - position: relative; - padding: 15px; -} - -.card > div > .link { - font-size: 1.5rem; - font-weight: 600; -} - -.card > div > .button { - position: absolute; - bottom: 15px; - right: 15px; -} - -.card > div > .flex-container-normal { - margin-bottom: 10px; -} - -.card > img { - object-fit: cover; -} - -.gallery-card { - flex: 1 0 400px; - height: 300px; -} - -.gradient-overlay { - width: 100%; - height: 100%; - background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%); -} - -.gradient-overlay:hover { - background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%); -} - -.fill-div { - display: block; -} - -.button { - display: inline-block; - width: fit-content; - padding: 15px; - background-color: var(--accent); - color: white; - text-decoration: none; - margin: 10px; - transition: background-color .2s; - box-shadow: none; - position: relative; - align-content: center; -} - -.button:hover { - background-color: var(--accent2); -} - -.button:active { - box-shadow: inset white 0 0 0 3px, rgba(0, 0, 0, 0.4) 0 0 12px 1px !important; -} - -.button:focus { - box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px; -} - -.banner-shadow { - filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4)); -} - -.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:focus { - cursor: not-allowed; - opacity: .5; - background-color: var(--accent1); - box-shadow: none !important; -} - -.banner { - max-width: 100%; - height: 500px; - object-fit: cover; - width: 100%; - box-sizing: border-box; -} - -#simpliCity-img { - z-index: 4; - background-image: url(/assets/images/game-hero/simpliCity.png); - background-size: cover; - background-position: center; -} - -#simpliCity-link { - position: absolute; - right: 30px; - bottom: 30px; - background-color: transparent; - background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); - font-size: large; - color: white; -} - -#simpliCity-link:hover { - color: #ffffffbe; - background: linear-gradient(180deg, transparent calc(100% - 2px), #ffffffbe 0); -} - -#simpliCity-link:focus { - color: #ffffff79; - background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0); -} - -@media only screen and (max-width: 600px) { - .desktop { - visibility: collapse; - display: none; - } - - .flex { - flex-direction: column; - } - - .card { - flex-direction: column; - height: 400px; - } - - .card > * { - width: 100%; - height: 50%; - box-sizing: border-box; - } - - section { - padding-inline: 10px; - } - - .gallery-card { - flex: 1 0 300px; - } - - .banner-top-bar { - left: 0; - } -} +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,150;0,200;0,400;0,500;0,600;0,700;0,800;1,100;1,150;1,200;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+:root {
+ --accent1: #00BA62;
+ --accent2: #008C94;
+ --accent: #00A37B;
+}
+
+::-moz-selection { /* Code for Firefox */
+ color: white;
+ background: black;
+}
+
+::selection {
+ color: white;
+ background: black;
+}
+
+html {
+ overflow-x: none;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ width: 100%;
+ font-family: 'JetBrains Mono', monospace;
+ word-wrap: break-word;
+ text-overflow: ellipsis;
+}
+
+h1 {
+ font-size: 1.7rem;
+}
+
+section {
+ padding-inline: 50px;
+ min-height: 100%;
+ border-top: 2px solid rgba(0, 0, 0, 0.7);
+ position: relative;
+ z-index: 2;
+ margin-left: 70px;
+ background-color: white;
+ transition: margin-left .3s;
+}
+
+hr {
+ border: none;
+ background-color: black;
+ height: 2px;
+ margin: 20px;
+}
+
+pre::before {
+ content: "> ";
+ color: #00A37B;
+}
+
+pre {
+ font-size: large;
+ background-color: #00000010;
+ padding: 10px;
+ border-radius: 5px;
+ color: #444;
+ white-space: pre-wrap;
+}
+
+.desktop {
+ visibility: visible;
+}
+
+.center {
+ text-align: center;
+}
+
+.normal-section {
+ padding-bottom: 30px;
+ min-height: 0;
+ height: fit-content;
+}
+
+.heading {
+ font-size: 2.5rem;
+ font-weight: 600;
+ display: block;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.colored-text {
+ background: -webkit-linear-gradient(45deg, var(--accent1), var(--accent2));
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.floating-nav-container {
+ display: block;
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.15));
+ z-index: 9999;
+}
+
+.floating-nav {
+ box-sizing: border-box;
+ background-color: white;
+ padding: 20px;
+ height: 50px;
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+}
+
+.sidebar {
+ background-color: white;
+ position: fixed;
+ height: 100%;
+ width: 70px;
+ border-right: 2px solid rgba(0, 0, 0, 0.7);
+ z-index: 9998;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ transition: left .3s;
+}
+
+.sidebar > span {
+ font-size: xx-large;
+ text-orientation: sideways;
+ writing-mode: vertical-lr;
+ margin-top: 30px;
+ display: block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: break-word;
+ overflow: hidden;
+ box-sizing: border-box;
+ max-height: 80% !important;
+}
+
+.sidebar-img {
+ height: 50px;
+ clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+ margin-top: 20px;
+}
+
+.home-img {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ background-size: cover;
+ background-position: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.sidebar-progress-container {
+ width: 20px;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 61px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ z-index: 10000;
+ transition: left .3s;
+}
+
+.node {
+ width: 13px;
+ height: 13px;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ background-color: #555;
+ border-radius: 20px;
+ transition: all .3s cubic-bezier(0, .38, .48, 1.35);
+}
+
+@keyframes title {
+ from {
+ bottom: 30%;
+ color: transparent;
+ letter-spacing: -10px;
+ }
+
+ to {
+ letter-spacing: clamp(10px, -0.875rem + 5vw, 30px);
+ color: #FFFFFF5A;
+ bottom: 46%;
+ }
+}
+
+.home-title {
+ right: 0;
+ font-weight: 800;
+ font-size: clamp(1rem, -0.875rem + 20vw, 400px);
+ color: #FFFFFF5A;
+ position: fixed;
+ text-align: center;
+ width: calc(100% - 70px);
+ line-height: 65%;
+ bottom: 46%;
+ z-index: 0;
+ letter-spacing: clamp(10px, -0.875rem + 5vw, 30px);
+ animation-name: title;
+ animation-duration: 3s;
+ user-select: none;
+}
+
+.div-sizing {
+ width: 100%;
+ max-width: 1200px;
+ padding: 30px;
+ box-sizing: border-box;
+}
+
+.img {
+ clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px));
+}
+
+.center-grid {
+ display: grid;
+ place-items: center;
+ min-height: 100vh;
+ width: 100%;
+}
+
+.center-absolute {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.grid {
+ display: grid;
+ grid-auto-flow: column;
+}
+
+.big-text {
+ font-size: clamp(1rem, -0.875rem + 30vw, 2rem);
+ max-width: 80%;
+}
+
+.link {
+ text-decoration: none;
+ background: linear-gradient(180deg, transparent calc(100% - 2px), black 0);
+ /* thanks MIT very cool */
+ transition: all .2s;
+ color: black;
+ background-color: transparent;
+ z-index: 9999;
+}
+
+.link:hover {
+ background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0);
+ color: #000000FA;
+}
+
+.link:focus {
+ color: #00000085;
+ background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0);
+}
+
+.flex {
+ flex-grow: 1;
+}
+
+.flex-container {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ flex-wrap: wrap;
+}
+
+.flex-center {
+ flex-direction: column;
+ place-items: center;
+}
+
+.flex-center-content {
+ place-content: center;
+}
+
+.flex-container-normal {
+ display: flex;
+ width: 100%;
+ flex-wrap: wrap;
+}
+
+.flex-container-column {
+ flex-direction: column;
+ height: 100%;
+}
+
+.flex-right {
+ display: flex;
+ flex-direction: row;
+ justify-content: right;
+}
+
+.chip-container {
+ margin-left: -5px;
+}
+
+.chip {
+ background-image: linear-gradient(45deg, var(--accent1), var(--accent2));
+ padding: 7px;
+ display: block;
+ color: white;
+ margin-inline: 5px;
+ box-sizing: border-box;
+}
+
+.item-left {
+ place-self: start;
+}
+
+.item-center {
+ place-self: center;
+}
+
+.full-img-card {
+ background-color: var(--accent);
+ margin: 5px;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+.full-img-card > a {
+ text-decoration: none;
+ box-sizing: border-box;
+ position: relative;
+ overflow: hidden;
+}
+
+.full-img-card > a:hover {
+ box-shadow: inset white 0 0 0 4px, rgba(0, 0, 0, 0.3) 0 0 10px 1px;
+}
+
+.full-img-card > a:focus {
+ background-color: rgba(0, 0, 0, 0.1);
+ box-shadow: inset white 0 0 0 2.5px, rgba(0, 0, 0, 0.3) 0 0 10px 1px;
+}
+
+.full-img-card > a:active {
+ background-color: rgba(0, 0, 0, 0.24) !important;
+}
+
+.full-img-card > a > span {
+ font-size: 2rem;
+ font-weight: 500;
+ color: white;
+ position: absolute;
+ bottom: 2rem;
+ left: 2rem;
+}
+
+.full-img-card > a:hover > span {
+ background: linear-gradient(180deg, transparent calc(100% - 2px), white 0);
+}
+
+.banner-bottom-bar {
+ height: auto;
+ width: 100%;
+ background-color: #0008;
+ backdrop-filter: blur(10px);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: 4;
+ align-items: center;
+ color: white;
+}
+
+.banner-top-bar > img {
+ height: 40px;
+}
+
+.banner-bottom-bar > i {
+ font-size: 1.1rem;
+ display: inline-block;
+}
+
+.banner-top-bar {
+ position: fixed;
+ z-index: 3;
+ height: 69px;
+ width: 100%;
+ background-color: #0008;
+ backdrop-filter: blur(10px);
+ top: 0;
+ left: 70px;
+ color: white;
+ box-sizing: border-box;
+ align-content: center;
+}
+
+.banner-video {
+ position: absolute;
+ z-index: 4;
+ top: 0;
+ left: 0;
+ min-width: calc(100vw - 70px);
+ min-height: 100%;
+ width: calc(100vw - 70px);
+ height: auto;
+ background-size: cover;
+ overflow: hidden;
+ object-fit: cover;
+ opacity: 0;
+ transition: all .5s;
+ visibility: hidden;
+}
+
+.card {
+ height: 200px;
+ max-width: 800px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px;
+ margin-bottom: 15px;
+ margin-top: 15px;
+}
+
+.card:hover {
+ box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px;
+}
+
+.card > * {
+ flex: 1 1;
+ width: 50%;
+}
+
+.card > div {
+ position: relative;
+ padding: 15px;
+}
+
+.card > div > .link {
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+.card > div > .button {
+ position: absolute;
+ bottom: 15px;
+ right: 15px;
+}
+
+.card > div > .flex-container-normal {
+ margin-bottom: 10px;
+}
+
+.card > img {
+ object-fit: cover;
+}
+
+.gallery-card {
+ flex: 1 0 400px;
+ height: 300px;
+}
+
+.gradient-overlay {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%);
+}
+
+.gradient-overlay:hover {
+ background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%);
+}
+
+.fill-div {
+ display: block;
+}
+
+.button {
+ display: inline-block;
+ width: fit-content;
+ padding: 15px;
+ background-color: var(--accent);
+ color: white;
+ text-decoration: none;
+ margin: 10px;
+ transition: background-color .2s;
+ box-shadow: none;
+ position: relative;
+ align-content: center;
+}
+
+.button:hover {
+ background-color: var(--accent2);
+}
+
+.button:active {
+ box-shadow: inset white 0 0 0 3px, rgba(0, 0, 0, 0.4) 0 0 12px 1px !important;
+}
+
+.button:focus {
+ box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px;
+}
+
+.button-social {
+ font-size: 1.3rem;
+ text-align: center;
+ display: inline-block;
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.banner-shadow {
+ filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4));
+}
+
+.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:focus {
+ cursor: not-allowed;
+ opacity: .5;
+ background-color: var(--accent1);
+ box-shadow: none !important;
+}
+
+.banner {
+ max-width: 100%;
+ height: 500px;
+ object-fit: cover;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+#simpliCity-img {
+ z-index: 4;
+ background-image: url(/assets/images/game-hero/simpliCity.png);
+ background-size: cover;
+ background-position: center;
+}
+
+#simpliCity-link {
+ position: absolute;
+ right: 30px;
+ bottom: 30px;
+ background-color: transparent;
+ background: linear-gradient(180deg, transparent calc(100% - 2px), white 0);
+ font-size: large;
+ color: white;
+}
+
+#simpliCity-link:hover {
+ color: #ffffffbe;
+ background: linear-gradient(180deg, transparent calc(100% - 2px), #ffffffbe 0);
+}
+
+#simpliCity-link:focus {
+ color: #ffffff79;
+ background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0);
+}
+
+@media only screen and (max-width: 600px) {
+ .desktop {
+ visibility: collapse;
+ display: none;
+ }
+
+ .flex {
+ flex-direction: column;
+ }
+
+ .card {
+ flex-direction: column;
+ height: 400px;
+ }
+
+ .card > * {
+ width: 100%;
+ height: 50%;
+ box-sizing: border-box;
+ }
+
+ section {
+ padding-inline: 10px;
+ }
+
+ .gallery-card {
+ flex: 1 0 300px;
+ }
+
+ .banner-top-bar {
+ left: 0;
+ }
+}
|