feat: added landing and mobile for nav

.gitignore

@@ -0,0 +1,2 @@
+*.map
+.vscode/*

css/base.css

@@ -0,0 +1,147 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  pointer-events: none;
+  overflow-x: hidden;
+}
+
+a {
+  pointer-events: auto;
+}
+
+.burger {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+header nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 8vh;
+  color: #fff;
+  background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%);
+  font-family: 'Playfair Display', serif;
+}
+
+header nav .brand a {
+  font-size: 3em;
+  color: white;
+  text-decoration: none;
+}
+
+header nav .brand a i {
+  padding-right: 10;
+}
+
+header nav .brand a img {
+  height: 6vh;
+  margin: auto 0;
+}
+
+header nav ul {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  width: 50%;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+header nav ul li {
+  padding: 5px 10px;
+}
+
+header nav ul li a {
+  color: #000;
+  text-decoration: none;
+}
+
+header nav ul .login {
+  padding: 4px 5px;
+  border: 2px solid black;
+}
+
+header nav .burger {
+  display: none;
+}
+
+header nav .burger div {
+  width: 25px;
+  height: 3px;
+  background-color: #333;
+  margin: 5px;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 1100px) {
+  header nav {
+    background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%);
+  }
+  header ul {
+    z-index: 1;
+    -webkit-transform: translatex(100%);
+            transform: translatex(100%);
+    position: absolute;
+    right: 0%;
+    top: 8vh;
+    height: 50vh;
+    width: 100% !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    background-color: #333;
+    -webkit-transition: -webkit-transform 0.5s ease-in;
+    transition: -webkit-transform 0.5s ease-in;
+    transition: transform 0.5s ease-in;
+    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
+  }
+  header ul li a {
+    color: #fff !important;
+    font-size: 1.5em;
+  }
+  header ul .login {
+    border: none !important;
+  }
+  header .burger {
+    display: block !important;
+  }
+  header .burger.toggle .line1 {
+    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
+            transform: rotate(-45deg) translate(-5px, 6px);
+  }
+  header .burger.toggle .line2 {
+    opacity: 0;
+  }
+  header .burger.toggle .line3 {
+    -webkit-transform: rotate(45deg) translate(-5px, -6px);
+            transform: rotate(45deg) translate(-5px, -6px);
+  }
+}
+
+.nav-active {
+  -webkit-transform: translateX(0%) !important;
+          transform: translateX(0%) !important;
+}
+/*# sourceMappingURL=base.css.map */

css/base.sass

