forked from CRSS/Website
Forgejo
commit
73062a8729
GPG key ID:
E59A305B48F15D31
Binary file not shown.
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
}
|
||||
28
css/src/colors/_dark.scss
Normal file
28
css/src/colors/_dark.scss
Normal file
|
|
@ -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;
|
||||
32
css/src/colors/_light.scss
Normal file
32
css/src/colors/_light.scss
Normal file
|
|
@ -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;
|
||||
|
|
@ -1,16 +1,43 @@
|
|||
//@import "reset";
|
||||
@import "fonts";
|
||||
@use "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;
|
||||
color: white;
|
||||
background: dark.$pageBG;
|
||||
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 {
|
||||
color: #527D52;
|
||||
.cards {
|
||||
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;
|
||||
color: #fff;
|
||||
background: light.$btnNormalBG;
|
||||
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;
|
||||
background: #272F27;
|
||||
border-color: dark.$navBorder;
|
||||
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.24s;
|
||||
//&, > * { transition: 0.12s }
|
||||
> * { transform: translateX(32px); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
outline: none;
|
||||
padding: 8px 32px;
|
||||
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: #527D52;
|
||||
color: light.$navLinkActiveColor;
|
||||
outline-color: light.$navLinkOutlineColor;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: #DEFEDE;
|
||||
outline-color: #707F70;
|
||||
color: dark.$navLinkActiveColor;
|
||||
outline-color: dark.$navLinkOutlineColor;
|
||||
}
|
||||
|
||||
|
||||
transition: 0.08s;
|
||||
}
|
||||
|
||||
&.buttonPrimary {
|
||||
background: #527D52;
|
||||
color: #fff;
|
||||
@media (min-width: 601px) {
|
||||
&.buttonPrimary {
|
||||
background: light.$btnNormalBG;
|
||||
color: light.$btnNormalFG;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: dark.$btnNormalBG;
|
||||
color: dark.$btnNormalFG;
|
||||
}
|
||||
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
css/style.min.css
vendored
2
css/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"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.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"}
|
||||
|
|
@ -16,11 +16,13 @@
|
|||
'name' => 'Republic of Panorama',
|
||||
'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'
|
||||
'short' => 'drr',
|
||||
'description' => 'Short description of D.R.R.',
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -37,6 +39,8 @@
|
|||
|
||||
$twig->addGlobal('nations', $nations);
|
||||
|
||||
$twig->addGlobal('reduced', isset($_GET['reduced']));
|
||||
|
||||
$router->get('/', function() {
|
||||
global $twig;
|
||||
|
||||
|
|
|
|||
13
js/main.js
Normal file
13
js/main.js
Normal file
|
|
@ -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);
|
||||
|
||||
20
js/nav.js
20
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) {
|
||||
menu.classList.remove("openned");
|
||||
} else {
|
||||
menu.classList.add("openned");
|
||||
}
|
||||
if (menuToggled) {
|
||||
menu.classList.remove("openned");
|
||||
} else {
|
||||
menu.classList.add("openned");
|
||||
}
|
||||
|
||||
navToggle.innerHTML = menuToggled ? "Menu" : "Close";
|
||||
}
|
||||
navToggle.innerHTML = menuToggled ? "Menu" : "Close";
|
||||
}
|
||||
|
||||
window.addEventListener("transitionBuffering", () => menu.classList.remove("openned"));
|
||||
66
js/trans.js
Normal file
66
js/trans.js
Normal file
|
|
@ -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)
|
||||
});
|
||||
|
|
@ -4,14 +4,12 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': '404',} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<h1>Not found! :<</h1>
|
||||
<p>
|
||||
This page is nowhere to be found!<br>
|
||||
Go on Discord and complain about it to Clash or Mya!!
|
||||
</p>
|
||||
</div>
|
||||
<main class="pageContent container">
|
||||
<h1>Not found! :<</h1>
|
||||
<p>
|
||||
This page is nowhere to be found!<br>
|
||||
Go on Discord and complain about it to Clash or Mya!!
|
||||
</p>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
{% if not reduced %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
{% endif %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
{% if reduced %} <title>{{ pageTitle }} • 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 • {{ pageTitle }}</title>
|
||||
<title>{{ pageTitle }} • Clyde's Real Survival SMP</title>
|
||||
|
||||
<meta name="name" content="Clyde's Real Survival SMP • {{ 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"/>
|
||||
|
|
@ -83,4 +86,4 @@
|
|||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="/css/style.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<body> {% endif %}
|
||||
|
|
@ -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">
|
||||
<span>Version: 1.3.2</span>
|
||||
<input type="text" size="14" readonly value="play.blurryface.xyz">
|
||||
<span>Version: 1.5.2</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
{% endif %}
|
||||
|
|
@ -1,23 +1,20 @@
|
|||
{% 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 {% if page == 'gallery' %} class="active" {% else %} href="/gallery" {% endif %}>
|
||||
<a class="transitionEnabled {% if page == 'gallery' %} active {% endif %}" href="/gallery">
|
||||
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 %}>
|
||||
Rules
|
||||
</a>-->
|
||||
<a {% if page == 'map.js' %} class="active" {% else %} href="/map" {% endif %}>
|
||||
Map
|
||||
<a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
|
||||
Map & Rails
|
||||
</a>
|
||||
</div>
|
||||
<div class="navRight">
|
||||
|
|
@ -32,4 +29,5 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
|
@ -4,23 +4,20 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'home',} %}
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<h2 id="rules">Rules</h2>
|
||||
<ol>
|
||||
<li>
|
||||
The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
|
||||
</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>
|
||||
</li>
|
||||
</ol>
|
||||
<b>Failing to follow these basic rules will result in a ban.</b>
|
||||
|
||||
</div>
|
||||
<main class="pageContent container">
|
||||
<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>
|
||||
|
||||
<h2 id="rules">Rules</h2>
|
||||
<ol>
|
||||
<li>
|
||||
The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
|
||||
</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>
|
||||
</li>
|
||||
</ol>
|
||||
<b>Failing to follow these basic rules will result in a ban.</b>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,18 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'nation'} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="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>
|
||||
</div>
|
||||
<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' %}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,18 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'nations'} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<h1>Nations</h1>
|
||||
<ul>
|
||||
{% for nation in nations %}
|
||||
<li>
|
||||
<a href="/nation/{{ nation.short }}">{{ nation.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<main class="pageContent container">
|
||||
<h1>Nations</h1>
|
||||
<div class="cards">
|
||||
{% for nation in nations %}
|
||||
<a class="card transitionEnabled" href="/nation/{{ nation.short }}">
|
||||
<h1>{{ nation.name }}</h1>
|
||||
<p>{{ nation.description }}</p>
|
||||
<img class="icon" src="{{ nation.flag }}">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue