From 305769adceab3c75c520ae02a98bcd861d982796 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 1 Sep 2021 21:56:17 +0100
Subject: [PATCH] Fixes demo link, status indicator image and refactors styles

---
 docs/status-indicators.md        |  4 ++--
 src/components/HomePageHeader.js |  2 +-
 src/pages/index.module.scss      | 32 --------------------------------
 src/styles/Header.module.scss    |  5 ++++-
 4 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/docs/status-indicators.md b/docs/status-indicators.md
index ad9e6724..5c700a0f 100644
--- a/docs/status-indicators.md
+++ b/docs/status-indicators.md
@@ -3,7 +3,7 @@
 Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This can be useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. The status feature will show response time, response code, online/ offline check and if applicable, a relevant error message 
 
 <p align="center">
-  <img width="800" src="/docs/assets/status-check-demo.gif" />
+  <img width="800" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/status-check-demo.gif" />
 </p>
 
 ## Enabling Status Indicators
@@ -42,7 +42,7 @@ By default, with status indicators enabled Dashy will check an applications stat
 
 The following example, will instruct Dashy to continuously check the status of your services every 20 seconds
 
-```
+```yaml
 appConfig:
   statusCheck: true
   statusCheckInterval: 20
diff --git a/src/components/HomePageHeader.js b/src/components/HomePageHeader.js
index 6fbf4b3d..3ef8b7b3 100644
--- a/src/components/HomePageHeader.js
+++ b/src/components/HomePageHeader.js
@@ -19,7 +19,7 @@ export default function HomepageHeader() {
       <h3 className={styles.heroSubTitle}>{siteConfig.tagline}</h3>
       <div className={styles.buttons}>
         <Button to="/docs/quick-start" color="pink"><IconBannerGetStarted />Get Started</Button>
-        <Button to="/docs" color="blue"><IconBannerDemo />Try it Out</Button>
+        <Button to="https://demo.dashy.to" color="blue"><IconBannerDemo />Live Demo</Button>
         <Button to="https://github.com/Lissy93/dashy" color="green"><IconBannerSource />Source Code</Button>
         <Button to="/docs" color="yellow"><IconBannerDocs />Documentation</Button>
       </div>
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 403c2344..3fb846cd 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -11,36 +11,4 @@ html {
   }
 }
 
-header.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  background: var(--hero-background);
-  h1.heroTitle {
-    font-size: 6rem;
-    font-family: 'Racing Sans One', mono;
-    text-shadow: var(--heading-shadow);
-  }
-  h3.heroSubTitle {
-    text-shadow: var(--sub-heading-shadow);
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  @media screen and (max-width: 966px) {
-    flex-direction: column;
-  }
-}
-
-
-
-@media screen and (max-width: 966px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
 
diff --git a/src/styles/Header.module.scss b/src/styles/Header.module.scss
index 87529640..85f5f24c 100644
--- a/src/styles/Header.module.scss
+++ b/src/styles/Header.module.scss
@@ -18,7 +18,7 @@ header.heroBanner {
   min-height: calc(100vh - 4rem);
   h1.heroTitle {
     font-size: 8rem;
-    font-family: 'Racing Sans One', cursive;
+    font-family: 'Racing Sans One', mono;
     text-shadow: var(--heading-shadow);
     @media (max-width: 966px) {
       font-size: 6rem;
@@ -40,6 +40,9 @@ header.heroBanner {
       opacity: 1;
     }
   }
+  @media screen and (max-width: 966px) {
+    padding: 2rem;
+  }
 }
 .buttons {
   display: flex;