From 05c3290e53bf96ceb52241957a944af6274c4089 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96mercan=20K=C3=B6m=C3=BCr?= <fpscan@gmail.com>
Date: Thu, 18 Apr 2024 17:39:07 +0000
Subject: [PATCH] home page updated

---
 docs/overrides/home.html | 207 +++++++++++++++++++++++++++++++++++----
 mkdocs.yml               |   4 +-
 2 files changed, 188 insertions(+), 23 deletions(-)

diff --git a/docs/overrides/home.html b/docs/overrides/home.html
index 891f36d5..22e54160 100644
--- a/docs/overrides/home.html
+++ b/docs/overrides/home.html
@@ -1,15 +1,22 @@
+<!-- Custom HTML site displayed as the Home chapter -->
+
 {% extends "main.html" %}
-
-<!-- Render hero under tabs -->
 {% block tabs %}
-  {{ super() }}
+{{ super() }}
+<style>
 
-  <!-- Additional styles for landing page -->
-  <style>
+    .md-main {
+        flex-grow: 0
+    }
+
+    .md-main__inner {
+        display: flex;
+        height: 100%;
+    }
 
     .tx-container {
         padding-top: .0rem;
-        background: linear-gradient(#58598a, #8a8bad);
+        background: linear-gradient(to bottom, var(--md-primary-fg-color), rgb(122, 86, 194) 99%,#fff 99%)
     }
 
     .tx-hero {
@@ -30,8 +37,8 @@
     }
 
     .tx-hero__image{
-        max-width: auto;
-        height: auto;
+        width:17rem;
+        height:17rem;
         order:1;
         padding-right: 2.5rem;
     }
@@ -54,10 +61,164 @@
         color: var(--md-default-bg-color);
         border-color: var(--md-accent-fg-color)
     }
-  </style>
 
-  <!-- Hero for landing page -->
-  <section class="tx-container">
+    .feature-item h2 svg {
+        height: 30px;
+        float: left;
+        margin-right: 10px;
+        transform: translateY(10%);
+    }
+
+    .top-hr {
+        margin-top: 42px;
+    }
+
+    .feature-item {
+        font-family: 'Lato', sans-serif;
+        font-weight: 300;
+        box-sizing: border-box;
+        padding: 0 15px;
+        word-break: break-word
+    }
+
+    .feature-item h2 {
+        color: #333;
+        font-weight: 300;
+        font-size: 25px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: normal;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        font-family: inherit;
+    }
+
+    .feature-item p {
+        font-size: 16px;
+        line-height: 1.8em;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        color: #111;
+        margin: 0 0 10px;
+        display: block;
+    }
+
+    @media screen and (max-width:30em) {
+        .tx-hero h1 {
+            font-size: 1.4rem
+        }
+    }
+
+    @media screen and (min-width:60em) {
+        .md-sidebar--secondary {
+            display: none
+        }
+
+        .tx-hero {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .tx-hero__content {
+            max-width: 22rem;
+            margin-top: 3.5rem;
+            margin-bottom: 3.5rem;
+            margin-left: 1.0rem;
+            margin-right: 4.0rem;
+            align-items: center;
+        }
+    }
+
+    @media screen and (min-width:76.25em) {
+        .md-sidebar--primary {
+            display: none
+        }
+
+        .top-hr {
+            width: 100%;
+            display: flex;
+            max-width: 61rem;
+            margin-right: auto;
+            margin-left: auto;
+            padding: 0 .2rem;
+        }
+
+        .bottom-hr {
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+            max-width: 61rem;
+            margin-right: auto;
+            margin-left: auto;
+            padding: 0 .2rem;
+        }
+
+        .feature-item {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .feature-item:hover {
+            background-color: #526cfe47;
+            border-radius: 3px;
+        }
+    }
+
+    .hr {
+        border-bottom: 1px solid #eee;
+        width: 100%;
+        margin: 20px 0;
+    }
+
+    .text-center {
+        text-align: center;
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;
+        margin-top: 15px;
+        font-family: 'Lato', sans-serif;
+        font-size: 23px;
+        font-weight: 300;
+        padding-bottom: 10px;
+    }
+
+    .logos {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-flow: row wrap;
+        margin: 0 auto;
+    }
+
+    .logos img {
+        flex: 1 1 auto;
+        padding: 25px;
+        max-height: 130px;
+        vertical-align: middle;
+    }
+
+    .hr-logos {
+        margin-top: 0;
+        margin-bottom: 30px;
+    }
+
+    .md-footer-meta__inner {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-top: 1.0rem;
+    }
+
+    .md-footer-social {
+        padding-top: 20px;
+    }
+</style>
+
+<!-- Main site Entry button descriptions -->
+<section class="tx-container">
     <div class="md-grid md-typeset">
       <div class="tx-hero">
         <div class="tx-hero__image">
@@ -69,20 +230,24 @@
           <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
             Get started
           </a>
-          <a href="https://www.retroarch.com/index.php?page=platforms" class="md-button">
-           Download
-          </a>
-          <a href="https://docs.libretro.com/development/libretro-overview/" class="md-button">
-            Developer
+          <a href="https://www.retroarch.com/index.php?page=platforms" title="{{ lang.t('source.link.title') }}" class="md-button">
+            Download
           </a>
         </div>
       </div>
     </div>
 </section>
+
+<!-- Main site box descriptions -->
+<div class="top-hr">
+    <div class="feature-item">
+        <p>Among other things, it enables you to run classic games on a wide range of computers and consoles through its slick graphical interface. Settings are also unified so configuration is done once and for all.
+
+          In addition to this, you are able to run original game discs (CDs) from RetroArch.</p>
+    </div>
+</div>
+
+
 {% endblock %}
-
-<!-- Content -->
 {% block content %}{% endblock %}
-
-<!-- Application footer -->
-{% block footer %}{% endblock %}
+{% block footer %}{% endblock %}
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 6f251515..7589ecfe 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -519,8 +519,8 @@ markdown_extensions:
       mode: accept
   - pymdownx.details
   - pymdownx.emoji:
-      emoji_index: !!python/name:materialx.emoji.twemoji
-      emoji_generator: !!python/name:materialx.emoji.to_svg
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - pymdownx.highlight
   #     linenums_style: pymdownx-inline
   - pymdownx.inlinehilite