chore: restyle slightly to the brutalist design

Author: mdvanes

components/Footer/Footer.module.scss

@@ -1,10 +1,13 @@
 @import "../constants";
 
 .footer {
-  background-color: #343a40;
+  background-color: var(--cs-brutalist-purple);
   padding: 8rem 0 2rem;
   display: flex;
   justify-content: center;
+  color: var(--cs-brutalist-creme);
+  font-family: "Conduit ITC W04 Regular", 'system-ui';
+  font-size: 140%;
 
   > div {
     padding: 0 1rem;

components/Footer/Footer.tsx

@@ -15,7 +15,7 @@ const Footer: FC = () => {
       <div>
         <ul className="contact-info">
           <li>
-            <a href="mailto:[email protected]">codestar@ordina.nl</a>
+            <a href="mailto:[email protected]">codestar.nl@soprasteria.com</a>
           </li>
           <li>
             <a href="tel:+31306637000">+31 30 6637000</a>
@@ -69,12 +69,12 @@ const Footer: FC = () => {
             />
           </a>
           <a
-            href="https://www.linkedin.com/company/codestar-powered-by-ordina/"
+            href="https://www.linkedin.com/company/codestar-powered-by-sopra-steria/"
             aria-label="Linkedin"
           >
             <Image
               src={linkedinSvg}
-              alt="Codestar Medium"
+              alt="Codestar LinkedIn"
               width={32}
               height={32}
             />
@@ -85,7 +85,7 @@ const Footer: FC = () => {
           >
             <Image
               src={youtubeSvg}
-              alt="Codestar Medium"
+              alt="Codestar Youtube"
               width={36}
               height={32}
             />
@@ -96,7 +96,7 @@ const Footer: FC = () => {
           >
             <Image
               src={meetupSvg}
-              alt="Codestar Medium"
+              alt="Codestar Meetup"
               width={32}
               height={32}
             />

components/MeetupCardList/MeetupCardList.module.scss

@@ -3,6 +3,11 @@
   flex-direction: column;
   gap: 15px;
 
+  h3 {
+    font-family: "Conduit ITC W04 Regular", 'system-ui';
+    font-size: 150%;
+  }
+
   & :global(a.external) {
     text-decoration: underline;
   }

components/PlaylistItemCard/PlaylistItemCard.module.scss

@@ -8,7 +8,7 @@
   gap: 10px;
 
   &:hover {
-    background-color: lighten($highlight-card-bg, 10%);
+    background-color: var(--cs-brutalist-green);
   }
 
   & > :global(.img) {

components/PlaylistItemCard/PlaylistItemCard.tsx

@@ -12,7 +12,7 @@ const PlaylistItemCard: FC<{ item: IPlaylistItem }> = ({ item }) => {
         <div
           className="img"
           style={{
-            backgroundImage: `url(${thumbnails.medium.url})`,
+            backgroundImage: `url(${thumbnails?.medium?.url})`,
           }}
         ></div>
         <h3>{title}</h3>

components/PublicationCard/PublicationCard.module.scss

@@ -6,7 +6,7 @@
   padding: 0 10px;
 
   &:hover {
-    background-color: lighten($highlight-card-bg, 10%);
+    background-color: var(--cs-brutalist-green);
   }
 
   & > section {
@@ -21,6 +21,11 @@
       width: calc($main-width - (2 * $aside-width) - 40px);
     }
   }
+
+  h2 {
+    font-family: "Conduit ITC W04 Regular", 'system-ui';
+    font-size: 180%;
+  }
 }
 
 .publication-card--avatar {
@@ -33,6 +38,7 @@
   position: relative;
   text-align: center;
   font-size: 40px;
+  font-family: "Righteous", sans-serif;
 }
 
 .publication-card--author {

components/TopBar/TopBar.module.scss

@@ -1,7 +1,7 @@
 @import "../constants";
 
 .top-bar {
-  background-color: #121212;
+  background-color: #212121;
   height: 56px;
   border-bottom: 1px solid #343a71;
   display: flex;

components/_constants.scss

@@ -1,9 +1,9 @@
 // TODO should be imported with @use instead of @import
 
-$highlight-card-bg: #213c5e;
+$highlight-card-bg: darken(#3266a3, 5%);
 $orange: #e47e06;
 $red: #b03a48;
-$underline-text: #9f9f9f;
+$underline-text: var(--cs-white-grey); 
 $main-min-width: 900px;
 $main-width: 1400px;
 $aside-width: 330px;

lib/youtube-playlist/youtube-playlist.types.ts

@@ -1,7 +1,7 @@
 interface IThumbnail {
-  url: string;
-  width: number;
-  height: number;
+  url?: string;
+  width?: number;
+  height?: number;
 }
 
 export interface IPlaylistResponse {
@@ -27,8 +27,8 @@ export interface IPlaylistItem {
   publishedAt: string;
   title: string;
   description: string[];
-  thumbnails: {
-    default: IThumbnail;
-    medium: IThumbnail;
+  thumbnails?: {
+    default?: IThumbnail;
+    medium?: IThumbnail;
   };
 }

styles/globals.css

@@ -1,3 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Righteous');
+/* @import url('https://fonts.cdnfonts.com/css/conduit-itc-medium'); */
+
+@font-face {
+  font-family: "Conduit ITC W04 Regular";
+  src: url("https://db.onlinewebfonts.com/t/d032cc8a57ef4a7d2a5ebb7be4e63c71.eot");
+  src: url("https://db.onlinewebfonts.com/t/d032cc8a57ef4a7d2a5ebb7be4e63c71.eot?#iefix")format("embedded-opentype"),
+  url("https://db.onlinewebfonts.com/t/d032cc8a57ef4a7d2a5ebb7be4e63c71.woff2")format("woff2"),
+  url("https://db.onlinewebfonts.com/t/d032cc8a57ef4a7d2a5ebb7be4e63c71.woff")format("woff"),
+  url("https://db.onlinewebfonts.com/t/d032cc8a57ef4a7d2a5ebb7be4e63c71.ttf")format("truetype"),
+  url("https://db.onlinewebfonts.com/t/d032cc8a57ef4a7d2a5ebb7be4e63c71.svg#Conduit ITC W04 Regular")format("svg");
+}
+
 html,
 body {
   padding: 0;
@@ -20,8 +33,17 @@ html {
   color-scheme: dark;
 }
 body {
-  --cs-bg-color: #00254b;
-  --cs-text-color: #f1e7da;
+  --cs-brutalist-red: #b03a48;
+  --cs-brutalist-orange: #d4804d;
+  --cs-brutalist-yellow: #d6b74b;
+  --cs-brutalist-green: #3e7a4c;
+  --cs-brutalist-blue: #3266a3;
+  --cs-brutalist-purple: #915394;
+  --cs-brutalist-pink: #d980a0;
+  --cs-brutalist-creme: #f1e7da;
+  --cs-white-grey: #cdcdcd;
+  --cs-bg-color: var(--cs-brutalist-blue);
+  --cs-text-color: #151515;
   color: var(--cs-text-color);
   background: var(--cs-bg-color);
 }