Fixes demo link, status indicator image and refactors styles

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

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>

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;
-  }
-}
 

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;