Amog-OS · ghost · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023
diff --git a/.gitignore b/.gitignore
diff --git a/LICENSE b/LICENSE
@@ -7,7 +7,7 @@ Redistribution and use in binary form, with or without modification, are permitt
     1. Redistribution must reproduce the above copyright notice, this list of conditions and the following disclaimer
     in the documentation and/or other materials provided with the distribution.
 
-    2. All advertising materials mentioning this website must display credits to either the Github page https://github.com/Amog-OS/AmogOS or website https://www.AmogOS.studio.
+    2. All advertising materials mentioning this website must display credits to either the Github page https://github.com/Amog-OS/AmogOS or website https://amog-os.github.io
 
     3. Neither the name of the copyright holder(s) nor the names of its contributors may be used to endorse or promote products derived
     from this software without specific prior written permission.

diff --git a/README.md b/README.md
@@ -1,7 +1,11 @@
-# Official website for AmogOS
+# Official website for AmogOS Toppat
 
 ## Credit
-Originally made by Fengzi! `Disclaimer: Fengzi is not responsible for any changes beyond the original template.`
+
+Original website for AmogOS 1 made by Fengzi!
+`Disclaimer: Fengzi is not responsible for any changes beyond the original template.`
+
+New website for AmogOS 2 made by BeauTheBeau and Optix
 
 Current maintenance mainly by Nooz
 

