Add math-logo.svg, informatics-logo.svg, coding-logo.svg for landing page; Reformat code

src/components/HomepageFeatures/index.js

@@ -3,59 +3,79 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const FeatureList = [
-  {
-    title: 'Mathematik',
-    Svg: require('@site/static/img/niklas-birk-logo.svg').default,
-    description: (
-      <>
-        Mathematik ist ...
-      </>
-    ),
-  },
-  {
-    title: 'Informatik',
-    Svg: require('@site/static/img/niklas-birk-logo.svg').default,
-    description: (
-      <>
-        Informatik ist ...
-      </>
-    ),
-  },
-  {
-    title: 'Programmierung',
-    Svg: require('@site/static/img/niklas-birk-logo.svg').default,
-    description: (
-      <>
-        Programmierung ist ...
-      </>
-    ),
-  },
+    {
+        title: 'Mathematik',
+        Svg: require('@site/static/img/math-logo.svg').default,
+        description: (
+            <>
+                <p>Mathematik ist eine Wissenschaft, die selbstgeschaffene abstrakte Strukturen auf ihre Eigenschaften
+                    und Muster untersucht.</p>
+                <p>Sie ist mehr als dir die Schule zeigt und wesentlich cooler als du glaubst!<br/>
+                    Gib ihr eine Chance!</p>
+            </>
+        ),
+    },
+    {
+        title: 'Informatik',
+        Svg: require('@site/static/img/informatics-logo.svg').default,
+        description: (
+            <>
+                <p>Informatik ist eine Strukturwissenschaft, die sich mit der Information und deren automatischer
+                    Verarbeitung befasst.</p>
+                <p>
+                    <q><cite>In der Informatik geht es genau so wenig um Computer, wie in der Astronomie um
+                        Teleskope.</cite></q>
+                </p>
+                - Edsger Wybe Dijkstra
+            </>
+        ),
+    },
+    {
+        title: 'Programmierung',
+        Svg: require('@site/static/img/coding-logo.svg').default,
+        description: (
+            <>
+                <p>Programmierung ist das Erstellen von Programmen mit einer Programmiersprache.</p>
+                <p>
+                    <pre style={{textAlign: 'left'}}>
+                        <code>
+                            int main(void)<br/>
+                            &#123;<br/>
+                            &nbsp;   printf("Programmierst du auch?");<br/>
+                            &nbsp;   return 0;<br/>
+                            &#125;
+                        </code>
+                    </pre>
+                </p>
+            </>
+        ),
+    },
 ];
 
 function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
+    return (
+        <div className={clsx('col col--4')}>
+            <div className="text--center">
+                <Svg className={styles.featureSvg} role="img"/>
+            </div>
+            <div className="text--center padding-horiz--md">
+                <h3>{title}</h3>
+                <p>{description}</p>
+            </div>
+        </div>
+    );
 }
 
 export default function HomepageFeatures() {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+    return (
+        <section className={styles.features}>
+            <div className="container">
+                <div className="row">
+                    {FeatureList.map((props, idx) => (
+                        <Feature key={idx} {...props} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
 }

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,11 @@
 .features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 2rem 0;
+    width: 100%;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+    height: 30%;
+    width: 30%;
 }

src/css/custom.css

@@ -6,33 +6,33 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+    --ifm-color-primary: #2e8555;
+    --ifm-color-primary-dark: #29784c;
+    --ifm-color-primary-darker: #277148;
+    --ifm-color-primary-darkest: #205d3b;
+    --ifm-color-primary-light: #33925d;
+    --ifm-color-primary-lighter: #359962;
+    --ifm-color-primary-lightest: #3cad6e;
+    --ifm-code-font-size: 95%;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  /*--ifm-color-primary: #25c2a0;*/
-  /*--ifm-color-primary-dark: #21af90;*/
-  /*--ifm-color-primary-darker: #1fa588;*/
-  /*--ifm-color-primary-darkest: #1a8870;*/
-  /*--ifm-color-primary-light: #29d5b0;*/
-  /*--ifm-color-primary-lighter: #32d8b4;*/
-  /*--ifm-color-primary-lightest: #4fddbf;*/
+    /*--ifm-color-primary: #25c2a0;*/
+    /*--ifm-color-primary-dark: #21af90;*/
+    /*--ifm-color-primary-darker: #1fa588;*/
+    /*--ifm-color-primary-darkest: #1a8870;*/
+    /*--ifm-color-primary-light: #29d5b0;*/
+    /*--ifm-color-primary-lighter: #32d8b4;*/
+    /*--ifm-color-primary-lightest: #4fddbf;*/
 
-  --ifm-color-primary: #bd93f9; /* dracula purple */
-  --ifm-color-primary-dark: #ffb86c; /* dracula orange */
-  --ifm-color-primary-darker: #ff79c6; /* dracula pink */
-  --ifm-color-primary-darkest: #ff5555; /* dracula red */
-  --ifm-color-primary-light: #50fa7b; /* dracula green */
-  --ifm-color-primary-lighter: #f1fa8c; /* dracula yellow */
-  --ifm-color-primary-lightest: #8be9fd; /* dracula cyan */
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+    --ifm-color-primary: #bd93f9; /* dracula purple */
+    --ifm-color-primary-dark: #ffb86c; /* dracula orange */
+    --ifm-color-primary-darker: #ff79c6; /* dracula pink */
+    --ifm-color-primary-darkest: #ff5555; /* dracula red */
+    --ifm-color-primary-light: #50fa7b; /* dracula green */
+    --ifm-color-primary-lighter: #f1fa8c; /* dracula yellow */
+    --ifm-color-primary-lightest: #8be9fd; /* dracula cyan */
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/pages/index.js

@@ -8,34 +8,34 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/blog">
-            Zur Mathematik, Informatik und Programmierung!
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <header className={clsx('hero hero--primary', styles.heroBanner)}>
+            <div className="container">
+                <h1 className="hero__title">{siteConfig.title}</h1>
+                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <div className={styles.buttons}>
+                    <Link
+                        className="button button--secondary button--lg"
+                        to="/blog">
+                        Zu den Themen!
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <Layout
+            title={`${siteConfig.title}`}
+            description="Niklas Birk über Mathematik, Informatik und Programmierung">
+            <HomepageHeader/>
+            <main>
+                <HomepageFeatures/>
+            </main>
+        </Layout>
+    );
 }

src/pages/index.module.css

@@ -4,20 +4,20 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
 }
 
 @media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+    .heroBanner {
+        padding: 2rem;
+    }
 }
 
 .buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }