Skip to content

masonstrap
masonstrap
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 6.17 KB
Newer Older
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
1 
<!DOCTYPE html>
David Haynes's avatar
Drop docker, cleanup html  
David Haynes committed
2
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
3 
<html lang="en">
David Haynes's avatar
Finish containers and indicators  
David Haynes committed
4
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
5 6 7 8 9 10 11 12 
  <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 -->
David Haynes's avatar
Drop docker, cleanup html  
David Haynes committed
13 
    <meta property="og:url" content="https://srct.gmu.io/masonstrap/">
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
14 15 
    <meta property="og:type" content="website">
    <meta property="og:title" content="SRCT Masonstrap">
David Haynes's avatar
Brand image, and refactoring of the initial sassing  
David Haynes committed
16 
    <meta property="og:image" content="https://srct.gmu.io/masonstrap/img/masonstrap.png">
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
17 18 19 20 21 22 23 24 
    <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">
David Haynes's avatar
Drop docker, cleanup html  
David Haynes committed
25 
    <meta name="twitter:url" content="https://srct.gmu.io/masonstrap/">
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
26 27 
    <meta name="twitter:title" content="SRCT Masonstrap">
    <meta name="twitter:description" content="Easily provide any web project with Mason branding.">
David Haynes's avatar
Brand image, and refactoring of the initial sassing  
David Haynes committed
28 
    <meta name="twitter:image" content="https://srct.gmu.io/masonstrap/img/masonstrap.png">
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
29 30 

    <!-- Title -->
David Haynes's avatar
SASS Maps for the color palettes  
David Haynes committed
31 
    <title>Masonstrap 4 &bull; Home</title>
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
32 33 

    <!-- Load in static content -->
David Haynes's avatar
Relative pathing for static file loading  
David Haynes committed
34 35 
    <link rel="icon" href="./img/favicon.ico" sizes="16x16">
    <link rel="stylesheet" href="./css/masonstrap.min.css" media="screen">
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
36 37 
  </head>
David Haynes's avatar
Progress on homepage & reset styling  
David Haynes committed
38 
  <!-- Navbar -->
David Haynes's avatar
Parity with prod, navbar, etc.  
David Haynes committed
39 
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
David Haynes's avatar
Clone down Bootstrap 4 & begin cleaning  
David Haynes committed
40 41 
    <div class="container">
      <a class="navbar-brand d-flex mx-auto mr-2" href="./index.html">
David Haynes's avatar
Index page (mostly) reworked  
David Haynes committed
42 
        <img src="./img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top mr-2" alt="SRCT Masonstrap"> Masonstrap
David Haynes's avatar
Clone down Bootstrap 4 & begin cleaning  
David Haynes committed
43 
      </a>
David Haynes's avatar
Parity with prod, navbar, etc.  
David Haynes committed
44
David Haynes's avatar
Clone down Bootstrap 4 & begin cleaning  
David Haynes committed
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 
      <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 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">
              <h6 class="dropdown-header">CSS</h6>
              <a class="dropdown-item" href="./css/masonstrap.css">masonstrap.css</a>
              <a class="dropdown-item" href="./css/masonstrap.min.css">masonstrap.min.css</a>
              <div class="dropdown-divider"></div>
              <h6 class="dropdown-header">JS</h6>
              <a class="dropdown-item" href="./js/masonstrap.js">masonstrap.js</a>
              <a class="dropdown-item" href="./js/masonstrap.min.js">masonstrap.min.js</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>
David Haynes's avatar
Parity with prod, navbar, etc.  
David Haynes committed
70 71 72 
    </div>
  </nav>
