flash/Website
1
0
Fork 0
forked from CRSS/Website
Code Pull requests Activity

Feat: Added neat page transitions

Browse source
This commit is contained in:
Mya 2024-01-11 20:38:35 +01:00
parent 3a3e8183b8
commit 30b9df8f77
14 changed files with 136 additions and 321 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
css/src/style.scss
View file

@ -10,6 +10,21 @@ body {
}
}
main {
transition: 0.24s;
&.Loading {
transition: 0.16s;
opacity: 0.4;
}
&.InTransition {
transform: scale(0.96);
transition: 0.16s;
opacity: 0;
}
}
.container {
max-width: 960px;
@ -195,7 +210,7 @@ a {
display: flex;
flex-wrap: wrap;
gap: 8px;
gap: 6px;
@media (max-width: 600px) {
width: 100%;
@ -207,7 +222,7 @@ a {
> a {
user-select: none;
font-size: 18px;
font-size: 16px;
box-sizing: border-box;
color: #7E9E7E;
@ -221,7 +236,7 @@ a {
text-decoration: none;
padding: 8px 24px;
padding: 6px 20px;
border-radius: 32px;
@ -229,6 +244,10 @@ a {
transition: 0.24s;
&.active {
pointer-events: none;
}
&:hover, &.active {
//background: rgba(15, 23, 42, 0.1);
outline-color: #D0DFD0;

256
css/style.css
View file

@ -1,256 +0,0 @@
@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");
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: white;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background: #202120;
color: white;
}
}
.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: 0.92;
}
img {
max-width: 100%;
}
a {
color: #527D52;
}
@media (prefers-color-scheme: dark) {
a {
color: #D0DFD0;
}
}
a:visited {
opacity: 0.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: 0.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: transparent;
background: transparent;
}
.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: 0.12s;
}
.pageNav > .container:not(.openned) {
opacity: 0;
pointer-events: none;
transform: scale(1.2);
transition: 0.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 transparent 2px;
transition: 0.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: 0.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: 0.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 */

1
css/style.css.map
View file

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ;AAER;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;;ACbF;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;EAEA;EAEA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;;;AAIJ;EACE,kBACE;EASF;EACA;EAEA;;AATA;EALF;IAMI,kBACA;;;AASF;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EAEA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;IAAM;;;AAGR;EACE;EACA;;AAIJ;EAKE;EACA;;AALA;EADF;IAEI;;;AAMF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAQZ;EAIE;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EAEA;;AApBA;EADF;IAEI;;;;AAsBJ;EACE;EAEA;EACA;EAEA;;AAEA;EARF;IASI;IACA;;;AAGF;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EATF;IAUI;IACA;IACA;IACA;IACA;IACA;IAEA;IAEA;;EAEA;IACE;IACA;IAEA;IAEA;;;AAIJ;EACE;EAEA;EACA;EAEA;;AAEA;EARF;IASI;IACA;IACA;IACA;;;AAGF;EACE;EAEA;EACA;EACA;EAUA;EAEA;EAEA;EAEA;EAEA;;AAhBA;EAPF;IAQI;IACA;IACA;IACA;;;AAcF;EAEE;EAEA;EAQA;;AANA;EANF;IAOI;IACA;;;AAOJ;EACE;EACA;EAEA;;;AAWV;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EAEA;EAEA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE","file":"style.css"}

2
css/style.min.css vendored
View file

@ -1 +1 @@
@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.min.css.map */
@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}}main{transition:.24s}main.Loading{transition:.16s;opacity:.4}main.InTransition{transform:scale(0.96);transition:.16s;opacity:0}.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:6px}@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:16px;box-sizing:border-box;color:#7e9e7e;text-decoration:none;padding:6px 20px;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.active{pointer-events:none}.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.min.css.map */

2
css/style.min.css.map
View file

@ -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"],"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"}

5
js/main.js Normal file
View file

@ -0,0 +1,5 @@
import { EnableTransition } from "/js/trans.js";
document.querySelectorAll(".TransitionEnabled").forEach( HyperlinkElement => {
EnableTransition(HyperlinkElement);
});

59
js/trans.js Normal file
View file

@ -0,0 +1,59 @@
/*
* 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 $ = 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.
const TargettedURL = HyperlinkElement.href;
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,
}
if (ActiveHyperlink) ActiveHyperlink.classList.remove("active");
HyperlinkElement.classList.add("active");
history.pushState({}, FetchedPage.Title, TargettedURL);
$("title").innerHTML = FetchedPage.Title;
MainElement.classList.remove("Loading");
MainElement.classList.add("InTransition");
let TransitionDuration = getComputedStyle(MainElement).transitionDuration;
TransitionDuration = parseFloat(TransitionDuration) * 1000;
console.log(TransitionDuration);
setTimeout(() => {
MainElement.innerHTML = FetchedPage.Content;
MainElement.classList.remove("InTransition");
}, TransitionDuration);
}));
});
}
window.addEventListener("popstate", Event => {
window.location.href = window.location.href; // Lazy.
});

14
template/404.twig
View file

@ -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
template/includes/head.twig
View file

@ -27,6 +27,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"/>

2
template/includes/hero.twig
View file

@ -10,7 +10,7 @@
<!-- 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>
</div>

13
template/includes/nav.twig
View file

@ -3,20 +3,17 @@
<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 {% 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">

31
template/index.twig
View file

@ -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' %}

26
template/nation.twig
View file

@ -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' %}

20
template/nations.twig
View file

@ -4,17 +4,15 @@
{% 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>
</div>
<main class="pageContent container">
<h1>Nations</h1>
<ul>
{% for nation in nations %}
<li>
<a href="/nation/{{ nation.short }}">{{ nation.name }}</a>
</li>
{% endfor %}
</ul>
</main>
{% include 'includes/footer.twig' %}