diff --git a/credits.html b/credits.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>AmogOS Toppat | Now even more Sussy</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+
+    <meta name="title" content="Behind AmogOS">
+    <meta name="description"
+          content="Get to know what and who are AmogOS, the story and the team behind the Sussy Wussy operating system.">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Behind AmogOS">
+    <meta property="og:title" content="Behind AmogOS">
+    <meta property="og:description"
+          content="Get to know what and who are AmogOS, the story and the team behind the Sussy Wussy operating system.">
+    <meta property="og:image" content="https://amog-os.github.io/img/banner.png">
+    <meta name="theme-color" content="#66DDCC">
+
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:site_name" content="website">
+    <meta property="twitter:title" content="Behind AmogOS">
+    <meta property="twitter:description"
+          content="Get to know what and who are AmogOS, the story and the team behind the Sussy Wussy operating system.">
+    <meta property="twitter:image" content="https://amog-os.github.io/img/banner.png">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="keywords"
+          content="sus, susOS, amogOS, among us OS, amogOS linux, among us linux, sussy os, sussy baka, sussy wussy">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <link rel="stylesheet" href="css/cascade-sus-sheets.css" type="text/css">
+    <link rel="icon" href="https://amog-os.github.io/impostor.png">
+    <link rel="apple-touch-icon" href="https://amog-os.github.io/impostor.png">
+
+    <!--<link rel="google-spyware" href="google.com">-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
+          rel="stylesheet">
+
+    <script src="js/getContributors.js" defer></script>
+    <script src="js/elementConstructor.js" defer></script>
+    <script src="js/main.js" defer></script>
+
+</head>
+<body>
+
+<header>
+<!--    heading: what and who is amogos?-->
+    <h1><span>What</span> and <span>who</span> is AmogOS?</h1>
+    <h3>See the people and the story behind this <span>sussy wussy</span> operating system</h3>
+</header>
+
+<main>
+
+    <section id="story">
+        <h2><span>What</span> is AmogOS</h2>
+        <p class="content">
+            This was mostly inspired by <a href="https://www.reddit.com/r/linuxmint/comments/n9h7b4/amogos_custom_background_mint_x_grey_theme/" target="_blank">this reddit post</a>. AmogOS is a meme OS based on the hit game Among Us, in the same vein as Hannah Montana Linux, but it's also developed and made to be a lightweight operating system. AmogOS is also less bloated than some other distros (<i>cough cough</i> Ubuntu). Chad AmogOS vs bloated mainstream distro, as youtuber TechHut put it. Don't take this too seriously :p
+            <i>Nooz, Lead Dev</i>
+        </p>
+    </section>
+
+    <section id="credits">
+        <h2><span>Who</span> is AmogOS</h2>
+        <div class="bois">
+            <div class="coolboi">
+                <img src="https://avatars.githubusercontent.com/u/76966404?v=4">
+                <h1>buddyjojo</h1>
+                <div class="role">OS developer</div>
+                <p><span>"</span>creator of jostroOS, worli, some phone stuff, a bunch of random stuff and the amogos overlord<span>"</span></p>
+                <div class="links">
+                    <a href="https://github.com/buddyjojo"><i class="nf-fa-github nf"></i></a>
+                    <a href="https://matrix.to/#/@jojo_autoboy:matrix.org"><i class="nf-fa-link nf"></i></a>
+                </div>
+            </div>
+
+            <div class="coolboi">
+                <img src="https://avatars.githubusercontent.com/u/44128563?v=4">
+                <h1>Nooz</h1>
+                <div class="role">OS developer</div>
+                <p>No description provided</p>
+                <div class="links">
+                    <a href="https://github.com/NoozAbooz"><i class="nf-fa-github nf"></i></a>
+                </div>
+            </div>
+
+
+            <div class="coolboi">
+                <img src="https://avatars.githubusercontent.com/u/41763546?v=4">
+                <h1>Fengzi</h1>
+                <div class="role">OS developer</div>
+                <p><span>"</span>Hoi! Fengzi here)/<span>"</span></p>
+                <div class="links">
+                    <a href="https://github.com/F-fengzi"><i class="nf-fa-github nf"></i></a>
+                    <a href="https://fengzi.dev/"><i class="nf-fa-link nf"></i></a>
+                </div>
+            </div>
+
+            <div class="coolboi">
+                <img src="https://avatars.githubusercontent.com/u/90942493?v=4">
+                <h1>Beau</h1>
+                <div class="role">(Best) website developer</div> <!-- fr lol, the best part of this new website and almost all da JS was made by him, good job man-->
+                <p><span>"</span>Super cool front end developer<span>"</span></p>
+                <div class="links">
+                    <a href="https://github.com/BeauTheBeau"><i class="nf-fa-github nf"></i></a>
+                    <a href="https://beauthebeau.github.io/"><i class="nf-fa-link nf"></i></a>
+                </div>
+            </div>
+
+            <div class="coolboi">
+                <img src="https://avatars.githubusercontent.com/u/100604473?v=4">
+                <h1>Optix</h1>
+                <div class="role">Website developer</div>
+                <p><span>"</span>So, how's life, comrade?<span>"</span></p>
+                <div class="links">
+                    <a href="https://github.com/LeOptix"><i class="nf-fa-github nf"></i></a>
+                    <a href="https://optix.rf.gd"><i class="nf-fa-link nf"></i></a>
+                </div>
+            </div>
+        </div>
+
+        <h2 style="font-weight: 400;">Full list of contributors</h2>
+
+        <div class="bois" id="contributorsContainer">
+            <!--contributors go here-->
+        </div>
+    </section>
+</main>
+</body>
+</html>
diff --git a/css/buttons.css b/css/buttons.css
@@ -0,0 +1,140 @@
+/* Updated button styles */
+.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+}
+
+.input-row {
+    display: flex;
+    flex-direction: row;
+    gap: 0.2em;
+    align-items: center;
+
+    :nth-child(odd), :nth-child(even) {
+        flex: 1;
+    }
+
+    :first-child {
+        border-radius: 1em 0.2em 0.2em 1em;
+    }
+
+    :last-child {
+        border-radius: 0.2em 1em 1em 0.2em;
+    }
+
+    :not(:first-child):not(:last-child) {
+        border-radius: 0.2em;
+    }
+
+}
+
+input {
+    padding: 0.6em 1em;
+    border-radius: 1em;
+    font-size: 16px;
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    text-align: center;
+    border: 2px solid transparent;
+    transition: 0.3s;
+    background-color: var(--amog-green-transparent);
+    color: #000;
+
+    &:hover, &:focus {
+        background-color: transparent;
+        border: solid 2px var(--amog-green);
+        color: var(--amog-green);
+
+        box-shadow: 0 0 0 1px var(--amog-green-transparent),
+        0 2px 4px var(--amog-green-transparent),
+        0 4px 8px var(--amog-green-transparent),
+        0 8px 16px var(--amog-green-transparent),
+        0 16px 32px var(--amog-green-transparent),
+        0 32px 64px var(--amog-green-transparent);
+    }
+}
+
+button, .button {
+    padding: 0.6em 1em;
+    border-radius: 1em;
+    font-size: 16px;
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: center;
+    border: 2px solid transparent;
+    transition: 0.3s;
+}
+
+.btn-prim, .primary {
+    background-color: var(--amog-green);
+    color: #000;
+
+    &:hover, &:focus {
+        background-color: var(--amog-green-transparent);
+        border: solid 2px var(--amog-green);
+        color: var(--amog-green);
+
+        box-shadow: 0 0 0 1px var(--amog-green-transparent),
+        0 2px 4px var(--amog-green-transparent),
+        0 4px 8px var(--amog-green-transparent),
+        0 8px 16px var(--amog-green-transparent),
+        0 16px 32px var(--amog-green-transparent),
+        0 32px 64px var(--amog-green-transparent);
+    }
+}
+
+.btn-sec, .secondary {
+    background-color: var(--amog-blue-transparent);
+    border: solid 2px var(--amog-blue);
+    color: var(--amog-blue);
+
+    &:hover, &:focus {
+        background-color: var(--amog-blue);
+        color: #000;
+
+        box-shadow: 0 0 0 1px var(--amog-blue-transparent),
+        0 2px 4px var(--amog-blue-transparent),
+        0 4px 8px var(--amog-blue-transparent),
+        0 8px 16px var(--amog-blue-transparent),
+        0 16px 32px var(--amog-blue-transparent),
+        0 32px 64px var(--amog-blue-transparent);
+    }
+}
+
+
+.btn-third, .third {
+    background-color: var(--amog-black-transparent);
+    border: solid 2px var(--amog-black-plus);
+    color: #FFF;
+
+    &:hover, &:focus {
+        background-color: var(--amog-black-plus);
+
+        box-shadow: 0 0 0 1px var(--amog-blacky-transparent),
+        0 2px 4px var(--amog-blacky-transparent),
+        0 4px 8px var(--amog-blacky-transparent),
+        0 8px 16px var(--amog-blacky-transparent),
+        0 16px 32px var(--amog-blacky-transparent),
+        0 32px 64px var(--amog-blacky-transparent);
+    }
+}
+
+button, .button, a {
+    outline: 2px solid transparent;
+}
+
+a {
+    color: var(--amog-green);
+    text-decoration: none;
+    font-weight: 900;
+
+    &:focus, &:focus-within {
+        outline: 2px solid var(--amog-hightlight);
+    }
+}
+
+a:hover, a:focus, a:active, span {
+    color: var(--amog-blue);
+}
diff --git a/css/cascade-sus-sheets-forDev.css b/css/cascade-sus-sheets-forDev.css
@@ -0,0 +1,67 @@
+/*
+ALL THE FILES EXCEPT FROM `cascade-sus-sheets` ARE MEANT FOR DEVELOPMENT, NOT PRODUCTION
+
+the final file is the result of merging all the CSS into a single file,
+prexifing it (--mozilla, --ms, and that kind of stuff)
+and minifying it so more fps amogos website omg sus
+
+:]
+*/
+/* Base styles */
+@import "https://www.nerdfonts.com/assets/css/webfont.css";
+
+/* Imports */
+@import url("variables.css");
+@import url("buttons.css"); /* Contains .buttons, a, etc. */
+@import url("layout.css"); /* Contains body, main, section, hr, header, footer */
+@import url("navbar.css"); /* Contains nav, #menu, .overlay */
+@import url("contributors.css"); /* Contains .coolboi, .bois */
+@import url("features.css");
+@import url("media-queries.css");
+
+/* Base styles */
+* {
+    transition: all 500ms cubic-bezier(0.6, 0, 0, 1);
+    scroll-behavior: smooth;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+/* Misc */
+code {
+    font-family: "Fira Code", monospace;
+    background-color: var(--amog-black-transparent);
+    border-radius: 4px;
+    padding: 0.1em 0.5em;
+    border: solid 2px var(--amog-green-transparent);
+}
+
+.download-list {
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+}
+
+.support {
+    width: calc(90% - 10px);
+    border-radius: 10px;
+    padding: 10px;
+    border: solid 4px var(--amog-green-transparent);
+}
+
+#story .content {
+    width: calc(90% - 10px);
+    padding: 10px;
+    font-size: 20px;
+}
+
+.animation {
+    opacity: 0;
+}
+
+.scroll-animation {
+    opacity: 1;
+}
diff --git a/css/cascade-sus-sheets.css b/css/cascade-sus-sheets.css