Feat: Added page transitions, and many other improvements.

Reviewed-on: CRSS/Website#1

.gitignore

@@ -100,4 +100,4 @@ fabric.properties
 !.idea/codeStyles
 !.idea/runConfigurations
 
-# End of https://www.toptal.com/developers/gitignore/api/phpstorm+all,composer,dotenv
+# End of https://www.toptal.com/developers/gitignore/api/phpstorm+all,composer,dotenv

_config.php

@@ -28,4 +28,4 @@
     $_ENV['MYSQL_USER'],
     $_ENV['MYSQL_PASS'],
     $_ENV['MYSQL_DB']
-   );
+  );

css/src/_fonts.scss

@@ -1,6 +1,6 @@
 // @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans: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&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@400;500;700&display=swap');
 
 body, input {
   font-family: "Noto Sans", "Noto Color Emoji", sans-serif;

css/src/_reset.scss

@@ -1,3 +0,0 @@
-* {
-  margin: 0;
-}

css/src/colors/_dark.scss

@@ -0,0 +1,28 @@
+// Dark Theme
+
+$pageBG: #202120;
+$pageFG: white;
+
+$accent: #527D52;
+$linkColor: #d0dfd0;
+
+$btnNormalBG: $accent;
+$btnNormalFG: white;
+$btnActiveBG: $accent;
+$btnActiveFG: white;
+
+$navBG: #272f27;
+$navBorder: #575f57;
+
+$cardNormalBG: #272727;
+$cardNormalFG: $pageFG;
+$cardNormalBorder: #575757;
+$cardActiveBG: $navBG;
+$cardActiveFG: $linkColor;
+$cardActiveBorder: $navBorder;
+
+$navLinkOutlineColor: #707f70;
+$navLinkNormalColor: #7E9E7E;
+$navLinkActiveColor: #DEFEDE;
+
+$headerOverlay: #101610;

css/src/colors/_light.scss

@@ -0,0 +1,32 @@
+// Light Theme
+
+$pageBG: white;
+$pageFG: black;
+
+$accent: #527D52;
+$linkColor: $accent;
+
+$btnNormalBG: $accent;
+$btnNormalFG: white;
+$btnActiveBG: $accent;
+$btnActiveFG: white;
+
+$navBG: #f9fff9;
+$navBorder: #d0dfd0;
+
+$cardNormalBG: #f9f9f9;
+$cardNormalFG: $pageFG;
+$cardNormalBorder: #d0d0d0;
+$cardActiveBG: $navBG;
+$cardActiveFG: $linkColor;
+$cardActiveBorder: $navBorder;
+
+/*$cardBG: $navBG;
+$cardFG: $pageFG;
+$cardBorder: $navBorder;*/
+
+$navLinkOutlineColor: #D0DFD0;
+$navLinkNormalColor: #7E9E7E;
+$navLinkActiveColor: $accent;
+
+$headerOverlay: white;

css/src/style.scss

@@ -1,16 +1,43 @@
-//@import "reset";
+@use "fonts";
-@import "fonts";
+@use "colors/light" as light;
+@use "colors/dark" as dark;
+
+* {
+	-webkit-tap-highlight-color: transparent; // fuck you
+}
+
+html, body { overflow-x: hidden;}
 
 body {
-  background: white;
   margin: 0;
 
+  background: light.$pageBG;
+  color: light.$pageFG;
+
   @media (prefers-color-scheme: dark) {
-    background: #202120;
+    background: dark.$pageBG;
-    color: white;
+    color: dark.$pageFG;
   }
 }
 
+main {
+	transition: 0.24s;
+
+	&.buffering {
+		transform: scale(1.01);
+		transition: 0.16s;
+		opacity: 0.4;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	&.transition {
+		transform: scale(0.96);
+		transition: 0.16s;
+		opacity: 0;
+	}
+}
+
 .container {
   max-width: 960px;
 
@@ -28,18 +55,112 @@ ul, ol {
 
 p {
   line-height: 1.6;
-  opacity: 0.92;
+  opacity: 0.88;
 }
 
 img {
   max-width: 100%;
 }
 
-a {
+.cards {
-  color: #527D52;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	width: 100%;
+
+	@media (max-width: 600px) {
+		gap: 12px;
+	}
+}
+
+.card {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	max-width: 100%;
+	height: 150px;
+  text-decoration: none;
+  border-radius: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+  overflow: hidden;
+
+	outline: 1px solid light.$cardNormalBorder;
+  background: light.$cardNormalBG;
+  color: light.$cardNormalFG;
 
   @media (prefers-color-scheme: dark) {
-    color: #D0DFD0;
+    outline-color: dark.$cardNormalBorder;
+    background: dark.$cardNormalBG;
+  	color: dark.$cardNormalFG;
+  }
+
+  transition: 0.24s;
+
+  &:hover {
+  	outline-width: 2px;
+	  outline-color: light.$cardActiveBorder;
+	  background: light.$cardActiveBG;
+	  color: light.$cardActiveFG;
+
+	  @media (prefers-color-scheme: dark) {
+	    outline-color: dark.$cardActiveBorder;
+	    background: dark.$cardActiveBG;
+	  	color: dark.$cardActiveFG;
+	  }
+		
+		transition: 0.08s;
+
+	  .icon {
+	  	transition: 0.48s;
+  		transform: scale(1.2);
+  	}
+  }
+
+	width: calc(100% / 3 - 6px);
+
+  @media (max-width: 800px) {
+		width: calc(50% - 4px);
+	}
+
+	@media (max-width: 600px) {
+  	border-radius: 8px;
+		width: 100%;
+	}
+
+  h1 {
+  	margin: 0;
+  	font-size: 1.2em;
+  	font-weight: 400;
+  }
+
+  .icon {
+  	position: absolute;
+  	top: 0;
+  	right: 0;
+  	height: 100%;
+  	aspect-ratio: 1/1;
+  	object-fit: cover;
+
+  	mask-image: linear-gradient(to right, transparent, rgba(red, 0.3));
+  	@media (prefers-color-scheme: dark) {
+  		mask-image: linear-gradient(to right, transparent, rgba(red, 0.1));
+  	}
+
+  	transition: 0.64s;
+  }
+
+  p {
+  	margin: 8px 0;
+  }
+}
+
+a {
+  color: light.$linkColor;
+
+  @media (prefers-color-scheme: dark) {
+    color: dark.$linkColor;
   }
 
   &:visited {
@@ -49,12 +170,12 @@ a {
 
 .pageHero {
   background-image:
-    linear-gradient(rgba(white, 0.9),rgba(white, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
+    linear-gradient(rgba(light.$headerOverlay, 0.9),rgba(light.$headerOverlay, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
     url('/img/Panorama-Lens-Blur.png');
 
   @media (prefers-color-scheme: dark) {
     background-image:
-    linear-gradient(rgba(#101610, 0.9),rgba(#101610, 0.9)),
+    linear-gradient(rgba(dark.$headerOverlay, 0.9),rgba(dark.$headerOverlay, 0.9)),
     url('/img/Panorama-Lens-Blur.png');
   }
 
@@ -122,7 +243,7 @@ a {
   }
 }
 
-.Nav-Toggle {
+.navToggle {
   @media (min-width: 601px) {
     display: none;
   }
@@ -133,8 +254,13 @@ a {
   right: 8px;
   font-size: 18px;
 
-  background: #527D52;
+  background: light.$btnNormalBG;
-  color: #fff;
+  color: light.$btnNormalFG;
+
+  @media (prefers-color-scheme: dark) {
+  	background: dark.$btnNormalBG;
+  	color: dark.$btnNormalFG;
+  }
 
   padding: 8px 24px;
 
@@ -149,14 +275,14 @@ a {
 .pageNav {
   width: 100%;
 
-  border: solid #D0DFD0;
+  border: solid light.$navBorder;
   border-width: 0 0 1px 0;
 
-  background: #F9FFF9;
+  background: light.$navBG;
 
   @media (prefers-color-scheme: dark) {
-    border-color: #575F57;
+    border-color: dark.$navBorder;
-    background: #272F27;
+    background: dark.$navBG;
   }
 
   > .container {
@@ -176,17 +302,24 @@ a {
       height: 100%;
       z-index: 9;
 
-      background: inherit;
+	  	backdrop-filter: blur(15px);
+	    background: rgba(light.$navBG, 0.86);
+	  	@media (prefers-color-scheme: dark) {
+	    	background: rgba(dark.$navBG, 0.9);
+	  	}
+
+    	justify-content: center;
+      flex-direction: column;
+      gap: 64px;
       
-      transition: 0.12s;
+      &, > * { transition: 0.16s }
 
       &:not(.openned) {
         opacity: 0;
         pointer-events: none;
 
-        transform: scale(1.2);
+        //&, > * { transition: 0.12s }
-
+        > * { transform: translateX(32px); }
-        transition: 0.24s;
       }
     }
 
@@ -195,34 +328,39 @@ a {
 
       display: flex;
       flex-wrap: wrap;
+      align-items: flex-end;
 
-      gap: 8px;
+      gap: 6px;
 
       @media (max-width: 600px) {
-        width: 100%;
+      	width: 100%;
         flex-direction: column;
-        gap: 6px;
-        align-items: center;
       }
 
       > a {
+        font-family: Outfit;
         user-select: none;
 
-        font-size: 18px;
+        font-size: 16px;
         box-sizing: border-box;
-        color: #7E9E7E;
+        color: light.$navLinkNormalColor;
+        @media (prefers-color-scheme: dark) { color: dark.$navLinkNormalColor; }
 
         @media (max-width: 600px) {
-          font-size: 24px;
+          font-size: 28px;
-          width: 100%;
+          outline: none;
-          padding: 12px 24px;
+          padding: 8px 32px;
-          text-align: center;
+          text-align: end;
+
+          &.active::before {
+          	content: "➤"; // i know..
+          }
         }
 
 
         text-decoration: none;
 
-        padding: 8px 24px;
+        padding: 6px 20px;
 
         border-radius: 32px;
 
@@ -230,27 +368,37 @@ a {
 
         transition: 0.24s;
 
+        &.active {
+        	pointer-events: none;
+        }
+
         &:hover, &.active {
           //background: rgba(15, 23, 42, 0.1);
-          outline-color: #D0DFD0;
+          color: light.$navLinkActiveColor;
-
+          outline-color: light.$navLinkOutlineColor;
-          color: #527D52;
 
           @media (prefers-color-scheme: dark) {
-            color: #DEFEDE;
+            color: dark.$navLinkActiveColor;
-            outline-color: #707F70;
+            outline-color: dark.$navLinkOutlineColor;
           }
 
 
           transition: 0.08s;
         }
 
-        &.buttonPrimary {
+        @media (min-width: 601px) {
-          background: #527D52;
+	        &.buttonPrimary {
-          color: #fff;
+	          background: light.$btnNormalBG;
+	          color: light.$btnNormalFG;
 
-          font-weight: bold;
+	          @media (prefers-color-scheme: dark) {
-        }
+	            background: dark.$btnNormalBG;
+	            color: dark.$btnNormalFG;
+	          }
+
+	          font-weight: 700 !important;
+	        }
+	      }
       }
     }
   }

css/style.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap";body,input{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;font-weight:500}.pageHero{font-family:"Comic Neue","Comic Sans MS","Noto Color Emoji",sans-serif}body{background:#fff;margin:0}@media(prefers-color-scheme: dark){body{background:#202120;color:#fff}}.container{max-width:960px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}ul,ol{list-style-position:inside}p{line-height:1.6;opacity:.92}img{max-width:100%}a{color:#527d52}@media(prefers-color-scheme: dark){a{color:#d0dfd0}}a:visited{opacity:.9}.pageHero{background-image:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),url("/img/Panorama-Lens-Blur.png");background-position:center;background-size:cover;height:220px}@media(prefers-color-scheme: dark){.pageHero{background-image:linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)),url("/img/Panorama-Lens-Blur.png")}}.pageHero>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageHero>.container{justify-content:center}}.pageHero>.container>div{display:flex;flex-direction:column;gap:12px}.pageHero>.container>div.Branding{align-items:flex-start}@media(max-width: 600px){.pageHero>.container>div.Branding{align-items:center}}@media(prefers-color-scheme: dark){.pageHero>.container>div.Branding img{filter:invert(1)}}.pageHero>.container>div.Branding span{font-size:24px;opacity:.75}.pageHero>.container>div.Server-Information{align-items:center;gap:4px}@media(max-width: 600px){.pageHero>.container>div.Server-Information{display:none}}.pageHero>.container>div.Server-Information input{text-align:center;font-size:24px}.pageHero>.container>div.Server-Information input:not(:hover,:focus){color:inherit;border-color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.Nav-Toggle{z-index:10;position:fixed;top:8px;right:8px;font-size:18px;background:#527d52;color:#fff;padding:8px 24px;border-radius:32px;font-weight:bold;user-select:none;cursor:pointer}@media(min-width: 601px){.Nav-Toggle{display:none}}.pageNav{width:100%;border:solid #d0dfd0;border-width:0 0 1px 0;background:#f9fff9}@media(prefers-color-scheme: dark){.pageNav{border-color:#575f57;background:#272f27}}.pageNav>.container{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageNav>.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9;background:inherit;transition:.12s}.pageNav>.container:not(.openned){opacity:0;pointer-events:none;transform:scale(1.2);transition:.24s}}.pageNav>.container>div{margin:0;display:flex;flex-wrap:wrap;gap:8px}@media(max-width: 600px){.pageNav>.container>div{width:100%;flex-direction:column;gap:6px;align-items:center}}.pageNav>.container>div>a{user-select:none;font-size:18px;box-sizing:border-box;color:#7e9e7e;text-decoration:none;padding:8px 24px;border-radius:32px;outline:solid rgba(0,0,0,0) 2px;transition:.24s}@media(max-width: 600px){.pageNav>.container>div>a{font-size:24px;width:100%;padding:12px 24px;text-align:center}}.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{outline-color:#d0dfd0;color:#527d52;transition:.08s}@media(prefers-color-scheme: dark){.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#defede;outline-color:#707f70}}.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff;font-weight:bold}.pageFooter{opacity:.8}.pageFooter>.SNS-Links{display:flex;flex-wrap:wrap;gap:16px}.pageFooter>.SNS-Links>a{display:flex;gap:8px;font-size:18px;color:inherit}.pageFooter>.SNS-Links>a img{width:1em}@media(prefers-color-scheme: dark){.pageFooter>.SNS-Links>a img{filter:invert(1)}}.pageFooter>.SNS-Links>a:not(:hover,:focus){text-decoration:none}/*# sourceMappingURL=style.css.map */

css/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ,6JAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECZF,KACE,gBACA,SAEA,mCAJF,KAKI,mBACA,YAIJ,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,EACE,cAEA,mCAHF,EAII,eAGF,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,YAIE,WAEA,eACA,QACA,UACA,eAEA,mBACA,WAEA,iBAEA,mBAEA,iBACA,iBAEA,eApBA,yBADF,YAEI,cAsBJ,SACE,WAEA,qBACA,uBAEA,mBAEA,mCARF,SASI,qBACA,oBAGF,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEA,mBAEA,gBAEA,kCACE,UACA,oBAEA,qBAEA,iBAIJ,wBACE,SAEA,aACA,eAEA,QAEA,yBARF,wBASI,WACA,sBACA,QACA,oBAGF,0BACE,iBAEA,eACA,sBACA,cAUA,qBAEA,iBAEA,mBAEA,gCAEA,gBAhBA,yBAPF,0BAQI,eACA,WACA,kBACA,mBAcF,iEAEE,sBAEA,cAQA,gBANA,mCANF,iEAOI,cACA,uBAOJ,wCACE,mBACA,WAEA,iBAWV,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.css"}

css/style.min.css

@@ -1 +0,0 @@
-style.css

css/style.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ,gRCCN,UACA,WDCA,sDAGF,kBACE,mDAEA,kBENF,KACE,mBAGF,WACE,iBAEA,WAEA,cAGF,MACE,2BAGF,UACE,2DAEA,2BAEA,WAEA,aAEA,qBACE,0BAEA,cAEA,yBAEA,gCACE,YAEA,aACA,mBAEA,mBACA,8BAKN,SACE,aAEA,mBAEA,oBACE,eAEA,aACA,mBAEA,mBACA,8BAEA,uBACE,gBAEA,aAEA,QAGE,4BACE,cAEA,qBAEA,iBAEA,mBAEA,qEACE,6BAGF,0CACE,mBACA,WAQZ,aACE,cAGF,YACE,aACA,mBAEA,mBACA,8BAEA,kBACE,aACA,sBAGF,mBACE,gBAEA,aAEA,sBACE,YAEA,wBACE,cAEA,WACA,YAEA,qBAEA,8BACE","file":"style.min.css"}
+{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss","src/colors/_light.scss","src/colors/_dark.scss"],"names":[],"mappings":"CAEQ,qKAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECXF,EACC,0CAGD,4BAEA,KACE,SAEA,WCXO,KDYP,MCXO,KDaP,mCANF,KAOI,WEfK,QFgBL,MEfK,MFmBT,KACC,gBAEA,eACC,sBACA,gBACA,WACA,oBACA,iBAGD,gBACC,sBACA,gBACA,UAIF,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,OACC,aACA,eACA,QACA,WAEA,yBAND,OAOE,UAIF,MACC,kBACA,aACA,sBACA,sBACA,eACA,aACC,qBACA,kBACA,iBACA,eACA,gBAED,0BACC,WCzEa,QD0Eb,MCvFO,KD+FP,gBAsBD,iCA5BC,mCAjBF,MAkBI,cE3Ee,QF4Ef,WE9EW,QF+EZ,ME5FM,MFiGP,YACC,kBACA,cCxFS,QDyFT,WC1FK,QD2FL,MCnGM,QD2GP,gBANC,mCAND,YAOG,cE7FO,QF8FP,WE/FG,QFgGJ,MEvGQ,SF4GT,kBACC,gBACA,qBAMF,yBA/CF,MAgDE,uBAGD,yBAnDD,MAoDG,kBACD,YAGA,SACC,SACA,gBACA,gBAGD,YACC,kBACA,MACA,QACA,YACA,iBACA,iBAEA,wEAKA,gBAJA,mCATD,YAUE,yEAMF,QACC,aAIH,EACE,MC1JO,QD4JP,mCAHF,EAII,ME5JQ,SF+JV,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,WAIE,WAEA,eACA,QACA,UACA,eAEA,WC3PO,QD4PP,MCxPY,KD+PZ,iBAEA,mBAEA,iBACA,iBAEA,eAzBA,yBADF,WAEI,cAYF,mCAdF,WAeG,WE/PM,QFgQN,ME5PW,MFyQd,SACE,WAEA,qBACA,uBAEA,WC3QM,QD6QN,mCARF,SASI,aE7QQ,QF8QR,WE/QI,SFkRN,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEF,2BACC,iCAKA,uBACC,sBACA,UANF,yDAnBF,oBAoBI,8BAXF,yBAkBE,0DAEA,kCACE,UACA,oBAGA,gEAIJ,wBACE,SAEA,aACA,eACA,qBAEA,QAEA,yBATF,wBAUG,WACC,uBAGF,0BACE,mBACA,iBAEA,eACA,sBACA,MC7Ta,QD4Ub,qBAEA,iBAEA,mBAEA,gCAEA,gBAtBA,mCAPF,0BAOwC,MElUzB,SFoUb,yBATF,0BAUI,eACA,aACA,iBACA,eAEA,yCACC,aAeH,iCACC,oBAGD,iEAEE,MCnXD,QDoXC,cC9VY,QDsWZ,gBANA,mCALF,iEAMI,MEnWS,QFoWT,cEtWU,SF6Wd,yBACC,wCACE,WCjYF,QDkYE,MC9XG,KDqYH,4BALA,yDAJF,wCAKI,WErYJ,QFsYI,MElYC,MFiZd,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.min.css"}

index.php

@@ -14,8 +14,15 @@
   $nations = array(
     'rop' => array(
       'name' => 'Republic of Panorama',
-      'flag' => 'https://git.theclashfruit.me/CRSS/CRSS/raw/branch/main/Nations/Republic%20of%20Panorama/Flag.svg',
+      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Republic%20of%20Panorama/Flag.svg',
       'short' => 'rop',
+      'description' => 'Short description of R.O.P.',
+    ),
+    'drr' => array(
+      'name' => 'Democratic Republic of Rayland',
+      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Democratic%20Republic%20of%20Rayland/bannre.png',
+      'short' => 'drr',
+      'description' => 'Short description of D.R.R.',
     )
   );
   
@@ -26,7 +33,13 @@
 
   $json = json_decode($res->body, true);
 
-  $twig->addGlobal('playerCount', count($json));
+  if($json != null) {
+    $twig->addGlobal('playerCount', count($json));
+  }
+
+  $twig->addGlobal('nations', $nations);
+
+  $twig->addGlobal('reduced', isset($_GET['reduced']));
 
   $router->get('/', function() {
     global $twig;
@@ -56,6 +69,11 @@
     global $twig;
 
     $twig->addGlobal('pageUri', '/map');
+
+    if(isset($_GET['center']))
+      $twig->addGlobal('center', $_GET['center']);
+    else
+      $twig->addGlobal('center', '0;0');
   
     echo $twig->render('map.twig');
   });
@@ -76,6 +94,20 @@
     }
   });
 
+  $router->get('/nation/([a-z]+)', function ($nation) {
+    global $twig, $mysql, $nations;
+
+    $twig->addGlobal('pageUri', '/nation/' . $nation);
+
+    if(!$nations[$nation]) {
+      http_response_code(404);
+
+      echo $twig->render('404.twig');
+    } else {
+      echo $twig->render('nation.twig', array('nation' => $nations[$nation]));
+    }
+  });
+
   $router->get('/u/([a-z0-9_\.]+)', function($name) {
     global $twig, $mysql, $discord;
 

js/main.js

@@ -0,0 +1,13 @@
+import { enableTransition } from "/js/trans.js";
+
+function enableLinks() {
+	document.querySelectorAll(".transitionEnabled").forEach( hyperlinkElement => {
+		enableTransition(hyperlinkElement);
+		hyperlinkElement.classList.remove("transitionEnabled");
+	});
+}
+
+enableLinks();
+
+window.addEventListener("transitionEnd", enableLinks);
+

js/map.js

@@ -1,7 +1,5 @@
 L.TileLayer.CRSSLayer = L.TileLayer.extend({
   getTileUrl: function(coordinate) {
-    console.log(coordinate);
-
     const tileX = coordinate.x;
     const tileY = coordinate.y;
 
@@ -23,7 +21,7 @@ L.tileLayer.crssLayer = function(templateUrl, options) {
 }
 
 let mapLayer = L.tileLayer.crssLayer('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png', {
-  attribution: '&copy; <a href="https://crss.blurryface.xyz/">CRSS</a> players',
+  attribution: '&copy; <a href="https://crss.blurryface.xyz/">CRSS</a> Players | Tiles With <a href="https://unmined.net/">uNmINeD</a>.',
 
   tileSize: 256,
 
@@ -43,7 +41,7 @@ let ropMarkers = L.layerGroup([
     .bindPopup('Info Centre')
 ]);
 
-let rorMarkers = L.layerGroup([
+let drrMarkers = L.layerGroup([
 
 ]);
 
@@ -61,13 +59,25 @@ let playerMarkers = L.layerGroup([
 console.log(L.CRS.Simple.infinite)
 
 let map = L.map('map', {
-  layers: [mapLayer, miscMarkers, ropMarkers, rorMarkers, playerMarkers],
+  layers: [ 
+    mapLayer,
+
+    miscMarkers,
+
+    ropMarkers,
+    drrMarkers,
+    
+    playerMarkers
+  ],
   preferCanvas: true,
   crs: L.Util.extend(L.CRS.Simple, {
     transformation: new L.Transformation(1, 0, 1, 0),
     projection: L.Projection.LonLat
   }),
-}).setView([0, 0], 2);
+}).setView([ 
+  parseInt(center.split(';')[1]),
+  parseInt(center.split(';')[0]) 
+], 2);
 
 let baseMaps = {
   "Overworld": mapLayer
@@ -77,7 +87,7 @@ let overlayMaps = {
   "Players": playerMarkers,
   "Miscellaneous Markers": miscMarkers,
   "Markers in RoP": ropMarkers,
-  "Markers in DRoR": rorMarkers,
+  "Markers in DRR": drrMarkers,
 };
 
 let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
@@ -114,7 +124,6 @@ const updatePlayerPos = (players) =>{
         popupAnchor: [0, -14]
       });
 
-
       const marker = L.marker([player.location.z, player.location.x], { icon: playerIcon })
         .bindPopup(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
 

js/nav.js

@@ -1,16 +1,18 @@
 const $ = selector => document.querySelector(selector);
 
-const navToggle = $(".Nav-Toggle");
+const navToggle = $(".navToggle");
 const menu = $(".pageNav > .container");
 
 navToggle.onclick = () => {
-	const menuToggled = menu.classList.contains("openned");
+  const menuToggled = menu.classList.contains("openned");
 
-	if (menuToggled) {
+  if (menuToggled) {
-		menu.classList.remove("openned");
+    menu.classList.remove("openned");
-	} else {
+  } else {
-		menu.classList.add("openned");
+    menu.classList.add("openned");
-	}
+  }
 
-	navToggle.innerHTML = menuToggled ? "Menu" : "Close";
+  navToggle.innerHTML = menuToggled ? "Menu" : "Close";
-}
+}
+
+window.addEventListener("transitionBuffering", () => menu.classList.remove("openned"));

js/trans.js

@@ -0,0 +1,66 @@
+/*
+ *  Myadeleines' Simple Page Transition Script. "Trans" for short. :trol:
+ *  Making CSS-powered animated transitions between pages possible.
+ *
+ *  Licensed under the Apache License. Please refer to the LICENSE file.
+ */
+
+const transitionBufferingEvent = new Event("transitionBuffering");
+const transitionStartEvent = new Event("transitionStart");
+const transitionEndEvent = new Event("transitionEnd");
+const $ = selector => document.querySelector(selector);
+const parser = new DOMParser();
+const mainElement = $("main");
+
+export function enableTransition( hyperlinkElement ) {
+  hyperlinkElement.addEventListener("click", event => {
+    event.preventDefault(); // Browser won't load the page when the hyperlink is pressed.
+
+    loadURL(hyperlinkElement.href, true, hyperlinkElement);
+  });
+}
+
+function loadURL( targettedURL, updateURL, hyperlinkElement ) {
+  const activeHyperlink = $(".pageNav .active");
+
+  mainElement.classList.add("buffering");
+  window.dispatchEvent(transitionBufferingEvent);
+
+  fetch(targettedURL + "?reduced")
+    .catch(error => {
+      console.log(error);
+      alert(error);
+      mainElement.classList.remove("buffering");
+    })
+    .then(response => response.text().then( fetchedPage => {
+      fetchedPage = parser.parseFromString(fetchedPage, "text/html");
+      fetchedPage = {
+        content: fetchedPage.querySelector("main").innerHTML,
+        title: fetchedPage.querySelector("title").innerHTML,
+      }
+
+      if (activeHyperlink) activeHyperlink.classList.remove("active");
+      if (hyperlinkElement) hyperlinkElement.classList.add("active");
+
+      if (updateURL) history.pushState({}, fetchedPage.title, targettedURL);
+      $("title").innerHTML = fetchedPage.title;
+
+      mainElement.classList.remove("buffering");
+      mainElement.classList.add("transition");
+
+      let transitionDuration = getComputedStyle(mainElement).transitionDuration;
+      transitionDuration = parseFloat(transitionDuration) * 1000;
+      
+      window.dispatchEvent(transitionStartEvent);
+
+      setTimeout(() => {
+        mainElement.innerHTML = fetchedPage.content;
+        mainElement.classList.remove("transition");
+        window.dispatchEvent(transitionEndEvent);
+      }, transitionDuration);
+    }));
+}
+
+window.addEventListener("popstate", Event => {
+  loadURL(window.location.href, false)
+});

template/404.twig

@@ -4,14 +4,12 @@
 
 {% include 'includes/nav.twig' with {'page': '404',} %}
     
-<main class="pageContent" id="content">
+<main class="pageContent container">
-  <div class="container">
+  <h1>Not found! :<</h1>
-    <h1>Not found! :<</h1>
+  <p>
-    <p>
+    This page is nowhere to be found!<br>
-      This page is nowhere to be found!<br>
+    Go on Discord and complain about it to Clash or Mya!!
-      Go on Discord and complain about it to Clash or Mya!!
+  </p>
-    </p>
-  </div>
 </main>
 
 {% include 'includes/footer.twig' %}

template/includes/foot.twig

@@ -1,2 +1,4 @@
+{% if not reduced %}
   </body>
-</html>
+</html>
+{% endif %}

template/includes/footer.twig

@@ -1,3 +1,4 @@
+{% if not reduced %}
 <div class="container">
   <ins data-revive-zoneid="3" data-revive-id="5ae65e2e4729376e04e82303cef4f977"></ins>
   <script async src="//ads.theclashfruit.me/www/delivery/asyncjs.php"></script>
@@ -22,10 +23,11 @@
         <img src="/img/Mastodon.svg" alt="Mastodon's icon">
         <span>TheClashFruit</span>
       </a>
-      <a href="https://mas.to/@Myadeleines" target="_blank" rel="me">
+      <a href="https://wetdry.world/@Myadeleines" target="_blank" rel="me">
         <img src="/img/Mastodon.svg" alt="Mastodon's icon">
         <span>Myadeleines</span>
       </a>
   </div>
 
-</footer>
+</footer>
+{% endif %}

template/includes/head.twig

@@ -1,3 +1,5 @@
+{% if reduced %} <title>{{ pageTitle }} &nbsp;&bull;&nbsp; Clyde's Real Survival SMP</title> {% endif %}
+{% if not reduced %}
 <!doctype html>
 <html lang="en">
   <head>
@@ -5,7 +7,7 @@
   
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   
-    <title>Clyde's Real Survival SMP &bull; {{ pageTitle }}</title>
+    <title>{{ pageTitle }} &nbsp;&bull;&nbsp; Clyde's Real Survival SMP</title> 
 
     <meta name="name" content="Clyde's Real Survival SMP &bull; {{ pageTitle }}" />
     <meta name="description" content="A very cool minecraft SMP that updates to every version starting from b1.0." />
@@ -27,6 +29,7 @@
     <meta name="twitter:description" content="A very cool minecraft SMP that updates to every version starting from b1.0." />
     <meta name="twitter:image" content="https://crss.blurryface.xyz/img/social_image.png" />
 
+    <script src="/js/main.js" type="module"></script>
 
     {% if pageTitle == 'Map' %}
       <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
@@ -57,6 +60,10 @@
           image-rendering: pixelated;
         }
 
+        .leaflet-control {
+          color: #333;
+        }
+
         .leaflet-control-mouseposition {
           background: rgba(255, 255, 255, 0.8);
 
@@ -79,4 +86,4 @@
     <link rel="icon"       href="/favicon.ico">
     <link rel="stylesheet" href="/css/style.min.css">
   </head>
-  <body>
+  <body> {% endif %}

template/includes/hero.twig

@@ -1,3 +1,4 @@
+{% if not reduced %}
 <header class="pageHero">
   <div class="container">
 
@@ -10,9 +11,10 @@
     <!-- Right -->
     <div class="Server-Information">
       <span>Server address:</span>
-      <input type="text" size="10" readonly value="play.blurryface.xyz">
+      <input type="text" size="14" readonly value="play.blurryface.xyz">
-      <span>Version: 1.3.2</span>
+      <span>Version: 1.5.2</span>
     </div>
 
   </div>
-</header>
+</header>
+{% endif %}

template/includes/nav.twig

@@ -1,26 +1,23 @@
+{% if not reduced %}
 <script src="/js/nav.js" type="module"></script>
-<div class="Nav-Toggle">Menu</div>
+<div class="navToggle">Menu</div>
 <nav class="pageNav">
   <div class="container">
     <div class="navLeft">
-      <a {% if page == 'home' %} class="active" {% else %} href="/" {% endif %}>
+      <a class="transitionEnabled {% if page == 'home' %} active {% endif %}" href="/">
         Home
       </a>
-      <a href="https://youtube.com/@CRSS666">Videos</a>
+      <a class="transitionEnabled {% if page == 'gallery' %} active {% endif %}" href="/gallery">
-      <a {% if page == 'gallery' %} class="active" {% else %} href="/gallery" {% endif %}>
         Gallery
       </a>
-      <a {% if page == 'nations' %} class="active" {% else %} href="/nations" {% endif %}>
+      <a class="transitionEnabled {% if page == 'nations' %} active {% endif %}" href="/nations">
         Nations
       </a>
-      <!--<a {% if page == 'rules' %} class="active" {% else %} href="/rules" {% endif %}>
+      <a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
-        Rules
+        Map & Rails
-      </a>-->
-      <a {% if page == 'map.js' %} class="active" {% else %} href="/map" {% endif %}>
-        Map
       </a>
     </div>
-    <div class="navRight" style="display: none;">
+    <div class="navRight">
       {% if user %}
         <a class="userButton {% if page == 'profile' %}active{% endif %}" href="{% if page == 'profile' %}#{% else %}/profile{% endif %}">
           {{ user.global_name }}
@@ -32,4 +29,5 @@
       {% endif %}
     </div>
   </div>
-</nav>
+</nav>
+{% endif %}

template/index.twig

@@ -4,23 +4,20 @@
 
 {% include 'includes/nav.twig' with {'page': 'home',} %}
     
-<main>
+<main class="pageContent container">
-  <div class="container">
+  <h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
-    <h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
+  <p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
-    <p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
+  
-    
+  <h2 id="rules">Rules</h2>
-    <h2 id="rules">Rules</h2>
+  <ol>
-    <ol>
+    <li>
-      <li>
+      The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
-        The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
+    </li>
-      </li>
+    <li>
-      <li>
+      Do not modify (or destroy) other players' constructions, or take their items, without their permission. <b>TL;DR Do not grief or steal.</b>
-        Do not modify (or destroy) other players' constructions, or take their items, without their permission. <b>TL;DR Do not grief or steal.</b>
+    </li>
-      </li>
+  </ol>
-    </ol>
+  <b>Failing to follow these basic rules will result in a ban.</b>
-    <b>Failing to follow these basic rules will result in a ban.</b>
-
-  </div>
 </main>
 
 {% include 'includes/footer.twig' %}

template/map.twig

@@ -3,6 +3,7 @@
 <div id="map"></div>
 <a id="homeLink" href="/">Go Home</a>
 
+<script>const center = "{{ center }}";</script>
 <script src="js/map.js"></script>
 
 {% include 'includes/foot.twig' %}

template/nation.twig

@@ -0,0 +1,22 @@
+{% include 'includes/head.twig' with {'pageTitle': nation.name} %}
+
+{% include 'includes/hero.twig' %}
+
+{% include 'includes/nav.twig' with {'page': 'nation'} %}
+    
+<main class="pageContent container">
+  <ul>
+    <li>
+      code: {{ nation.short }}
+    </li>
+    <li>
+      full_name: {{ nation.name }}
+    </li>
+    <li>
+      flag: <img height="32px" src="{{ nation.flag }}"  alt="{{ nation.name }}'s flag." />
+    </li>
+  </ul>
+</main>
+
+{% include 'includes/footer.twig' %}
+{% include 'includes/foot.twig' %}

template/nations.twig

@@ -4,15 +4,18 @@
 
 {% include 'includes/nav.twig' with {'page': 'nations'} %}
 
-<main class="pageContent" id="content">
+<main class="pageContent container">
-  <div class="container">
+  <h1>Nations</h1>
-    <h1>Nations</h1>
+  <div class="cards">
-    <ul>
+    {% for nation in nations %}
-      <li>
+      <a class="card transitionEnabled" href="/nation/{{ nation.short }}">
-        <a href="/nation/rop">Republic of Panorama</a>
+        <h1>{{ nation.name }}</h1>
-      </li>
+        <p>{{ nation.description }}</p>
-    </ul>
+        <img class="icon" src="{{ nation.flag }}">
+      </a>
+    {% endfor %}
   </div>
+
 </main>
 
 {% include 'includes/footer.twig' %}