Merge pull request #10 from code-star/feature/update-design

mdvanes · web-flow · commit e3e7e50dd85e · 2025-02-14T13:07:49.000+01:00
chore: update some base colors and logos
diff --git a/components/Footer/Footer.module.scss b/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;
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -15,7 +15,7 @@ const Footer: FC = () => {
       <div>
         <ul className="contact-info">
           <li>
-            <a href="mailto:codestar@ordina.nl">codestar@ordina.nl</a>
+            <a href="mailto:codestar@ordina.nl">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}
             />
diff --git a/components/MeetupCardList/MeetupCardList.module.scss b/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;
   }
diff --git a/components/PlaylistItemCard/PlaylistItemCard.module.scss b/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) {
diff --git a/components/PlaylistItemCard/PlaylistItemCard.tsx b/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>
diff --git a/components/PublicationCard/PublicationCard.module.scss b/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,10 +21,15 @@
       width: calc($main-width - (2 * $aside-width) - 40px);
     }
   }
+
+  h2 {
+    font-family: "Conduit ITC W04 Regular", 'system-ui';
+    font-size: 180%;
+  }
 }
 
 .publication-card--avatar {
-  background-color: $orange;
+  background-color: $red;
   background-size: 50px;
   border-radius: 50%;
   color: black;
@@ -33,6 +38,7 @@
   position: relative;
   text-align: center;
   font-size: 40px;
+  font-family: "Righteous", sans-serif;
 }
 
 .publication-card--author {
diff --git a/components/TopBar/TopBar.module.scss b/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;
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { FC } from "react";
 import styles from "./TopBar.module.scss";
 import Image from "next/image";
-import codestarLogo from "../../public/codestar_logo_dark.svg";
+import codestarLogo from "../../public/codestar_logo_cream-red.svg";
 
 const TopBar: FC = () => {
   return (
diff --git a/components/_constants.scss b/components/_constants.scss
@@ -1,8 +1,9 @@
 // TODO should be imported with @use instead of @import
 
-$highlight-card-bg: #213c5e;
+$highlight-card-bg: darken(#3266a3, 5%);
 $orange: #e47e06;
-$underline-text: #9f9f9f;
+$red: #b03a48;
+$underline-text: var(--cs-white-grey); 
 $main-min-width: 900px;
 $main-width: 1400px;
 $aside-width: 330px;
diff --git a/lib/youtube-playlist/youtube-playlist.types.ts b/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;
   };
 }
diff --git a/public/codestar_logo_cream-red.svg b/public/codestar_logo_cream-red.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-50 -50 63 16.5"
+   id="svg206"
+   sodipodi:docname="codestar_logo_cream-red.svg"
+   inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
+   width="63"
+   height="16.5"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:svgjs="http://svgjs.dev/svgjs">
+  <defs
+     id="defs210" />
+  <sodipodi:namedview
+     id="namedview208"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="9.3363636"
+     inkscape:cx="33.203505"
+     inkscape:cy="55"
+     inkscape:window-width="5065"
+     inkscape:window-height="1387"
+     inkscape:window-x="55"
+     inkscape:window-y="1142"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg206" />
+  <g
+     id="g178"
+     transform="translate(-18.95813,-88.57838)">
+    <text
+       font-family="Righteous"
+       font-size="14px"
+       fill="#f1e7da"
+       x="-31.224573"
+       y="49.113228"
+       svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
+       id="text172"><tspan
+         dy="0"
+         x="-31.224573"
+         svgjs:data="{&quot;newLined&quot;:true}"
+         id="tspan170">c  de.star</tspan></text>
+    <text
+       font-family="'Conduit ITC Medium'"
+       font-size="5px"
+       fill="#f1e7da"
+       x="-3.5427685"
+       y="53.638855"
+       svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
+       id="text176"><tspan
+         dy="0"
+         x="-3.5427685"
+         svgjs:data="{&quot;newLined&quot;:true}"
+         id="tspan174">a sopra steria team</tspan></text>
+  </g>
+  <g
+     id="g186"
+     transform="translate(-18.95813,-88.57838)">
+    <rect
+       width="2"
+       height="8"
+       fill="#b03a48"
+       x="-21.299999"
+       y="41.5"
+       transform="rotate(90,-20.299999,45.5)"
+       id="rect180" />
+    <rect
+       width="2"
+       height="8"
+       fill="#b03a48"
+       x="-21.299999"
+       y="41.5"
+       transform="rotate(30,-20.299999,45.5)"
+       id="rect182" />
+    <rect
+       width="2"
+       height="8"
+       fill="#b03a48"
+       x="-21.299999"
+       y="41.5"
+       transform="rotate(-30,-20.299999,45.5)"
+       id="rect184" />
+  </g>
+</svg>
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/styles/globals.css b/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,18 @@ html {
   color-scheme: dark;
 }
 body {
-  --cs-bg-color: #00254b;
-  color: rgb(205, 205, 205);
+  --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);
 }
 /* } */

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`gap: 10px;`
`9`	`9`
`10`	`10`	`&:hover {`
`11`		`- background-color: lighten($highlight-card-bg, 10%);`
	`11`	`+ background-color: var(--cs-brutalist-green);`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`& > :global(.img) {`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`padding: 0 10px;`
`7`	`7`
`8`	`8`	`&:hover {`
`9`		`- background-color: lighten($highlight-card-bg, 10%);`
	`9`	`+ background-color: var(--cs-brutalist-green);`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`& > section {`
`@@ -21,10 +21,15 @@`
`21`	`21`	`width: calc($main-width - (2 * $aside-width) - 40px);`
`22`	`22`	`}`
`23`	`23`	`}`
	`24`	`+`
	`25`	`+ h2 {`
	`26`	`+ font-family: "Conduit ITC W04 Regular", 'system-ui';`
	`27`	`+ font-size: 180%;`
	`28`	`+ }`
`24`	`29`	`}`
`25`	`30`
`26`	`31`	`.publication-card--avatar {`
`27`		`- background-color: $orange;`
	`32`	`+ background-color: $red;`
`28`	`33`	`background-size: 50px;`
`29`	`34`	`border-radius: 50%;`
`30`	`35`	`color: black;`
`@@ -33,6 +38,7 @@`
`33`	`38`	`position: relative;`
`34`	`39`	`text-align: center;`
`35`	`40`	`font-size: 40px;`
	`41`	`+ font-family: "Righteous", sans-serif;`
`36`	`42`	`}`
`37`	`43`
`38`	`44`	`.publication-card--author {`