feat: change font and style (#63)

Signed-off-by: Gaius <[email protected]>

docusaurus.config.js

@@ -1,8 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const codeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -177,11 +176,16 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} Dragonfly Authors.`,
+        copyright: `
+        <br />
+        <strong>© Dragonfly Authors ${new Date().getFullYear()} | Documentation Distributed under <a href="https://creativecommons.org/licenses/by/4.0">CC-BY-4.0</a> </strong>
+        <br />
+        <br />
+        © ${new Date().getFullYear()} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/"> Trademark Usage</a> page.
+      `,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: codeTheme,
       },
     }),
 };

src/css/custom.css

@@ -4,8 +4,14 @@
  * work well for content-centric websites.
  */
 
+@font-face {
+  font-family: 'Din';
+  src: url('/static/font/DIN.ttf');
+}
+
 /* You can override the default Infima variables here. */
 :root {
+  --ifm-font-family-base: 'Din';
   --ifm-color-primary: #239b56;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;

src/pages/index.js

@@ -33,7 +33,7 @@ export default function Home() {
           >
             Star
           </GitHubButton>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <p className={styles.tagline}>{siteConfig.tagline}</p>
         </div>
         <div className={styles.buttonWrapper}>
           <Button href={useBaseUrl('docs/')}>

src/pages/index.module.css

@@ -12,7 +12,7 @@
 .heroBanner {
   display: flex;
   flex-flow: column;
-  padding: 4rem 0;
+  padding: 3.5rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -37,6 +37,14 @@ html[data-theme='dark'] .heroBanner {
   }
 }
 
+.tagline {
+  margin-top: 1rem;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.5rem;
+}
+
 .heroLogoWrapper {
   position: relative;
   left: 50%;
@@ -65,7 +73,6 @@ html[data-theme='dark'] .heroBanner {
 .buttonWrapper {
   display: flex;
   flex-flow: row;
-  margin-top: 1.5rem;
 }
 
 .badgeWrapper {