[repo] Start of front-page tidy-up

.editorconfig

@@ -32,3 +32,7 @@ charset = utf-8
 # Use spaces for all indents with a width of 4 characters.
 indent_style = space
 indent_size = 4
+
+
+[*.css]
+indent_size = 2

config/footer.js

@@ -72,7 +72,7 @@ module.exports = {
             items: [
                 {
                     label: 'GitHub',
-                    href: 'https://github.com/moodlehq',
+                    href: 'https://github.com/moodle',
                 },
                 {
                     html: `

config/navbar.js

@@ -22,12 +22,12 @@ const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
 );
 
 const navbar = {
-    title: 'Moodle',
+    title: '',
     logo: {
         alt: '',
-        src: 'img/Moodle_M_icon.svg',
-        height: '32px',
-        width: '32px',
+        src: 'img/Moodle.svg',
+        height: '35px',
+        width: '138px',
     },
     items: [
         {
@@ -75,7 +75,7 @@ const navbar = {
             ],
         },
         {
-            href: 'https://github.com/moodle/moodle',
+            href: 'https://github.com/moodle',
             label: 'GitHub',
             position: 'right',
         },

docusaurus.config.js

@@ -55,8 +55,8 @@ const getBaseUrl = () => {
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-    title: 'Moodle',
-    tagline: '(Un)official Developer Resources',
+    title: 'Moodle Developer Resources',
+    tagline: 'Nurturing Moodle Developers',
 
     // url: 'https://develop.moodle.org',
     url: process.env?.URL || 'https://moodledev.io',

general/community/intro.md

@@ -23,7 +23,7 @@ There are many other people contributing to Moodle in many ways. For a full list
 
 ## How we develop the Roadmap
 
-The [Roadmap](./roadmap.md) lists the new features being developed for the next major version. This list is derived mostly from the issues with large numbers of votes in the Moodle [Tracker](https://docs.moodle.org/dev/Tracker), so please vote for what you want!  Other influences include general discussion, surveys and feature requests at Moodle Moots and in the Moodle forums.
+The [Roadmap](./roadmap.md) lists the new features being developed for the next major version. This list is derived mostly from the issues with large numbers of votes in the Moodle [Tracker](/general/development/tracker/guide), so please vote for what you want!  Other influences include general discussion, surveys and feature requests at Moodle Moots and in the Moodle forums.
 
 Component leads decide on features in individual components so make your case to them!
 

src/components/HomepageFeatures/index.js

@@ -34,6 +34,7 @@ const FeatureList = [
                 Read our quick start to Moodle Development.
             </>
         ),
+        linkText: 'Get started',
     },
     {
         link: '/general/development/policies/codingstyle',
@@ -44,6 +45,7 @@ const FeatureList = [
                 Learn about our coding standards, styles, and conventions.
             </>
         ),
+        linkText: 'Learn more',
     },
     {
         link: '/docs/apis',
@@ -56,6 +58,7 @@ const FeatureList = [
                 Learn about them through our series of deep-dive guides, complete with examples and explanations.
             </>
         ),
+        linkText: 'Read API Guides',
     },
     {
         link: '/general/community',
@@ -66,26 +69,35 @@ const FeatureList = [
                 Discover our community, and learn about our mission, and our roadmap.
             </>
         ),
+        linkText: 'Discover Communities',
     },
 ];
 
 function Feature({
-    Svg, link, title, description,
+    index, link, title, description, linkText,
 }) {
     return (
-        <div className={clsx('col col--4 ') + styles['features-box']}>
-            <div>
-                <div className="text--center">
-                    <Svg className={styles['feature-svg']} role="img" />
-                </div>
-                <div className="text--center padding-horiz--md">
-                    <Link
-                        to={link}
-                        className={styles['feature-link']}
-                    >
-                        <h3>{title}</h3>
-                    </Link>
-                    <p>{description}</p>
+        <div className={clsx('col col--4 ', styles.card, styles[`card-${index}`])}>
+            <div className={styles['card-inner']}>
+                <div className={styles['card-content']}>
+                    <div className={styles['card-corner']}>
+                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="50" cy="50" r="50" />
+                        </svg>
+                    </div>
+                    <h2>{title}</h2>
+                    <div className={styles['card-description']}>
+                        {description}
+                    </div>
+                    <div className={styles['card-button']}>
+                        <Link
+                            to={link}
+                        >
+                            <span>
+                                {linkText}
+                            </span>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </div>
@@ -96,10 +108,9 @@ export default function HomepageFeatures() {
     return (
         <section className={styles.features}>
             <div className="container">
-                <h2 className="text--center">Moodle Documentation</h2>
-                <div className="row">
+                <div className={clsx('row', styles.cards)}>
                     {FeatureList.map((props, idx) => (
-                        <Feature key={idx} {...props} />
+                        <Feature key={idx} index={idx} {...props} />
                     ))}
                 </div>
             </div>

src/components/HomepageFeatures/styles.module.css

@@ -23,3 +23,123 @@
   z-index: 1;
   content: "";
 }
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.card {
+  flex: 0 0 30%;
+  padding: 1rem;
+  max-width: none;
+}
+
+.card .card-inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 16rem;
+  border-radius: 1rem;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.card-content {
+  padding: 3rem;
+}
+
+.card-description {
+  min-height: 6rem;
+}
+
+.card-button {
+  margin-top: 2rem;
+}
+
+.card-button a {
+  background-color: #194866;
+  color: #fff;
+  border: solid 1px #194866;
+  border-radius: 2rem;
+  line-height: 2rem;
+  padding: 1rem 2rem;
+  display: inline-block;
+  text-decoration: none;
+  transition: border-color 0.2s, background-color 0.2s, color 0.2s, line-heifght 0.2s;
+  width: auto;
+  font-size: 1.1rem;
+  text-align: left;
+  font-weight: 600;
+}
+
+.card-button a:hover {
+  background-color: #f98012;
+  border-color: #194866;
+}
+
+.card-corner {
+  shape-outside: circle(30%) margin-box;
+  width: 180px;
+  height: 180px;
+  margin-top: -130px;
+  margin-right: -120px;
+  float: right;
+}
+
+.card-corner svg {
+  fill: var(--ifm-color-primary);
+}
+
+.card-0 .card-inner {
+  background-color: #194866;
+  color: white;
+}
+
+.card-0 .card-corner svg {
+  fill: #69e0ff;
+}
+
+.card-0 .card-button a {
+  border-color: white;
+  color: white;
+}
+
+.card-1 .card-inner {
+  background-color: #fedfc1;
+  color: #545454;
+}
+
+.card-1 .card-corner svg {
+  fill: #bd5b00;
+}
+
+.card-1 .card-button a {
+  border-color: #545454;
+  color: #545454;
+  background-color: transparent;
+}
+
+.card-2 .card-inner {
+  border-color: #69e0ff;
+  background-color: #69e0ff;
+  color: #194866;
+}
+
+.card-2 .card-corner svg {
+  fill: #bd5b00;
+}
+
+.card-3 .card-inner {
+  border-color: #bd5b00;
+  background-color: #bd5b00;
+  color: #fff;
+}
+
+.card-3 .card-corner svg {
+  fill: #fedfc1;
+}

src/css/custom.css

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -13,6 +15,14 @@
   --ifm-color-primary-light: #d06400;
   --ifm-color-primary-lighter: #d96900;
   --ifm-color-primary-lightest: #f67600;
+  --ifm-color-contrasting: #194866;
+  --ifm-font-family-monospace: "Open Sans";
+  --ifm-font-family-base: "Open Sans";
+  --ifm-navbar-height: 5.5rem;
+  --ifm-navbar-padding-horizontal: 5.5rem;
+  --ifm-navbar-padding-vertical: 0;
+  --ifm-navbar-link-color: #194866;
+  --ifm-navbar-link-hover-color: #bd5b00;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -24,6 +34,9 @@
   --ifm-color-primary-light: #f6a65b;
   --ifm-color-primary-lighter: #f6ae69;
   --ifm-color-primary-lightest: #f9c595;
+  --ifm-color-contrasting: var(--ifm-color-primary-lightest);
+  --ifm-navbar-link-color: #f0c505;
+  --ifm-navbar-link-hover-color: #f27e13;
 }
 
 .docusaurus-highlight-code-line {
@@ -40,3 +53,34 @@
 .docusaurus-hidden {
   display: none;
 }
+
+html {
+  font-family: "Open Sans", sans-serif;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("/static/font/OpenSans-VariableFont_wdth,wght.woff2") format("woff2");
+}
+
+.navbar__logo {
+  width: 12.5rem;
+}
+
+.navbar__link {
+  border-bottom: solid 2px transparent;
+  border-top: solid 2px transparent;
+  box-sizing: content-box;
+  color: var(--ifmr-navbar-link-color);
+  font-size: 1rem;
+  font-weight: 600;
+  height: 3rem;
+  line-height: 3rem;
+  padding: 1rem 0;
+  transition: border-color 0.2s, color 0.2s, padding 0.2s;
+  margin-right: 2rem;
+}
+
+.navbar__link:hover {
+  border-bottom-color: var(--ifm-navbar-link-hover-color);
+}

src/pages/index.js

@@ -18,25 +18,27 @@
 import React from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 function HomepageHeader() {
-    const { siteConfig } = useDocusaurusContext();
     return (
-        <header className={clsx('hero hero--primary', styles['hero-banner'])}>
-            <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="/general/development/gettingstarted"
-                    >
-                        Quick start - 5min ⏱️
-                    </Link>
+        <header className={clsx(styles['header-content'], 'container')}>
+            <div className={styles['header-content-inner']}>
+                <div className={clsx(styles['header-title'])}>
+                    <h1>
+                        Where Moodlers
+                        {' '}
+                        <em>hone their skills</em>
+                    </h1>
+                </div>
+                <div className={styles['header-right']}>
+                    <div className={styles.copy}>
+                        <p>
+                            Join hundreds of thousands of educators and trainers on Moodle,
+                            the world’s most customisable and trusted learning management system.
+                        </p>
+                    </div>
                 </div>
             </div>
         </header>