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

3 4 5
<html lang="en">
  <head>
    <!-- Metatags -->
David Haynes's avatar
David Haynes committed
6 7 8 9 10
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
11 12
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Chrome on Android navbar color -->
David Haynes's avatar
David Haynes committed
13
    <meta name="theme-color" content="#006633" />
14
    <!-- Opengraph tags -->
David Haynes's avatar
David Haynes committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28
    <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" />
29
    <!-- Twitter card tags -->
David Haynes's avatar
David Haynes committed
30 31 32 33 34 35 36 37 38 39 40 41 42
    <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"
    />
43 44

    <!-- Title -->
45
    <title>Masonstrap 4 &bull; Home</title>
46 47

    <!-- Load in static content -->
David Haynes's avatar
David Haynes committed
48 49
    <link rel="icon" href="./img/favicon.ico" sizes="16x16" />
    <link rel="stylesheet" href="./css/masonstrap.min.css" media="screen" />
50 51
  </head>

52
  <!-- Navbar -->
53
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
54 55
    <div class="container">
      <a class="navbar-brand d-flex mx-auto mr-2" href="./index.html">
David Haynes's avatar
David Haynes committed
56 57 58 59 60 61 62 63
        <img
          src="./img/SRCT_square.svg"
          width="30"
          height="30"
          class="d-inline-block align-top mr-2"
          alt="SRCT Masonstrap"
        />
        Masonstrap
64
      </a>
65

David Haynes's avatar
David Haynes committed
66 67 68 69 70 71 72 73 74
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
75 76 77 78 79
        <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">
David Haynes's avatar
David Haynes committed
80 81 82 83 84 85 86 87
            <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
88
              Source Files
89 90 91
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <h6 class="dropdown-header">CSS</h6>
David Haynes's avatar
David Haynes committed
92 93 94 95 96 97
              <a class="dropdown-item" href="./css/masonstrap.css"
                >masonstrap.css</a
              >
              <a class="dropdown-item" href="./css/masonstrap.min.css"
                >masonstrap.min.css</a
              >
98 99
              <div class="dropdown-divider"></div>
              <h6 class="dropdown-header">JS</h6>
David Haynes's avatar
David Haynes committed
100 101 102 103 104 105
              <a class="dropdown-item" href="./js/masonstrap.js"
                >masonstrap.js</a
              >
              <a class="dropdown-item" href="./js/masonstrap.min.js"
                >masonstrap.min.js</a
              >
106 107 108
            </div>
          </li>
        </ul>
David Haynes's avatar
David Haynes committed
109 110 111 112 113
        <a
          class="btn accent-btn-outline"
          href="https://git.gmu.edu/srct/masonstrap/-/jobs/artifacts/master/download?job=build"
          >Download</a
        >
114
      </div>
115 116 117
    </div>
  </nav>

118
  <div class="jumbotron jumbotron-fluid">
David Haynes's avatar
David Haynes committed
119 120 121 122 123 124 125 126 127 128 129 130 131
    <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>
132
        </div>
David Haynes's avatar
David Haynes committed
133 134 135
        <h1 class="display-4">
          Masonstrap
        </h1>
136
      </div>
David Haynes's avatar
David Haynes committed
137
      <p class="lead">Easily apply GMU styling to any web project.</p>
138
    </div>
David Haynes's avatar
David Haynes committed
139
  </div>
140 141

  <div class="container">
David Haynes's avatar
David Haynes committed
142 143
    <h3>Features:</h3>
    <ul>
David Haynes's avatar
David Haynes committed
144
      <li>Latest <a href="https://getbootstrap.com">Bootstrap</a> Elements</li>
David Haynes's avatar
David Haynes committed
145 146 147 148
      <li>GMU Branding</li>
      <li>Source Maps</li>
      <li>Custom Elements (to be documented)</li>
    </ul>
149 150 151 152 153
    <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">
David Haynes's avatar
David Haynes committed
154 155 156
            <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
157
          </div>
158 159 160 161
        </div>
      </div>

      <div class="col-md-6">
162
        <div class="card bg-light mb-3">
163 164
          <h5 class="card-header">JS</h5>
          <div class="card-body">
David Haynes's avatar
David Haynes committed
165 166 167
            <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
168
          </div>
169 170 171 172 173
        </div>
      </div>
    </div>
  </div>

174 175
  <!-- Desktop footer -->
  <div class="footer d-none d-md-block">
176
    <div class="container d-flex">
David Haynes's avatar
David Haynes committed
177 178 179 180
      <span class="text-muted mx-auto"
        >A project of
        <a href="https://www.srct.gmu.edu"
          >GMU
David Haynes's avatar
David Haynes committed
181
          <strong>SRCT</strong>
David Haynes's avatar
David Haynes committed
182 183 184 185 186 187 188 189 190
        </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.2.1</a
        >
David Haynes's avatar
David Haynes committed
191
      </span>
192 193 194
    </div>
  </div>

195
  <!-- Mobile footer -->
David Haynes's avatar
David Haynes committed
196 197 198
  <div
    class="footer container text-center d-sm-block d-md-none d-lg-none d-xl-none"
  >
199
    <div class="col-sm-4 text-muted">
David Haynes's avatar
David Haynes committed
200
      A project of
David Haynes's avatar
David Haynes committed
201 202
      <a href="https://www.srct.gmu.edu"
        >GMU
David Haynes's avatar
David Haynes committed
203 204
        <strong>SRCT</strong>
      </a>
205 206
    </div>
    <div class="col-sm-4 text-muted">
David Haynes's avatar
David Haynes committed
207 208
      Freely Licensed under
      <a href="https://git.gmu.edu/srct/masonstrap/blob/master/LICENSE">MIT</a>
209 210
    </div>
    <div class="col-sm-4 text-muted">
David Haynes's avatar
David Haynes committed
211 212 213
      <a href="https://git.gmu.edu/srct/masonstrap/blob/master/CHANGELOG.md"
        >v4.2.1
      </a>
214 215
    </div>
  </div>
David Haynes's avatar
David Haynes committed
216

217
  <!-- External js -->
218
  <script src="./js/masonstrap.min.js"></script>
David Haynes's avatar
David Haynes committed
219
</html>