diff --git a/frontend/css/styles.css b/frontend/css/styles.css index 4d65f00..0e63d0b 100644 --- a/frontend/css/styles.css +++ b/frontend/css/styles.css @@ -1,30 +1,29 @@ :root { - --primary: #150135; - - --secondary: #6c2bad; - - --secondary-hover: #3c7aca; - - --pink: #ff00f2; + --primary: #1d2021; + --bg: #282828; + --bg-soft: #32302f; + --bg-1: #3c3836; + --fg: #ebdbb2; + --secondary: #d65d0e; + --secondary-hover: #fe8019; + --accent: #fabd2f; + --orange: #d65d0e; + --yellow: #d79921; + --aqua: #689d6a; + --blue: #458588; + --purple: #b16286; + --red: #cc241d; + --gray: #a89984; + --pink: #b16286; } .bg-img { - /* background-image: url(/frontend/Images/Black\ Background\ Abstract.jpg); */ - background: - linear-gradient(var(--primary), #6c2bad4d, var(--primary)), - radial-gradient( - circle 700px at 20% 30%, - - rgba(255, 0, 179, 0.445), - transparent - ), - radial-gradient( - circle 500px at 80% 70%, - - rgba(255, 0, 179, 0.445), - transparent - ); + radial-gradient(ellipse 900px 700px at 10% 35%, rgba(214, 93, 14, 0.28), transparent), + radial-gradient(ellipse 700px 600px at 88% 70%, rgba(215, 153, 33, 0.2), transparent), + radial-gradient(ellipse 600px 500px at 55% 5%, rgba(177, 98, 134, 0.18), transparent), + radial-gradient(ellipse 500px 400px at 75% 20%, rgba(104, 157, 106, 0.12), transparent), + linear-gradient(160deg, #1d2021 0%, #282828 45%, #32302f 100%); min-height: 90vh; @@ -35,10 +34,6 @@ background-position: center center; background-repeat: no-repeat; - - /* background-blend-mode: overlay; */ - - /* background-color: rgba(0, 0, 0, 0.467); */ } .bg-img.dashboard { @@ -47,21 +42,22 @@ body { background-color: var(--primary); + color: var(--fg); } nav, footer { background-color: var(--primary); - color: white; + color: var(--fg); } .nav-link { - color: white; + color: var(--fg); } .nav-link:hover { - color: var(--secondary); + color: var(--accent); } .navbar-toggler { @@ -73,7 +69,7 @@ footer { .btn-primary { background-color: var(--secondary); - color: white; + color: var(--fg); border-color: transparent; } @@ -81,7 +77,7 @@ footer { .btn-primary:hover { background-color: var(--secondary-hover); - color: white; + color: var(--primary); border-color: transparent; } @@ -89,17 +85,17 @@ footer { form a { text-decoration: none; - color: white; + color: var(--fg); transition: 0.2s ease-in-out; } form a:hover { - color: var(--secondary); + color: var(--accent); } .bg-translucent { - background-color: #00000063; + background-color: rgba(40, 40, 40, 0.6); } #sortSelect:hover { @@ -107,7 +103,7 @@ form a:hover { } .pinkBorder { - border: var(--pink) 1px solid; + border: var(--purple) 1px solid; } textarea { diff --git a/frontend/dashboard.html b/frontend/dashboard.html index e69de29..7c911e2 100644 --- a/frontend/dashboard.html +++ b/frontend/dashboard.html @@ -0,0 +1,102 @@ + + +
+ + +