forked from CRSS/Website
Feat: Added neat page transitions
This commit is contained in:
parent
3a3e8183b8
commit
30b9df8f77
|
@ -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
256
css/style.css
|
@ -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 +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
2
css/style.min.css
vendored
|
@ -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 */
|
||||
|
|
|
@ -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
5
js/main.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
import { EnableTransition } from "/js/trans.js";
|
||||
|
||||
document.querySelectorAll(".TransitionEnabled").forEach( HyperlinkElement => {
|
||||
EnableTransition(HyperlinkElement);
|
||||
});
|
59
js/trans.js
Normal file
59
js/trans.js
Normal 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.
|
||||
});
|
|
@ -4,14 +4,12 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': '404',} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
@ -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"/>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'home',} %}
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
|
@ -19,8 +18,6 @@
|
|||
</li>
|
||||
</ol>
|
||||
<b>Failing to follow these basic rules will result in a ban.</b>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'nation'} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<main class="pageContent container">
|
||||
<ul>
|
||||
<li>
|
||||
code: {{ nation.short }}
|
||||
|
@ -17,7 +16,6 @@
|
|||
flag: <img height="32px" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'nations'} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<main class="pageContent container">
|
||||
<h1>Nations</h1>
|
||||
<ul>
|
||||
{% for nation in nations %}
|
||||
|
@ -14,7 +13,6 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
Loading…
Reference in a new issue