updated index page and new content

.vuepress/config.js

-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const Settings = require("../global_settings.js");
 
 module.exports = {
-    title: 'LiveCode.NYC',
-    description: '',
+  title: "LiveCode.NYC",
+  description: "",
 
-    dest: './public/',
+  dest: "./public/",
 
-    themeConfig: {
-        repo: 'https://gitlab.com/livecodenyc/livecodenyc.gitlab.io',
-        mailingList: 'https://groups.google.com/forum/#!forum/livecodenyc',
-        social: [
-            { url: 'https://twitter.com/livecodenyc', title: 'Twitter' },
-            { url: 'https://instagram.com/livecodenyc', title: 'Instagram' },
-            { url: 'https://www.facebook.com/livecodenyc', title: 'Facebook'},
-            { url: 'https://gitlab.com/livecodenyc', title: 'GitLab' }
-        ],
-        footerLinks: [
-            { path: '/how-to-edit', title: 'How to Submit Edits' },
-            { path: '/design', title: 'Design Assets' },
-            { path: '/coc', title: 'Code of Conduct' }
-        ]
-    },
+  themeConfig: {
+    repo: "https://gitlab.com/livecodenyc/livecodenyc.gitlab.io",
+    mailingList: Settings.mailingList,
+    discord: Settings.discord,
+    social: Settings.social,
+    navLinks: Settings.navLinks,
+    footerLinks: Settings.footerLinks
+  },
 
-    markdown: {
-        anchor: {
-            permalink: true,
-            permalinkBefore: false,
-            permalinkSymbol: ''
-        }
-    },
- 
-    configureWebpack: (config, isServer) => {
-        return {
-            plugins: [
-                new CopyWebpackPlugin([
-                    { from: 'image', to: 'image' }
-                ])
-            ]
-        }
+  markdown: {
+    anchor: {
+      permalink: true,
+      permalinkBefore: false,
+      permalinkSymbol: ""
     }
-}
\ No newline at end of file
+  },
+
+  configureWebpack: (config, isServer) => {
+    return {
+      plugins: [new CopyWebpackPlugin([{ from: "image", to: "image" }])]
+    };
+  }
+};

.vuepress/theme/Layout.vue

 <template>
-<div class="theme-container">
-    <Nav/>
-    <HeroVideo v-if="this.$page.path == '/'"/>
+  <div class="theme-container">
+    <Nav />
     <div class="container">
-        <component :is="layout"/>
-    <Footer/>
+      <!-- If Index Page, show Index page Component -->
+      <div v-if="this.$page.path == '/'">
+        <Index />
+      </div>
+      <!-- Otherwise -->
+      <div v-else>
+        <component :is="layout" />
+      </div>
+      <Footer />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import HeroVideo from './components/HeroVideo.vue';
-import Nav from './components/Nav.vue';
-import Footer from './components/Footer.vue';
+import Nav from "./components/Nav.vue";
+import Footer from "./components/Footer.vue";
 
-import EventList from './views/EventList.vue';
-import EventPage from './views/EventPage.vue';
-import ToolList from './views/ToolList.vue';
-import MemberList from './views/MemberList.vue';
-import MemberPage from './views/MemberPage.vue';
+import EventList from "./views/EventList.vue";
+import EventPage from "./views/EventPage.vue";
+import ToolList from "./views/ToolList.vue";
+import MemberList from "./views/MemberList.vue";
+import MemberPage from "./views/MemberPage.vue";
 
-import Page from './views/Page.vue';
+import Page from "./views/Page.vue";
+
+import Index from "./views/Index.vue";
 
 export default {
-    name: 'layout',
-    components: {
-        Nav,
-        Footer,
-        Page,
-        MemberList,
-        MemberPage,
-        ToolList,
-        HeroVideo,
-        EventList,
-        EventPage
-    },
-    computed: {
-        layout(){
-            // This is where routing happens
-            const path = this.$page.path;
-            if (path.includes('/members')){
-                return 'MemberList';
-            } else if (path.includes('/member')){
-                return 'MemberPage';
-            } else if (path.includes('/events')){
-                return 'EventList';
-            } else if (path.includes('/event')){
-                return 'EventPage';
-            } else if (path.includes('/tools')){
-                return 'ToolList';
-            } else if (path.includes('/act')){
-                return 'MemberPage';
-            }
-                return 'Page';
-        }
+  name: "layout",
+  components: {
+    Index,
+    Nav,
+    Footer,
+    Page,
+    MemberList,
+    MemberPage,
+    ToolList,
+    EventList,
+    EventPage
+  },
+  computed: {
+    layout() {
+      // This is where routing happens
+      const path = this.$page.path;
+      if (path.includes("/members")) {
+        return "MemberList";
+      } else if (path.includes("/member")) {
+        return "MemberPage";
+      } else if (path.includes("/events")) {
+        return "EventList";
+      } else if (path.includes("/event")) {
+        return "EventPage";
+      } else if (path.includes("/tools")) {
+        return "ToolList";
+      } else if (path.includes("/act")) {
+        return "MemberPage";
+      }
+      return "Page";
     }
-}
+  }
+};
 </script>
 
 <style>
