From f068c171530f3641456743918a139bc232ae4f15 Mon Sep 17 00:00:00 2001 From: BurnyLlama Date: Sat, 30 Oct 2021 23:15:55 +0200 Subject: [PATCH] Landing page done ish. --- routes/routes.js | 2 +- src/sass/landing.scss | 13 +++ src/sass/partials/_palette.scss | 186 +++++++++++++++---------------- src/sass/partials/_settings.scss | 3 + src/sass/partials/_shadows.scss | 4 + src/sass/theme.scss | 106 ++++++++++++++++-- static/css/colors.css | 0 static/css/landing.css | 1 + static/css/theme.css | 2 +- views/components/_footer.njk | 8 ++ views/components/_navbar.njk | 6 +- views/pages/landing.njk | 17 +-- views/templates/basic.njk | 3 +- 13 files changed, 237 insertions(+), 114 deletions(-) create mode 100644 src/sass/landing.scss create mode 100644 src/sass/partials/_settings.scss create mode 100644 src/sass/partials/_shadows.scss delete mode 100644 static/css/colors.css create mode 100644 static/css/landing.css create mode 100644 views/components/_footer.njk 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 %} -
- Welcome to DDStats! -
+
+
+ Welcome to DDStats! +
-
-

Search for a player or map...

- -
+
+

Search for a player or map...

+ +
+
{% 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" %} \ No newline at end of file