123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Style Guide</title>
- <link rel="stylesheet" href="assets/css/app.css">
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
-
- <!-- Style guide-specific CSS goes here. -->
- <style>
- /* This styles individual sections of the style guide */
- .ss-section:not(:last-child) {
- padding-bottom: 4rem;
- border-bottom: 2px solid #ccc;
- margin-bottom: 4rem;
- }
-
- /* This styles code blocks used for examples. */
- .ss-code code {
- display: block;
- padding: 1rem;
- overflow-x: scroll;
- margin-bottom: 1.5rem;
- }
-
- /* This styles the example rows used in the grid documentation. */
- .grid-x.display {
- background: #eee;
- font-size: 11px;
- margin-bottom: 10px;
- line-height: 2rem;
- border: solid 1px #c6c6c6;
- margin-left: 0 !important;
- margin-right: 0 !important; }
- .grid-x.display .cell:nth-child(2), .grid-x.display .cell.small-centered, .grid-x.display .cell.large-centered {
- background: #e1e1e1; }
- .grid-x.display .cell.color-end {
- background: #d4d4d4; }
-
- /* This styles the color blocks used in the color documentation. */
- .color-block {
- border-radius: 2px;
- display: block;
- padding: 8px 8px 6px;
- color: #333;
- text-transform: uppercase;
- border: 1px solid #ddd;
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
- }
- .color-block span {
- display: block;
- width: 100%;
- height: 100px;
- margin-bottom: 0.42857rem;
- }
-
- .sg-header {
- background: #eee;
- padding: 2rem;
- }
-
- .grid-container {
- max-width: 1400px;
- }
-
- .sg-side-menu {
- margin-left: 1rem;
- }
-
- .grid-container.padded {
- padding-top: 2rem;
- }
-
- .sg-side-menu a {
- transition: all 0.15s ease-in;
- }
-
- .sg-side-menu a:hover {
- background: #eee;
- }
-
- .sg-side-menu a:focus {
- background: #1468a0;
- color: #fff;
- }
-
- .sg-side-menu.menu {
- overflow: auto;
- height: 100vh;
- padding-bottom: 5rem;
- }
- </style>
- </head>
- <body>
-
- <header class="sg-header" id="sg-header">
- <div class="grid-container">
- <h1>Style Guide</h1>
- <p class="lead">This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.</p>
- <a href="https://foundation.zurb.com/sites/docs/" class="button">Visit the Docs</a>
- <a href="https://foundation.zurb.com/forum" class="secondary button">Foundation Forum</a>
- <a href="https://foundation.zurb.com/get-involved/support.html" class="secondary button">Technical Support</a>
- </div>
- </header>
-
- <div class="grid-container padded">
- <div class="grid-x grid-margin-x" data-sticky-container>
-
- <div class="large-3 medium-4 cell">
- <div class="sticky" data-sticky data-top-anchor="sg-header:bottom">
- <ul class="vertical menu sg-side-menu" data-smooth-scroll data-animation-easing="swing">
-
- {{#each pages}}
- <li><a href="#{{ anchor }}">{{ title }}</a></li>
- {{/each}}
-
- </ul>
- </div>
- </div>
-
- <div class="large-9 medium-8 cell">
- {{#each pages}}
- <section class="ss-section" id="{{ anchor }}">
- {{ body }}
- </section>
- {{/each}}
- </div>
-
- </div>
- </div>
-
- <script src="assets/js/app.js"></script>
- </body>
- </html>
|