Fixed the gay

src/App.tsx

@@ -3,6 +3,10 @@ import "./App.scss";
 import { Main } from "./components/Main";
 
 function App() {
+  if (window.location.host.endsWith("cobular.gay")) {
+    document.body.classList.add("gay")
+  }
+
   return (
     <div className="App">
       <Main />

src/components/ProjectGrid.scss

@@ -1,6 +1,6 @@
 @import "~include-media/dist/_include-media.scss";
 
-$breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-large: 1560px, xx-large: 2000px);
+$breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-large: 1560px, xx-large: 2100px);
 
 // Override Sass min()
 @function min($numbers...) {
@@ -12,11 +12,9 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
   @return m#{a}x(#{$numbers});
 }
 
-#project-grid-background {
-  background: var(--grid-background);
-}
 
 #project-grid-parent {
+  background: var(--grid-background);
   border-radius: 5px;
   margin: 10px;
   padding-left: 5px;

src/index.scss

@@ -10,7 +10,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   //background: url("./images/y-so-serious-white.png") repeat;
-  background-color: var(--background) !important;
+  background: var(--background) !important;
 }
 
 

src/vars.scss

@@ -6,7 +6,7 @@
   --grid-header-background: var(--background);
   --grid-header-text: #F1F1F1;
   --grid-element-background: hsl(218, 24%, 25%);
-  --grid-element-border: #6f6f6f;
+  --grid-element-border: hsl(218, 24%, 29%);
   --grid-element-shadow: rgba(255, 255, 255, 0.3);
   --grid-element-header: rgb(169 162 228 / 100%);
   --grid-element-subheader: darkgrey;
@@ -31,3 +31,19 @@
 //  --link-color: grey;
 //  --grid-element-subheader: #F7A8B8;
 //}
+
+body.gay {
+  --text: black;
+  --background: linear-gradient(45deg, #ff0018 8.33%, #ffa52c 8.33%, #ffa52c 16.67%, #ffff41 16.67%, #ffff41 25%, #008018 25%, #008018 33.33%, #0000f9 33.33%, #0000f9 41.67%, #86007d 41.67%, #86007d 50%, #ff0018 50%, #ff0018 58.33%, #ffa52c 58.33%, #ffa52c 66.67%, #ffff41 66.67%, #ffff41 75%, #008018 75%, #008018 83.33%, #0000f9 83.33%, #0000f9 91.67%, #86007d 91.67%, #86007d 100%);
+  --header: #55CDFC;
+  --footer: #55CDFC;
+  --about-me: #F7A8B8;
+  --grid-background: #F7A8B8;
+  --grid-header-background: #55CDFC;
+  --grid-header-text: black;
+  --grid-element-background: #FFFFFF;
+  --grid-element-border: var(--grid-element-background);
+  --chainlink-icon-background: rgba(224, 255, 255, 0.7);
+  --link-color: white;
+  --grid-element-subheader: #F7A8B8;
+}