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( routes.get(
'/', '/',
(req, res) => res.render('pages/landing.njk') (req, res) => res.render('pages/landing.njk', {currentSection: "maps"})
) )
export default routes 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 { $red: #EF5255;
/* COLORS */ $red1: #BF3638;
--red: #EF5255; $red2: #D5484A;
--red1: #BF3638; $red3: #EF5255;
--red2: #D5484A; $red4: #FA7A7C;
--red3: #EF5255; $red5: #FA999A;
--red4: #FA7A7C;
--red5: #FA999A;
--orange: #EB801B; $orange: #EB801B;
--orange1: #AF6118; $orange1: #AF6118;
--orange2: #DA7516; $orange2: #DA7516;
--orange3: #EB801B; $orange3: #EB801B;
--orange4: #F99434; $orange4: #F99434;
--orange5: #F9AE67; $orange5: #F9AE67;
--yellow: #F4C025; $yellow: #F4C025;
--yellow1: #BD920F; $yellow1: #BD920F;
--yellow2: #DFAC11; $yellow2: #DFAC11;
--yellow3: #F4C025; $yellow3: #F4C025;
--yellow4: #FFD147; $yellow4: #FFD147;
--yellow5: #FFE38F; $yellow5: #FFE38F;
--pear: #AED651; $pear: #AED651;
--pear1: #7D9A37; $pear1: #7D9A37;
--pear2: #96BB3E; $pear2: #96BB3E;
--pear3: #AED651; $pear3: #AED651;
--pear4: #C2E571; $pear4: #C2E571;
--pear5: #DBF1A7; $pear5: #DBF1A7;
--green: #72D661; $green: #72D661;
--green1: #53A545; $green1: #53A545;
--green2: #61C350; $green2: #61C350;
--green3: #72D661; $green3: #72D661;
--green4: #93E684; $green4: #93E684;
--green5: #BCF0B2; $green5: #BCF0B2;
--sea: #3DDF89; $sea: #3DDF89;
--sea1: #2AA764; $sea1: #2AA764;
--sea2: #2ACB75; $sea2: #2ACB75;
--sea3: #3DDF89; $sea3: #3DDF89;
--sea4: #5DEEA1; $sea4: #5DEEA1;
--sea5: #A9F4CC; $sea5: #A9F4CC;
--cyan: #4CDCDF; $cyan: #4CDCDF;
--cyan1: #2CA3A5; $cyan1: #2CA3A5;
--cyan2: #2DCACD; $cyan2: #2DCACD;
--cyan3: #4CDCDF; $cyan3: #4CDCDF;
--cyan4: #6BE8EB; $cyan4: #6BE8EB;
--cyan5: #B7EFF0; $cyan5: #B7EFF0;
--blue: #4C9CEF; $blue: #4C9CEF;
--blue1: #1C67B5; $blue1: #1C67B5;
--blue2: #2A83DF; $blue2: #2A83DF;
--blue3: #4C9CEF; $blue3: #4C9CEF;
--blue4: #74B6FB; $blue4: #74B6FB;
--blue5: #A3CEFA; $blue5: #A3CEFA;
--indigo: #4C6DEF; $indigo: #4C6DEF;
--indigo1: #2143CA; $indigo1: #2143CA;
--indigo2: #3457E5; $indigo2: #3457E5;
--indigo3: #4C6DEF; $indigo3: #4C6DEF;
--indigo4: #748FFB; $indigo4: #748FFB;
--indigo5: #B1C0FC; $indigo5: #B1C0FC;
--purple: #967CF4; $purple: #967CF4;
--purple1: #613FD9; $purple1: #613FD9;
--purple2: #7C5DE9; $purple2: #7C5DE9;
--purple3: #967CF4; $purple3: #967CF4;
--purple4: #BCAAFD; $purple4: #BCAAFD;
--purple5: #CFC2FE; $purple5: #CFC2FE;
--magenta: #E175DB; $magenta: #E175DB;
--magenta1: #B63AB0; $magenta1: #B63AB0;
--magenta2: #D152CB; $magenta2: #D152CB;
--magenta3: #E175DB; $magenta3: #E175DB;
--magenta4: #EC9AEF; $magenta4: #EC9AEF;
--magenta5: #EFB1F1; $magenta5: #EFB1F1;
--pink: #EE588F; $pink: #EE588F;
--pink1: #D0356D; $pink1: #D0356D;
--pink2: #E2407C; $pink2: #E2407C;
--pink3: #EE588F; $pink3: #EE588F;
--pink4: #FA80AC; $pink4: #FA80AC;
--pink5: #FBA7C6; $pink5: #FBA7C6;
--grey1: #00001F; $grey1: #00001F;
--grey2: #10102F; $grey2: #10102F;
--grey3: #20203F; $grey3: #20203F;
--grey4: #30304F; $grey4: #30304F;
--grey5: #40405F; $grey5: #40405F;
--grey6: #50506F; $grey6: #50506F;
--grey7: #60607F; $grey7: #60607F;
--grey8: #70708F; $grey8: #70708F;
--grey9: #80809F; $grey9: #80809F;
--grey10: #9090AF; $grey10: #9090AF;
--grey11: #A0A0BF; $grey11: #A0A0BF;
--grey12: #B0B0CF; $grey12: #B0B0CF;
--grey13: #C0C0DF; $grey13: #C0C0DF;
--grey14: #D0D0EF; $grey14: #D0D0EF;
--grey15: #E0E0FF; $grey15: #E0E0FF;
/* ALIASES */ /* ALIASES */
--primary: var(--pink); $primary: $pink;
--accent: var(--pink5); $accent: $pink5;
--surface: var(--grey2); $surface: $grey2;
--text: var(--grey15); $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; margin: 0;
padding: 0; padding: 0;
@ -7,21 +11,109 @@
scroll-behavior: smooth; scroll-behavior: smooth;
font-family: 'Manrope Regular', sans-serif; font-family: 'Manrope Regular', sans-serif;
font-size: .85rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: var(--text);
} }
html, body { html, body {
color: var(--text); color: palette.$text;
background-color: var(--surface); background-color: palette.$surface;
height: 100%;
} }
nav { 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 { 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> <nav>
<div class="logo"></div> <div class="logo"></div>
<a href="/maps">Maps</a> <a href="/maps" class="{{ "current" if currentSection == "maps" }}">Maps</a>
<a href="/maps">Leaderboards</a> <a href="/leaderboards" class="{{ "current" if currentSection == "leaderboards" }}">Leaderboards</a>
<a href="/maps">Tournaments</a> <a href="/tournaments" class="{{ "current" if currentSection == "tournaments" }}">Tournaments</a>
</nav> </nav>

5
views/pages/landing.njk
View File

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

3
views/templates/basic.njk
View File

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