Changed colors on landing page (#564)

HackRU · Aug 29, 2023 · 77faa29 · 77faa29
1 parent e5fde3e
commit 77faa29
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 42 deletions.
diff --git a/public/tailwind-output.css b/public/tailwind-output.css
@@ -738,10 +738,6 @@ video {
   left: -20rem;
 }
 
-.right-12 {
-  right: 3rem;
-}
-
 .z-40 {
   z-index: 40;
 }
@@ -835,14 +831,6 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.-mr-8 {
-  margin-right: -2rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .block {
   display: block;
 }
@@ -1093,12 +1081,6 @@ video {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
-.space-x-12 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(3rem * var(--tw-space-x-reverse));
-  margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1174,7 +1156,7 @@ video {
 
 .bg-text {
   --tw-bg-opacity: 1;
-  background-color: rgb(209 233 239 / var(--tw-bg-opacity));
+  background-color: rgb(241 225 146 / var(--tw-bg-opacity));
 }
 
 .bg-gradient-to-b {
@@ -1193,28 +1175,37 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-400 {
-  --tw-gradient-from: #60a5fa;
-  --tw-gradient-to: rgb(96 165 250 / 0);
+.from-f23-lightGreen {
+  --tw-gradient-from: #8db67e;
+  --tw-gradient-to: rgb(141 182 126 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-700 {
-  --tw-gradient-from: #1d4ed8;
-  --tw-gradient-to: rgb(29 78 216 / 0);
+.from-f23-mediumGreen {
+  --tw-gradient-from: #3e8169;
+  --tw-gradient-to: rgb(62 129 105 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-800 {
-  --tw-gradient-from: #1e40af;
-  --tw-gradient-to: rgb(30 64 175 / 0);
+.from-f23-darkGreen {
+  --tw-gradient-from: #133d35;
+  --tw-gradient-to: rgb(19 61 53 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.via-f23-mediumGreen {
+  --tw-gradient-to: rgb(62 129 105 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #3e8169, var(--tw-gradient-to);
+}
+
 .to-endBg {
   --tw-gradient-to: #0f3854;
 }
 
+.to-f23-darkGreen {
+  --tw-gradient-to: #133d35;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1296,6 +1287,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -1316,10 +1311,6 @@ video {
   padding-left: 1rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1416,12 +1407,12 @@ video {
 
 .text-text {
   --tw-text-opacity: 1;
-  color: rgb(209 233 239 / var(--tw-text-opacity));
+  color: rgb(241 225 146 / var(--tw-text-opacity));
 }
 
 .text-textSubtitle {
   --tw-text-opacity: 1;
-  color: rgb(149 220 240 / var(--tw-text-opacity));
+  color: rgb(241 225 146 / var(--tw-text-opacity));
 }
 
 .text-white {

diff --git a/src/components/_Landing/Landing.css b/src/components/_Landing/Landing.css
@@ -3,7 +3,7 @@
 } */
 
 .glow {
-  text-shadow:1px 1px 6px #fff;
+  /* text-shadow:1px 1px 6px #fff; */
 }
 
 .glow-symbol {
@@ -14,7 +14,7 @@
   box-shadow: 1px 1px 6px #4bbede;
 }
 .glow-subtitles {
-  text-shadow:1px 1px 20px #4bbede;
+  /* text-shadow:1px 1px 20px #f1e192; */
 }
 
 .transparent-black-background {

diff --git a/src/components/_Landing/Landing.tsx b/src/components/_Landing/Landing.tsx
@@ -18,7 +18,9 @@ function LandingPage(props: any) {
     }, []);
 
     return (
-        <div className="w-full h-fit bg-gradient-to-b from-mainBg to-endBg">
+        <div className="w-full h-fit bg-gradient-to-b
+        from-f23-lightGreen via-f23-mediumGreen to-f23-darkGreen
+        to-f23-">
             <Hero profile={props.profile} />
             <About />
             <Schedule />

diff --git a/src/components/_Landing/sections/hero/Navbar.tsx b/src/components/_Landing/sections/hero/Navbar.tsx
@@ -23,7 +23,7 @@ function MenuItem(props: { sectionName: string }) {
 
 function CollapsedMenu() {
     return (
-        <div className="text-right bg-cyan-100: z-40  md:hidden">
+        <div className="text-right bg-cyan-100 z-40 md:hidden">
             <Menu as="div"
                 className="relative inline-block text-left">
                 <div>
@@ -71,7 +71,8 @@ function Navbar() {
         <div className="flex fixed justify-end z-40 w-[100%]">
             <CollapsedMenu />
             <div
-                className={"absolute top-0 font-light text-text hidden md:flex s text-lg pt-8 z-40 bg-gradient-to-b from-black  w-[100%] justify-end"}>
+                className="absolute top-0 font-light text-text hidden md:flex
+                text-lg pt-8 z-40 bg-gradient-to-b from-f23-lightGreen  w-[100%] justify-end">
                 {
                     sections.map((section) => {
                         return (

diff --git a/src/components/_Landing/sections/hero/hero.css b/src/components/_Landing/sections/hero/hero.css
@@ -8,7 +8,7 @@
     height: 0.2rem;
     border-radius: 50%;
     background-color: #d1e9ef;
-    box-shadow: 0 0 30px 10px #d1e9ef;
+    /* box-shadow: 0 0 30px 10px #d1e9ef; */
 }
 
 .navbar-button:hover {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,8 +16,13 @@ module.exports = {
             colors: {
                 "mainBg": "#1f6aa0",
                 "endBg": "#0f3854",
-                "text": " #d1e9ef",
-                "textSubtitle": "#95dcf0"
+                "text": "#f1e192",
+                "textSubtitle": "#f1e192",
+
+                "f23-darkGreen": "#133d35",
+                "f23-mediumGreen": "#3e8169",
+                "f23-lightGreen": "#8db67e",
+                "f23-yellowGreen": "#f1e192"
             },
             fontSize: {
                 "10xl": "9rem",