Progress on homepage & reset styling

- plus footer css

Progress on homepage & reset styling
- plus footer css
4c8c39b7 · David Haynes · 962f8ec6 · 4c8c39b7 · 4c8c39b7 · 4c8c39b7
Verified Commit 4c8c39b7 authored Sep 22, 2017 by David Haynes 🙆
7 changed files
--- a/README.md
+++ b/README.md
@@ -45,9 +45,9 @@ files such as JS dependencies and fonts.

 You can spin up a development server with:

-        gulp
+    gulp

-Head to [127.0.0.1:8080](127.0.0.1:8080) to view!
+Head to [127.0.0.1:8000](127.0.0.1:8000) to view!

 Any changes made in `src/` are automatically applied to the dev server. DO NOT
 EDIT IN `build/`, changes WILL NOT be committed.
\ No newline at end of file
--- a/src/html/demo.html
+++ b/src/html/demo.html
+<!DOCTYPE html>
+
+<html lang="en">
+
+  <head>
+    <!-- Metatags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <!-- Chrome on Android navbar color -->
+    <meta name="theme-color" content="#006633">
+    <!-- Opengraph tags -->
+    <meta property="og:url" content="https://srct.gmu.io/masonstrap/">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="SRCT Masonstrap">
+    <meta property="og:image" content="https://srct.gmu.io/masonstrap/img/masonstrap.png">
+    <meta property="og:description" content="Easily provide any web project with Mason branding.">
+    <meta property="og:site_name" content="SRCT Masonstrap">
+    <meta property="og:locale" content="en_US">
+    <meta property="article:author" content="SRCT">
+    <!-- Twitter card tags -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@MasonSRCT">
+    <meta name="twitter:creator" content="@MasonSRCT">
+    <meta name="twitter:url" content="https://srct.gmu.io/masonstrap/">
+    <meta name="twitter:title" content="SRCT Masonstrap">
+    <meta name="twitter:description" content="Easily provide any web project with Mason branding.">
+    <meta name="twitter:image" content="https://srct.gmu.io/masonstrap/img/masonstrap.png">
+
+    <!-- Title -->
+    <title>Masonstrap 4 &bull; Home</title>
+
+    <!-- Load in static content -->
+    <link rel="icon" href="./img/favicon.ico" sizes="16x16">
+    <link rel="stylesheet" href="./css/masonstrap.min.css" media="screen">
+  </head>
+
+  <!-- Navbar -->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand d-flex mx-auto" href="./index.html">
+      <img src="./img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top" alt="SRCT Masonstrap">
+      &nbsp;Masonstrap&nbsp;
+    </a>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
+      aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <li class="nav-item">
+          <a class="nav-link" href="./demo.html">Demo</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Source Files
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+            <a class="dropdown-item" href="./css/masonstrap.css">masonstrap.css</a>
+          </div>
+        </li>
+      </ul>
+      <a class="btn accent-btn-outline" href="https://git.gmu.edu/srct/masonstrap/-/jobs/artifacts/master/download?job=build">Download</a>
+    </div>
+  </nav>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container">
+      <span class="text-muted">A project of <a href="http://srct.gmu.edu/">GMU<strong> SRCT</strong></a>.</span>
+    </div>
+  </footer>
+
+  <!-- load in external js -->
+  <script src="./js/jquery.min.js"></script>
+  <script src="./js/popper.min.js"></script>
+  <script src="./js/bootstrap.min.js"></script>
+
+</html>
\ No newline at end of file
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -35,10 +35,11 @@
    <link rel="stylesheet" href="./css/masonstrap.min.css" media="screen">
  </head>

+  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <a class="navbar-brand d-flex mx-auto" href="#">
+    <a class="navbar-brand d-flex mx-auto" href="./index.html">
      <img src="./img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top" alt="SRCT Masonstrap">
-      &nbsp;Masonstrap
+      &nbsp;Masonstrap&nbsp;
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
@@ -48,7 +49,7 @@
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item">
-          <a class="nav-link" href="#">Demo</a>
+          <a class="nav-link" href="./demo.html">Demo</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
@@ -56,16 +57,25 @@
              Source Files
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something else here</a>
+            <a class="dropdown-item" href="./css/masonstrap.css">masonstrap.css</a>
          </div>
        </li>
      </ul>
-      <button class="btn btn-outline-accent my-2 my-sm-0" type="submit">Download</button>
+      <a class="btn accent-btn-outline" href="https://git.gmu.edu/srct/masonstrap/-/jobs/artifacts/master/download?job=build">Download</a>
    </div>
  </nav>

+  <body style="">
+    <div class="container" style="padding-top: 5rem;">
+      <h1>
+        <span class="fa-stack fa-md hidden-sm-down">
+            <i class="fa fa-circle fa-stack-2x"></i>
+            <i class="fa fa-paint-brush fa-stack-1x fa-inverse"></i>
+          </span> Masonstrap
+      </h1>
+      <hr />
+  </body>
+
  <!-- load in external js -->
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>

--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
-// Custom Mixins
\ No newline at end of file
+// Custom Mixins
--- a/src/scss/_overwrites.scss
+++ b/src/scss/_overwrites.scss
 // Things that originate from Bootstrap that we overwrite
-
-@each $color, $value in $theme-colors {
-    .btn-outline-#{$color} {
-      @include button-outline-variant($value, $gray-900);
-    }
-}
--- a/src/scss/_styles.scss
+++ b/src/scss/_styles.scss
-// Custom classes and styling
\ No newline at end of file
+// Custom classes and styling
+.accent-btn-outline {
+    @include button-outline-variant(theme-color('accent'), $gray-900);
+}
+
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+body {
+    /* Margin bottom by footer height */
+    margin-bottom: 60px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    /* Set the fixed height of the footer here */
+    height: 60px;
+    line-height: 60px;
+    /* Vertically center the text there */
+    background-color: #f5f5f5;
+}
\ No newline at end of file
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -105,6 +105,7 @@ $colors: (

 $theme-colors: (
  primary: get-primary-palette('mason-green'),
+  accent: get-primary-palette('mason-gold'),
  secondary: $gray-600,
  success: $green,
  info: $cyan,
@@ -112,5 +113,4 @@ $theme-colors: (
  danger: $red,
  light: $gray-100,
  dark: $gray-800,
-  accent: get-primary-palette('mason-gold')
 );