index.html 6.2 KB
Newer Older
1
<!DOCTYPE html>
David Haynes's avatar
David Haynes committed
2

3
<html lang="en">
4

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
David Haynes committed
13
    <meta property="og:url" content="https://srct.gmu.io/masonstrap/">
14 15
    <meta property="og:type" content="website">
    <meta property="og:title" content="SRCT Masonstrap">
16
    <meta property="og:image" content="https://srct.gmu.io/masonstrap/img/masonstrap.png">
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
David Haynes committed
25
    <meta name="twitter:url" content="https://srct.gmu.io/masonstrap/">
26 27
    <meta name="twitter:title" content="SRCT Masonstrap">
    <meta name="twitter:description" content="Easily provide any web project with Mason branding.">
28
    <meta name="twitter:image" content="https://srct.gmu.io/masonstrap/img/masonstrap.png">
29 30

    <!-- Title -->
31
    <title>Masonstrap 4 &bull; Home</title>
32 33

    <!-- Load in static content -->
34 35
    <link rel="icon" href="./img/favicon.ico" sizes="16x16">
    <link rel="stylesheet" href="./css/masonstrap.min.css" media="screen">
36 37
  </head>

38
  <!-- Navbar -->
39
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
40 41
    <div class="container">
      <a class="navbar-brand d-flex mx-auto mr-2" href="./index.html">
David Haynes's avatar
David Haynes committed
42 43
        <img src="./img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top mr-2"
          alt="SRCT Masonstrap"> Masonstrap
44
      </a>
45

46 47 48 49 50 51 52 53 54
      <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">
David Haynes's avatar
David Haynes committed
55
              Source Files
56 57 58 59 60 61 62 63 64 65 66 67 68 69
            </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
David Haynes committed
70

71 72 73
    </div>
  </nav>

David Haynes's avatar
David Haynes committed
74
  <div class="jumbotron jumbotron-fluid">
David Haynes's avatar
David Haynes committed
75 76 77 78 79 80 81 82 83 84 85 86 87
    <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>
David Haynes's avatar
David Haynes committed
88
        </div>
David Haynes's avatar
David Haynes committed
89 90 91
        <h1 class="display-4">
          Masonstrap
        </h1>
David Haynes's avatar
David Haynes committed
92
      </div>
David Haynes's avatar
David Haynes committed
93
      <p class="lead">Easily apply GMU styling to any web project.</p>
David Haynes's avatar
David Haynes committed
94
    </div>
David Haynes's avatar
David Haynes committed
95
  </div>
David Haynes's avatar
David Haynes committed
96 97

  <div class="container">
David Haynes's avatar
David Haynes committed
98 99
    <h3>Features:</h3>
    <ul>
David Haynes's avatar
David Haynes committed
100 101
      <li>Latest
        <a href="https://getbootstrap.com">Bootstrap</a> Elements</li>
David Haynes's avatar
David Haynes committed
102 103 104 105
      <li>GMU Branding</li>
      <li>Source Maps</li>
      <li>Custom Elements (to be documented)</li>
    </ul>
David Haynes's avatar
David Haynes committed
106 107 108 109 110 111
    <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>
David Haynes's avatar
David Haynes committed
112
          </div>
David Haynes's avatar
David Haynes committed
113 114 115 116
        </div>
      </div>

      <div class="col-md-6">
117
        <div class="card bg-light mb-3">
David Haynes's avatar
David Haynes committed
118 119 120
          <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>
David Haynes's avatar
David Haynes committed
121
          </div>
David Haynes's avatar
David Haynes committed
122 123 124 125 126
        </div>
      </div>
    </div>
  </div>

127 128
  <!-- Desktop footer -->
  <div class="footer d-none d-md-block">
David Haynes's avatar
David Haynes committed
129
    <div class="container d-flex">
David Haynes's avatar
David Haynes committed
130 131 132 133 134 135 136
      <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.1.1</a>
      </span>
David Haynes's avatar
David Haynes committed
137 138 139
    </div>
  </div>

140 141 142
  <!-- 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">
David Haynes's avatar
David Haynes committed
143 144 145 146
      A project of
      <a href="https://www.srct.gmu.edu">GMU
        <strong>SRCT</strong>
      </a>
147 148
    </div>
    <div class="col-sm-4 text-muted">
David Haynes's avatar
David Haynes committed
149 150
      Freely Licensed under
      <a href="https://git.gmu.edu/srct/masonstrap/blob/master/LICENSE">MIT</a>
151 152
    </div>
    <div class="col-sm-4 text-muted">
David Haynes's avatar
David Haynes committed
153
      <a href="https://git.gmu.edu/srct/masonstrap/blob/master/CHANGELOG.md">v4.1.1</a>
154 155
    </div>
  </div>
David Haynes's avatar
David Haynes committed
156

157
  <!-- External js -->
158
  <script src="./js/masonstrap.min.js"></script>
159

David Haynes's avatar
David Haynes committed
160
</html>