BurnyLlama/ddstats-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Landing page done ish.

Browse Source
This commit is contained in:
BurnyLlama 2021-10-30 23:15:55 +02:00
parent 37a0495da8
commit f068c17153
13 changed files with 237 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
routes/routes.js
View File

@ -4,7 +4,7 @@ const routes = Router()
routes.get(
'/',
(req, res) => res.render('pages/landing.njk')
(req, res) => res.render('pages/landing.njk', {currentSection: "maps"})
)
export default routes

13
src/sass/landing.scss Normal file
View File

@ -0,0 +1,13 @@
@use "partials/palette.scss";
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25vh 2rem;
}
h1 {
color: palette.$text;
}

186
src/sass/partials/_palette.scss
View File

@ -1,108 +1,106 @@
:root {
/* COLORS */
--red: #EF5255;
--red1: #BF3638;
--red2: #D5484A;
--red3: #EF5255;
--red4: #FA7A7C;
--red5: #FA999A;
$red: #EF5255;
$red1: #BF3638;
$red2: #D5484A;
$red3: #EF5255;
$red4: #FA7A7C;
$red5: #FA999A;
--orange: #EB801B;
--orange1: #AF6118;
--orange2: #DA7516;
--orange3: #EB801B;
--orange4: #F99434;
--orange5: #F9AE67;
$orange: #EB801B;
$orange1: #AF6118;
$orange2: #DA7516;
$orange3: #EB801B;
$orange4: #F99434;
$orange5: #F9AE67;
--yellow: #F4C025;
--yellow1: #BD920F;
--yellow2: #DFAC11;
--yellow3: #F4C025;
--yellow4: #FFD147;
--yellow5: #FFE38F;
$yellow: #F4C025;
$yellow1: #BD920F;
$yellow2: #DFAC11;
$yellow3: #F4C025;
$yellow4: #FFD147;
$yellow5: #FFE38F;
--pear: #AED651;
--pear1: #7D9A37;
--pear2: #96BB3E;
--pear3: #AED651;
--pear4: #C2E571;
--pear5: #DBF1A7;
$pear: #AED651;
$pear1: #7D9A37;
$pear2: #96BB3E;
$pear3: #AED651;
$pear4: #C2E571;
$pear5: #DBF1A7;
--green: #72D661;
--green1: #53A545;
--green2: #61C350;
--green3: #72D661;
--green4: #93E684;
--green5: #BCF0B2;
$green: #72D661;
$green1: #53A545;
$green2: #61C350;
$green3: #72D661;
$green4: #93E684;
$green5: #BCF0B2;
--sea: #3DDF89;
--sea1: #2AA764;
--sea2: #2ACB75;
--sea3: #3DDF89;
--sea4: #5DEEA1;
--sea5: #A9F4CC;
$sea: #3DDF89;
$sea1: #2AA764;
$sea2: #2ACB75;
$sea3: #3DDF89;
$sea4: #5DEEA1;
$sea5: #A9F4CC;
--cyan: #4CDCDF;
--cyan1: #2CA3A5;
--cyan2: #2DCACD;
--cyan3: #4CDCDF;
--cyan4: #6BE8EB;
--cyan5: #B7EFF0;
$cyan: #4CDCDF;
$cyan1: #2CA3A5;
$cyan2: #2DCACD;
$cyan3: #4CDCDF;
$cyan4: #6BE8EB;
$cyan5: #B7EFF0;
--blue: #4C9CEF;
--blue1: #1C67B5;
--blue2: #2A83DF;
--blue3: #4C9CEF;
--blue4: #74B6FB;
--blue5: #A3CEFA;
$blue: #4C9CEF;
$blue1: #1C67B5;
$blue2: #2A83DF;
$blue3: #4C9CEF;
$blue4: #74B6FB;
$blue5: #A3CEFA;
--indigo: #4C6DEF;
--indigo1: #2143CA;
--indigo2: #3457E5;
--indigo3: #4C6DEF;
--indigo4: #748FFB;
--indigo5: #B1C0FC;
$indigo: #4C6DEF;
$indigo1: #2143CA;
$indigo2: #3457E5;
$indigo3: #4C6DEF;
$indigo4: #748FFB;
$indigo5: #B1C0FC;
--purple: #967CF4;
--purple1: #613FD9;
--purple2: #7C5DE9;
--purple3: #967CF4;
--purple4: #BCAAFD;
--purple5: #CFC2FE;
$purple: #967CF4;
$purple1: #613FD9;
$purple2: #7C5DE9;
$purple3: #967CF4;
$purple4: #BCAAFD;
$purple5: #CFC2FE;
--magenta: #E175DB;
--magenta1: #B63AB0;
--magenta2: #D152CB;
--magenta3: #E175DB;
--magenta4: #EC9AEF;
--magenta5: #EFB1F1;
$magenta: #E175DB;
$magenta1: #B63AB0;
$magenta2: #D152CB;
$magenta3: #E175DB;
$magenta4: #EC9AEF;
$magenta5: #EFB1F1;
--pink: #EE588F;
--pink1: #D0356D;
--pink2: #E2407C;
--pink3: #EE588F;
--pink4: #FA80AC;
--pink5: #FBA7C6;
$pink: #EE588F;
$pink1: #D0356D;
$pink2: #E2407C;
$pink3: #EE588F;
$pink4: #FA80AC;
$pink5: #FBA7C6;
--grey1: #00001F;
--grey2: #10102F;
--grey3: #20203F;
--grey4: #30304F;
--grey5: #40405F;
--grey6: #50506F;
--grey7: #60607F;
--grey8: #70708F;
--grey9: #80809F;
--grey10: #9090AF;
--grey11: #A0A0BF;
--grey12: #B0B0CF;
--grey13: #C0C0DF;
--grey14: #D0D0EF;
--grey15: #E0E0FF;
$grey1: #00001F;
$grey2: #10102F;
$grey3: #20203F;
$grey4: #30304F;
$grey5: #40405F;
$grey6: #50506F;
$grey7: #60607F;
$grey8: #70708F;
$grey9: #80809F;
$grey10: #9090AF;
$grey11: #A0A0BF;
$grey12: #B0B0CF;
$grey13: #C0C0DF;
$grey14: #D0D0EF;
$grey15: #E0E0FF;
/* ALIASES */
--primary: var(--pink);
--accent: var(--pink5);
--surface: var(--grey2);
--text: var(--grey15);
}
$primary: $pink;
$accent: $pink5;
$surface: $grey2;
$text: $grey15;

