Home Page

docs/CNAME

@@ -0,0 +1 @@
+library.arabian-vacc.com

docs/index.md

@@ -1,17 +1,7 @@
-# Welcome to MkDocs
+---
+template: home.html
+hide:
+    - navigation
+    - toc
+---
 
-For full documentation visit [mkdocs.org](https://www.mkdocs.org).
-
-## Commands
-
-* `mkdocs new [dir-name]` - Create a new project.
-* `mkdocs serve` - Start the live-reloading docs server.
-* `mkdocs build` - Build the documentation site.
-* `mkdocs -h` - Print help message and exit.
-
-## Project layout
-
-    mkdocs.yml    # The configuration file.
-    docs/
-        index.md  # The documentation homepage.
-        ...       # Other markdown pages, images and other files.

docs/stylesheets/extra.css

@@ -1,8 +1,8 @@
 /*Table Styling*/
 .md-typeset__table {
-  width: 100%;
-}
-
-.md-typeset__table table:not([class]) {
-  display: table
-}
+    width: 100%;
+  }
+  
+  .md-typeset__table table:not([class]) {
+    display: table
+  }

index.md

@@ -0,0 +1,6 @@
+---
+template: home.html
+hide:
+    - navigation
+    - toc
+---

mkdocs.yml

@@ -1,18 +1,20 @@
 site_name: Arabian vACC - Library
-site_url: ""
+site_url: https://library.arabian-vacc.com
 repo_url: https://github.com/arabian-vacc/library
 repo_name: arabian-vacc/library
+edit_uri: ""
+copyright: ""
 
 theme:
   name: material
+  custom_dir: overrides
   font:
     text: Mulish
     code: Red Hat Mono
   logo: assets/logo.png
   favicon: assets/favicon.ico
   features:
     - navigation.tabs
-    - navigation.footer
   palette:
     # Dark Mode
     - scheme: slate

overrides/assets/stylesheets/home.css

@@ -0,0 +1,176 @@
+/* Main Elements */
+.md-main {
+    flex-grow: 1;
+}
+
+.md-main__inner {
+    display: flex;
+    height: 100%;
+}
+
+.md-footer__inner {
+    display: none;
+  }
+
+.md-footer-nav {
+    display: none;
+  }
+
+.container {
+    padding-top: 6.5rem;
+    padding-bottom: 6.5rem;
+    background-image: url("../../assets/hero-image.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-blend-mode: overlay;
+    background-position-y: center;
+    background-position-x: center;
+}
+
+.hero {
+    color: var(--md-primary-bg-color);
+    display: flex;
+    align-items: end;
+}
+
+.hero .hero-items {
+    display: flex;
+    justify-content: space-between;
+}
+
+.hero-items .left {
+    width: 60%;
+}
+
+.hero-items .right {
+    display: flex;
+    align-items: end;
+}
+
+.hero .hero-items h1 {
+    color: #ffffff;
+    font-family: Mulish;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    margin: 0 0 0.25rem;
+}
+
+.hero .hero-items p {
+    color: #ffffff;
+    margin: 0;
+    font-family: Mulish;
+}
+
+.hero .md-button {
+    margin-top: .5rem;
+    margin-right: .5rem;
+    color: var(--md-primary-bg-color)
+}
+
+.hero .md-button--primary {
+    background-color: var(--md-primary-bg-color);
+    color: var(--md-accent-fg-color);
+    border-color: var(--md-primary-bg-color)
+}
+
+.hero .md-button:focus,
+.hero .md-button:hover {
+    background-color: var(--md-accent-fg-color);
+    color: #ffffff;
+    border-color: var(--md-accent-fg-color)
+}
+
+/* Additional Responsive Styling */
+
+@media screen and (max-width:480px) {
+    .container {
+        padding-top: 1.5rem;
+        background: url("../../assets/hero-image.png"), rgba(29, 30, 38, 0.5);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-blend-mode: overlay;
+        background-position: 35%;
+    }
+
+    .hero h1 {
+        font-size: 2rem;
+    }
+
+    .hero .hero-items {
+        display: block;
+        padding: 1.5rem;
+    }
+
+    .hero-items .left { display: block; width: 100%; }
+    .hero-items .right a { margin-top: 1rem;}
+
+    .feature h2 {
+        margin-left: 20px;
+    }
+
+    .feature .cards {
+        flex-direction: column;
+    }
+
+
+}
+
+@media screen and (min-width: 481px) and (max-width: 899px) {
+    .container {
+        background-color: rgba(29, 30, 38, 0.5)
+    }
+
+    .hero .hero-items {
+        display: block;
+        padding: 1.5rem;
+    }
+
+    .hero-items .left { display: block; width: 100%; }
+    .hero-items .right a { margin-top: 1rem;}
+
+    .lowerSection {
+        padding: 0 1.5rem;
+    }
+
+    .feature .cards {
+        flex-direction: column;
+    }
+}
+
+@media screen and (min-width:900px) {
+    .md-sidebar--secondary {
+        display: none
+    }
+
+    .hero {
+        min-height: 600px;
+    }
+
+    .hero-items {
+        padding: 0 2rem;
+    }
+
+    .hero-content {
+        max-width: 20rem;
+        margin-top: 2rem;
+        margin-bottom: 2.5rem;
+        margin-right: 4rem;
+        align-items: center;
+    }
+
+    .feature h2 {
+        margin-left: 10px;
+    }
+}
+
+@media screen and (min-width:1120px) {
+    .md-sidebar--primary {
+        display: none
+    }
+
+    .feature h2 {
+        margin-left: 20px;
+    }
+}

overrides/home.html

@@ -0,0 +1,19 @@
+{% extends "main.html" %}
+{% block tabs %}
+{{ super() }}
+<link rel="stylesheet" href="assets/stylesheets/home.css">
+<!-- Hero -->
+<section class="container">
+    <div class="md-grid md-typeset">
+        <div class="hero">
+            <div class="hero-items">
+                <div class="left">
+                    <h1>Clear Vision & Clear Mission</h1>
+                    <p>Welcome to the Arabian vACC Library! Home to our policies, pilot resources, and controller materials! Begin exploring by navigating the menu above!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+{% block content %}{% endblock %}

overrides/main.html

@@ -0,0 +1 @@
+{% extends "base.html" %}