@@ -0,0 +1,126 @@
+// fonts
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
+$title-stack: 'Poppins', sans-serif
+$subtitle-stack: 'Playfair Display', serif
+
+// colors
+$dark: #333
+$light: #fff
+
+
+// mobile
+$mobile-width: 1100px
+
+@mixin mobile
+  @media (max-width: #{$mobile-width})
+    @content
+
+* 
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+  pointer-events: none
+  overflow-x: hidden
+
+a
+  pointer-events: auto
+
+.burger
+  pointer-events: auto
+  cursor: pointer
+
+header 
+  nav
+    display: flex
+    justify-content: space-around
+    align-items: center
+    min-height: 8vh
+    color: #fff
+    background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.000001%, #fff 100%)
+    font-family: 'Playfair Display', serif
+    
+    .brand a
+      font-size: 3em
+      color: white
+      text-decoration: none
+
+      i
+        padding-right: 10
+
+      img
+        height: 6vh
+        margin: auto 0
+
+    ul
+      list-style-type: none
+      display: flex
+      justify-content: space-around
+      width: 50%
+      font-family: $title-stack
+      font-weight: 400
+      text-transform: uppercase
+      overflow: hidden
+
+      li
+        padding: 5px 10px
+
+        a
+          color: #000
+          text-decoration: none
+
+      .login
+        padding: 4px 5px
+        border: 2px solid black
+
+    .burger
+      display: none
+
+      div
+        width: 25px
+        height: 3px
+        background-color: $dark
+        margin: 5px
+
+        transition: all 0.3s ease
+
+  @include mobile
+    nav
+      background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.000001%, #fff 100%)
+
+    ul
+      z-index: 1
+      transform: translatex(100%)
+      position: absolute
+      right: 0%
+      top: 8vh
+      height: 50vh
+      width: 100% !important
+      display: flex
+      flex-direction: column
+      align-items: center
+      background-color: $dark
+      transition: transform 0.5s ease-in
+
+      li
+        a
+          color: $light !important
+          font-size: 1.5em
+      
+      .login
+        border: none !important
+
+    .burger
+      display: block !important
+
+      &.toggle
+        .line1
+          transform: rotate(-45deg) translate(-5px, 6px)
+        
+        .line2
+          opacity: 0
+        
+        .line3
+          transform: rotate(45deg) translate(-5px, -6px)
+      
+.nav-active
+  transform: translateX(0%) !important

css/index.css

@@ -0,0 +1,224 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden !important;
+}
+
+a {
+  pointer-events: auto;
+}
+
+.burger {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+header nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 8vh;
+  color: #fff;
+  background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%);
+  font-family: 'Playfair Display', serif;
+}
+
+header nav .brand a {
+  font-size: 3em;
+  color: white;
+  text-decoration: none;
+}
+
+header nav .brand a i {
+  padding-right: 10;
+}
+
+header nav .brand a img {
+  height: 6vh;
+  margin: auto 0;
+}
+
+header nav ul {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  width: 50%;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+header nav ul li {
+  padding: 5px 10px;
+}
+
+header nav ul li a {
+  color: #000;
+  text-decoration: none;
+}
+
+header nav ul .login {
+  padding: 4px 5px;
+  border: 2px solid black;
+}
+
+header nav .burger {
+  display: none;
+}
+
+header nav .burger div {
+  width: 25px;
+  height: 3px;
+  background-color: #333;
+  margin: 5px;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 1100px) {
+  header nav {
+    background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%);
+  }
+  header ul {
+    z-index: 1;
+    -webkit-transform: translatex(100%);
+            transform: translatex(100%);
+    position: absolute;
+    right: 0%;
+    top: 8vh;
+    height: 50vh;
+    width: 100% !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    background-color: #333;
+    -webkit-transition: -webkit-transform 0.5s ease-in;
+    transition: -webkit-transform 0.5s ease-in;
+    transition: transform 0.5s ease-in;
+    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
+  }
+  header ul li a {
+    color: #fff !important;
+    font-size: 1.5em;
+  }
+  header ul .login {
+    border: none !important;
+  }
+  header .burger {
+    display: block !important;
+  }
+  header .burger.toggle .line1 {
+    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
+            transform: rotate(-45deg) translate(-5px, 6px);
+  }
+  header .burger.toggle .line2 {
+    opacity: 0;
+  }
+  header .burger.toggle .line3 {
+    -webkit-transform: rotate(45deg) translate(-5px, -6px);
+            transform: rotate(45deg) translate(-5px, -6px);
+  }
+}
+
+.nav-active {
+  -webkit-transform: translateX(0%) !important;
+          transform: translateX(0%) !important;
+}
+
+.hero-wrapper {
+  color: #fff;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-image: -webkit-gradient(linear, right top, left top, from(#090B08), color-stop(50%), color-stop(#f0eddf), color-stop(75%), to(#fff));
+  background-image: linear-gradient(to left, #090B08, 50%, #f0eddf, 75%, #fff);
+}
+
+@media (max-width: 1100px) {
+  .hero-wrapper {
+    background: none;
+  }
+}
+
+.hero {
+  height: 100%;
+  width: 100%;
+  background-size: 55em;
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  background-image: url("/css/res/lincoln-trans.png");
+}
+
+@media (max-width: 1100px) {
+  .hero {
+    background-size: 120%;
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+    background-image: url("/css/res/lincoln-mobile.png");
+  }
+}
+
+#hero {
+  position: absolute;
+  top: 10%;
+  left: 5%;
+}
+
+#hero h1 {
+  font-family: "Poppins", sans-serif;
+  text-align: left;
+  font-size: 6em;
+  line-height: 1.2em;
+  color: #333;
+  overflow: hidden;
+}
+
+#hero h2 {
+  font-family: "Playfair Display", serif;
+  text-align: left;
+  font-size: 2em;
+  line-height: 1.2em;
+  color: #333;
+  overflow: hidden;
+}
+
+@media (max-width: 1100px) {
+  #hero {
+    top: 55%;
+  }
+  #hero h1 {
+    color: #fff;
+    font-size: 4em;
+  }
+  #hero h2 {
+    color: #fff;
+  }
+}
+
+.introduction {
+  color: #fff;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+/*# sourceMappingURL=index.css.map */

css/index.sass

@@ -0,0 +1,63 @@
+@import "base"
+  
+.hero-wrapper
+  color: $light
+  position: relative
+  width: 100vw
+  height: 100vh
+  background-image: linear-gradient(to left, #090B08, 50%, #f0eddf, 75%, #fff)
+  @include mobile
+    background: none
+
+.hero
+  height: 100%
+  width: 100%
+  background-size: 55em
+  background-repeat: no-repeat
+  background-position: 100% 50%
+  background-image: url("/css/res/lincoln-trans.png")
+
+  @include mobile
+    background-size: 120%
+    background-repeat: no-repeat
+    background-position: 50% 0%
+    background-image: url("/css/res/lincoln-mobile.png")
+
+#hero
+  position: absolute
+  top: 10%
+  left: 5%
+
+  h1
+    font-family: $title-stack
+    text-align: left
+    font-size: 6em
+    line-height: 1.2em
+    color: $dark
+    overflow: hidden
+  
+  h2
+    font-family: $subtitle-stack
+    text-align: left
+    font-size: 2em
+    line-height: 1.2em
+    color: $dark
+    overflow: hidden
+  
+  @include mobile
+    top: 55%
+
+    h1
+      color: $light
+      font-size: 4em
+    
+    h2
+      color: $light
+
+
+    
+.introduction
+  color: $light
+  position: relative
+  width: 100%
+  height: 100%

css/officers.css

@@ -0,0 +1,189 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  pointer-events: none;
+  overflow-x: hidden;
+}
+
+a {
+  pointer-events: auto;
+}
+
+.burger {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+header nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 8vh;
+  color: #fff;
+  background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%);
+  font-family: 'Playfair Display', serif;
+}
+
+header nav .brand a {
+  font-size: 3em;
+  color: white;
+  text-decoration: none;
+}
+
+header nav .brand a i {
+  padding-right: 10;
+}
+
+header nav .brand a img {
+  height: 6vh;
+  margin: auto 0;
+}
+
+header nav ul {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  width: 50%;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+header nav ul li {
+  padding: 5px 10px;
+}
+
+header nav ul li a {
+  color: #000;
+  text-decoration: none;
+}
+
+header nav ul .login {
+  padding: 4px 5px;
+  border: 2px solid black;
+}
+
+header nav .burger {
+  display: none;
+}
+
+header nav .burger div {
+  width: 25px;
+  height: 3px;
+  background-color: #333;
+  margin: 5px;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 1100px) {
+  header nav {
+    background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%);
+  }
+  header ul {
+    z-index: 1;
+    -webkit-transform: translatex(100%);
+            transform: translatex(100%);
+    position: absolute;
+    right: 0%;
+    top: 8vh;
+    height: 50vh;
+    width: 100% !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    background-color: #333;
+    -webkit-transition: -webkit-transform 0.5s ease-in;
+    transition: -webkit-transform 0.5s ease-in;
+    transition: transform 0.5s ease-in;
+    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
+  }
+  header ul li a {
+    color: #fff !important;
+    font-size: 1.5em;
+  }
+  header ul .login {
+    border: none !important;
+  }
+  header .burger {
+    display: block !important;
+  }
+  header .burger.toggle .line1 {
+    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
+            transform: rotate(-45deg) translate(-5px, 6px);
+  }
+  header .burger.toggle .line2 {
+    opacity: 0;
+  }
+  header .burger.toggle .line3 {
+    -webkit-transform: rotate(45deg) translate(-5px, -6px);
+            transform: rotate(45deg) translate(-5px, -6px);
+  }
+}
+
+.nav-active {
+  -webkit-transform: translateX(0%) !important;
+          transform: translateX(0%) !important;
+}
+
+.officers {
+  margin: 10vh 20vh;
+}
+
+.row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  width: 100%;
+}
+
+.column {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-preferred-size: 100%;
+      flex-basis: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.blue-column {
+  background-color: blue;
+  height: 100px;
+}
+
+.green-column {
+  background-color: green;
+  height: 100px;
+}
+/*# sourceMappingURL=officers.css.map */

css/officers.sass

@@ -0,0 +1,27 @@
+@import "base"
+
+.officers
+  margin: 10vh 20vh
+
+
+.row
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  width: 100%
+
+.column 
+  display: flex
+  flex-direction: column
+  flex-basis: 100%
+  flex: 1
+
+
+.blue-column 
+  background-color: blue
+  height: 100px
+
+
+.green-column 
+  background-color: green
+  height: 100px

favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="86px" height="70px" viewBox="0 0 86 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g stroke="#ffffff" stroke-width="6">
+            <circle cx="43" cy="35" r="29"></circle>
+            <path d="M43,6 L43,64"></path>
+            <path d="M43,61 L77,6 L9,6 L43,61 Z"></path>
+        </g>
+    </g>
+</svg>

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TJLD</title>
+    <link rel="stylesheet" href="css/index.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <div class="brand">
+          <a class="logo" href="#">
+            <img src="favicon.svg" />
+            <span><i>tj</i>LD</span>
+          </a>
+        </div>
+        <ul>
+          <li><a href="#">What is LD?</a></li>
+          <li><a href="/officers.html">Meet the Officers</a></li>
+          <li><a href="#">Tournaments</a></li>
+          <li class="login"><a href="#">Login</a></li>
+        </ul>
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+          <div class="line3"></div>
+        </div>
+      </nav>
+    </header>
+    <div class="hero-wrapper">
+      <section class="hero">
+        <div id="hero">
+          <h1>Lincoln<br />Douglas<br />Debate</h1>
+          <h2><span id="hero-subtitle"></span></h2>
+        </div>
+      </section>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
+    <script src="js/index.js"></script>
+    <script src="js/base.js"></script>
+  </body>
+</html>

js/base.js

@@ -0,0 +1,11 @@
+const nav = () => {
+  const burger = document.querySelector(".burger");
+  const nav = document.querySelector("nav ul");
+
+  burger.addEventListener("click", () => {
+    nav.classList.toggle("nav-active");
+    burger.classList.toggle("toggle");
+  });
+};
+
+nav();

js/index.js

@@ -0,0 +1,15 @@
+var options = {
+  strings: [
+    "every Friday 8A",
+    "at the #1 highschool in the nation",
+    "taught by TJ's brightest",
+  ],
+  typeSpeed: 40,
+  backSpeed: 20,
+  startDelay: 1000,
+  backDelay: 5000,
+  loop: true,
+  shuffle: true,
+};
+
+var typed = new Typed("#hero-subtitle", options);

officers.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TJLD | Officers</title>
+    <link rel="stylesheet" href="css/officers.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <div class="brand">
+          <a class="logo" href="#">
+            <img src="favicon.svg" />
+            <span><i>tj</i>LD</span>
+          </a>
+        </div>
+        <ul>
+          <li><a href="#">What is LD?</a></li>
+          <li><a href="/officers.html">Meet the Officers</a></li>
+          <li><a href="#">Tournaments</a></li>
+          <li class="login"><a href="#">Login</a></li>
+        </ul>
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+          <div class="line3"></div>
+        </div>
+      </nav>
+    </header>
+    <section class="officers">
+      <div class="row">
+        <div class="column">
+          <div>Some Text in Column One</div>
+        </div>
+        <div class="column">
+          <div>Some Text in Column Two</div>
+        </div>
+      </div>
+    </section>
+    <script src="base.js"></script>
+  </body>
+</html>