3
src/sass/partials/_settings.scss Normal file
View File

@ -0,0 +1,3 @@
$border_radius_s: .5rem;
$border_radius_m: 1rem;
$border_radius_l: 2rem;

4
src/sass/partials/_shadows.scss Normal file
View File

@ -0,0 +1,4 @@
@use "_palette.scss";
$small: .25rem 0 2rem palette.$grey1;
$large: .5rem 0 4rem palette.$grey1;

106
src/sass/theme.scss
View File

@ -1,3 +1,7 @@
@use "partials/_shadows.scss";
@use "partials/_settings.scss";
@use "partials/_palette.scss";
* {
margin: 0;
padding: 0;
@ -7,21 +11,109 @@
scroll-behavior: smooth;
font-family: 'Manrope Regular', sans-serif;
font-size: .85rem;
font-size: 1rem;
line-height: 1.5;
color: var(--text);
}
html, body {
color: var(--text);
background-color: var(--surface);
color: palette.$text;
background-color: palette.$surface;
height: 100%;
}
nav {
background-color: var(--grey3);
display: flex;
align-items: center;
background-color: palette.$grey3;
border-radius: 0 0 settings.$border_radius_l settings.$border_radius_l;
box-shadow: shadows.$large;
margin: 0 0 2rem 0;
padding: 1rem 2rem;
.logo {
width: 3rem;
height: 3rem;
border-radius: 100%;
background-color: palette.$primary;
}
a {
color: palette.$accent;
margin: 1rem 2rem;
font-size: 1.25rem;
text-decoration: none transparent;
}
a.current {
color: palette.$primary;
}
}
//
// TEXT
//
header, h1, h2, h3, h4, h5, h6 {
color: var(--primary);
color: palette.$accent;
}
header {
font-size: 4rem;
}
// No, I am not lazy...
// - BurnyLlama
@mixin heading($level) {
font-size: 1.65rem - ($level * 0.15);
font-weight: normal;
}
@for $i from 1 to 6 {
h#{$i} {
@include heading($i);
}
}
//
// FORMS, INPUT
//
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
color: palette.$text;
background-color: palette.$grey3;
margin: 1em 0;
padding: .75em 1.25em;
width: 80ch;
border-radius: settings.$border_radius_s;
box-shadow: shadows.$small;
}
//
// FOOTER
//
footer {
display: flex;
flex-direction: column;
align-items: center;
margin: 5vh 2rem;
a {
color: palette.$blue4;
font-size: 0.8rem;
}
}

