Merge pull request #44 from UiO-Gaming/graphic-design-dev

Purple "mustafa" graphic design update

gatsby-config.js

@@ -37,8 +37,8 @@ module.exports = {
         name: `UiO Gaming`,
         short_name: `uiogaming.no`,
         start_url: `/`,
-        background_color: `#171520`,
-        theme_color: `#E2231A`,
+        background_color: `#1D1320`,
+        theme_color: `#7D36E7`,
         display: `minimal-ui`,
         icon: `src/images/logo.jpg`, // This path is relative to the root of the site.
       },

package.json

@@ -2,8 +2,8 @@
   "name": "uiogaming.no",
   "private": true,
   "description": "UiO Gaming Website",
-  "version": "0.1.2",
-  "author": "LBlend <lblend@protonmail.com",
+  "version": "0.2.0",
+  "author": "LBlend <leanderfurumo@protonmail.com",
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
     "gatsby": "^3.4.1",

src/components/items/memberButton.module.css

@@ -11,6 +11,6 @@
 }
 .button:hover {
 	color: white;
-	background-color: rgb(255, 62, 52);
+	background-color: #A76CFF;
 }
-
+

src/components/sections/boardMembers.module.css

@@ -23,7 +23,7 @@
 }
 @media (min-width: 500px) {
   .card {
-    width: 35ch;
+    width: 37ch;
   }
 }
 .card > p {
@@ -53,8 +53,9 @@
 }
 .info > p {
   font-weight: 100;
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   margin: 0.5rem 0;
+  color: var(--light-text-color);
 }
 .info > h3 {
   margin: 0.5rem 0;

src/components/sections/events.js

@@ -53,11 +53,11 @@ const Events = () => {
           <article className={styles.card}>
             <h3>{event.title}</h3>
             <div>
-              <div>
+              <div className={styles.metadata}>
                 <FaMapMarkerAlt />
                 <p>{event.location}</p>
               </div>
-              <div>
+              <div className={styles.metadata}>
                 <FaCalendarAlt />
                 <p>
                   {moment(event.date)

src/components/sections/events.module.css

@@ -48,14 +48,23 @@
   margin-bottom: 0.5em;
 }
 .card > div {
-  font-weight: 100;
+  font-weight: 200;
   margin-bottom: 1em;
 }
 .card > div * {
-  display: flex;
-  align-items: baseline;
   margin-right: 0.5em;
 }
+.metadata {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  font-weight: 100;
+  color: var(--light-text-color)
+}
+.metadata > *:hover {
+  color: var(--light-text-color);
+}
+
 .image {
   grid-row: 1 / -1;
 }

src/components/sections/header.module.css

@@ -1,5 +1,6 @@
 .container {
-  background-image: url("../../images/keyboard.jpg"); /* Placeholder image */
+  background-color: #7C5CA8;
+  background-image: url("../../images/mustafa_blurred.png"); /* Placeholder image */
   background-repeat: no-repeat;
   background-size: cover;
 
@@ -20,4 +21,11 @@
 }
 .container > p {
   max-width: 40ch;
+  color: #130729;
+  font-size: 1.5rem;
+}
+
+.container > h1 {
+  color: #130729;
+  font-size: 4rem;
 }

src/index.css

@@ -1,18 +1,18 @@
 /* ===== Variables ===== */
 
 :root {
-  --main-color: rgb(226, 35, 26);
-  --main-background-color: rgb(22, 20, 31);
-  --secondary-background-color: rgb(44, 53, 69);
+  --main-color: #7D36E7;
+  --main-background-color: #1D1320;
+  --secondary-background-color: #261F31;
   --footer-color: rgb(12, 12, 15);
 
   --header-color: rgb(255, 255, 255);
-  --text-color: rgb(228, 228, 228);
-  --light-text-color: rgb(190, 190, 190);
-  --link-color: rgb(226, 35, 26);
-  --link-color-hover: rgb(255, 157, 160);
+  --text-color: #EEEEEE;
+  --light-text-color: #CCCCCC;
+  --link-color: #7D36E7;
+  --link-color-hover: #D1B3FF;
 
-  --main-font: "Roboto", sans-serif;
+  --main-font: "Nunito", sans-serif;
 
   --card-section-divider: 2px solid rgba(128, 128, 128, 0.5);
   --blog-header-divider: 1px solid rgba(128, 128, 128, 0.25);

src/pages/eventPost.module.css

@@ -29,6 +29,10 @@ body {
   gap: 0.75rem;
   align-items: center;
   font-weight: 100;
+  color: var(--light-text-color);
+}
+.metadata > *:hover {
+  color: var(--light-text-color);
 }
 
 .description {