Better design and Article

src/components/Article/Article.module.css

@@ -1,4 +1,177 @@
+.Article {
+    margin-top: 0px;
+    text-align: center;
+}
+
+.Article .handritten {
+    font-size: 20px;
+}
+
+.Article h1,
+.Article h2,
+.Article h3,
+.Article h4,
+.Article h5,
+.Article h6 {
+    display: block;
+    margin: auto;
+    width: fit-content;
+    text-align: center;
+}
+
+.Article h1,
+.Article h2 {
+    font-weight: bold;
+}
+
+.Article h1 {
+    line-height: 110%;
+    margin-bottom: 0px;
+    font-size: 65px;
+}
+@media only screen and (max-width: 600px) {
+    .Article h1 {
+        font-size: 55px;
+    }
+}
+@media only screen and (max-width: 300px) {
+    .Article h1 {
+        font-size: 38px;
+    }
+}
+
+.Article h2 {
+    margin-bottom: 10px;
+}
 
+.Article h2 {
+    font-size: 29px;
 
-.Article{  
+    padding: 0;
+    border-bottom: 2px solid rgba(245, 224, 185, 0.5); /* <- [🎨] */
 }
+
+.Article h3 {
+    font-size: 25px;
+    margin-top: 30px;
+    padding: 0;
+    border-bottom: 1.5px solid rgba(245, 224, 185, 0.5); /* <- [🎨] */
+}
+
+.Article p {
+    text-align: left;
+}
+
+.Article p:has(:global(.button)) {
+    text-align: center;
+}
+
+.Article ol,
+.Article ul {
+    /*/
+    outline: 1px dotted rgb(255, 38, 38) !important;
+    /**/
+
+    text-align: left;
+    margin-top: 10px;
+    margin-bottom: 30px;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+@media (max-width: 600px) {
+    .Article ol,
+    .Article ul {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+}
+
+.Article ul {
+    list-style-type: disc;
+}
+.Article ol {
+    list-style-type: decimal;
+}
+.Article hr {
+    margin-top: 50px;
+    margin-bottom: 50px;
+    background-color: rgba(245, 224, 185, 0.5); /* <- [🎨] */
+    /* <- Note: This is really a line not a fill, so using palette-3 not palette-2 */
+    height: 2px;
+    border: none;
+    outline: none;
+}
+
+/* Note: Block components: */
+.Article blockquote,
+.Article iframe,
+.Article form {
+    display: block;
+    margin-top: 45px /* <- TODO: [🧠] What is the best practise to define margin-top, margin-bottom OR both */;
+}
+
+.Article blockquote {
+    font-size: 1.2em;
+    border: 1px solid rgba(245, 224, 185, 0.5); /* <- [🎨] */
+    padding: 20px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    border-radius: 20px;
+}
+
+.Article blockquote p {
+    text-align: center;
+}
+
+.Article blockquote hr {
+    margin: 10px;
+}
+
+.Article img {
+    max-width: 100%;
+    height: auto;
+}
+.Article iframe {
+    width: calc(100% - 20px);
+    aspect-ratio: 3/2;
+    border: none;
+}
+
+@media only screen and (max-width: 600px) {
+    /* 📱 Smartphones */
+
+    .Article iframe {
+        aspect-ratio: 2/3;
+    }
+}
+
+.Article .button {
+    display: inline-block;
+    border: 1px solid rgba(var(--palette-1-triplet), 0.8);
+    background-color: rgba(var(--palette-2-triplet), 0.8);
+    box-shadow: 0 0 20px rgba(var(--palette-4-triplet), 0.5);
+    color: rgba(var(--palette-1-triplet), 0.8);
+    border-radius: 6px;
+    padding: 7px 18px;
+    margin: 10px;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
+    font-size: 25px;
+}
+.Article .button:hover {
+    filter: hue-rotate(90deg);
+}
+.Article .button.primary {
+    color: rgba(245, 224, 185, 0.5); /* <- [🎨] */
+    border: 1px solid rgba(245, 224, 185, 0.5); /* <- [🎨] */
+}
+
+.Article [contenteditable] {
+    outline: 0px solid transparent;
+}
+
+/*
+ * TODO: [🧠] Should be button in exported article css; <call-to-action> button is exported together with custom elements
+ */

src/components/Section/Section.tsx

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { classNames } from '../../utils/classNames';
+import articleStyles from '../Article/Article.module.css';
 import styles from './Section.module.css';
 
-interface SectionProps {
+export interface SectionProps {
     children: ReactNode;
 
     /**
@@ -11,15 +12,23 @@ interface SectionProps {
      */
     id?: string;
     className?: string;
+
+    /**
+     * If true, the section will not be considered as an article and won't have the article styles
+     */
+    isNotArticle?: boolean;
 }
 
-export function Section({ id, children, className }: SectionProps) {
+export function Section({ id, children, className, isNotArticle }: SectionProps) {
     // TODO: [0] Do or comment> const [headChild, ...restChildren] = children;
 
     id = id?.toLocaleLowerCase();
 
     return (
-        <div className={classNames(styles.section, className)} {...{ id }}>
+        <div
+            className={classNames(isNotArticle ? undefined : articleStyles.Article, styles.section, className)}
+            {...{ id }}
+        >
             {/* [0] <a href={`#${id}`}>{headChild}</a>{restChildren}*/}
             {children}
         </div>

src/sections/10-Welcome/Welcome.tsx

@@ -24,7 +24,7 @@ export function WelcomeSection(props: WelcomeProps) {
     const { t, i18n } = useTranslation();
 
     return (
-        <Section id="Welcome" className={styles.WelcomeSection}>
+        <Section id="Welcome" className={styles.WelcomeSection} isNotArticle>
             <Link href="/">
                 <h1 className={handwrittenFont.className}>
                     {i18n.language === 'en' && (

src/sections/100-AiTraining/AiTraining.module.css

@@ -9,7 +9,12 @@
 .variants > div > div {
     /* Note: [✌] Two nested divs to use <Items/> together with nice outline */
     outline: 1px solid rgba(245, 224, 185, 0.5); /* <- [🎨] */
-    border-radius: 30px;
+    border-radius: 20px;
     margin: 10px;
     padding: 10px;
 }
+
+.variants h3 {
+    margin-top: unset;
+    border-bottom: unset;
+}

src/sections/100-AiTraining/AiTrainingVariant.tsx

@@ -10,10 +10,16 @@ export function AiTrainingVariant(props: AiTrainingVariantProps) {
     const { variant } = props;
     const { t } = useTranslation();
 
+    const [row1, row2] = t(`AiTraining.${variant}.title`).split(': ', 2);
+
     return (
         <div>
             <div>
-                <h3>{t(`AiTraining.${variant}.title`)}</h3>
+                <h3>
+                    {row1}
+                    <br />
+                    {row2}
+                </h3>
                 <Link
                     className="button"
                     href="#contact"

src/styles/common.module.css

@@ -116,12 +116,6 @@
     }
 }
 
-.page blockquote {
-    border: 1px solid rgba(245, 224, 185, 0.5); /* <- [🎨] */
-    padding: 15px;
-    border-radius: 10px;
-    font-size: 1.3em;
-}
 
 .page footer {
     /*/

src/utils/content/linkMarkdown.ts

@@ -13,6 +13,7 @@ const LINKS = {
     'Startup Weekendu': 'https://startovani.cz/',
     'my Github': 'https://github.com/hejny',
     'mém Githubu': 'https://github.com/hejny',
+    // 'Tomáš Kapler': 'https://www.kapler.cz/ai-skoleni/',
 
     // TODO: !! 'Startup Weekend': 'https://startovani.cz/',
 

src/utils/content/normalizeDashes.ts

@@ -1,4 +1,4 @@
-const EXCLUDED_WORDS = ['H-edu', 'h-edu'];
+const EXCLUDED_WORDS = ['H-edu', 'h-edu', '<!--', '-->'];
 
 /**
  * Normalize minus as dashes (- U+0014) to propper dashes (– U+2013)