add base styles

silvankammermann · Oct 28, 2023 · 077040f · 077040f
1 parent 1580f06
commit 077040f
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 35 deletions.
diff --git a/frontend/src/app/atomics.css b/frontend/src/app/atomics.css
@@ -0,0 +1,55 @@
+/* ***** Colors */
+
+.color--darkPurple {
+  color: var(--color_darkPurple);
+}
+
+.color--lightPurple {
+  color: var(--color_lightPurple);
+}
+
+.color--purple {
+  color: var(--color_purple);
+}
+
+.color--yellow {
+  color: var(--color_yellow);
+}
+
+/* --- System */
+
+.color--green {
+  color: var(--color__green);
+}
+
+.color--red {
+  color: var(--color__red);
+}
+
+/* ***** Background Colors*/
+
+.bg--darkPurple {
+  color: var(--bg_darkPurple);
+}
+
+.bg--lightPurple {
+  color: var(--bg_lightPurple);
+}
+
+.bg--purple {
+  color: var(--bg_purple);
+}
+
+.bg--yellow {
+  color: var(--bg_yellow);
+}
+
+/* --- System */
+
+.bg--green {
+  color: var(--bg__green);
+}
+
+.bg--red {
+  color: var(--bg__red);
+}
diff --git a/frontend/src/app/components/Header/Header.module.css b/frontend/src/app/components/Header/Header.module.css
@@ -1,10 +1,21 @@
 .header {
+  position: relative;
   display: flex;
   justify-content: space-between;
-  background: var(--gradient_down);
   padding: 3rem 2rem;
 }
 
+.header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  background: var(--gradient_down);
+  z-index: -1;
+}
+
 .icons {
   display: flex;
 }

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -5,36 +5,22 @@
     "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
     "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-  --gradient_up: linear-gradient(
-    360deg,
-    #1d002f 17.82%,
-    rgba(29, 0, 47, 0.726869) 52.51%,
-    rgba(29, 0, 47, 0) 100%
-  );
-  --gradient_down: linear-gradient(
-    180deg,
-    #1d002f 17.82%,
-    rgba(29, 0, 47, 0.726869) 52.51%,
-    rgba(29, 0, 47, 0) 100%
-  );
+  --gradient_up: linear-gradient(360deg,
+      #1d002f 17.82%,
+      rgba(29, 0, 47, 0.726869) 52.51%,
+      rgba(29, 0, 47, 0) 100%);
+  --gradient_down: linear-gradient(180deg,
+      #1d002f 17.82%,
+      rgba(29, 0, 47, 0.726869) 52.51%,
+      rgba(29, 0, 47, 0) 100%);
 
   --color_darkPurple: #1a002e;
   --color_lightPurple: #edd6ff;
   --color_purple: #3b006a;
   --color_yellow: #ffc470;
   --color_lightYellow: #ffc977;
-}
-
-h1,
-.h1 {
-  font-family: "Tanker-Regular";
-  font-size: 2.5rem;
-  font-weight: 400;
-  line-height: 2.5rem;
-}
-
-.fcolor--purple {
-  color: var(--color_purple);
+  --color_green: #4DC68C;
+  --color_red: #F56B6B;
 }
 
 * {
@@ -50,22 +36,104 @@ body {
 }
 
 body {
+  font-family: "Arial", sans-serif;
+  font-weight: 400;
+  margin: 0;
+  -webkit-font-feature-settings: "kern" 1;
+  font-feature-settings: "kern" 1;
+  -webkit-font-kerning: normal;
+  font-kerning: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-font-smoothing: antialiased;
+  -o-font-smoothing: antialiased;
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
+  background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
 
-/* different background color based on route */
+h1,
+.h1 {
+  font-family: "Tanker-Regular";
+  font-size: 2.5rem;
+  font-weight: 400;
+  line-height: 2.5rem;
+  font-size: var(--fsize_h1);
+  line-height: 1em;
+  letter-spacing: 0em;
+  color: var(--color_blue);
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+h2,
+.h2 {
+  font-family: "Arial", sans-serif;
+  font-weight: 400;
+  font-size: var(--fsize_h2);
+  line-height: 1.1em;
+  letter-spacing: 0em;
+  color: var(--color_blue);
+  text-decoration: none;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+h3,
+h4,
+h5,
+h6,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: "Arial", sans-serif;
+  font-weight: 400;
+  font-size: var(--fsize_h3);
+  line-height: 1.3em;
+  letter-spacing: 0em;
+  color: var(--color_blue);
+  text-decoration: none;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+p,
+li,
+p a,
+.p,
+.p a {
+  font-family: "Arial", sans-serif;
+  font-weight: 400;
+  font-size: var(--fsize_p);
+  line-height: 1.4em;
+  letter-spacing: 0.01em;
+  color: var(--color_blue);
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* ––– */
 
-.bgViolet {
-  background-color: var(--color_violet); /* color for home page */
+strong,
+b {
+  font-family: "Arial", sans-serif;
+  font-weight: 700;
+  color: var(--color_blue);
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 }
 
+/* --- */
+
 a {
   color: inherit;
   text-decoration: none;
-}
+}
diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js
@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
+import "./atomics.css";
 import "@/app/fonts/Tanker/Fonts/WEB/css/tanker.css";
 import styles from "@/app/page.module.css";
 import Header from "./components/Header/Header";
@@ -14,7 +15,7 @@ export const metadata = {
 let colorClass = "";
 /*
 if (usePathname() === "/tinder") {
-  colorClass = "bgViolet";
+  colorClass = "bg--purple";
 }
 */