David Haynes's avatar
Index page (mostly) reworked  
David Haynes committed
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 
  <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <div class="d-flex flex-wrap">
          <div class="d-md-none d-lg-none d-xl-none mx-auto">
            <span class="fa-stack fa-2x">
              <i class="fas fa-circle fa-stack-2x"></i>
              <i class="fas fa-paint-brush fa-stack-1x fa-inverse"></i>
            </span>            
          </div>
          <div class="d-none d-md-block mr-3">
            <span class="fa-stack fa-2x">
              <i class="fas fa-circle fa-stack-2x"></i>
              <i class="fas fa-paint-brush fa-stack-1x fa-inverse"></i>
            </span>  
          </div>
          <h1 class="display-4">
            Masonstrap
          </h1>
        </div>
        <p class="lead">Easily apply GMU styling to any web project.</p>
      </div>
    </div>

  <div class="container">
David Haynes's avatar
Finish index refresh  
David Haynes committed
97 98 99 100 101 102 103 
    <h3>Features:</h3>
    <ul>
      <li>Latest <a href="https://getbootstrap.com">Bootstrap</a> Elements</li>
      <li>GMU Branding</li>
      <li>Source Maps</li>
      <li>Custom Elements (to be documented)</li>
    </ul>
David Haynes's avatar
Index page (mostly) reworked  
David Haynes committed
104 105 106 107 108 109 110 111 112 113 114 
    <div class="row">
      <div class="col-md-6">
        <div class="card bg-light mb-3">
          <h5 class="card-header">CSS</h5>
          <div class="card-body">
            <pre class="p-3"><code>&lt;link rel="stylesheet" href="https://srct.gmu.io/masonstrap/css/masonstrap.min.css" rel="stylesheet"&gt;</code></pre>
          </div>    
        </div>
      </div>

      <div class="col-md-6">
David Haynes's avatar
Mobile + Desktop footers coexist  
David Haynes committed
115 
        <div class="card bg-light mb-3">
David Haynes's avatar
Index page (mostly) reworked  
David Haynes committed
116 117 118 119 120 121 122 123 124 
          <h5 class="card-header">JS</h5>
          <div class="card-body">
            <pre class="p-3"><code>&lt;script src="https://srct.gmu.io/masonstrap/js/masonstrap.min.js"&gt;&lt;/script&gt;</code></pre>
          </div>    
        </div>
      </div>
    </div>
  </div>
David Haynes's avatar
Mobile + Desktop footers coexist  
David Haynes committed
125 126 
  <!-- Desktop footer -->
  <div class="footer d-none d-md-block">
David Haynes's avatar
Index page (mostly) reworked  
David Haynes committed
127 128 129 130 131 
    <div class="container d-flex">
      <span class="text-muted mx-auto">A project of <a href="https://www.srct.gmu.edu">GMU <strong>SRCT</strong></a> | Freely Licensed under <a href="https://git.gmu.edu/srct/masonstrap/blob/master/LICENSE">MIT</a> | <a href="https://git.gmu.edu/srct/masonstrap/blob/master/CHANGELOG.md">v4.0</a></span>
    </div>
  </div>
David Haynes's avatar
Mobile + Desktop footers coexist  
David Haynes committed
132 133 134 135 136 137 138 139 140 141 142 143 144 145 
  <!-- Mobile footer -->
  <div class="footer container text-center d-sm-block d-md-none d-lg-none d-xl-none">
    <div class="col-sm-4 text-muted">
      A project of <a href="https://www.srct.gmu.edu">GMU <strong>SRCT</strong></a>
    </div>
    <div class="col-sm-4 text-muted">
      Freely Licensed under <a href="https://git.gmu.edu/srct/masonstrap/blob/master/LICENSE">MIT</a>
    </div>
    <div class="col-sm-4 text-muted">
      <a href="https://git.gmu.edu/srct/masonstrap/blob/master/CHANGELOG.md">v4.0</a>
    </div>
  </div>
  
  <!-- External js -->
David Haynes's avatar
Mash everything into one masonstrap.min.js  
David Haynes committed
146 
  <script src="./js/masonstrap.min.js"></script>
David Haynes's avatar
Parity with prod, navbar, etc.  
David Haynes committed
147
David Haynes's avatar
Finish first pass on index page  
David Haynes committed
148 
</html>