feat: some css
This commit is contained in:
parent
a26a70bcbb
commit
4ae9b9c1a9
GPG key ID:
CF4A319B9A73290C
9
css/_fonts.scss
Normal file
9
css/_fonts.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@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');
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Outfit", "Noto Color Emoji", sans-serif;
|
||||
}
|
||||
|
||||
p, a, label, button, input {
|
||||
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
|
||||
}
|
||||
4
css/_reset.scss
Normal file
4
css/_reset.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1,6 +1,78 @@
|
|||
@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");
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Outfit", "Noto Color Emoji", sans-serif;
|
||||
}
|
||||
|
||||
p, a, label, button, input {
|
||||
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pageHero {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
height: 30svh;
|
||||
}
|
||||
.pageHero > .container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pageNav {
|
||||
width: 100svw;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.pageNav > .container {
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pageNav > .container > ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.pageNav > .container > ul > li > a {
|
||||
color: #0f172a;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
.pageNav > .container > ul > li > a:hover, .pageNav > .container > ul > li > a.active {
|
||||
background: rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
.pageNav > .container > ul > li > a.buttonPrimary {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pageFooter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pageFooter > .left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACE;EACA","file":"style.css"}
|
||||
{"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"}
|
||||
|
|
@ -1,4 +1,91 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@import "reset";
|
||||
@import "fonts";
|
||||
|
||||
body {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pageHero {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
|
||||
height: 30svh;
|
||||
|
||||
> .container {
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.pageNav {
|
||||
width: 100svw;
|
||||
|
||||
background: #f1f5f9;
|
||||
|
||||
> .container {
|
||||
padding: 16px 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> ul {
|
||||
list-style: none;
|
||||
|
||||
display: flex;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
color: #0f172a;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
padding: 8px 16px;
|
||||
|
||||
border-radius: 32px;
|
||||
|
||||
&:hover, &.active {
|
||||
background: rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
&.buttonPrimary {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageFooter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> .left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
> .right {
|
||||
|
||||
}
|
||||
}
|
||||
62
index.html
62
index.html
|
|
@ -11,7 +11,67 @@
|
|||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CRSS</h1>
|
||||
<div class="pageHero" id="hero">
|
||||
<div class="container">
|
||||
<h1>Clyde's Real Survival SMP</h1>
|
||||
|
||||
<div class="serverInfo">
|
||||
Online: <label>0</label> / <label>20</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="pageNav" id="navigation">
|
||||
<div class="container">
|
||||
<ul class="navLeft">
|
||||
<li>
|
||||
<a class="active" href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Nations
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Rules
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Map
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navRight">
|
||||
<li>
|
||||
<a class="buttonPrimary" href="#">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="pageContent" id="content">
|
||||
CONTENT HERE
|
||||
</main>
|
||||
|
||||
<footer class="pageFooter container" id="footer">
|
||||
<div class="left">
|
||||
<p class="copyright">
|
||||
Copyright © 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue