forked from CRSS/Website
Feat: Added cards in Nations and improved Drawer.
This commit is contained in:
parent
2cd9377649
commit
7fca31ab3a
|
@ -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=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 {
|
body, input {
|
||||||
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
|
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
|
||||||
|
|
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,24 +1,37 @@
|
||||||
@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 {
|
body {
|
||||||
background: white;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
background: light.$pageBG;
|
||||||
|
color: light.$pageFG;
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
background: #202120;
|
background: dark.$pageBG;
|
||||||
color: white;
|
color: dark.$pageFG;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
transition: 0.24s;
|
transition: 0.24s;
|
||||||
|
|
||||||
&.Loading {
|
&.buffering {
|
||||||
|
transform: scale(1.01);
|
||||||
transition: 0.16s;
|
transition: 0.16s;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.InTransition {
|
&.transition {
|
||||||
transform: scale(0.96);
|
transform: scale(0.96);
|
||||||
transition: 0.16s;
|
transition: 0.16s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -42,18 +55,112 @@ ul, ol {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
opacity: 0.92;
|
opacity: 0.88;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
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) {
|
@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 {
|
&:visited {
|
||||||
|
@ -63,12 +170,12 @@ a {
|
||||||
|
|
||||||
.pageHero {
|
.pageHero {
|
||||||
background-image:
|
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');
|
url('/img/Panorama-Lens-Blur.png');
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
background-image:
|
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');
|
url('/img/Panorama-Lens-Blur.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -136,7 +243,7 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Nav-Toggle {
|
.navToggle {
|
||||||
@media (min-width: 601px) {
|
@media (min-width: 601px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -147,8 +254,13 @@ a {
|
||||||
right: 8px;
|
right: 8px;
|
||||||
font-size: 18px;
|
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;
|
padding: 8px 24px;
|
||||||
|
|
||||||
|
@ -163,14 +275,14 @@ a {
|
||||||
.pageNav {
|
.pageNav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
border: solid #D0DFD0;
|
border: solid light.$navBorder;
|
||||||
border-width: 0 0 1px 0;
|
border-width: 0 0 1px 0;
|
||||||
|
|
||||||
background: #F9FFF9;
|
background: light.$navBG;
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
border-color: #575F57;
|
border-color: dark.$navBorder;
|
||||||
background: #272F27;
|
background: dark.$navBG;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .container {
|
> .container {
|
||||||
|
@ -190,17 +302,24 @@ a {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 9;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
transition: 0.12s;
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 64px;
|
||||||
|
|
||||||
|
&, > * { transition: 0.16s }
|
||||||
|
|
||||||
&:not(.openned) {
|
&:not(.openned) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
transform: scale(1.2);
|
//&, > * { transition: 0.12s }
|
||||||
|
> * { transform: translateX(32px); }
|
||||||
transition: 0.24s;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -209,28 +328,33 @@ a {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
|
font-family: Outfit;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #7E9E7E;
|
color: light.$navLinkNormalColor;
|
||||||
|
@media (prefers-color-scheme: dark) { color: dark.$navLinkNormalColor; }
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@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..
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -250,24 +374,30 @@ a {
|
||||||
|
|
||||||
&:hover, &.active {
|
&:hover, &.active {
|
||||||
//background: rgba(15, 23, 42, 0.1);
|
//background: rgba(15, 23, 42, 0.1);
|
||||||
outline-color: #D0DFD0;
|
color: light.$navLinkActiveColor;
|
||||||
|
outline-color: light.$navLinkOutlineColor;
|
||||||
color: #527D52;
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
color: #DEFEDE;
|
color: dark.$navLinkActiveColor;
|
||||||
outline-color: #707F70;
|
outline-color: dark.$navLinkOutlineColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
transition: 0.08s;
|
transition: 0.08s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 601px) {
|
||||||
&.buttonPrimary {
|
&.buttonPrimary {
|
||||||
background: #527D52;
|
background: light.$btnNormalBG;
|
||||||
color: #fff;
|
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,uECbF,KACE,gBACA,SAEA,mCAJF,KAKI,mBACA,YAIJ,KACC,gBAEA,aACC,gBACA,WAGD,kBACC,sBACA,gBACA,UAIF,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,iCACC,oBAGD,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',
|
'name' => 'Republic of Panorama',
|
||||||
'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Republic%20of%20Panorama/Flag.svg',
|
'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Republic%20of%20Panorama/Flag.svg',
|
||||||
'short' => 'rop',
|
'short' => 'rop',
|
||||||
|
'description' => 'Short description of R.O.P.',
|
||||||
),
|
),
|
||||||
'drr' => array(
|
'drr' => array(
|
||||||
'name' => 'Democratic Republic of Rayland',
|
'name' => 'Democratic Republic of Rayland',
|
||||||
'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Democratic%20Republic%20of%20Rayland/bannre.png',
|
'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('nations', $nations);
|
||||||
|
|
||||||
|
$twig->addGlobal('reduced', isset($_GET['reduced']));
|
||||||
|
|
||||||
$router->get('/', function() {
|
$router->get('/', function() {
|
||||||
global $twig;
|
global $twig;
|
||||||
|
|
||||||
|
|
14
js/main.js
14
js/main.js
|
@ -1,5 +1,13 @@
|
||||||
import { EnableTransition } from "/js/trans.js";
|
import { enableTransition } from "/js/trans.js";
|
||||||
|
|
||||||
document.querySelectorAll(".TransitionEnabled").forEach( HyperlinkElement => {
|
function enableLinks() {
|
||||||
EnableTransition(HyperlinkElement);
|
document.querySelectorAll(".transitionEnabled").forEach( hyperlinkElement => {
|
||||||
|
enableTransition(hyperlinkElement);
|
||||||
|
hyperlinkElement.classList.remove("transitionEnabled");
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
enableLinks();
|
||||||
|
|
||||||
|
window.addEventListener("transitionEnd", enableLinks);
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
const $ = selector => document.querySelector(selector);
|
const $ = selector => document.querySelector(selector);
|
||||||
|
|
||||||
const navToggle = $(".Nav-Toggle");
|
const navToggle = $(".navToggle");
|
||||||
const menu = $(".pageNav > .container");
|
const menu = $(".pageNav > .container");
|
||||||
|
|
||||||
navToggle.onclick = () => {
|
navToggle.onclick = () => {
|
||||||
|
@ -14,3 +14,5 @@ navToggle.onclick = () => {
|
||||||
|
|
||||||
navToggle.innerHTML = menuToggled ? "Menu" : "Close";
|
navToggle.innerHTML = menuToggled ? "Menu" : "Close";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.addEventListener("transitionBuffering", () => menu.classList.remove("openned"));
|
77
js/trans.js
77
js/trans.js
|
@ -5,55 +5,62 @@
|
||||||
* Licensed under the Apache License. Please refer to the LICENSE file.
|
* 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 $ = selector => document.querySelector(selector);
|
||||||
const Parser = new DOMParser();
|
const parser = new DOMParser();
|
||||||
const MainElement = $("main");
|
const mainElement = $("main");
|
||||||
|
|
||||||
export function EnableTransition( HyperlinkElement ) {
|
export function enableTransition( hyperlinkElement ) {
|
||||||
HyperlinkElement.addEventListener("click", Event => {
|
hyperlinkElement.addEventListener("click", event => {
|
||||||
Event.preventDefault(); // Browser won't load the page when the hyperlink is pressed.
|
event.preventDefault(); // Browser won't load the page when the hyperlink is pressed.
|
||||||
|
|
||||||
const TargettedURL = HyperlinkElement.href;
|
loadURL(hyperlinkElement.href, true, hyperlinkElement);
|
||||||
const ActiveHyperlink = $(".pageNav .active");
|
});
|
||||||
|
|
||||||
MainElement.classList.add("Loading");
|
|
||||||
|
|
||||||
fetch(TargettedURL)
|
|
||||||
.catch(Error => {
|
|
||||||
console.log(Error);
|
|
||||||
MainElement.classList.remove("Loading");
|
|
||||||
})
|
|
||||||
.then(Response => Response.text().then( FetchedPage => {
|
|
||||||
FetchedPage = Parser.parseFromString(FetchedPage, "text/html");
|
|
||||||
FetchedPage = {
|
|
||||||
Content: FetchedPage.querySelector("main").innerHTML,
|
|
||||||
Title: FetchedPage.querySelector("title").innerHTML,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadURL( targettedURL, updateURL, hyperlinkElement ) {
|
||||||
|
const activeHyperlink = $(".pageNav .active");
|
||||||
|
|
||||||
if (ActiveHyperlink) ActiveHyperlink.classList.remove("active");
|
mainElement.classList.add("buffering");
|
||||||
HyperlinkElement.classList.add("active");
|
window.dispatchEvent(transitionBufferingEvent);
|
||||||
|
|
||||||
history.pushState({}, FetchedPage.Title, TargettedURL);
|
fetch(targettedURL + "?reduced")
|
||||||
$("title").innerHTML = FetchedPage.Title;
|
.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,
|
||||||
|
}
|
||||||
|
|
||||||
MainElement.classList.remove("Loading");
|
if (activeHyperlink) activeHyperlink.classList.remove("active");
|
||||||
MainElement.classList.add("InTransition");
|
if (hyperlinkElement) hyperlinkElement.classList.add("active");
|
||||||
|
|
||||||
let TransitionDuration = getComputedStyle(MainElement).transitionDuration;
|
if (updateURL) history.pushState({}, fetchedPage.title, targettedURL);
|
||||||
TransitionDuration = parseFloat(TransitionDuration) * 1000;
|
$("title").innerHTML = fetchedPage.title;
|
||||||
|
|
||||||
console.log(TransitionDuration);
|
mainElement.classList.remove("buffering");
|
||||||
|
mainElement.classList.add("transition");
|
||||||
|
|
||||||
|
let transitionDuration = getComputedStyle(mainElement).transitionDuration;
|
||||||
|
transitionDuration = parseFloat(transitionDuration) * 1000;
|
||||||
|
|
||||||
|
window.dispatchEvent(transitionStartEvent);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
MainElement.innerHTML = FetchedPage.Content;
|
mainElement.innerHTML = fetchedPage.content;
|
||||||
MainElement.classList.remove("InTransition");
|
mainElement.classList.remove("transition");
|
||||||
}, TransitionDuration);
|
window.dispatchEvent(transitionEndEvent);
|
||||||
|
}, transitionDuration);
|
||||||
}));
|
}));
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("popstate", Event => {
|
window.addEventListener("popstate", Event => {
|
||||||
window.location.href = window.location.href; // Lazy.
|
loadURL(window.location.href, false)
|
||||||
});
|
});
|
|
@ -1,2 +1,4 @@
|
||||||
|
{% if not reduced %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
{% endif %}
|
|
@ -1,3 +1,4 @@
|
||||||
|
{% if not reduced %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<ins data-revive-zoneid="3" data-revive-id="5ae65e2e4729376e04e82303cef4f977"></ins>
|
<ins data-revive-zoneid="3" data-revive-id="5ae65e2e4729376e04e82303cef4f977"></ins>
|
||||||
<script async src="//ads.theclashfruit.me/www/delivery/asyncjs.php"></script>
|
<script async src="//ads.theclashfruit.me/www/delivery/asyncjs.php"></script>
|
||||||
|
@ -29,3 +30,4 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
{% endif %}
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% if reduced %} <title>{{ pageTitle }} • Clyde's Real Survival SMP</title> {% endif %}
|
||||||
|
{% if not reduced %}
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<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">
|
<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="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." />
|
<meta name="description" content="A very cool minecraft SMP that updates to every version starting from b1.0." />
|
||||||
|
@ -84,4 +86,4 @@
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<link rel="stylesheet" href="/css/style.min.css">
|
<link rel="stylesheet" href="/css/style.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body> {% endif %}
|
|
@ -1,3 +1,4 @@
|
||||||
|
{% if not reduced %}
|
||||||
<header class="pageHero">
|
<header class="pageHero">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
@ -16,3 +17,4 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
{% endif %}
|
|
@ -1,15 +1,16 @@
|
||||||
|
{% if not reduced %}
|
||||||
<script src="/js/nav.js" type="module"></script>
|
<script src="/js/nav.js" type="module"></script>
|
||||||
<div class="Nav-Toggle">Menu</div>
|
<div class="navToggle">Menu</div>
|
||||||
<nav class="pageNav">
|
<nav class="pageNav">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navLeft">
|
<div class="navLeft">
|
||||||
<a class="TransitionEnabled {% if page == 'home' %} active {% endif %}" href="/">
|
<a class="transitionEnabled {% if page == 'home' %} active {% endif %}" href="/">
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
<a class="TransitionEnabled {% if page == 'gallery' %} active {% endif %}" href="/gallery">
|
<a class="transitionEnabled {% if page == 'gallery' %} active {% endif %}" href="/gallery">
|
||||||
Gallery
|
Gallery
|
||||||
</a>
|
</a>
|
||||||
<a class="TransitionEnabled {% if page == 'nations' %} active {% endif %}" href="/nations">
|
<a class="transitionEnabled {% if page == 'nations' %} active {% endif %}" href="/nations">
|
||||||
Nations
|
Nations
|
||||||
</a>
|
</a>
|
||||||
<a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
|
<a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
|
||||||
|
@ -29,3 +30,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
{% endif %}
|
|
@ -6,13 +6,16 @@
|
||||||
|
|
||||||
<main class="pageContent container">
|
<main class="pageContent container">
|
||||||
<h1>Nations</h1>
|
<h1>Nations</h1>
|
||||||
<ul>
|
<div class="cards">
|
||||||
{% for nation in nations %}
|
{% for nation in nations %}
|
||||||
<li>
|
<a class="card transitionEnabled" href="/nation/{{ nation.short }}">
|
||||||
<a href="/nation/{{ nation.short }}">{{ nation.name }}</a>
|
<h1>{{ nation.name }}</h1>
|
||||||
</li>
|
<p>{{ nation.description }}</p>
|
||||||
|
<img class="icon" src="{{ nation.flag }}">
|
||||||
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include 'includes/footer.twig' %}
|
{% include 'includes/footer.twig' %}
|
||||||
|
|
Loading…
Reference in a new issue