diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/LICENSE b/LICENSE index 6db91f0..4ab9f3c 100644 --- 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 index 8be6feb..ea2eacf 100644 --- 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 new file mode 100644 index 0000000..f812294 --- /dev/null +++ b/credits.html @@ -0,0 +1,131 @@ + + + + AmogOS Toppat | Now even more Sussy + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

What and who is AmogOS?

+

See the people and the story behind this sussy wussy operating system

+
+ +
+ +
+

What is AmogOS

+

+ This was mostly inspired by this reddit post. 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 (cough cough Ubuntu). Chad AmogOS vs bloated mainstream distro, as youtuber TechHut put it. Don't take this too seriously :p + Nooz, Lead Dev +

+
+ +
+

Who is AmogOS

+
+
+ +

buddyjojo

+
OS developer
+

"creator of jostroOS, worli, some phone stuff, a bunch of random stuff and the amogos overlord"

+
+ + +
+
+ +
+ +

Nooz

+
OS developer
+

No description provided

+
+ +
+
+ + +
+ +

Fengzi

+
OS developer
+

"Hoi! Fengzi here)/"

+
+ + +
+
+ +
+ +

Beau

+
(Best) website developer
+

"Super cool front end developer"

+
+ + +
+
+ +
+ +

Optix

+
Website developer
+

"So, how's life, comrade?"

+
+ + +
+
+
+ +

Full list of contributors

+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/css/buttons.css b/css/buttons.css new file mode 100644 index 0000000..f2c1fad --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/css/cascade-sus-sheets-forDev.css b/css/cascade-sus-sheets-forDev.css new file mode 100644 index 0000000..2bc762f --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/css/cascade-sus-sheets.css b/css/cascade-sus-sheets.css new file mode 100644 index 0000000..2e03226 --- /dev/null +++ b/css/cascade-sus-sheets.css @@ -0,0 +1,5 @@ +/* +haccing skill #2: view webpage's css files +*/ +/*for devs, check the comment at the -for-development css file*/ +@import"https://www.nerdfonts.com/assets/css/webfont.css";:root{--amog-green:#66DDCC;--amog-green-transparent:rgba(102, 221, 204, 0.2);--amog-blue:#7289DA;--amog-blue-transparent:rgba(114, 137, 218, 0.2);--amog-blacky:#070A0E;--amog-blacky-transparent:rgba(7, 10, 14, 0.2);--amog-black:#0D1117;--amog-black-transparent:rgba(13, 17, 23, 0.2);--amog-black-transparenter:rgba(13, 17, 23, 0.5);--amog-black-plus:#161B22;--amog-hightlight:rgb(255, 154, 0);--amog-hightlight-transparent:rgba(255, 0, 0, 0.2)}*{-webkit-transition:all 500ms cubic-bezier(0.6, 0, 0, 1);-o-transition:all 500ms cubic-bezier(0.6, 0, 0, 1);transition:all 500ms cubic-bezier(0.6, 0, 0, 1);scroll-behavior:smooth;margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;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}.bois{width:90%;display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fit, minmax(256px, 1fr));gap:10px}.coolboi{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left;padding:1em;border-radius:10px;border:solid 2px var(--amog-green-transparent);background-color:var(--amog-black-transparent);overflow:hidden;aspect-ratio:1/1;-webkit-animation:coolboi-in 250ms cubic-bezier(0.6, 0, 0, 1);animation:coolboi-in 250ms cubic-bezier(0.6, 0, 0, 1);&.not1x1{aspect-ratio:unset}& a{color:#FFF;font-size:1.5em;&:hover{color:var(--amog-blue)}}& .role{background-color:var(--amog-green);padding:2px 10px;border-radius:6em;font-size:12px;font-weight:500;color:var(--amog-black);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}& img{top:50%;left:50%;-webkit-transform:translate(-50%, -50%) scale(1.2);-ms-transform:translate(-50%, -50%) scale(1.2);transform:translate(-50%, -50%) scale(1.2);-webkit-filter: brightness(0.5) blur(4px) grayscale(1);filter: brightness(0.5) blur(4px) grayscale(1);width:100%;position:absolute;z-index:-1;-o-object-fit:cover;object-fit:cover}& .links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}&:focus,&:focus-within,&:hover{border:solid 2px var(--amog-green);& img{-webkit-filter: brightness(0.5) blur(2px) grayscale(0);filter: brightness(0.5) blur(2px) grayscale(0);-webkit-transform:translate(-50%, -50%) scale(1);-ms-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1)}}}@-webkit-keyframes coolboi-in{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes coolboi-in{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}.buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:1em}.input-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:0.2em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;:nth-child(even),:nth-child(odd){-webkit-box-flex:1;-ms-flex:1;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;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color:var(--amog-green-transparent);color:#000;&:focus,&:hover{background-color:transparent;border:solid 2px var(--amog-green);color:var(--amog-green);-webkit-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);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;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s}.btn-prim,.primary{background-color:var(--amog-green);color:#000;&:focus,&:hover{background-color:var(--amog-green-transparent);border:solid 2px var(--amog-green);color:var(--amog-green);-webkit-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);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);&:focus,&:hover{background-color:var(--amog-blue);color:#000;-webkit-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);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;&:focus,&:hover{background-color:var(--amog-black-plus);-webkit-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);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,a,button{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:active,a:focus,a:hover,span{color:var(--amog-blue)}.feature{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:90%;gap:20px;background-color:var(--amog-black);border-radius:20px;overflow:hidden;&:nth-child(odd) .lbl{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right}}.feature img{width:40%}.feature .lbl{width:60%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}body{background-color:var(--amog-blacky);color:#FFF;font-family:"Poppins", sans-serif;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow-x:hidden}main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}section{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:20px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100vw;max-width:1280px}hr{width:90%;height:2px;border:none;border-radius:10px;background-image:-webkit-gradient(linear, left top, right bottom, from(var(--amog-blue)), to(var(--amog-green)));background-image:-o-linear-gradient(top left, var(--amog-blue), var(--amog-green));background-image:linear-gradient(to bottom right, var(--amog-blue), var(--amog-green))}header{width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:20px;background-image:url("../img/sus-on-moon.jpg");background-position:100% 50%;background-size:cover;-webkit-box-shadow:0 0 20px 0 #000;box-shadow:0 0 20px 0 #000;text-align:center;-webkit-transition:unset;-o-transition:unset;transition:unset}header h1{font-size:70px}header h1 span{font-size:70px;background-image:-webkit-gradient(linear, left top, right bottom, from(var(--amog-green)), to(var(--amog-blue)));background-image:-o-linear-gradient(top left, var(--amog-green), var(--amog-blue));background-image:linear-gradient(to bottom right, var(--amog-green), var(--amog-blue));white-space:nowrap;background-clip:text;color:transparent;-webkit-background-clip:text}.container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#toppat{position:relative;z-index:2;& img{width:64px;position:absolute;top:-30px;right:50%;z-index:-1;-webkit-transition:all 500ms cubic-bezier(0.6, 0, 0, 1);-o-transition:all 500ms cubic-bezier(0.6, 0, 0, 1);transition:all 500ms cubic-bezier(0.6, 0, 0, 1)}}footer{background:-webkit-gradient(linear, left top, right bottom, from(var(--amog-blue-transparent)), to(var(--amog-green-transparent))), url("../img/airship.png");background:-o-linear-gradient(top left, var(--amog-blue-transparent), var(--amog-green-transparent)), url("../img/airship.png");background:linear-gradient(to bottom right, var(--amog-blue-transparent), var(--amog-green-transparent)), url("../img/airship.png");background-size:cover;background-repeat:no-repeat;background-position:50% 50%;border-radius:2em;padding:0.5em;width:calc(100vw - 4em);max-width:1200px;margin:2em;display:-ms-grid;display:grid;grid-template-areas:"logo logo empty" "text links social";gap:0.25em;.footer__text{-ms-grid-row:3;-ms-grid-column:1;grid-area:text;font-size:1rem;font-weight:500;margin:0}.logo{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:logo;& img{background-color:var(--amog-black-transparenter);-webkit-backdrop-filter: blur(10px) brightness(75%);backdrop-filter: blur(10px) brightness(75%);padding:0.5em 1em;border-radius:2em;width:100%;max-width:13em;-o-object-fit:cover;object-fit:cover;position:relative;top:0;left:0}}}.footer__subsection{background-color:var(--amog-black-transparenter);-webkit-backdrop-filter: blur(10px) brightness(75%);backdrop-filter: blur(10px) brightness(75%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1em;border-radius:2em;overflow:visible;&:nth-child(2){border-radius:2em 0.5em 0.5em 2em}&:nth-child(3){border-radius:0.5em}&:nth-child(4){border-radius:0.5em 2em 2em 0.5em}}.footer__links{-ms-grid-row:3;-ms-grid-column:3;grid-area:links}.footer__link{width:auto;font-weight:700;color:var(--amog-green);-webkit-transition:all 0.25s cubic-bezier(0.6, 0, 0, 1);-o-transition:all 0.25s cubic-bezier(0.6, 0, 0, 1);transition:all 0.25s cubic-bezier(0.6, 0, 0, 1);&:focus,&:hover{color:var(--amog-blue)}}.footer__social{-ms-grid-row:3;-ms-grid-column:5;grid-area:social}@media prefers-reduced-motion{*{-webkit-transition:none !important;-o-transition:none !important;transition:none !important;scroll-behavior:auto !important}}@media (max-width: 768px){footer{grid-template-areas:"logo" "text" "links" "social";-ms-grid-columns:1fr;grid-template-columns:1fr;.footer__subsection{&:nth-child(2){border-radius:2em 2em 0.5em 0.5em}&:nth-child(3){border-radius:0.5em}&:nth-child(4){border-radius:0.5em 0.5em 2em 2em}}}nav{:not(:first-child){display:none}#menu{position:fixed;z-index:100;aspect-ratio:1/1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;float:right;text-align:right}&.responsive{& a{display:block;float:none;text-align:left}& .overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;background-color:var(--amog-black-transparent);-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px)}}}header{height:60vh;gap:10px}button{padding:10px 30px;border-radius:15px}header h1,header h1 span{font-size:40px}.buttons{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;& .button,& button{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}}.feature{-webkit-box-orient:vertical !important;-webkit-box-direction:normal !important;-ms-flex-direction:column !important;flex-direction:column !important;border-radius:20px;& .lbl,& img{width:100%}& .lbl{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;& h1,& p{text-align:center;width:100%}}}.footer__text{-ms-grid-row:2;-ms-grid-column:1}.logo{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:1}.footer__links{-ms-grid-row:3;-ms-grid-column:1}.footer__social{-ms-grid-row:4;-ms-grid-column:1}}nav{position:fixed;height:auto;z-index:69420;padding:4px;background-color:var(--amog-black-transparenter);-webkit-backdrop-filter: blur(8px) brightness(75%) saturate(150%) contrast(75%);backdrop-filter: blur(8px) brightness(75%) saturate(150%) contrast(75%);width:100vw;-webkit-transition:top 0.3s;-o-transition:top 0.3s;transition:top 0.3s;& a{font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5em;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;float:left;color:#f2f2f2;text-align:center;padding:0.5em 1em;text-decoration:none;overflow:hidden;border-radius:0.5em;&:first-child{background:-webkit-gradient(linear, left top, right top, from(var(--amog-blue)), to(var(--amog-green)));background:-o-linear-gradient(left, var(--amog-blue), var(--amog-green));background:linear-gradient(to right, var(--amog-blue), var(--amog-green));color:black;font-weight:700}&:hover{background-color:var(--amog-black-transparenter)}}& #menu{top:6px;right:6px;width:36px;float:right;aspect-ratio:1/1;display:none}} \ No newline at end of file diff --git a/css/contributors.css b/css/contributors.css new file mode 100644 index 0000000..1f6e363 --- /dev/null +++ b/css/contributors.css @@ -0,0 +1,93 @@ +.bois { + width: 90%; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); + gap: 10px; +} + +.coolboi { + position: relative; + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; + align-items: flex-start; + justify-content: flex-start; + text-align: left; + padding: 1em; + border-radius: 10px; + border: solid 2px var(--amog-green-transparent); + background-color: var(--amog-black-transparent); + overflow: hidden; + aspect-ratio: 1/1; + animation: coolboi-in 250ms cubic-bezier(0.6, 0, 0, 1); + + &.not1x1 { + aspect-ratio: unset; + } + + & a { + color: #FFF; + font-size: 1.5em; + + &:hover { + color: var(--amog-blue); + } + + } + + & .role { + background-color: var(--amog-green); + padding: 2px 10px; + border-radius: 6em; + font-size: 12px; + font-weight: 500; + color: var(--amog-black); + user-select: none; + } + + & img { + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(1.2); + filter: brightness(0.5) blur(4px) grayscale(1); + width: 100%; + position: absolute; + z-index: -1; + object-fit: cover; + } + + & .links { + display: flex; + flex-direction: row; + gap: 1em; + align-items: center; + justify-content: flex-start; + text-align: left; + } + + &:hover, &:focus, &:focus-within { + border: solid 2px var(--amog-green); + + & img { + filter: brightness(0.5) blur(2px) grayscale(0); + transform: translate(-50%, -50%) scale(1); + } + } +} + +@keyframes coolboi-in { + 0% { + opacity: 0; + transform: scale(1); + } + + 50% { + opacity: 1; + transform: scale(1.1); + } + + 100% { + transform: scale(1); + } +} \ No newline at end of file diff --git a/css/features.css b/css/features.css new file mode 100644 index 0000000..754ebec --- /dev/null +++ b/css/features.css @@ -0,0 +1,34 @@ + +.feature { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 90%; + gap: 20px; + background-color: var(--amog-black); + border-radius: 20px; + overflow: hidden; + + &:nth-child(odd) .lbl { + align-items: flex-end; + justify-content: flex-end; + text-align: right; + } + +} + +.feature img { + width: 40%; +} + +.feature .lbl { + width: 60%; + display: flex; + flex-direction: column; + gap: 20px; + + align-items: flex-start; + justify-content: flex-start; + text-align: left; +} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..3eff726 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,185 @@ +/* Misc. */ + +body { + background-color: var(--amog-blacky); + color: #FFF; + font-family: "Poppins", sans-serif; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + justify-content: center; + overflow-x: hidden; +} + +main { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + justify-content: center; + text-align: center; +} + +section { + text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + flex-direction: column; + + width: 100vw; + max-width: 1280px; +} + +hr { + width: 90%; + height: 2px; + border: none; + border-radius: 10px; + background-image: linear-gradient(to bottom right, var(--amog-blue), var(--amog-green)); +} + + +/* Header */ +header { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + background-image: url(../img/sus-on-moon.jpg); + background-position: 100% 50%; + background-size: cover; + box-shadow: 0 0 20px 0 #000; + text-align: center; + transition: unset; +} + +header h1 { + font-size: 70px; +} + +header h1 span { + font-size: 70px; + background-image: linear-gradient(to bottom right, var(--amog-green), var(--amog-blue)); + white-space: nowrap; + background-clip: text; + color: transparent; + -webkit-background-clip: text; +} + +.container { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#toppat { + position: relative; + z-index: 2; + + & img { + width: 64px; + position: absolute; + top: -30px; + right: 50%; + z-index: -1; + transition: all 500ms cubic-bezier(0.6, 0, 0, 1); + } +} + +/* Footer */ +footer { + + background: linear-gradient(to bottom right, var(--amog-blue-transparent), var(--amog-green-transparent)), url("../img/airship.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: 50% 50%; + border-radius: 2em; + padding: 0.5em; + width: calc(100vw - 4em); + max-width: 1200px; + margin: 2em; + + display: grid; + grid-template-areas: + "logo logo empty" + "text links social"; + gap: 0.25em; + + .footer__text { + grid-area: text; + font-size: 1rem; + font-weight: 500; + margin: 0; + } + + .logo { + grid-area: logo; + + & img { + background-color: var(--amog-black-transparenter); + backdrop-filter: blur(10px) brightness(75%); + padding: 0.5em 1em; + border-radius: 2em; + width: 100%; + max-width: 13em; + object-fit: cover; + position: relative; + top: 0; + left: 0; + } + } + +} + +.footer__subsection { + background-color: var(--amog-black-transparenter); + backdrop-filter: blur(10px) brightness(75%); + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 1em; + border-radius: 2em; + overflow: visible; + + &:nth-child(2) { + border-radius: 2em 0.5em 0.5em 2em; + } + + &:nth-child(3) { + border-radius: 0.5em; + } + + &:nth-child(4) { + border-radius: 0.5em 2em 2em 0.5em; + } + +} + +.footer__links { + grid-area: links; +} + +/*since when CSS is like this?*/ + +.footer__link { + width: auto; + font-weight: 700; + color: var(--amog-green); + transition: all 0.25s cubic-bezier(0.6, 0, 0, 1); + + &:hover, &:focus { + color: var(--amog-blue); + } +} + +.footer__social { + grid-area: social; +} \ No newline at end of file diff --git a/css/media-queries.css b/css/media-queries.css new file mode 100644 index 0000000..9a38ee6 --- /dev/null +++ b/css/media-queries.css @@ -0,0 +1,121 @@ + +@media prefers-reduced-motion { + * { + /*noinspection CssUnknownProperty*/ + transition: none !important; + scroll-behavior: auto !important; + } +} + +@media (max-width: 768px) { + + footer { + grid-template-areas: + "logo" + "text" + "links" + "social"; + grid-template-columns: 1fr; + + .footer__subsection { + &:nth-child(2) { + border-radius: 2em 2em 0.5em 0.5em; + } + + &:nth-child(3) { + border-radius: 0.5em; + } + + &:nth-child(4) { + border-radius: 0.5em 0.5em 2em 2em; + } + } + + } + + nav { + + :not(:first-child) { + display: none; + } + + #menu { + position: fixed; + z-index: 100; + aspect-ratio: 1/1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + float: right; + text-align: right; + } + + &.responsive { + + & a { + display: block; + float: none; + text-align: left; + } + + & .overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1; + background-color: var(--amog-black-transparent); + backdrop-filter: blur(8px); + } + } + } + + header { + height: 60vh; + gap: 10px; + } + + button { + padding: 10px 30px; + border-radius: 15px; + } + + header h1, header h1 span { + font-size: 40px; + } + + .buttons { + flex-direction: column; + gap: 10px; + + & .button, & button { + flex: 1; + width: 100%; + } + + } + + .feature { + flex-direction: column !important; + border-radius: 20px; + + & img, & .lbl { + width: 100%; + } + + & .lbl { + justify-content: center; + justify-items: center; + align-items: center; + + & h1, & p { + text-align: center; + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/css/navbar.css b/css/navbar.css new file mode 100644 index 0000000..71bddae --- /dev/null +++ b/css/navbar.css @@ -0,0 +1,47 @@ +nav { + + position: fixed; + height: auto; + z-index: 69420; /* a. */ + padding: 4px; + + background-color: var(--amog-black-transparenter); + backdrop-filter: blur(8px) brightness(75%) saturate(150%) contrast(75%); + width: 100vw; + transition: top 0.3s; + + & a { + font-weight: 400; + display: flex; + gap: .5em; + justify-content: center; + align-items: center; + + float: left; + color: #f2f2f2; + text-align: center; + padding: 0.5em 1em; + text-decoration: none; + overflow: hidden; + border-radius: 0.5em; + + &:first-child { + background: linear-gradient(to right, var(--amog-blue), var(--amog-green)); + color: black; + font-weight: 700; + } + + &:hover { + background-color: var(--amog-black-transparenter); + } + } + + & #menu { + top: 6px; + right: 6px; + width: 36px; + float: right; + aspect-ratio: 1/1; + display: none; + } +} \ No newline at end of file diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 0000000..5ded499 --- /dev/null +++ b/css/variables.css @@ -0,0 +1,16 @@ +:root { + --amog-green: #66DDCC; + --amog-green-transparent: rgba(102, 221, 204, 0.2); + --amog-blue: #7289DA; + --amog-blue-transparent: rgba(114, 137, 218, 0.2); + --amog-blacky: #070A0E; + --amog-blacky-transparent: rgba(7, 10, 14, 0.2); + --amog-black: #0D1117; + --amog-black-transparent: rgba(13, 17, 23, 0.2); + --amog-black-transparenter: rgba(13, 17, 23, 0.5); + --amog-black-plus: #161B22; /*i rlly like dark palettes*/ + + /* For accessibility - outline */ + --amog-hightlight: rgb(255, 154, 0); + --amog-hightlight-transparent: rgba(255, 0, 0, 0.2); +} \ No newline at end of file diff --git a/download.html b/download.html new file mode 100644 index 0000000..7243c5e --- /dev/null +++ b/download.html @@ -0,0 +1,169 @@ + + + + + + + + Get AmogOS Toppat | Now even more Sussy + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Donwload AmogOS Toppat

+

Make your PC even sus

+
+
+
+
+

Downloads

+
+ x86_64 version + RPI version +
+

+ x86_64 version: x.x.x - HOSTED IN: AmogHost +
+ RPI version: 1.5.0 - HOSTED IN: Microsoft™ OneDrive +

+
+
+
+

How to install:

+

Follow these steps to ensure you make your PC sus!

+ +
+

+ Having trobules? +

+
+ + + + + + +
+
+
+ + \ No newline at end of file diff --git a/startpage/AmongUs-Regular.ttf b/fonts/AmongUs-Regular.ttf similarity index 100% rename from startpage/AmongUs-Regular.ttf rename to fonts/AmongUs-Regular.ttf diff --git a/help.html b/help.html new file mode 100644 index 0000000..01d6469 --- /dev/null +++ b/help.html @@ -0,0 +1,75 @@ + + + + AmogOS Toppat | Now even more Sussy + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Need help?
We got ya' covered

+

Nothing will stop your PC from becoming a sussy baka

+
+
+
+ +
+

Support articles

+
+

Issue: AmogOS refuses to display anything

+

+ If the OS refuses to display anything, you may need to install AMD/NVIDIA GPU drivers if you have one. Install it by SSHing into the OS with ssh amogos@AmogOS.local on a linux computer on the same network at the AmogOS PC, then doing the following for AMD GPUS sudo apt purge -y xserver-xorg-video-nouveau libdrm-nouveau2 && sudo apt install -y firmware-amd-graphics libgl1-mesa-dri libglx-mesa0 mesa-vulkan-drivers xserver-xorg-video-all (nouveau drivers for NVIDIA graphic cards are installed by default) +

+
+
+

Issue: Non-straight display resolution

+

+ If the screen resolution looks wonky, click the "Display Settings" shortcut on the desktop and change resolutions until you find one that works for you. Also note that if the dock looks like it's positioning is broken, run plank --preferences in the terminal and change the position to "Bottom". You can also set the alignment to "Center" and manually change the spacing with the slider.

+
+
+ +
+ +
+

Didn't find what you were looking for? Ask us!

+ Discord +
+ +
+ +

+ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣤⣤⣤⣤⣤⣶⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⡿⠛⠉⠙⠛⠛⠛⠛⠻⢿⣿⣷⣤⡀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⠋⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⠈⢻⣿⣿⡄⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⣸⣿⡏⠀⠀⠀⣠⣶⣾⣿⣿⣿⠿⠿⠿⢿⣿⣿⣿⣄⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⣿⣿⠁⠀⠀⢰⣿⣿⣯⠁⠀⠀⠀⠀⠀⠀⠀⠈⠙⢿⣷⡄⠀ ⠀⠀⣀⣤⣴⣶⣶⣿⡟⠀⠀⠀⢸⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣷⠀ ⠀⢰⣿⡟⠋⠉⣹⣿⡇⠀⠀⠀⠘⣿⣿⣿⣿⣷⣦⣤⣤⣤⣶⣶⣶⣶⣿⣿⣿⠀ ⠀⢸⣿⡇⠀⠀⣿⣿⡇⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠃⠀ ⠀⣸⣿⡇⠀⠀⣿⣿⡇⠀⠀⠀⠀⠀⠉⠻⠿⣿⣿⣿⣿⡿⠿⠿⠛⢻⣿⡇⠀⠀ ⠀⣿⣿⠁⠀⠀⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣧⠀⠀ ⠀⣿⣿⠀⠀⠀⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀ ⠀⣿⣿⠀⠀⠀⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀ ⠀⢿⣿⡆⠀⠀⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⡇⠀⠀ ⠀⠸⣿⣧⡀⠀⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⠃⠀⠀ ⠀⠀⠛⢿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⣰⣿⣿⣷⣶⣶⣶⣶⠶⠀⢠⣿⣿⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⣿⣿⠀⠀⠀⠀⠀⣿⣿⡇⠀⣽⣿⡏⠁⠀⠀⢸⣿⡇⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⣿⣿⠀⠀⠀⠀⠀⣿⣿⡇⠀⢹⣿⡆⠀⠀⠀⣸⣿⠇⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⢿⣿⣦⣄⣀⣠⣴⣿⣿⠁⠀⠈⠻⣿⣿⣿⣿⡿⠏⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠈⠛⠻⠿⠿⠿⠿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +

+
+ + \ No newline at end of file diff --git a/img/airship.png b/img/airship.png new file mode 100644 index 0000000..68e71b3 Binary files /dev/null and b/img/airship.png differ diff --git a/img/amogos-logo.png b/img/amogos-logo.png new file mode 100644 index 0000000..5763b9a Binary files /dev/null and b/img/amogos-logo.png differ diff --git a/img/amogos.png b/img/amogos.png new file mode 100644 index 0000000..de88c22 Binary files /dev/null and b/img/amogos.png differ diff --git a/img/banner.png b/img/banner.png new file mode 100644 index 0000000..aa50ecb Binary files /dev/null and b/img/banner.png differ diff --git a/img/features/Xfce.png b/img/features/Xfce.png new file mode 100644 index 0000000..1d7907c Binary files /dev/null and b/img/features/Xfce.png differ diff --git a/img/features/neofetch.png b/img/features/neofetch.png new file mode 100644 index 0000000..1f79bb0 Binary files /dev/null and b/img/features/neofetch.png differ diff --git a/img/features/wallpapers.png b/img/features/wallpapers.png new file mode 100644 index 0000000..235d0a8 Binary files /dev/null and b/img/features/wallpapers.png differ diff --git a/img/img.png b/img/img.png new file mode 100644 index 0000000..add2299 Binary files /dev/null and b/img/img.png differ diff --git a/img/sus-on-moon.jpg b/img/sus-on-moon.jpg new file mode 100644 index 0000000..b4faf18 Binary files /dev/null and b/img/sus-on-moon.jpg differ diff --git a/img/toppat-banner-light.png b/img/toppat-banner-light.png new file mode 100644 index 0000000..75a952c Binary files /dev/null and b/img/toppat-banner-light.png differ diff --git a/img/toppat-banner.png b/img/toppat-banner.png new file mode 100644 index 0000000..eacf31c Binary files /dev/null and b/img/toppat-banner.png differ diff --git a/img/toppat.png b/img/toppat.png new file mode 100644 index 0000000..7f9998f Binary files /dev/null and b/img/toppat.png differ diff --git a/icons/sus.png b/impostor.png similarity index 100% rename from icons/sus.png rename to impostor.png diff --git a/index.html b/index.html index c91cc67..9cb5c23 100644 --- a/index.html +++ b/index.html @@ -1,194 +1,217 @@ + + + - - - - - - - - - - - - - - AmogOS | Sussy wussy. - + AmogOS Toppat | Now even more Sussy + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- -
-
-
- + + + +
+ +
+

AmogOS ToppatTop Hat

+
+ + + +

The sus OS for sus computers is back, with more sus than ever before.

+
+ Explore AmogOS + Make your PC sus + What people say +
+
+ + +
+
+

Reasons to make your computer sus

+
+ A screenshot of an AmogOS desktop with an Among Us character in the centre, + within a black circle. +
+

Custom AmogOS Wallpapers

+

AmogOS comes with a set of custom wallpapers, so you can make your desktop even sussier! Check + them out in ~/Pictures/.AmogOS/, or download them + here.

-
- A sus OS for aSUS computers +
+
+ A screenshot of an AmogOS desktop with an Among Us character in the centre, + within a black circle. +
+

Custom Neofetch

+

AmogOS comes with a custom Neofetch, so you can show off your sussy OS to your friends! Check it out + by running neofetch in the terminal.

-
- - - +
+ A screenshot of an AmogOS desktop with an Among Us character in the centre, + within a black circle. +
+

Epic Xfce

+

AmogOS uses the Xfce desktop environment, which is lightweight and easy to use. It's also very + customisable, so you can make it even more sussy!

+
-
- -
-
-
- - - +
+ +
+ +
+

Let's make your PC sus

+ Download instructions +
+ +
+ +
+ +

What people say about AmogOS

+
+
+ The AmogOS logo; a blue Among Us character in a black circle. +

MattKC

+
American
+

"I found my new main OS"

+ +
+ +
+ The AmogOS logo; a blue Among Us character in a black circle. +

TechHut

+
Also American
+

"Chad AmogOS vs bloated mainstream distro"

+ +
+ +
+ The AmogOS logo; a blue Among Us character in a black circle. +

SomeOrdinaryGamers

+
Canadian
+

"sussy wussy"

+ +
+
+ +
+ +
+

Need help?

+
+ Read the help articles + Ask for support on the Discord +
+
+
+ + + + + \ No newline at end of file diff --git a/js/aos.js b/js/aos.js new file mode 100644 index 0000000..f90cec4 --- /dev/null +++ b/js/aos.js @@ -0,0 +1,20 @@ +// aos (animate on sus) +const the_animation = document.querySelectorAll('.animation') + +const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('scroll-animation') + } + else { + entry.target.classList.remove('scroll-animation') + } + }) +}, + { threshold: 0.5 + }); + for (let i = 0; i < the_animation.length; i++) { + const elements = the_animation[i]; + + observer.observe(elements); +} \ No newline at end of file diff --git a/js/elementConstructor.js b/js/elementConstructor.js new file mode 100644 index 0000000..36940b1 --- /dev/null +++ b/js/elementConstructor.js @@ -0,0 +1,112 @@ +/** + * @fileOverview Constructs repeated elements such as the header and footer. + */ + +const links = [ + {href: `./index.html`, name: `Home`, id: `home`, icon: "nf-md-home"}, + {href: `./download.html`, name: `Download`, id: `downloads`, icon: "nf-md-download"}, + {href: `./help.html`, name: `Help`, id: `help`, icon: "nf-md-help"}, + {href: `./credits.html`, name: `Credits`, id: `credits`, icon: "nf-md-crowd"}, + {href: `https://opencollective.com/amogos`, name: `Donate`, id: `donate`, icon: "nf-md-hand_heart"}, +]; + +const socialLinks = [ + {href: `https://discord.gg/z86muknm9y`, name: `Discord`, id: `discord`, icon: "nf-md-discord"}, + {href: `https://github.com/amog-os/`, name: `GitHub`, id: `github`, icon: "nf-md-github"}, + {href: `https://www.reddit.com/r/amogOS/`, name: `Reddit`, id: `reddit`, icon: "nf-md-reddit"} +]; + +/** + * @name navConstructor + */ + +function navConstructor() { + + const nav = document.createElement(`nav`); + nav.id = `navbar`; + nav.classList.add(`navbar`); + + const logo = document.createElement(`a`); + logo.href = `./index.html`; + logo.classList.add(`logo`); + logo.innerText = `AmogOS`; + nav.appendChild(logo); + + for (const link of links) { + if (link.id === `home`) continue; + const a = document.createElement(`a`); + a.href = link.href; + a.innerText = link.name; + a.id = link.id; + a.classList.add(`nav__link`); + + const icon = document.createElement(`i`); + icon.classList.add(`nf`, link.icon); + a.prepend(icon); + + nav.appendChild(a); + } + + const menu = document.createElement(`a`); + menu.id = `menu`; + menu.href = `javascript:void(0);`; + menu.onclick = () => { + if (nav.className === 'navbar') nav.className += ' responsive'; + else nav.className = 'navbar'; + }; + + const menuIcon = document.createElement(`i`); + menuIcon.classList.add(`nf`, `nf-fa-bars`); + menu.appendChild(menuIcon); + + + nav.append(menu); + document.body.prepend(nav); + +} + +function createElement(tag, classes = [], content = '') { + const element = document.createElement(tag); + if (classes.length > 0) element.classList.add(...classes); + if (content) element.innerHTML = content; + return element; +} + +function createLink(link) { + const a = createElement('a', ['footer__link']); + a.href = link.href; + a.innerText = link.name; + a.id = link.id; + return a; +} + +function footerConstructor() { + const footer = createElement('footer'); + + // noinspection HtmlUnknownTarget + footer.appendChild(createElement('div', ['logo'], 'Logo')); + + // noinspection HtmlUnknownTarget + const textContent = ` +

AmogOS Top HatToppat

+

The sus OS for sus computers is back, with more sus than ever before.

+

© AmogOS Project All suspiciousness reserved.

+ `; + const text = createElement('div', ['footer__text', 'footer__subsection'], textContent); + + const linksContainer = createElement('div', ['footer__links', 'footer__subsection']); + linksContainer.appendChild(createElement('h2', [], 'Links')); + links.forEach(link => linksContainer.appendChild(createLink(link))); + + const social = createElement('div', ['footer__social', 'footer__subsection']); + social.appendChild(createElement('h2', [], 'Social')); + + socialLinks.forEach(link => social.appendChild(createLink(link))); + + + footer.append(text, linksContainer, social); + document.body.appendChild(footer); +} + +navConstructor(); +footerConstructor(); \ No newline at end of file diff --git a/js/getContributors.js b/js/getContributors.js new file mode 100644 index 0000000..db962ce --- /dev/null +++ b/js/getContributors.js @@ -0,0 +1,170 @@ +/** + * @fileoverview This file contains the functions to get the contributors of the project for the + * contributors page + */ + +const githubApiUrl = `https://api.github.com` +const CACHE_EXPIRATION_MS = 24 * 60 * 60 * 1000; // 24 hr + +/** + * @name getContributorExtraInfo + * @description This function gets the extra information of a contributor from the GitHub API + * @param {string} user Username of the contributor + * @returns {Promise} The extra information of the contributor + */ + +async function getContributorExtraInfo(user, repo) { + const url = `${githubApiUrl}/users/${user}` + const response = await fetch(url) + const data = await response.json() + data.repo = repo; + return await data; +} + +/** + * @name getContributors + * @description This function gets the contributors of the project from the GitHub API + * @param {string} org Parent organization of the repository + * @param {string} repo Repository name + * @returns {Promise} The contributors of the project + */ + +async function getContributors(org, repo) { + const url = `${githubApiUrl}/repos/${org}/${repo}/contributors` + const response = await fetch(url) + const data = await response.json() + + try { + if (data.message.startsWith(`API rate limit exceeded`)) { + console.error(`Rate limit exceeded!`) + return [] + } + } catch (e) { + console.error(`Error while checking rate limit: ${e}`) + } + + for (let i = 0; i < data.length; i++) data[i].repo = repo; + return data; +} + +/** + * @name populateContributors + * @description This function populates the contributors page with the contributors of the project. + * Note that the client may be rate limited by the GitHub API. + * @returns {Promise} + */ + +async function populateContributors() { + + const organisation = `amog-os`; + const repos = [`AmogOS`, `AmogOStopPat`, `AmogOS-Wallpapers`, `Amog-OS.github.io`]; + + let contributors = []; + + for (let i = 0; i < repos.length; i++) { + const repo = repos[i]; + const repoContributors = await getContributors(organisation, repo); + contributors = contributors.concat(repoContributors); + } + + const contributorsContainer = document.getElementById(`contributorsContainer`); + + for (let i = 0; i < contributors.length; i++) { + const contributorLogin = contributors[i].login; + if (contributorLogin === undefined) continue; + let contributor = getCachedContributor(contributorLogin); + + if (!contributor) { + contributor = await getContributorExtraInfo(contributorLogin); + cacheContributor(contributorLogin, contributor); + } + + const coolBoi = document.createElement(`div`); + coolBoi.classList.add(`coolboi`); + + const img = document.createElement(`img`); + img.src = contributor.avatar_url; + + const h1 = document.createElement(`h1`); + h1.innerText = contributor.login; + + const card = document.createElement(`div`); + card.classList.add(`role`); + card.innerText = contributor.type === `User` ? `Contributor` : contributor.type; + + // Add a role for repo the contributor has contributed to + const repo = document.createElement(`div`); + repo.classList.add(`role`); + repo.innerText = contributor.repo; + card.appendChild(repo); + + + const h3 = document.createElement(`p`); + h3.innerHTML = `"${contributor.bio || `No bio provided`}"`; + + const links = document.createElement(`div`); + links.classList.add(`links`); + + const ghLink = document.createElement(`a`); + ghLink.href = contributor.html_url; + + const githubIcon = document.createElement(`i`); + githubIcon.classList.add(`nf-fa-github`); + githubIcon.classList.add(`nf`); + ghLink.appendChild(githubIcon); + + const websiteLink = document.createElement(`a`); + if (contributor.blog) websiteLink.href = contributor.blog.includes(`http`) ? contributor.blog : `https://${contributor.blog}`; + + const websiteIcon = document.createElement(`i`); + websiteIcon.classList.add(`nf-fa-link`); + websiteIcon.classList.add(`nf`); + websiteLink.appendChild(websiteIcon); + + links.appendChild(ghLink); + if (contributor.blog) links.appendChild(websiteLink); + + coolBoi.appendChild(img); + coolBoi.appendChild(h1); + coolBoi.appendChild(card); + coolBoi.appendChild(h3); + coolBoi.appendChild(links); + + // Append the coolBoi element after a delay of 150ms + await delay(250); + contributorsContainer.appendChild(coolBoi); + } +} + +function delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +function cacheContributor(login, data) { + const cacheData = { + data, + timestamp: Date.now() + }; + + localStorage.setItem(`contributor_${login}`, JSON.stringify(cacheData)); +} + +function getCachedContributor(login) { + const cachedData = localStorage.getItem(`contributor_${login}`); + + if (cachedData) { + const {data, timestamp} = JSON.parse(cachedData); + const currentTime = Date.now(); + + if (currentTime - timestamp < CACHE_EXPIRATION_MS) return data; + else localStorage.removeItem(`contributor_${login}`); + } + + return null; +} + +populateContributors().then(r => + console.log(`Contributors populated!`) +).catch(e => + console.error(`Error while populating contributors: ${e}`) +) \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..ba27d1e --- /dev/null +++ b/js/main.js @@ -0,0 +1,36 @@ +/** + * @fileoverview Main JS file. + */ + +/** + * @description Navbar goes out of the screen when scrolling down and comes back when scrolling up. + * @param {HTMLElement} navbar - Navbar element. + */ + +function navbarScroll(navbar) { + + let prevScrollPos = window.pageYOffset; + + window.onscroll = function() { + const currentScrollPos = window.pageYOffset; + if (prevScrollPos > currentScrollPos) navbar.style.top = "0"; + else navbar.style.top = "-69px"; + prevScrollPos = currentScrollPos; + } + +} + +document.addEventListener("DOMContentLoaded", function() { + const navbar = document.querySelector("nav"); + navbarScroll(navbar); +}); + + + +const header = document.querySelector('header'); + +// As the user scrolls, keep the header background image in the same place +window.addEventListener('scroll', () => { + header.style.backgroundPositionY = window.scrollY / 4 + 'px'; + header.style.filter = 'blur(' + (1 - window.scrollY / 1000) + ')'; +}); \ No newline at end of file diff --git a/404.html b/legacy-site/404.html similarity index 100% rename from 404.html rename to legacy-site/404.html diff --git a/about.html b/legacy-site/about.html similarity index 100% rename from about.html rename to legacy-site/about.html diff --git a/article.css b/legacy-site/article.css similarity index 100% rename from article.css rename to legacy-site/article.css diff --git a/common.css b/legacy-site/common.css similarity index 100% rename from common.css rename to legacy-site/common.css diff --git a/donate.html b/legacy-site/donate.html similarity index 100% rename from donate.html rename to legacy-site/donate.html diff --git a/downloads.html b/legacy-site/downloads.html similarity index 100% rename from downloads.html rename to legacy-site/downloads.html diff --git a/icons/Santa_hat.png b/legacy-site/icons/Santa_hat.png similarity index 100% rename from icons/Santa_hat.png rename to legacy-site/icons/Santa_hat.png diff --git a/icons/anime.png b/legacy-site/icons/anime.png similarity index 100% rename from icons/anime.png rename to legacy-site/icons/anime.png diff --git a/icons/bg-1080p.jpg b/legacy-site/icons/bg-1080p.jpg similarity index 100% rename from icons/bg-1080p.jpg rename to legacy-site/icons/bg-1080p.jpg diff --git a/icons/bg-720p-progressive-christmas.jpg b/legacy-site/icons/bg-720p-progressive-christmas.jpg similarity index 100% rename from icons/bg-720p-progressive-christmas.jpg rename to legacy-site/icons/bg-720p-progressive-christmas.jpg diff --git a/icons/bg-720p-progressive.jpg b/legacy-site/icons/bg-720p-progressive.jpg similarity index 100% rename from icons/bg-720p-progressive.jpg rename to legacy-site/icons/bg-720p-progressive.jpg diff --git a/icons/bg.png b/legacy-site/icons/bg.png similarity index 100% rename from icons/bg.png rename to legacy-site/icons/bg.png diff --git a/icons/download/RPI_direct.png b/legacy-site/icons/download/RPI_direct.png similarity index 100% rename from icons/download/RPI_direct.png rename to legacy-site/icons/download/RPI_direct.png diff --git a/icons/download/RPI_torrent.png b/legacy-site/icons/download/RPI_torrent.png similarity index 100% rename from icons/download/RPI_torrent.png rename to legacy-site/icons/download/RPI_torrent.png diff --git a/icons/download/x64_direct.png b/legacy-site/icons/download/x64_direct.png similarity index 100% rename from icons/download/x64_direct.png rename to legacy-site/icons/download/x64_direct.png diff --git a/icons/download/x64_torrent.png b/legacy-site/icons/download/x64_torrent.png similarity index 100% rename from icons/download/x64_torrent.png rename to legacy-site/icons/download/x64_torrent.png diff --git a/icons/fongzoi.png b/legacy-site/icons/fongzoi.png similarity index 100% rename from icons/fongzoi.png rename to legacy-site/icons/fongzoi.png diff --git a/icons/sus-christmas.ico b/legacy-site/icons/sus-christmas.ico similarity index 100% rename from icons/sus-christmas.ico rename to legacy-site/icons/sus-christmas.ico diff --git a/icons/sus-christmas.png b/legacy-site/icons/sus-christmas.png similarity index 100% rename from icons/sus-christmas.png rename to legacy-site/icons/sus-christmas.png diff --git a/icons/sus.ico b/legacy-site/icons/sus.ico similarity index 100% rename from icons/sus.ico rename to legacy-site/icons/sus.ico diff --git a/legacy-site/icons/sus.png b/legacy-site/icons/sus.png new file mode 100644 index 0000000..0c16753 Binary files /dev/null and b/legacy-site/icons/sus.png differ diff --git a/icons/webp/RPI_direct.webp b/legacy-site/icons/webp/RPI_direct.webp similarity index 100% rename from icons/webp/RPI_direct.webp rename to legacy-site/icons/webp/RPI_direct.webp diff --git a/icons/webp/RPI_torrent.webp b/legacy-site/icons/webp/RPI_torrent.webp similarity index 100% rename from icons/webp/RPI_torrent.webp rename to legacy-site/icons/webp/RPI_torrent.webp diff --git a/icons/webp/bg.webp b/legacy-site/icons/webp/bg.webp similarity index 100% rename from icons/webp/bg.webp rename to legacy-site/icons/webp/bg.webp diff --git a/icons/webp/sus.webp b/legacy-site/icons/webp/sus.webp similarity index 100% rename from icons/webp/sus.webp rename to legacy-site/icons/webp/sus.webp diff --git a/icons/webp/x64_direct.webp b/legacy-site/icons/webp/x64_direct.webp similarity index 100% rename from icons/webp/x64_direct.webp rename to legacy-site/icons/webp/x64_direct.webp diff --git a/icons/webp/x64_torrent.webp b/legacy-site/icons/webp/x64_torrent.webp similarity index 100% rename from icons/webp/x64_torrent.webp rename to legacy-site/icons/webp/x64_torrent.webp diff --git a/legacy-site/index.html b/legacy-site/index.html new file mode 100644 index 0000000..c91cc67 --- /dev/null +++ b/legacy-site/index.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + + AmogOS | Sussy wussy. + + + +
+
+ +
+
+
+ +
+
+ A sus OS for aSUS computers +
+
+
+ + + +
+
+ +
+
+
+ + + + diff --git a/install.html b/legacy-site/install.html similarity index 100% rename from install.html rename to legacy-site/install.html diff --git a/legacy-site/startpage/AmongUs-Regular.ttf b/legacy-site/startpage/AmongUs-Regular.ttf new file mode 100644 index 0000000..359054c Binary files /dev/null and b/legacy-site/startpage/AmongUs-Regular.ttf differ diff --git a/legacy-site/startpage/index.html b/legacy-site/startpage/index.html new file mode 100644 index 0000000..49ab0f4 --- /dev/null +++ b/legacy-site/startpage/index.html @@ -0,0 +1,51 @@ + + + + + + + Homepage + + + + + + + + + + + +
+
+ +
+
+ +
+
START
+
+
+
+
+ +
+
+
+
+
quotes of the day
+
+
+
+
+
+
+ + + diff --git a/startpage/script.js b/legacy-site/startpage/script.js similarity index 100% rename from startpage/script.js rename to legacy-site/startpage/script.js diff --git a/startpage/style.css b/legacy-site/startpage/style.css similarity index 100% rename from startpage/style.css rename to legacy-site/startpage/style.css diff --git a/rickroll.mp4 b/rickroll.mp4 deleted file mode 100644 index 4834c02..0000000 Binary files a/rickroll.mp4 and /dev/null differ diff --git a/robots.txt b/robots.txt deleted file mode 100644 index 182ec32..0000000 --- a/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -User-Agent: * -Disallow: -Sitemap: https://www.amog-os.github.io/sitemap.xml diff --git a/sitemap.xml b/sitemap.xml index 038b25f..ecb1fbc 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,39 +1,39 @@ - - https://amogos.studio/ - 2022-10-08T00:37:57+00:00 - monthly - 1.00 - - - https://amogos.studio/install - 2022-10-08T00:37:57+00:00 - monthly - 0.90 - - - https://amogos.studio/downloads - 2022-10-08T00:37:57+00:00 - weekly - 0.90 - - - https://amogos.studio/startpage/ - 2022-10-08T00:37:57+00:00 - never - 0.20 - - - https://amogos.studio/about - 2022-10-08T00:37:57+00:00 - yearly - 0 - + + https://amog-os.github.io/ + 2022-10-08T00:37:57+00:00 + monthly + 1.00 + + + https://amog-os.github.io/install + 2022-10-08T00:37:57+00:00 + monthly + 0.90 + + + https://amog-os.github.io/downloads + 2022-10-08T00:37:57+00:00 + weekly + 0.90 + + + https://amog-os.github.io/startpage/ + 2022-10-08T00:37:57+00:00 + never + 0.20 + + + https://amog-os.github.io/about + 2022-10-08T00:37:57+00:00 + yearly + 0 + - + \ No newline at end of file diff --git a/startpage/index.html b/startpage/index.html index 49ab0f4..66222dd 100644 --- a/startpage/index.html +++ b/startpage/index.html @@ -1,51 +1,266 @@ + + + - - - - Homepage - - - - - - - - - + AmogOS Start Page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- -
+ + +
- -
-
START
-
+

AmogOS StartTop Hat

+

AmogOS is cool!!

+ + + + +
-
-
- -
+ +
+
+ + + +
+ +
+

Change your search engine

+
DuckDuckGo
+
Google
+
Bing
+
Ecosia
+
X
+
+ + +
-
-
-
quotes of the day
-
-
-
-
-
-
- + + + +
+ - + + \ No newline at end of file