feat: improve readme

README.md

@@ -1,2 +1,26 @@
-# cssdojo
-(re)learn CSS, the right way
+<div align="center">
+  <a href="https://cssdojo.dev">
+    <img src="components/Header/logo.png" alt="CSS Dojo" height="120">
+  </a>
+
+  <p align="center">
+    (re)learn CSS, the right way!
+    <br />
+    <a href="https://cssdojo.dev"><strong>Go to the website »</strong></a>
+  </p>
+</div>
+
+
+## About
+
+I know, I know... you may think that [**C**SS **S**ometimes **S**ucks](https://talks.codemotion.com/why-css-sometimes-sucks). But it's not a fatality.
+
+There is a alternate future, a parallel universe, in which this is not the case.
+
+cssdojo is the place to learn the concepts that will allow you to have fun with CSS and face any CSS issue with confidence.
+
+**[Go to the website »](https://cssdojo.dev)**
+
+## Sponsors
+
+<a href="https://www.theodo.fr/"><img src="public/sponsors/Theodo.svg" alt="Theodo" height="40" /></a>

app/(main)/MainLayout.module.scss

@@ -4,8 +4,4 @@
   max-width: style.$page-width;
   margin: style.$main-vertical-margin auto;
   padding: style.$main-vertical-padding;
-
-  @media (min-width: style.$mobile-breakpoint) {
-    margin-bottom: 4rem;
-  }
 }

app/(main)/page.tsx

@@ -2,11 +2,14 @@
 
 import BaseEditor from 'react-simple-code-editor';
 import { NextPage } from 'next';
+import { StaticImageData } from 'next/image';
 import { highlight, languages } from 'prismjs';
 import { useState } from 'react';
+import theodoSponsorImage from 'public/sponsors/Theodo.svg';
 import { previewBaseContent } from 'components/Editor';
 import { Subtitle } from 'components/Layout';
 import { Link } from 'components/Link';
+import { Image } from 'components/Image';
 import { Page, PAGES } from 'services/pages';
 import { Button } from 'components/Button';
 import editorStyles from 'components/Editor/Editor.module.scss';
@@ -166,6 +169,14 @@ const Home: NextPage = () => {
           <li>Design a Tab navigation system</li>
         </ol>
       </section> */}
+
+      <section>
+        <Subtitle id={null}>Sponsors</Subtitle>
+
+        <a href="https://www.theodo.fr/">
+          <Image src={theodoSponsorImage as StaticImageData} alt="Theodo" />
+        </a>
+      </section>
     </>
   );
 };

components/Divider/Divider.module.scss

@@ -6,16 +6,5 @@
   align-items: center;
   border: none;
   margin: 2rem 0;
-
-  ::before,
-  ::after {
-    content: '';
-    flex-grow: 1;
-    background: style.$lightGrey;
-    height: 1px;
-    // stylelint-disable-next-line
-    font-size: 0;
-    // stylelint-disable-next-line
-    line-height: 0;
-  }
+  border-top: 1px solid style.$lightGrey;
 }

components/Header/Header.module.scss

@@ -3,7 +3,13 @@
 .container {
   background-color: style.$darkGrey;
   color: style.$white;
-  padding: 0.5rem 1rem;
+  padding: 1rem 1rem;
+}
+
+.logo {
+  margin: 0 auto;
+  height: 6rem;
+  width: min-content;
 }
 
 .home-link {
@@ -15,12 +21,6 @@
   text-decoration: none;
 }
 
-.title {
-  @include style.title-font;
-
-  margin: 0;
-}
-
 .description {
   @include style.subtitle-font;
 

components/Header/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { PAGES } from 'services/pages';
 import styles from './Header.module.scss';
+import logoWhiteImage from './logo-white.png';
 
 interface Props {
   isHomepage: boolean;
@@ -14,15 +16,15 @@ export const Header: React.FC<Props> = ({ isHomepage }) => {
       className={styles['home-link']}
       aria-label="Homepage, CSS dojo, relearn CSS the right way"
     >
-      <span className={styles['title']}>cssdojo</span>
+      <Image src={logoWhiteImage} alt="css dojo" className={styles['logo']} />
 
       <span className={styles['description']}>(re)learn CSS, the right way</span>
     </Link>
   );
 
   return (
     <header className={styles['container']}>
-      {isHomepage ? <h1>{homeLink}</h1> : <p>{homeLink}</p>}
+      {isHomepage ? <h1 style={{ margin: 0 }}>{homeLink}</h1> : <p>{homeLink}</p>}
     </header>
   );
 };

components/Image/index.tsx

@@ -1,15 +1,17 @@
 import NextImage, { StaticImageData } from 'next/image';
+import classNames from 'classnames';
 import styles from './Image.module.scss';
 
 interface Props {
   src: StaticImageData;
   alt: string;
   caption?: string;
+  className?: string;
 }
 
-export const Image: React.FC<Props> = ({ src, alt, caption, ...rest }) => (
+export const Image: React.FC<Props> = ({ src, alt, caption, className, ...rest }) => (
   <figure className={styles['figure']}>
-    <NextImage className={styles['image']} src={src} alt={alt} {...rest} />
+    <NextImage className={classNames(styles['image'], className)} src={src} alt={alt} {...rest} />
 
     {caption !== undefined && <figcaption className={styles['caption']}>{caption}</figcaption>}
   </figure>

stylesheet.scss

@@ -5,7 +5,7 @@ $black: #000000;
 $darkGrey: #414141;
 $lightGrey: #dcdcdc;
 $white: #ffffff;
-$blue: #4a94c3;
+$blue: #278bca;
 
 // Breakpoints
 $mobile-breakpoint: 50em;
@@ -34,7 +34,7 @@ $main-vertical-padding: 1rem;
   font-size: 1.25rem;
   line-height: 1.5;
   @media (min-width: $mobile-breakpoint) {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
   }
 }