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 |
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -100,4 +100,4 @@ fabric.properties
|
|||
!.idea/codeStyles
|
||||
!.idea/runConfigurations
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/phpstorm+all,composer,dotenv
|
||||
# End of https://www.toptal.com/developers/gitignore/api/phpstorm+all,composer,dotenv
|
Binary file not shown.
|
@ -28,4 +28,4 @@
|
|||
$_ENV['MYSQL_USER'],
|
||||
$_ENV['MYSQL_PASS'],
|
||||
$_ENV['MYSQL_DB']
|
||||
);
|
||||
);
|
|
@ -1,6 +1,6 @@
|
|||
// @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@400;500;700&display=swap');
|
||||
|
||||
body, input {
|
||||
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
}
|
28
css/src/colors/_dark.scss
Normal file
28
css/src/colors/_dark.scss
Normal file
|
@ -0,0 +1,28 @@
|
|||
// Dark Theme
|
||||
|
||||
$pageBG: #202120;
|
||||
$pageFG: white;
|
||||
|
||||
$accent: #527D52;
|
||||
$linkColor: #d0dfd0;
|
||||
|
||||
$btnNormalBG: $accent;
|
||||
$btnNormalFG: white;
|
||||
$btnActiveBG: $accent;
|
||||
$btnActiveFG: white;
|
||||
|
||||
$navBG: #272f27;
|
||||
$navBorder: #575f57;
|
||||
|
||||
$cardNormalBG: #272727;
|
||||
$cardNormalFG: $pageFG;
|
||||
$cardNormalBorder: #575757;
|
||||
$cardActiveBG: $navBG;
|
||||
$cardActiveFG: $linkColor;
|
||||
$cardActiveBorder: $navBorder;
|
||||
|
||||
$navLinkOutlineColor: #707f70;
|
||||
$navLinkNormalColor: #7E9E7E;
|
||||
$navLinkActiveColor: #DEFEDE;
|
||||
|
||||
$headerOverlay: #101610;
|
32
css/src/colors/_light.scss
Normal file
32
css/src/colors/_light.scss
Normal file
|
@ -0,0 +1,32 @@
|
|||
// Light Theme
|
||||
|
||||
$pageBG: white;
|
||||
$pageFG: black;
|
||||
|
||||
$accent: #527D52;
|
||||
$linkColor: $accent;
|
||||
|
||||
$btnNormalBG: $accent;
|
||||
$btnNormalFG: white;
|
||||
$btnActiveBG: $accent;
|
||||
$btnActiveFG: white;
|
||||
|
||||
$navBG: #f9fff9;
|
||||
$navBorder: #d0dfd0;
|
||||
|
||||
$cardNormalBG: #f9f9f9;
|
||||
$cardNormalFG: $pageFG;
|
||||
$cardNormalBorder: #d0d0d0;
|
||||
$cardActiveBG: $navBG;
|
||||
$cardActiveFG: $linkColor;
|
||||
$cardActiveBorder: $navBorder;
|
||||
|
||||
/*$cardBG: $navBG;
|
||||
$cardFG: $pageFG;
|
||||
$cardBorder: $navBorder;*/
|
||||
|
||||
$navLinkOutlineColor: #D0DFD0;
|
||||
$navLinkNormalColor: #7E9E7E;
|
||||
$navLinkActiveColor: $accent;
|
||||
|
||||
$headerOverlay: white;
|
|
@ -1,16 +1,43 @@
|
|||
//@import "reset";
|
||||
@import "fonts";
|
||||
@use "fonts";
|
||||
@use "colors/light" as light;
|
||||
@use "colors/dark" as dark;
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent; // fuck you
|
||||
}
|
||||
|
||||
html, body { overflow-x: hidden;}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
margin: 0;
|
||||
|
||||
background: light.$pageBG;
|
||||
color: light.$pageFG;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: #202120;
|
||||
color: white;
|
||||
background: dark.$pageBG;
|
||||
color: dark.$pageFG;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
transition: 0.24s;
|
||||
|
||||
&.buffering {
|
||||
transform: scale(1.01);
|
||||
transition: 0.16s;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.transition {
|
||||
transform: scale(0.96);
|
||||
transition: 0.16s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
|
||||
|
@ -28,18 +55,112 @@ ul, ol {
|
|||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
opacity: 0.92;
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #527D52;
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
height: 150px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
outline: 1px solid light.$cardNormalBorder;
|
||||
background: light.$cardNormalBG;
|
||||
color: light.$cardNormalFG;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: #D0DFD0;
|
||||
outline-color: dark.$cardNormalBorder;
|
||||
background: dark.$cardNormalBG;
|
||||
color: dark.$cardNormalFG;
|
||||
}
|
||||
|
||||
transition: 0.24s;
|
||||
|
||||
&:hover {
|
||||
outline-width: 2px;
|
||||
outline-color: light.$cardActiveBorder;
|
||||
background: light.$cardActiveBG;
|
||||
color: light.$cardActiveFG;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
outline-color: dark.$cardActiveBorder;
|
||||
background: dark.$cardActiveBG;
|
||||
color: dark.$cardActiveFG;
|
||||
}
|
||||
|
||||
transition: 0.08s;
|
||||
|
||||
.icon {
|
||||
transition: 0.48s;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
width: calc(100% / 3 - 6px);
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: calc(50% - 4px);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
|
||||
mask-image: linear-gradient(to right, transparent, rgba(red, 0.3));
|
||||
@media (prefers-color-scheme: dark) {
|
||||
mask-image: linear-gradient(to right, transparent, rgba(red, 0.1));
|
||||
}
|
||||
|
||||
transition: 0.64s;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: light.$linkColor;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: dark.$linkColor;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
@ -49,12 +170,12 @@ a {
|
|||
|
||||
.pageHero {
|
||||
background-image:
|
||||
linear-gradient(rgba(white, 0.9),rgba(white, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
|
||||
linear-gradient(rgba(light.$headerOverlay, 0.9),rgba(light.$headerOverlay, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
|
||||
url('/img/Panorama-Lens-Blur.png');
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-image:
|
||||
linear-gradient(rgba(#101610, 0.9),rgba(#101610, 0.9)),
|
||||
linear-gradient(rgba(dark.$headerOverlay, 0.9),rgba(dark.$headerOverlay, 0.9)),
|
||||
url('/img/Panorama-Lens-Blur.png');
|
||||
}
|
||||
|
||||
|
@ -122,7 +243,7 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.Nav-Toggle {
|
||||
.navToggle {
|
||||
@media (min-width: 601px) {
|
||||
display: none;
|
||||
}
|
||||
|
@ -133,8 +254,13 @@ a {
|
|||
right: 8px;
|
||||
font-size: 18px;
|
||||
|
||||
background: #527D52;
|
||||
color: #fff;
|
||||
background: light.$btnNormalBG;
|
||||
color: light.$btnNormalFG;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: dark.$btnNormalBG;
|
||||
color: dark.$btnNormalFG;
|
||||
}
|
||||
|
||||
padding: 8px 24px;
|
||||
|
||||
|
@ -149,14 +275,14 @@ a {
|
|||
.pageNav {
|
||||
width: 100%;
|
||||
|
||||
border: solid #D0DFD0;
|
||||
border: solid light.$navBorder;
|
||||
border-width: 0 0 1px 0;
|
||||
|
||||
background: #F9FFF9;
|
||||
background: light.$navBG;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: #575F57;
|
||||
background: #272F27;
|
||||
border-color: dark.$navBorder;
|
||||
background: dark.$navBG;
|
||||
}
|
||||
|
||||
> .container {
|
||||
|
@ -176,17 +302,24 @@ a {
|
|||
height: 100%;
|
||||
z-index: 9;
|
||||
|
||||
background: inherit;
|
||||
backdrop-filter: blur(15px);
|
||||
background: rgba(light.$navBG, 0.86);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: rgba(dark.$navBG, 0.9);
|
||||
}
|
||||
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 64px;
|
||||
|
||||
transition: 0.12s;
|
||||
&, > * { transition: 0.16s }
|
||||
|
||||
&:not(.openned) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transform: scale(1.2);
|
||||
|
||||
transition: 0.24s;
|
||||
//&, > * { transition: 0.12s }
|
||||
> * { transform: translateX(32px); }
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -195,34 +328,39 @@ a {
|
|||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> a {
|
||||
font-family: Outfit;
|
||||
user-select: none;
|
||||
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
color: #7E9E7E;
|
||||
color: light.$navLinkNormalColor;
|
||||
@media (prefers-color-scheme: dark) { color: dark.$navLinkNormalColor; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
outline: none;
|
||||
padding: 8px 32px;
|
||||
text-align: end;
|
||||
|
||||
&.active::before {
|
||||
content: "➤"; // i know..
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
padding: 8px 24px;
|
||||
padding: 6px 20px;
|
||||
|
||||
border-radius: 32px;
|
||||
|
||||
|
@ -230,27 +368,37 @@ a {
|
|||
|
||||
transition: 0.24s;
|
||||
|
||||
&.active {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
//background: rgba(15, 23, 42, 0.1);
|
||||
outline-color: #D0DFD0;
|
||||
|
||||
color: #527D52;
|
||||
color: light.$navLinkActiveColor;
|
||||
outline-color: light.$navLinkOutlineColor;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: #DEFEDE;
|
||||
outline-color: #707F70;
|
||||
color: dark.$navLinkActiveColor;
|
||||
outline-color: dark.$navLinkOutlineColor;
|
||||
}
|
||||
|
||||
|
||||
transition: 0.08s;
|
||||
}
|
||||
|
||||
&.buttonPrimary {
|
||||
background: #527D52;
|
||||
color: #fff;
|
||||
@media (min-width: 601px) {
|
||||
&.buttonPrimary {
|
||||
background: light.$btnNormalBG;
|
||||
color: light.$btnNormalFG;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: dark.$btnNormalBG;
|
||||
color: dark.$btnNormalFG;
|
||||
}
|
||||
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"}
|
36
index.php
36
index.php
|
@ -14,8 +14,15 @@
|
|||
$nations = array(
|
||||
'rop' => array(
|
||||
'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',
|
||||
'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);
|
||||
|
||||
$twig->addGlobal('playerCount', count($json));
|
||||
if($json != null) {
|
||||
$twig->addGlobal('playerCount', count($json));
|
||||
}
|
||||
|
||||
$twig->addGlobal('nations', $nations);
|
||||
|
||||
$twig->addGlobal('reduced', isset($_GET['reduced']));
|
||||
|
||||
$router->get('/', function() {
|
||||
global $twig;
|
||||
|
@ -56,6 +69,11 @@
|
|||
global $twig;
|
||||
|
||||
$twig->addGlobal('pageUri', '/map');
|
||||
|
||||
if(isset($_GET['center']))
|
||||
$twig->addGlobal('center', $_GET['center']);
|
||||
else
|
||||
$twig->addGlobal('center', '0;0');
|
||||
|
||||
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) {
|
||||
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({
|
||||
getTileUrl: function(coordinate) {
|
||||
console.log(coordinate);
|
||||
|
||||
const tileX = coordinate.x;
|
||||
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', {
|
||||
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,
|
||||
|
||||
|
@ -43,7 +41,7 @@ let ropMarkers = L.layerGroup([
|
|||
.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)
|
||||
|
||||
let map = L.map('map', {
|
||||
layers: [mapLayer, miscMarkers, ropMarkers, rorMarkers, playerMarkers],
|
||||
layers: [
|
||||
mapLayer,
|
||||
|
||||
miscMarkers,
|
||||
|
||||
ropMarkers,
|
||||
drrMarkers,
|
||||
|
||||
playerMarkers
|
||||
],
|
||||
preferCanvas: true,
|
||||
crs: L.Util.extend(L.CRS.Simple, {
|
||||
transformation: new L.Transformation(1, 0, 1, 0),
|
||||
projection: L.Projection.LonLat
|
||||
}),
|
||||
}).setView([0, 0], 2);
|
||||
}).setView([
|
||||
parseInt(center.split(';')[1]),
|
||||
parseInt(center.split(';')[0])
|
||||
], 2);
|
||||
|
||||
let baseMaps = {
|
||||
"Overworld": mapLayer
|
||||
|
@ -77,7 +87,7 @@ let overlayMaps = {
|
|||
"Players": playerMarkers,
|
||||
"Miscellaneous Markers": miscMarkers,
|
||||
"Markers in RoP": ropMarkers,
|
||||
"Markers in DRoR": rorMarkers,
|
||||
"Markers in DRR": drrMarkers,
|
||||
};
|
||||
|
||||
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
|
||||
|
@ -114,7 +124,6 @@ const updatePlayerPos = (players) =>{
|
|||
popupAnchor: [0, -14]
|
||||
});
|
||||
|
||||
|
||||
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)})`);
|
||||
|
||||
|
|
20
js/nav.js
20
js/nav.js
|
@ -1,16 +1,18 @@
|
|||
const $ = selector => document.querySelector(selector);
|
||||
|
||||
const navToggle = $(".Nav-Toggle");
|
||||
const navToggle = $(".navToggle");
|
||||
const menu = $(".pageNav > .container");
|
||||
|
||||
navToggle.onclick = () => {
|
||||
const menuToggled = menu.classList.contains("openned");
|
||||
const menuToggled = menu.classList.contains("openned");
|
||||
|
||||
if (menuToggled) {
|
||||
menu.classList.remove("openned");
|
||||
} else {
|
||||
menu.classList.add("openned");
|
||||
}
|
||||
if (menuToggled) {
|
||||
menu.classList.remove("openned");
|
||||
} else {
|
||||
menu.classList.add("openned");
|
||||
}
|
||||
|
||||
navToggle.innerHTML = menuToggled ? "Menu" : "Close";
|
||||
}
|
||||
navToggle.innerHTML = menuToggled ? "Menu" : "Close";
|
||||
}
|
||||
|
||||
window.addEventListener("transitionBuffering", () => menu.classList.remove("openned"));
|
66
js/trans.js
Normal file
66
js/trans.js
Normal file
|
@ -0,0 +1,66 @@
|
|||
/*
|
||||
* Myadeleines' Simple Page Transition Script. "Trans" for short. :trol:
|
||||
* Making CSS-powered animated transitions between pages possible.
|
||||
*
|
||||
* Licensed under the Apache License. Please refer to the LICENSE file.
|
||||
*/
|
||||
|
||||
const transitionBufferingEvent = new Event("transitionBuffering");
|
||||
const transitionStartEvent = new Event("transitionStart");
|
||||
const transitionEndEvent = new Event("transitionEnd");
|
||||
const $ = selector => document.querySelector(selector);
|
||||
const parser = new DOMParser();
|
||||
const mainElement = $("main");
|
||||
|
||||
export function enableTransition( hyperlinkElement ) {
|
||||
hyperlinkElement.addEventListener("click", event => {
|
||||
event.preventDefault(); // Browser won't load the page when the hyperlink is pressed.
|
||||
|
||||
loadURL(hyperlinkElement.href, true, hyperlinkElement);
|
||||
});
|
||||
}
|
||||
|
||||
function loadURL( targettedURL, updateURL, hyperlinkElement ) {
|
||||
const activeHyperlink = $(".pageNav .active");
|
||||
|
||||
mainElement.classList.add("buffering");
|
||||
window.dispatchEvent(transitionBufferingEvent);
|
||||
|
||||
fetch(targettedURL + "?reduced")
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
alert(error);
|
||||
mainElement.classList.remove("buffering");
|
||||
})
|
||||
.then(response => response.text().then( fetchedPage => {
|
||||
fetchedPage = parser.parseFromString(fetchedPage, "text/html");
|
||||
fetchedPage = {
|
||||
content: fetchedPage.querySelector("main").innerHTML,
|
||||
title: fetchedPage.querySelector("title").innerHTML,
|
||||
}
|
||||
|
||||
if (activeHyperlink) activeHyperlink.classList.remove("active");
|
||||
if (hyperlinkElement) hyperlinkElement.classList.add("active");
|
||||
|
||||
if (updateURL) history.pushState({}, fetchedPage.title, targettedURL);
|
||||
$("title").innerHTML = fetchedPage.title;
|
||||
|
||||
mainElement.classList.remove("buffering");
|
||||
mainElement.classList.add("transition");
|
||||
|
||||
let transitionDuration = getComputedStyle(mainElement).transitionDuration;
|
||||
transitionDuration = parseFloat(transitionDuration) * 1000;
|
||||
|
||||
window.dispatchEvent(transitionStartEvent);
|
||||
|
||||
setTimeout(() => {
|
||||
mainElement.innerHTML = fetchedPage.content;
|
||||
mainElement.classList.remove("transition");
|
||||
window.dispatchEvent(transitionEndEvent);
|
||||
}, transitionDuration);
|
||||
}));
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", Event => {
|
||||
loadURL(window.location.href, false)
|
||||
});
|
|
@ -4,14 +4,12 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': '404',} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<h1>Not found! :<</h1>
|
||||
<p>
|
||||
This page is nowhere to be found!<br>
|
||||
Go on Discord and complain about it to Clash or Mya!!
|
||||
</p>
|
||||
</div>
|
||||
<main class="pageContent container">
|
||||
<h1>Not found! :<</h1>
|
||||
<p>
|
||||
This page is nowhere to be found!<br>
|
||||
Go on Discord and complain about it to Clash or Mya!!
|
||||
</p>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
@ -1,2 +1,4 @@
|
|||
{% if not reduced %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
{% endif %}
|
|
@ -1,3 +1,4 @@
|
|||
{% if not reduced %}
|
||||
<div class="container">
|
||||
<ins data-revive-zoneid="3" data-revive-id="5ae65e2e4729376e04e82303cef4f977"></ins>
|
||||
<script async src="//ads.theclashfruit.me/www/delivery/asyncjs.php"></script>
|
||||
|
@ -22,10 +23,11 @@
|
|||
<img src="/img/Mastodon.svg" alt="Mastodon's icon">
|
||||
<span>TheClashFruit</span>
|
||||
</a>
|
||||
<a href="https://mas.to/@Myadeleines" target="_blank" rel="me">
|
||||
<a href="https://wetdry.world/@Myadeleines" target="_blank" rel="me">
|
||||
<img src="/img/Mastodon.svg" alt="Mastodon's icon">
|
||||
<span>Myadeleines</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
{% endif %}
|
|
@ -1,3 +1,5 @@
|
|||
{% if reduced %} <title>{{ pageTitle }} • Clyde's Real Survival SMP</title> {% endif %}
|
||||
{% if not reduced %}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -5,7 +7,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<title>Clyde's Real Survival SMP • {{ pageTitle }}</title>
|
||||
<title>{{ pageTitle }} • Clyde's Real Survival SMP</title>
|
||||
|
||||
<meta name="name" content="Clyde's Real Survival SMP • {{ pageTitle }}" />
|
||||
<meta name="description" content="A very cool minecraft SMP that updates to every version starting from b1.0." />
|
||||
|
@ -27,6 +29,7 @@
|
|||
<meta name="twitter:description" content="A very cool minecraft SMP that updates to every version starting from b1.0." />
|
||||
<meta name="twitter:image" content="https://crss.blurryface.xyz/img/social_image.png" />
|
||||
|
||||
<script src="/js/main.js" type="module"></script>
|
||||
|
||||
{% if pageTitle == 'Map' %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||||
|
@ -57,6 +60,10 @@
|
|||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.leaflet-control {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.leaflet-control-mouseposition {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
|
||||
|
@ -79,4 +86,4 @@
|
|||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="/css/style.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<body> {% endif %}
|
|
@ -1,3 +1,4 @@
|
|||
{% if not reduced %}
|
||||
<header class="pageHero">
|
||||
<div class="container">
|
||||
|
||||
|
@ -10,9 +11,10 @@
|
|||
<!-- Right -->
|
||||
<div class="Server-Information">
|
||||
<span>Server address:</span>
|
||||
<input type="text" size="10" readonly value="play.blurryface.xyz">
|
||||
<span>Version: 1.3.2</span>
|
||||
<input type="text" size="14" readonly value="play.blurryface.xyz">
|
||||
<span>Version: 1.5.2</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
{% endif %}
|
|
@ -1,26 +1,23 @@
|
|||
{% if not reduced %}
|
||||
<script src="/js/nav.js" type="module"></script>
|
||||
<div class="Nav-Toggle">Menu</div>
|
||||
<div class="navToggle">Menu</div>
|
||||
<nav class="pageNav">
|
||||
<div class="container">
|
||||
<div class="navLeft">
|
||||
<a {% if page == 'home' %} class="active" {% else %} href="/" {% endif %}>
|
||||
<a class="transitionEnabled {% if page == 'home' %} active {% endif %}" href="/">
|
||||
Home
|
||||
</a>
|
||||
<a href="https://youtube.com/@CRSS666">Videos</a>
|
||||
<a {% if page == 'gallery' %} class="active" {% else %} href="/gallery" {% endif %}>
|
||||
<a class="transitionEnabled {% if page == 'gallery' %} active {% endif %}" href="/gallery">
|
||||
Gallery
|
||||
</a>
|
||||
<a {% if page == 'nations' %} class="active" {% else %} href="/nations" {% endif %}>
|
||||
<a class="transitionEnabled {% if page == 'nations' %} active {% endif %}" href="/nations">
|
||||
Nations
|
||||
</a>
|
||||
<!--<a {% if page == 'rules' %} class="active" {% else %} href="/rules" {% endif %}>
|
||||
Rules
|
||||
</a>-->
|
||||
<a {% if page == 'map.js' %} class="active" {% else %} href="/map" {% endif %}>
|
||||
Map
|
||||
<a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
|
||||
Map & Rails
|
||||
</a>
|
||||
</div>
|
||||
<div class="navRight" style="display: none;">
|
||||
<div class="navRight">
|
||||
{% if user %}
|
||||
<a class="userButton {% if page == 'profile' %}active{% endif %}" href="{% if page == 'profile' %}#{% else %}/profile{% endif %}">
|
||||
{{ user.global_name }}
|
||||
|
@ -32,4 +29,5 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
{% endif %}
|
|
@ -4,23 +4,20 @@
|
|||
|
||||
{% include 'includes/nav.twig' with {'page': 'home',} %}
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
<h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
|
||||
<p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
|
||||
|
||||
<h2 id="rules">Rules</h2>
|
||||
<ol>
|
||||
<li>
|
||||
The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
|
||||
</li>
|
||||
<li>
|
||||
Do not modify (or destroy) other players' constructions, or take their items, without their permission. <b>TL;DR Do not grief or steal.</b>
|
||||
</li>
|
||||
</ol>
|
||||
<b>Failing to follow these basic rules will result in a ban.</b>
|
||||
|
||||
</div>
|
||||
<main class="pageContent container">
|
||||
<h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
|
||||
<p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
|
||||
|
||||
<h2 id="rules">Rules</h2>
|
||||
<ol>
|
||||
<li>
|
||||
The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
|
||||
</li>
|
||||
<li>
|
||||
Do not modify (or destroy) other players' constructions, or take their items, without their permission. <b>TL;DR Do not grief or steal.</b>
|
||||
</li>
|
||||
</ol>
|
||||
<b>Failing to follow these basic rules will result in a ban.</b>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<div id="map"></div>
|
||||
<a id="homeLink" href="/">Go Home</a>
|
||||
|
||||
<script>const center = "{{ center }}";</script>
|
||||
<script src="js/map.js"></script>
|
||||
|
||||
{% 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'} %}
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
<div class="container">
|
||||
<h1>Nations</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/nation/rop">Republic of Panorama</a>
|
||||
</li>
|
||||
</ul>
|
||||
<main class="pageContent container">
|
||||
<h1>Nations</h1>
|
||||
<div class="cards">
|
||||
{% for nation in nations %}
|
||||
<a class="card transitionEnabled" href="/nation/{{ nation.short }}">
|
||||
<h1>{{ nation.name }}</h1>
|
||||
<p>{{ nation.description }}</p>
|
||||
<img class="icon" src="{{ nation.flag }}">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.twig' %}
|
||||
|
|
Loading…
Reference in a new issue