forked from CRSS/Website
Compare commits
16 commits
1c17bb153a
...
f809de1e5a
Author | SHA1 | Date | |
---|---|---|---|
Mya | f809de1e5a | ||
Mya | 2cd9377649 | ||
Mya | 71ed2f2486 | ||
Mya | 30b9df8f77 | ||
Mya | 3a3e8183b8 | ||
Mya | 445f378d14 | ||
TheClashFruit | 34ea46fc9a | ||
TheClashFruit | 50e7be7627 | ||
TheClashFruit | bfd6326be6 | ||
TheClashFruit | 8aa128d0e2 | ||
TheClashFruit | 34d75cf45d | ||
TheClashFruit | 6ccbe46a2b | ||
TheClashFruit | 1f39d31187 | ||
TheClashFruit | 49e9c7d1c4 | ||
TheClashFruit | 23bb8f1adc | ||
blurryface | 4b12603aec |
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=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;
|
||||||
|
|
|
@ -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,13 +1,40 @@
|
||||||
//@import "reset";
|
@use "fonts";
|
||||||
@import "fonts";
|
@use "colors/light" as light;
|
||||||
|
@use "colors/dark" as dark;
|
||||||
|
|
||||||
|
* {
|
||||||
|
-webkit-tap-highlight-color: transparent; // fuck you
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body { overflow-x: hidden;}
|
||||||
|
|
||||||
body {
|
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 {
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,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 {
|
||||||
|
@ -49,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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,7 +243,7 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Nav-Toggle {
|
.navToggle {
|
||||||
@media (min-width: 601px) {
|
@media (min-width: 601px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -133,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;
|
||||||
|
|
||||||
|
@ -149,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 {
|
||||||
|
@ -176,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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -195,34 +328,39 @@ a {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
gap: 8px;
|
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: 18px;
|
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..
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
padding: 8px 24px;
|
padding: 6px 20px;
|
||||||
|
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
|
|
||||||
|
@ -230,26 +368,36 @@ a {
|
||||||
|
|
||||||
transition: 0.24s;
|
transition: 0.24s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
&: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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
@import"https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap";body,input{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;font-weight:500}.pageHero{font-family:"Comic Neue","Comic Sans MS","Noto Color Emoji",sans-serif}body{background:#fff;margin:0}@media(prefers-color-scheme: dark){body{background:#202120;color:#fff}}.container{max-width:960px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}ul,ol{list-style-position:inside}p{line-height:1.6;opacity:.92}img{max-width:100%}a{color:#527d52}@media(prefers-color-scheme: dark){a{color:#d0dfd0}}a:visited{opacity:.9}.pageHero{background-image:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),url("/img/Panorama-Lens-Blur.png");background-position:center;background-size:cover;height:220px}@media(prefers-color-scheme: dark){.pageHero{background-image:linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)),url("/img/Panorama-Lens-Blur.png")}}.pageHero>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageHero>.container{justify-content:center}}.pageHero>.container>div{display:flex;flex-direction:column;gap:12px}.pageHero>.container>div.Branding{align-items:flex-start}@media(max-width: 600px){.pageHero>.container>div.Branding{align-items:center}}@media(prefers-color-scheme: dark){.pageHero>.container>div.Branding img{filter:invert(1)}}.pageHero>.container>div.Branding span{font-size:24px;opacity:.75}.pageHero>.container>div.Server-Information{align-items:center;gap:4px}@media(max-width: 600px){.pageHero>.container>div.Server-Information{display:none}}.pageHero>.container>div.Server-Information input{text-align:center;font-size:24px}.pageHero>.container>div.Server-Information input:not(:hover,:focus){color:inherit;border-color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.Nav-Toggle{z-index:10;position:fixed;top:8px;right:8px;font-size:18px;background:#527d52;color:#fff;padding:8px 24px;border-radius:32px;font-weight:bold;user-select:none;cursor:pointer}@media(min-width: 601px){.Nav-Toggle{display:none}}.pageNav{width:100%;border:solid #d0dfd0;border-width:0 0 1px 0;background:#f9fff9}@media(prefers-color-scheme: dark){.pageNav{border-color:#575f57;background:#272f27}}.pageNav>.container{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageNav>.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9;background:inherit;transition:.12s}.pageNav>.container:not(.openned){opacity:0;pointer-events:none;transform:scale(1.2);transition:.24s}}.pageNav>.container>div{margin:0;display:flex;flex-wrap:wrap;gap:8px}@media(max-width: 600px){.pageNav>.container>div{width:100%;flex-direction:column;gap:6px;align-items:center}}.pageNav>.container>div>a{user-select:none;font-size:18px;box-sizing:border-box;color:#7e9e7e;text-decoration:none;padding:8px 24px;border-radius:32px;outline:solid rgba(0,0,0,0) 2px;transition:.24s}@media(max-width: 600px){.pageNav>.container>div>a{font-size:24px;width:100%;padding:12px 24px;text-align:center}}.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{outline-color:#d0dfd0;color:#527d52;transition:.08s}@media(prefers-color-scheme: dark){.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#defede;outline-color:#707f70}}.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff;font-weight:bold}.pageFooter{opacity:.8}.pageFooter>.SNS-Links{display:flex;flex-wrap:wrap;gap:16px}.pageFooter>.SNS-Links>a{display:flex;gap:8px;font-size:18px;color:inherit}.pageFooter>.SNS-Links>a img{width:1em}@media(prefers-color-scheme: dark){.pageFooter>.SNS-Links>a img{filter:invert(1)}}.pageFooter>.SNS-Links>a:not(:hover,:focus){text-decoration:none}/*# sourceMappingURL=style.css.map */
|
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ,6JAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECZF,KACE,gBACA,SAEA,mCAJF,KAKI,mBACA,YAIJ,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,EACE,cAEA,mCAHF,EAII,eAGF,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,YAIE,WAEA,eACA,QACA,UACA,eAEA,mBACA,WAEA,iBAEA,mBAEA,iBACA,iBAEA,eApBA,yBADF,YAEI,cAsBJ,SACE,WAEA,qBACA,uBAEA,mBAEA,mCARF,SASI,qBACA,oBAGF,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEA,mBAEA,gBAEA,kCACE,UACA,oBAEA,qBAEA,iBAIJ,wBACE,SAEA,aACA,eAEA,QAEA,yBARF,wBASI,WACA,sBACA,QACA,oBAGF,0BACE,iBAEA,eACA,sBACA,cAUA,qBAEA,iBAEA,mBAEA,gCAEA,gBAhBA,yBAPF,0BAQI,eACA,WACA,kBACA,mBAcF,iEAEE,sBAEA,cAQA,gBANA,mCANF,iEAOI,cACA,uBAOJ,wCACE,mBACA,WAEA,iBAWV,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.css"}
|
|
1
css/style.min.css
vendored
1
css/style.min.css
vendored
|
@ -1 +0,0 @@
|
||||||
style.css
|
|
1
css/style.min.css
vendored
Normal file
1
css/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ,gRCCN,UACA,WDCA,sDAGF,kBACE,mDAEA,kBENF,KACE,mBAGF,WACE,iBAEA,WAEA,cAGF,MACE,2BAGF,UACE,2DAEA,2BAEA,WAEA,aAEA,qBACE,0BAEA,cAEA,yBAEA,gCACE,YAEA,aACA,mBAEA,mBACA,8BAKN,SACE,aAEA,mBAEA,oBACE,eAEA,aACA,mBAEA,mBACA,8BAEA,uBACE,gBAEA,aAEA,QAGE,4BACE,cAEA,qBAEA,iBAEA,mBAEA,qEACE,6BAGF,0CACE,mBACA,WAQZ,aACE,cAGF,YACE,aACA,mBAEA,mBACA,8BAEA,kBACE,aACA,sBAGF,mBACE,gBAEA,aAEA,sBACE,YAEA,wBACE,cAEA,WACA,YAEA,qBAEA,8BACE","file":"style.min.css"}
|
{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss","src/colors/_light.scss","src/colors/_dark.scss"],"names":[],"mappings":"CAEQ,qKAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECXF,EACC,0CAGD,4BAEA,KACE,SAEA,WCXO,KDYP,MCXO,KDaP,mCANF,KAOI,WEfK,QFgBL,MEfK,MFmBT,KACC,gBAEA,eACC,sBACA,gBACA,WACA,oBACA,iBAGD,gBACC,sBACA,gBACA,UAIF,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,OACC,aACA,eACA,QACA,WAEA,yBAND,OAOE,UAIF,MACC,kBACA,aACA,sBACA,sBACA,eACA,aACC,qBACA,kBACA,iBACA,eACA,gBAED,0BACC,WCzEa,QD0Eb,MCvFO,KD+FP,gBAsBD,iCA5BC,mCAjBF,MAkBI,cE3Ee,QF4Ef,WE9EW,QF+EZ,ME5FM,MFiGP,YACC,kBACA,cCxFS,QDyFT,WC1FK,QD2FL,MCnGM,QD2GP,gBANC,mCAND,YAOG,cE7FO,QF8FP,WE/FG,QFgGJ,MEvGQ,SF4GT,kBACC,gBACA,qBAMF,yBA/CF,MAgDE,uBAGD,yBAnDD,MAoDG,kBACD,YAGA,SACC,SACA,gBACA,gBAGD,YACC,kBACA,MACA,QACA,YACA,iBACA,iBAEA,wEAKA,gBAJA,mCATD,YAUE,yEAMF,QACC,aAIH,EACE,MC1JO,QD4JP,mCAHF,EAII,ME5JQ,SF+JV,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,WAIE,WAEA,eACA,QACA,UACA,eAEA,WC3PO,QD4PP,MCxPY,KD+PZ,iBAEA,mBAEA,iBACA,iBAEA,eAzBA,yBADF,WAEI,cAYF,mCAdF,WAeG,WE/PM,QFgQN,ME5PW,MFyQd,SACE,WAEA,qBACA,uBAEA,WC3QM,QD6QN,mCARF,SASI,aE7QQ,QF8QR,WE/QI,SFkRN,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEF,2BACC,iCAKA,uBACC,sBACA,UANF,yDAnBF,oBAoBI,8BAXF,yBAkBE,0DAEA,kCACE,UACA,oBAGA,gEAIJ,wBACE,SAEA,aACA,eACA,qBAEA,QAEA,yBATF,wBAUG,WACC,uBAGF,0BACE,mBACA,iBAEA,eACA,sBACA,MC7Ta,QD4Ub,qBAEA,iBAEA,mBAEA,gCAEA,gBAtBA,mCAPF,0BAOwC,MElUzB,SFoUb,yBATF,0BAUI,eACA,aACA,iBACA,eAEA,yCACC,aAeH,iCACC,oBAGD,iEAEE,MCnXD,QDoXC,cC9VY,QDsWZ,gBANA,mCALF,iEAMI,MEnWS,QFoWT,cEtWU,SF6Wd,yBACC,wCACE,WCjYF,QDkYE,MC9XG,KDqYH,4BALA,yDAJF,wCAKI,WErYJ,QFsYI,MElYC,MFiZd,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.min.css"}
|
34
index.php
34
index.php
|
@ -14,8 +14,15 @@
|
||||||
$nations = array(
|
$nations = array(
|
||||||
'rop' => array(
|
'rop' => array(
|
||||||
'name' => 'Republic of Panorama',
|
'name' => 'Republic of Panorama',
|
||||||
'flag' => 'https://git.theclashfruit.me/CRSS/CRSS/raw/branch/main/Nations/Republic%20of%20Panorama/Flag.svg',
|
'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Republic%20of%20Panorama/Flag.svg',
|
||||||
'short' => 'rop',
|
'short' => 'rop',
|
||||||
|
'description' => 'Short description of R.O.P.',
|
||||||
|
),
|
||||||
|
'drr' => array(
|
||||||
|
'name' => 'Democratic Republic of Rayland',
|
||||||
|
'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Democratic%20Republic%20of%20Rayland/bannre.png',
|
||||||
|
'short' => 'drr',
|
||||||
|
'description' => 'Short description of D.R.R.',
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -26,7 +33,13 @@
|
||||||
|
|
||||||
$json = json_decode($res->body, true);
|
$json = json_decode($res->body, true);
|
||||||
|
|
||||||
|
if($json != null) {
|
||||||
$twig->addGlobal('playerCount', count($json));
|
$twig->addGlobal('playerCount', count($json));
|
||||||
|
}
|
||||||
|
|
||||||
|
$twig->addGlobal('nations', $nations);
|
||||||
|
|
||||||
|
$twig->addGlobal('reduced', isset($_GET['reduced']));
|
||||||
|
|
||||||
$router->get('/', function() {
|
$router->get('/', function() {
|
||||||
global $twig;
|
global $twig;
|
||||||
|
@ -57,6 +70,11 @@
|
||||||
|
|
||||||
$twig->addGlobal('pageUri', '/map');
|
$twig->addGlobal('pageUri', '/map');
|
||||||
|
|
||||||
|
if(isset($_GET['center']))
|
||||||
|
$twig->addGlobal('center', $_GET['center']);
|
||||||
|
else
|
||||||
|
$twig->addGlobal('center', '0;0');
|
||||||
|
|
||||||
echo $twig->render('map.twig');
|
echo $twig->render('map.twig');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -76,6 +94,20 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$router->get('/nation/([a-z]+)', function ($nation) {
|
||||||
|
global $twig, $mysql, $nations;
|
||||||
|
|
||||||
|
$twig->addGlobal('pageUri', '/nation/' . $nation);
|
||||||
|
|
||||||
|
if(!$nations[$nation]) {
|
||||||
|
http_response_code(404);
|
||||||
|
|
||||||
|
echo $twig->render('404.twig');
|
||||||
|
} else {
|
||||||
|
echo $twig->render('nation.twig', array('nation' => $nations[$nation]));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$router->get('/u/([a-z0-9_\.]+)', function($name) {
|
$router->get('/u/([a-z0-9_\.]+)', function($name) {
|
||||||
global $twig, $mysql, $discord;
|
global $twig, $mysql, $discord;
|
||||||
|
|
||||||
|
|
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);
|
||||||
|
|
25
js/map.js
25
js/map.js
|
@ -1,7 +1,5 @@
|
||||||
L.TileLayer.CRSSLayer = L.TileLayer.extend({
|
L.TileLayer.CRSSLayer = L.TileLayer.extend({
|
||||||
getTileUrl: function(coordinate) {
|
getTileUrl: function(coordinate) {
|
||||||
console.log(coordinate);
|
|
||||||
|
|
||||||
const tileX = coordinate.x;
|
const tileX = coordinate.x;
|
||||||
const tileY = coordinate.y;
|
const tileY = coordinate.y;
|
||||||
|
|
||||||
|
@ -23,7 +21,7 @@ L.tileLayer.crssLayer = function(templateUrl, options) {
|
||||||
}
|
}
|
||||||
|
|
||||||
let mapLayer = L.tileLayer.crssLayer('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png', {
|
let mapLayer = L.tileLayer.crssLayer('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png', {
|
||||||
attribution: '© <a href="https://crss.blurryface.xyz/">CRSS</a> players',
|
attribution: '© <a href="https://crss.blurryface.xyz/">CRSS</a> Players | Tiles With <a href="https://unmined.net/">uNmINeD</a>.',
|
||||||
|
|
||||||
tileSize: 256,
|
tileSize: 256,
|
||||||
|
|
||||||
|
@ -43,7 +41,7 @@ let ropMarkers = L.layerGroup([
|
||||||
.bindPopup('Info Centre')
|
.bindPopup('Info Centre')
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let rorMarkers = L.layerGroup([
|
let drrMarkers = L.layerGroup([
|
||||||
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -61,13 +59,25 @@ let playerMarkers = L.layerGroup([
|
||||||
console.log(L.CRS.Simple.infinite)
|
console.log(L.CRS.Simple.infinite)
|
||||||
|
|
||||||
let map = L.map('map', {
|
let map = L.map('map', {
|
||||||
layers: [mapLayer, miscMarkers, ropMarkers, rorMarkers, playerMarkers],
|
layers: [
|
||||||
|
mapLayer,
|
||||||
|
|
||||||
|
miscMarkers,
|
||||||
|
|
||||||
|
ropMarkers,
|
||||||
|
drrMarkers,
|
||||||
|
|
||||||
|
playerMarkers
|
||||||
|
],
|
||||||
preferCanvas: true,
|
preferCanvas: true,
|
||||||
crs: L.Util.extend(L.CRS.Simple, {
|
crs: L.Util.extend(L.CRS.Simple, {
|
||||||
transformation: new L.Transformation(1, 0, 1, 0),
|
transformation: new L.Transformation(1, 0, 1, 0),
|
||||||
projection: L.Projection.LonLat
|
projection: L.Projection.LonLat
|
||||||
}),
|
}),
|
||||||
}).setView([0, 0], 2);
|
}).setView([
|
||||||
|
parseInt(center.split(';')[1]),
|
||||||
|
parseInt(center.split(';')[0])
|
||||||
|
], 2);
|
||||||
|
|
||||||
let baseMaps = {
|
let baseMaps = {
|
||||||
"Overworld": mapLayer
|
"Overworld": mapLayer
|
||||||
|
@ -77,7 +87,7 @@ let overlayMaps = {
|
||||||
"Players": playerMarkers,
|
"Players": playerMarkers,
|
||||||
"Miscellaneous Markers": miscMarkers,
|
"Miscellaneous Markers": miscMarkers,
|
||||||
"Markers in RoP": ropMarkers,
|
"Markers in RoP": ropMarkers,
|
||||||
"Markers in DRoR": rorMarkers,
|
"Markers in DRR": drrMarkers,
|
||||||
};
|
};
|
||||||
|
|
||||||
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
|
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
|
||||||
|
@ -114,7 +124,6 @@ const updatePlayerPos = (players) =>{
|
||||||
popupAnchor: [0, -14]
|
popupAnchor: [0, -14]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const marker = L.marker([player.location.z, player.location.x], { icon: playerIcon })
|
const marker = L.marker([player.location.z, player.location.x], { icon: playerIcon })
|
||||||
.bindPopup(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
|
.bindPopup(`${player.displayName} (${Math.floor(player.location.x)}; ${Math.floor(player.location.y)}; ${Math.floor(player.location.z)})`);
|
||||||
|
|
||||||
|
|
|
@ -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"));
|
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',} %}
|
{% include 'includes/nav.twig' with {'page': '404',} %}
|
||||||
|
|
||||||
<main class="pageContent" id="content">
|
<main class="pageContent container">
|
||||||
<div class="container">
|
|
||||||
<h1>Not found! :<</h1>
|
<h1>Not found! :<</h1>
|
||||||
<p>
|
<p>
|
||||||
This page is nowhere to be found!<br>
|
This page is nowhere to be found!<br>
|
||||||
Go on Discord and complain about it to Clash or Mya!!
|
Go on Discord and complain about it to Clash or Mya!!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include 'includes/footer.twig' %}
|
{% include 'includes/footer.twig' %}
|
||||||
|
|
|
@ -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>
|
||||||
|
@ -22,10 +23,11 @@
|
||||||
<img src="/img/Mastodon.svg" alt="Mastodon's icon">
|
<img src="/img/Mastodon.svg" alt="Mastodon's icon">
|
||||||
<span>TheClashFruit</span>
|
<span>TheClashFruit</span>
|
||||||
</a>
|
</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">
|
<img src="/img/Mastodon.svg" alt="Mastodon's icon">
|
||||||
<span>Myadeleines</span>
|
<span>Myadeleines</span>
|
||||||
</a>
|
</a>
|
||||||
</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." />
|
||||||
|
@ -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: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" />
|
<meta name="twitter:image" content="https://crss.blurryface.xyz/img/social_image.png" />
|
||||||
|
|
||||||
|
<script src="/js/main.js" type="module"></script>
|
||||||
|
|
||||||
{% if pageTitle == 'Map' %}
|
{% if pageTitle == 'Map' %}
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||||||
|
@ -57,6 +60,10 @@
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.leaflet-control {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
.leaflet-control-mouseposition {
|
.leaflet-control-mouseposition {
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
|
||||||
|
@ -79,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">
|
||||||
|
|
||||||
|
@ -10,9 +11,10 @@
|
||||||
<!-- Right -->
|
<!-- Right -->
|
||||||
<div class="Server-Information">
|
<div class="Server-Information">
|
||||||
<span>Server address:</span>
|
<span>Server address:</span>
|
||||||
<input type="text" size="10" readonly value="play.blurryface.xyz">
|
<input type="text" size="14" readonly value="play.blurryface.xyz">
|
||||||
<span>Version: 1.3.2</span>
|
<span>Version: 1.5.2</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
{% endif %}
|
|
@ -1,26 +1,23 @@
|
||||||
|
{% 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 {% if page == 'home' %} class="active" {% else %} href="/" {% endif %}>
|
<a class="transitionEnabled {% if page == 'home' %} active {% endif %}" href="/">
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
<a href="https://youtube.com/@CRSS666">Videos</a>
|
<a class="transitionEnabled {% if page == 'gallery' %} active {% endif %}" href="/gallery">
|
||||||
<a {% if page == 'gallery' %} class="active" {% else %} href="/gallery" {% endif %}>
|
|
||||||
Gallery
|
Gallery
|
||||||
</a>
|
</a>
|
||||||
<a {% if page == 'nations' %} class="active" {% else %} href="/nations" {% endif %}>
|
<a class="transitionEnabled {% if page == 'nations' %} active {% endif %}" href="/nations">
|
||||||
Nations
|
Nations
|
||||||
</a>
|
</a>
|
||||||
<!--<a {% if page == 'rules' %} class="active" {% else %} href="/rules" {% endif %}>
|
<a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
|
||||||
Rules
|
Map & Rails
|
||||||
</a>-->
|
|
||||||
<a {% if page == 'map.js' %} class="active" {% else %} href="/map" {% endif %}>
|
|
||||||
Map
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="navRight" style="display: none;">
|
<div class="navRight">
|
||||||
{% if user %}
|
{% if user %}
|
||||||
<a class="userButton {% if page == 'profile' %}active{% endif %}" href="{% if page == 'profile' %}#{% else %}/profile{% endif %}">
|
<a class="userButton {% if page == 'profile' %}active{% endif %}" href="{% if page == 'profile' %}#{% else %}/profile{% endif %}">
|
||||||
{{ user.global_name }}
|
{{ user.global_name }}
|
||||||
|
@ -33,3 +30,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
{% endif %}
|
|
@ -4,8 +4,7 @@
|
||||||
|
|
||||||
{% include 'includes/nav.twig' with {'page': 'home',} %}
|
{% include 'includes/nav.twig' with {'page': 'home',} %}
|
||||||
|
|
||||||
<main>
|
<main class="pageContent container">
|
||||||
<div class="container">
|
|
||||||
<h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
|
<h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
|
||||||
<p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
|
<p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
|
||||||
|
|
||||||
|
@ -19,8 +18,6 @@
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<b>Failing to follow these basic rules will result in a ban.</b>
|
<b>Failing to follow these basic rules will result in a ban.</b>
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include 'includes/footer.twig' %}
|
{% include 'includes/footer.twig' %}
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<a id="homeLink" href="/">Go Home</a>
|
<a id="homeLink" href="/">Go Home</a>
|
||||||
|
|
||||||
|
<script>const center = "{{ center }}";</script>
|
||||||
<script src="js/map.js"></script>
|
<script src="js/map.js"></script>
|
||||||
|
|
||||||
{% include 'includes/foot.twig' %}
|
{% include 'includes/foot.twig' %}
|
22
template/nation.twig
Normal file
22
template/nation.twig
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
{% include 'includes/head.twig' with {'pageTitle': nation.name} %}
|
||||||
|
|
||||||
|
{% include 'includes/hero.twig' %}
|
||||||
|
|
||||||
|
{% include 'includes/nav.twig' with {'page': 'nation'} %}
|
||||||
|
|
||||||
|
<main class="pageContent container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
code: {{ nation.short }}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
full_name: {{ nation.name }}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
flag: <img height="32px" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{% include 'includes/footer.twig' %}
|
||||||
|
{% include 'includes/foot.twig' %}
|
|
@ -4,15 +4,18 @@
|
||||||
|
|
||||||
{% include 'includes/nav.twig' with {'page': 'nations'} %}
|
{% include 'includes/nav.twig' with {'page': 'nations'} %}
|
||||||
|
|
||||||
<main class="pageContent" id="content">
|
<main class="pageContent container">
|
||||||
<div class="container">
|
|
||||||
<h1>Nations</h1>
|
<h1>Nations</h1>
|
||||||
<ul>
|
<div class="cards">
|
||||||
<li>
|
{% for nation in nations %}
|
||||||
<a href="/nation/rop">Republic of Panorama</a>
|
<a class="card transitionEnabled" href="/nation/{{ nation.short }}">
|
||||||
</li>
|
<h1>{{ nation.name }}</h1>
|
||||||
</ul>
|
<p>{{ nation.description }}</p>
|
||||||
|
<img class="icon" src="{{ nation.flag }}">
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include 'includes/footer.twig' %}
|
{% include 'includes/footer.twig' %}
|
||||||
|
|
Loading…
Reference in a new issue