website: Added carousel infinite slider of OS logos

docs/www/docusaurus.config.js

@@ -1,7 +1,7 @@
 import { themes as prismThemes } from 'prism-react-renderer';
 
 const config = {
-  title: 'Sparky: 5v5 character-based libre tactical shooter',
+  title: 'Sparky - 5v5 character-based libre tactical shooter',
   tagline: 'A 5v5, blazingly flast, character-based libre tactical shooter written in pure C.',
   favicon: 'img/favicon.png',
   url: 'https://iwas-coder.github.io',
@@ -59,7 +59,7 @@ const config = {
         {
           href: 'https://buymeacoffee.com/iwas.coder',
           className: 'header-bmac-link',
-          'aria-label': 'Buy me a coffee',
+          'aria-label': 'Buy Me A Coffee',
           position: 'right'
         },
         {
@@ -103,6 +103,10 @@ const config = {
             {
               label: 'Contributing',
               href: 'https://github.com/iWas-Coder/sparky/blob/master/CONTRIBUTING.org'
+            },
+            {
+              label: 'Code of Conduct',
+              href: 'https://github.com/iWas-Coder/sparky/blob/master/CODE_OF_CONDUCT.md'
             }
           ]
         },
@@ -111,7 +115,15 @@ const config = {
           items: [
             {
               label: 'GitHub',
-              href: 'https://github.com/iWas-Coder/sparky',
+              href: 'https://github.com/iWas-Coder/sparky'
+            },
+            {
+              label: 'itch.io',
+              href: 'https://iwas-coder.itch.io/sparky'
+            },
+            {
+              label: 'Buy Me a Coffee',
+              href: 'https://buymeacoffee.com/iwas.coder'
             }
           ]
         }

docs/www/src/components/HomepageCarousel/index.jsx

@@ -0,0 +1,61 @@
+import {useState} from 'react';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const imgLogoRootPath = '/sparky/img/os-logos';
+
+const osList = [
+  'debian',
+  'ubuntu',
+  'fedora',
+  'arch',
+  'gentoo',
+  'freebsd',
+  'openbsd'
+];
+
+const logoList = [...osList, ...osList];
+
+function Logo({name}) {
+  const [imgPath, s_imgPath] = useState(`${imgLogoRootPath}/logo-bw-${name}.png`);
+  const handleMouseEnter = () => {
+    s_imgPath(`${imgLogoRootPath}/logo-color-${name}.png`);
+  };
+  const handleMouseLeave = () => {
+    s_imgPath(`${imgLogoRootPath}/logo-bw-${name}.png`);
+  };
+  return (
+    <li className={styles.logo_list_item}>
+      <img onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} src={imgPath} alt={name} />
+    </li>
+  );
+}
+
+function LogoList() {
+  return (
+    <ul className={styles.logo_list}>
+      {logoList.map((name, idx) => (
+        <Logo key={idx} name={name} />
+      ))}
+    </ul>
+  );
+}
+
+function Carousel() {
+  return (
+    <div className={styles.carousel}>
+      <LogoList />
+    </div>
+  );
+}
+
+export default function HomepageCarousel() {
+  return (
+    <section className={styles.container}>
+      <Heading className={styles.title} as='h2'>
+        Officially supported and tested on multiple OSes.
+      </Heading>
+      <Carousel />
+    </section>
+  );
+}

docs/www/src/components/HomepageCarousel/styles.module.css

@@ -0,0 +1,69 @@
+:root {
+  --carousel-gradient-color: #fff;
+}
+[data-theme='dark'] {
+  --carousel-gradient-color: #1b1b1d;
+}
+
+.container {
+  padding-top: 68px;
+}
+
+.title {
+  text-align: center;
+}
+
+.carousel {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  margin: auto;
+  width: 90%;
+  padding-top: 30px;
+  padding-bottom: 68px;
+}
+.carousel::before,
+.carousel::after {
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 128px;
+  z-index: 2;
+}
+.carousel::before {
+  left: 0;
+  background: linear-gradient(to left, #fff0, var(--carousel-gradient-color));
+}
+.carousel::after {
+  right: 0;
+  background: linear-gradient(to right, #fff0, var(--carousel-gradient-color));
+}
+
+@keyframes slide-anim {
+  100% {
+    transform: translateX(calc(-100% / 2.02));
+  }
+}
+
+.logo_list {
+  display: flex;
+  list-style: none;
+  animation: 25s slide-anim infinite linear;
+}
+.logo_list:hover {
+  animation-play-state: paused;
+}
+
+.logo_list_item {
+  width: 150px;
+  margin-left: 3rem;
+}
+
+.logo_list_item img {
+  height: 100px;
+  transition: transform 0.3s ease-in-out;
+}
+.logo_list_item img:hover {
+  transform: scale(1.15);
+}

docs/www/src/components/HomepageFeatures/index.jsx

@@ -75,9 +75,7 @@ function Feature({title, image, description}) {
         <img className={styles.featureImg} src={image} alt={title} />
       </div>
       <div className='text--center padding-horiz--md'>
-        <Heading as='h3'>
-          {title}
-        </Heading>
+        <Heading as='h3'>{title}</Heading>
         <p>{description}</p>
       </div>
     </div>
@@ -86,7 +84,7 @@ function Feature({title, image, description}) {
 
 export default function HomepageFeatures() {
   return (
-    <section className={ styles.features }>
+    <section className={styles.features}>
       <div className='container'>
         <div className='row'>
           {featureList.map((props, idx) => (

docs/www/src/components/HomepageFeatures/styles.module.css

@@ -12,5 +12,5 @@
 }
 
 .featureImg:hover {
-  transform: scale(1.05);
+  transform: scale(1.1);
 }

docs/www/src/components/HomepageHeader/index.jsx

@@ -92,7 +92,7 @@ function Logo() {
 export default function HomepageHeader() {
   return (
     <header className={clsx('hero hero--secondary', styles.heroBanner)}>
-      <div className={`container ${styles.Container}`}>
+      <div className={`container ${styles.Container} fade-in-anim`}>
         <Info />
         <Logo />
       </div>

docs/www/src/css/custom.css

@@ -27,6 +27,22 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+/* Enter animation */
+@keyframes fade-in {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+.fade-in-anim {
+  animation: 1.5s fade-in;
+}
+
 /* Navbar */
 
 .navbar {

docs/www/src/pages/index.jsx

@@ -2,12 +2,14 @@ import Layout from '@theme/Layout';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import HomepageHeader from '@site/src/components/HomepageHeader';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageCarousel from '@site/src/components/HomepageCarousel';
 
 function Homepage() {
   return (
     <Layout>
       <HomepageHeader />
       <main>
+        <HomepageCarousel />
         <HomepageFeatures />
       </main>
     </Layout>