0
static/css/colors.css
View File

1
static/css/landing.css Normal file
View File

@ -0,0 +1 @@
main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25vh 2rem}h1{color:#e0e0ff}

2
static/css/theme.css
View File

@ -1 +1 @@
*{margin:0;padding:0;border:0 none transparent;box-sizing:border-box;scroll-behavior:smooth;font-family:"Manrope Regular",sans-serif;font-size:.85rem;line-height:1.5;color:var(--text)}html,body{color:var(--text);background-color:var(--surface)}nav{background-color:var(--grey3)}header,h1,h2,h3,h4,h5,h6{color:var(--primary)}
*{margin:0;padding:0;border:0 none transparent;box-sizing:border-box;scroll-behavior:smooth;font-family:"Manrope Regular",sans-serif;font-size:1rem;line-height:1.5}html,body{color:#e0e0ff;background-color:#10102f;height:100%}nav{display:flex;align-items:center;background-color:#20203f;border-radius:0 0 2rem 2rem;box-shadow:.5rem 0 4rem #00001f;margin:0 0 2rem 0;padding:1rem 2rem}nav .logo{width:3rem;height:3rem;border-radius:100%;background-color:#ee588f}nav a{color:#fba7c6;margin:1rem 2rem;font-size:1.25rem;text-decoration:none transparent}nav a.current{color:#ee588f}header,h1,h2,h3,h4,h5,h6{color:#fba7c6}header{font-size:4rem}h1{font-size:1.5rem;font-weight:normal}h2{font-size:1.35rem;font-weight:normal}h3{font-size:1.2rem;font-weight:normal}h4{font-size:1.05rem;font-weight:normal}h5{font-size:.9rem;font-weight:normal}form{display:flex;flex-direction:column;justify-content:center;align-items:center}input{color:#e0e0ff;background-color:#20203f;margin:1em 0;padding:.75em 1.25em;width:80ch;border-radius:.5rem;box-shadow:.25rem 0 2rem #00001f}footer{display:flex;flex-direction:column;align-items:center;margin:5vh 2rem}footer a{color:#74b6fb;font-size:.8rem}

8
views/components/_footer.njk Normal file
View File

@ -0,0 +1,8 @@
<footer>
<p>
Made with &lt;3 by team qwik
</p>
<p>
<a href="https://git.qwik.space/BurnyLlama/ddstats-server">Source Code</a> • <a href="/api/reference">API Reference</a> • <a href="/instance-info">Instance Info</a>
</p>
</footer>

6
views/components/_navbar.njk
View File

@ -1,7 +1,7 @@
<nav>
<div class="logo"></div>
<a href="/maps">Maps</a>
<a href="/maps">Leaderboards</a>
<a href="/maps">Tournaments</a>
<a href="/maps" class="{{ "current" if currentSection == "maps" }}">Maps</a>
<a href="/leaderboards" class="{{ "current" if currentSection == "leaderboards" }}">Leaderboards</a>
<a href="/tournaments" class="{{ "current" if currentSection == "tournaments" }}">Tournaments</a>
</nav>

17
views/pages/landing.njk
View File

@ -1,16 +1,19 @@
{% extends "../templates/basic.njk" %}
{% block head %}
<link rel="stylesheet" href="/assets/css/landing.css">
<title>DDStats - Welcome!</title>
{% endblock %}
{% block body %}
<header>
Welcome to DDStats!
</header>
<main>
<header>
Welcome to DDStats!
</header>
<form action="/search" method="get">
<h1>Search for a player or map...</h1>
<input type="text" name="q">
</form>
<form action="/search" method="get">
<h1>Search for a player or map...</h1>
<input type="text" name="q" placeholder="Yumiko, Hitode, ...">
</form>
</main>
{% endblock %}

3
views/templates/basic.njk
View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/theme.css">
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/colors.css">
<link rel="stylesheet" href="/assets/css/theme.css">
{% block head %}
<title>DDStats</title>
@ -17,5 +16,7 @@
{% block body %}
<p>This sure looks very empty...</p>
{% endblock %}
{% include "../components/_footer.njk" %}
</body>
</html>