CRSS/pages
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: pages and some hero improvements

Browse source
This commit is contained in:
TheClashFruit 2023-08-24 14:21:31 +02:00
parent 4ae9b9c1a9
commit f0c60cd10f
Signed by: TheClashFruit
GPG key ID: CF4A319B9A73290C
9 changed files with 322 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
404.html Normal file
View file

@ -0,0 +1,82 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CRSS</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pageHero" id="hero">
<div class="blurFiler">
<div class="container">
<h1>Clyde's Real Survival SMP</h1>
<div class="serverInfo">
Online: <label>0</label> / <label>20</label>
</div>
</div>
</div>
</div>
<nav class="pageNav" id="navigation">
<div class="container">
<ul class="navLeft">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="nations.html">
Nations
</a>
</li>
<li>
<a href="rules.html">
Rules
</a>
</li>
<li>
<a href="map.html">
Map
</a>
</li>
</ul>
<ul class="navRight">
<li>
<a class="buttonPrimary" href="#">
Login
</a>
</li>
</ul>
</div>
</nav>
<main class="pageContent" id="content">
<div class="container">
<p>🗿 404?! What??</p>
</div>
</main>
<footer class="pageFooter container" id="footer">
<div class="left">
<p class="copyright">
Copyright &copy; 2023 CRSS
</p>
<p class="sponsors">
Brought to by TCFRHC LLC., PrideCraft, TheClashFruit's Gitea.
</p>
</div>
<div class="left">
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

2
css/_fonts.scss
View file

@ -2,6 +2,8 @@
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Outfit", "Noto Color Emoji", sans-serif; font-family: "Outfit", "Noto Color Emoji", sans-serif;
margin-bottom: 6px;
} }
p, a, label, button, input { p, a, label, button, input {

26
css/style.css
View file

@ -6,6 +6,7 @@
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Outfit", "Noto Color Emoji", sans-serif; font-family: "Outfit", "Noto Color Emoji", sans-serif;
margin-bottom: 6px;
} }
p, a, label, button, input { p, a, label, button, input {
@ -18,15 +19,26 @@ body {
.container { .container {
max-width: 1100px; max-width: 1100px;
width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.pageHero { ul, ol {
background: #6366f1; list-style-position: inside;
color: #fff;
height: 30svh;
} }
.pageHero > .container {
.pageHero {
background-image: url("../img/spawn.jpg");
background-position: center;
color: #fff;
height: 240px;
}
.pageHero > .blurFiler {
backdrop-filter: blur(2px);
padding: 8px 0;
height: calc(100% - 16px);
}
.pageHero > .blurFiler > .container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -64,6 +76,10 @@ body {
color: #fff; color: #fff;
} }
.pageContent {
margin: 16px 0;
}
.pageFooter { .pageFooter {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
css/style.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["_fonts.scss","_reset.scss","style.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;;;ADAF;EACE;;;AAGF;EACE;;;AEJF;EACE;;;AAGF;EACE;EAEA;;;AAGF;EACE;EACA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;;AAIJ;EACE;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;EAEA;;AAGE;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAQZ;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA","file":"style.css"} {"version":3,"sourceRoot":"","sources":["_fonts.scss","_reset.scss","style.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;;;ADAF;EACE;EAEA;;;AAGF;EACE;;;AENF;EACE;;;AAGF;EACE;EAEA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;;AAKN;EACE;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;EAEA;;AAGE;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAQZ;EACE;;;AAGF;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA","file":"style.css"}

37
css/style.scss
View file

@ -8,23 +8,40 @@ body {
.container { .container {
max-width: 1100px; max-width: 1100px;
width: 100%;
margin: 0 auto; margin: 0 auto;
} }
ul, ol {
list-style-position: inside;
}
.pageHero { .pageHero {
background: #6366f1; background-image: url('../img/spawn.jpg');
background-position: center;
color: #fff; color: #fff;
height: 30svh; height: 240px;
> .container { > .blurFiler {
height: 100%; backdrop-filter: blur(2px);
display: flex; padding: 8px 0;
flex-direction: row;
align-items: center; height: calc(100% - (8px + 8px));
justify-content: space-between;
> .container {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
} }
} }
@ -73,6 +90,10 @@ body {
} }
} }
.pageContent {
margin: 16px 0;
}
.pageFooter { .pageFooter {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

BIN
img/spawn.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 MiB

22
index.html
View file

@ -7,16 +7,18 @@
<title>CRSS</title> <title>CRSS</title>
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="pageHero" id="hero"> <div class="pageHero" id="hero">
<div class="container"> <div class="blurFiler">
<h1>Clyde's Real Survival SMP</h1> <div class="container">
<h1>Clyde's Real Survival SMP</h1>
<div class="serverInfo"> <div class="serverInfo">
Online: <label>0</label> / <label>20</label> Online: <label>0</label> / <label>20</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -30,17 +32,17 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="nations.html">
Nations Nations
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="rules.html">
Rules Rules
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="map.html">
Map Map
</a> </a>
</li> </li>
@ -73,6 +75,6 @@
</div> </div>
</footer> </footer>
<script src="/js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

82
map.html Normal file
View file

@ -0,0 +1,82 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CRSS</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pageHero" id="hero">
<div class="blurFiler">
<div class="container">
<h1>Clyde's Real Survival SMP</h1>
<div class="serverInfo">
Online: <label>0</label> / <label>20</label>
</div>
</div>
</div>
</div>
<nav class="pageNav" id="navigation">
<div class="container">
<ul class="navLeft">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="nations.html">
Nations
</a>
</li>
<li>
<a href="rules.html">
Rules
</a>
</li>
<li>
<a class="active" href="#">
Map
</a>
</li>
</ul>
<ul class="navRight">
<li>
<a class="buttonPrimary" href="#">
Login
</a>
</li>
</ul>
</div>
</nav>
<main class="pageContent" id="content">
<div class="container">
<p>⚒️ Under Construction</p>
</div>
</main>
<footer class="pageFooter container" id="footer">
<div class="left">
<p class="copyright">
Copyright &copy; 2023 CRSS
</p>
<p class="sponsors">
Brought to by TCFRHC LLC., PrideCraft, TheClashFruit's Gitea.
</p>
</div>
<div class="left">
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

93
rules.html Normal file
View file

@ -0,0 +1,93 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CRSS</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pageHero" id="hero">
<div class="blurFiler">
<div class="container">
<h1>Clyde's Real Survival SMP</h1>
<div class="serverInfo">
Online: <label>0</label> / <label>20</label>
</div>
</div>
</div>
</div>
<nav class="pageNav" id="navigation">
<div class="container">
<ul class="navLeft">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="nations.html">
Nations
</a>
</li>
<li>
<a class="active" href="#">
Rules
</a>
</li>
<li>
<a href="map.html">
Map
</a>
</li>
</ul>
<ul class="navRight">
<li>
<a class="buttonPrimary" href="#">
Login
</a>
</li>
</ul>
</div>
</nav>
<main class="pageContent" id="content">
<div class="container">
<h2>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>
<footer class="pageFooter container" id="footer">
<div class="left">
<p class="copyright">
Copyright &copy; 2023 CRSS
</p>
<p class="sponsors">
Brought to by TCFRHC LLC., PrideCraft, TheClashFruit's Gitea.
</p>
</div>
<div class="left">
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>