diff --git a/routes/routes.js b/routes/routes.js
index 9c139ce..d7b1dee 100644
--- a/routes/routes.js
+++ b/routes/routes.js
@@ -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
\ No newline at end of file
diff --git a/src/sass/landing.scss b/src/sass/landing.scss
new file mode 100644
index 0000000..2c74301
--- /dev/null
+++ b/src/sass/landing.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/sass/partials/_palette.scss b/src/sass/partials/_palette.scss
index a0e7179..14e53b7 100644
--- a/src/sass/partials/_palette.scss
+++ b/src/sass/partials/_palette.scss
@@ -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);
-}
\ No newline at end of file
+$primary: $pink;
+$accent: $pink5;
+$surface: $grey2;
+$text: $grey15;
+
diff --git a/src/sass/partials/_settings.scss b/src/sass/partials/_settings.scss
new file mode 100644
index 0000000..67e6935
--- /dev/null
+++ b/src/sass/partials/_settings.scss
@@ -0,0 +1,3 @@
+$border_radius_s: .5rem;
+$border_radius_m: 1rem;
+$border_radius_l: 2rem;
\ No newline at end of file
diff --git a/src/sass/partials/_shadows.scss b/src/sass/partials/_shadows.scss
new file mode 100644
index 0000000..81f196c
--- /dev/null
+++ b/src/sass/partials/_shadows.scss
@@ -0,0 +1,4 @@
+@use "_palette.scss";
+
+$small: .25rem 0 2rem palette.$grey1;
+$large: .5rem 0 4rem palette.$grey1;
\ No newline at end of file
diff --git a/src/sass/theme.scss b/src/sass/theme.scss
index 7fffb95..f406d64 100644
--- a/src/sass/theme.scss
+++ b/src/sass/theme.scss
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/static/css/colors.css b/static/css/colors.css
deleted file mode 100644
index e69de29..0000000
diff --git a/static/css/landing.css b/static/css/landing.css
new file mode 100644
index 0000000..171e213
--- /dev/null
+++ b/static/css/landing.css
@@ -0,0 +1 @@
+main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25vh 2rem}h1{color:#e0e0ff}
diff --git a/static/css/theme.css b/static/css/theme.css
index ecdb179..c1c4512 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -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}
diff --git a/views/components/_footer.njk b/views/components/_footer.njk
new file mode 100644
index 0000000..2d1ae68
--- /dev/null
+++ b/views/components/_footer.njk
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/views/components/_navbar.njk b/views/components/_navbar.njk
index eaf686b..2e65684 100644
--- a/views/components/_navbar.njk
+++ b/views/components/_navbar.njk
@@ -1,7 +1,7 @@
\ No newline at end of file
diff --git a/views/pages/landing.njk b/views/pages/landing.njk
index 1aebae0..40ea16d 100644
--- a/views/pages/landing.njk
+++ b/views/pages/landing.njk
@@ -1,16 +1,19 @@
{% extends "../templates/basic.njk" %}
{% block head %}
+
DDStats - Welcome!
{% endblock %}
{% block body %}
-
+
+
-
+
+
{% endblock %}
\ No newline at end of file
diff --git a/views/templates/basic.njk b/views/templates/basic.njk
index f35b2b4..2cb11af 100644
--- a/views/templates/basic.njk
+++ b/views/templates/basic.njk
@@ -5,7 +5,6 @@
-
{% block head %}
DDStats
@@ -17,5 +16,7 @@
{% block body %}
This sure looks very empty...
{% endblock %}
+
+ {% include "../components/_footer.njk" %}