-    @import './style/main.styl';
-</style>
\ No newline at end of file
+@import "./style/main.css";
+
+body {
+  /*
+    I know this looks bad but it apparently helps
+    with an iOS view height resizing issue
+  */
+  overflow: none;
+}
+
+@media screen and (min-width: 700px) {
+  body {
+    padding-left: 20vw;
+  }
+}
+@media screen and (max-width: 700px) {
+  .container::before {
+    content: " ";
+    display: block;
+    padding-top: calc(var(--padding) * 2);
+    height: 2.6em;
+  }
+}
+</style>

.vuepress/theme/components/Footer.vue

 <template>
-<footer>
+  <footer>
+    <div>
+      <h3>Information</h3>
+      <ul>
+        <li><a v-bind:href="data.mailingList">Mailing List</a></li>
+        <li v-for="link in data.footerLinks">
+          <a v-bind:href="link.path">{{ link.title }}</a>
+        </li>
+      </ul>
+    </div>
 
-        <div>
-            <h3>Information</h3>
-            <ul>
-                <li><a v-bind:href="data.mailingList">Mailing List</a></li>
-                <li v-for="link in data.footerLinks">
-                    <a v-bind:href="link.path">{{link.title}}</a>
-                </li>
-            </ul>
-        </div>
+    <div>
+      <h3>Social</h3>
+      <ul>
+        <li v-for="link in data.social">
+          <a :href="link.url">{{ link.title }}</a>
+        </li>
+      </ul>
+    </div>
 
-        <div>
-            <h3>Social</h3>
-            <ul>
-                <li v-for="link in data.social"><a :href="link.url">{{link.title}}</a></li>
-            </ul>
-        </div>
+    <div>
+      <h3>Site</h3>
+      <ul>
+        <li>
+          <a v-bind:href="data.repo + '/issues'">Report Issue with Site</a>
+        </li>
+        <li><a href="https://vuepress.vuejs.org">Built with VuePress</a></li>
+        <li><a href="https://zachkrall.com">Theme by Zach Krall</a></li>
+      </ul>
+    </div>
 
-        <div>
-            <h3>Site</h3>
-            <ul>
-                <li><a v-bind:href="data.repo + '/issues'">Report Issue with Site</a></li>
-                <li><a href="https://vuepress.vuejs.org">Built with VuePress</a></li>
-                <li><a href="https://zachkrall.com">Theme by Zach Krall</a></li>
-            </ul>
-        </div>
-
-        <div class="full">
-            &copy; Copyright {{ data.year }} LiveCode.NYC 
-        </div>
-    </footer>
+    <div class="full">&copy; Copyright {{ data.year }} LiveCode.NYC</div>
+  </footer>
 </template>
 
 <script>
 export default {
-    name: "Footer",
-    computed: {
-        data() {
-
-            let theme = this.$site.themeConfig;
+  name: "Footer",
+  computed: {
+    data() {
+      let theme = this.$site.themeConfig;
 
-            return {
-                year: (new Date()).getFullYear(),
-                repo: theme.repo,
-                social: theme.social,
-                mailingList: theme.mailingList,
-                footerLinks: theme.footerLinks
-            };
-        }
+      return {
+        year: new Date().getFullYear(),
+        repo: theme.repo,
+        social: theme.social,
+        mailingList: theme.mailingList,
+        footerLinks: theme.footerLinks
+      };
     }
-}
+  }
+};
 </script>
 
-<style>
-
-    footer{
-        margin-top:3rem;
-        padding-bottom: 2rem; 
-    }
-    footer > div {
-        padding:var(--padding);
-        display:inline-block;
-        vertical-align:top;
-    }
-    footer > div.full{
-        display:block;
-        max-width:100%;
-    }
-    footer h3{
-        font-size:inherit;
-        opacity:0.4;
-        font-weight:normal;
-    }
-    footer ul{
-        list-style:none;
-        margin:0;
-    }
-    footer ul li a {
-        color:var(--text);
-    }
-    footer ul li a:hover{
-        color:var(--color);
-    }
-
-</style>
\ No newline at end of file
+<style scoped>
+footer {
+  margin-top: 1.5rem;
+  padding-bottom: 2rem;
+}
+footer > div {
+  padding: var(--padding);
+  display: inline-block;
+  vertical-align: top;
+}
+footer > div.full {
+  display: block;
+  max-width: 100%;
+}
+footer h3 {
+  font-size: inherit;
+  opacity: 0.4;
+  font-weight: normal;
+}
+footer ul {
+  list-style: none;
+  margin: 0;
+}
+footer ul li a {
+  color: var(--text);
+}
+footer ul li a:hover {
+  color: var(--color);
+}
+</style>

.vuepress/theme/components/HeroVideo.vue

 <template>
