Landing page done ish.
This commit is contained in:
parent
37a0495da8
commit
f068c17153
|
@ -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
13
src/sass/landing.scss
Normal 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;
|
||||||
|
}
|
|
@ -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
3
src/sass/partials/_settings.scss
Normal 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
4
src/sass/partials/_shadows.scss
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
@use "_palette.scss";
|
||||||
|
|
||||||
|
$small: .25rem 0 2rem palette.$grey1;
|
||||||
|
$large: .5rem 0 4rem palette.$grey1;
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
header, h1, h2, h3, h4, h5, h6 {
|
a {
|
||||||
color: var(--primary);
|
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: 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;
|
||||||
|
}
|
||||||
}
|
}
|
1
static/css/landing.css
Normal file
1
static/css/landing.css
Normal file
|
@ -0,0 +1 @@
|
||||||
|
main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25vh 2rem}h1{color:#e0e0ff}
|
|
@ -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
8
views/components/_footer.njk
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
Made with <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>
|
|
@ -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>
|
|
@ -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 %}
|
|
@ -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>
|
Loading…
Reference in New Issue
Block a user