-    <div v-if="data.show" class="herovideo">
-        <div class="container">
-            <h1 v-if="data.title">{{data.title}}</h1>
-            <h2 v-if="data.subtitle">{{data.subtitle}}</h2>
-        </div>
-        <video id="header-video"
-            v-bind:src="$withBase(data.video)"
-            playsinline=""
-            muted="true"
-            autoplay="true"
-            loop="true">
-        </video>
-    </div>
+  <div id="hero-container">
+    <video
+      id="hero-video"
+      v-bind:src="$withBase(data.video)"
+      playsinline=""
+      muted="true"
+      autoplay="true"
+      loop="true"
+      controls
+    ></video>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "HeroVideo",
-    computed: {
-        data () {
-            let page    = this.$page.frontmatter.hero;
-            let display = this.$page.frontmatter.hero ? true : false;
-            return {
-                show: display,
-                title: page.title,
-                subtitle: page.subtitle,
-                video: page.video_src
-            }
-        }
-    }
-}
+  name: "HeroVideo",
+  computed: {
+    data() {
+      let page = this.$page.frontmatter.hero;
+      let display = this.$page.frontmatter.hero ? true : false;
+      return {
+        show: display,
+        title: page.title,
+        subtitle: page.subtitle,
+        video: page.video_src
+      };
+    }
+  }
+};
 </script>
 
-<style>
-  .herovideo{
-        width:100%;height:100%;
-        overflow:hidden;
-        position:relative;
-        margin-bottom: 1rem;
-    }
-    .herovideo video{
-        position:absolute;
-        top:0;left:0;
-        width:100%;height:auto;
-        z-index:-1;
-    }
-    .herovideo .container{
-        height:100%;width:100%;
-        min-height: calc(100vw * 9 / 16);
-        padding:var(--padding);
-        display:flex;
-        align-items:left;
-        justify-content:center;
-        flex-direction:column;
-        flex-wrap:wrap;
-    }
-    .herovideo h1,
-    .herovideo h2{
-        transition: 0.4s ease all;
-    }
-    .herovideo h1{
-        display:inline-block;
-        color:var(--text);
-        font-weight:bold;
-        line-height:0.9;
-    }
-    .herovideo h2{
-        font-weight:normal;
-    }
-
-    @media screen and (min-width: 1200px){
-        .herovideo h1{
-            transform: translate(0px, -10vh);
-            font-size: 3rem;
-        }
-        .herovideo h2{
-            transform: translate(0px, -10vh);
-            font-size: 2.5rem;
-        }
-    }
-    @media screen and (max-width: 800px){
-        .herovideo h1{
-            font-size: 1.6rem;
-        }
-        .herovideo h2{
-            font-size: 1.2rem;
-        }
-    }
-
-    .herovideo h1,.herovideo h2{
-        text-shadow: 0px 0px 10px rgba(0,0,0,1.0);
-    }
-</style>
\ No newline at end of file
+<style scoped>
+#hero-container {
+  position: relative;
+  width: 100%;
+  height: 0px;
+  overflow: hidden;
+  padding-bottom: 56%;
+  margin-bottom: calc(var(--padding) * 2);
+}
+#hero-video {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

.vuepress/theme/components/Nav.vue

 <template>
-<nav>
-    <a href="/" class="nostyle"><img id="logo" :src="$withBase('/media/logo-white.svg')" alt="LiveCode.NYC Logo" height="100"/></a>
-    <ul class="reset">
-        <li><a href="/events.html">Events</a></li>
-        <li><a href="/members.html">Members</a></li>
-        <li><a href="/tools.html">Tools</a></li>
-        <li><a href="/contact.html">Contact</a></li>
+  <nav :class="{ closed, open }" tabindex="1">
+    <ul>
+      <li id="logo" ref="logo">
+        <a href="/" class="nostyle"
+          ><img
+            :src="$withBase('/media/logo-white.svg')"
+            alt="LiveCode.NYC Logo"
+        /></a>
+      </li>
+      <li class="link" v-for="(link, key) in navLinks" :key="link + key">
+        <a :href="link.path">{{ link.title }}</a>
+      </li>
+      <li class="link" style="margin-top:1em;">
+        <Pill color="#7289DA" :src="this.$themeConfig.discord"
+          >Join Discord</Pill
+        >
+      </li>
     </ul>
-</nav>
+    <button
+      id="mobile-menu"
+      ref="mobilemenu"
+      v-on:click="toggleNav"
+      tabindex="2"
+    >
+      <div></div>
+    </button>
+  </nav>
 </template>
 
 <script>
+import Pill from "../ui/Pill.vue";
 export default {
+  name: "Nav",
+  components: { Pill },
+  data() {
+    return {
+      closed: true,
+      open: false
+    };
+  },
+  computed: {
+    navLinks() {
+      let links = this.$themeConfig.navLinks;
+      return links;
+    }
+  },
+  methods: {
+    toggleNav() {
+      this.closed = !this.closed;
+      this.open = !this.open;
 
-}
+      if (this.open) {
+        console.log(this.$refs.mobilemenu);
+        this.$refs.mobilemenu.focus();
+      }
+    }
+  }
+};
 </script>
 
-<style>
- nav{
-        padding: var(--padding);
-        display:flex;
-        justify-content:space-between;
-        align-items:center;
+<style scoped>
+nav {
+  padding: var(--padding);
+  background: var(--background);
 
-        background:var(--background);
+  position: fixed;
+  top: 0;
+  left: 0;