diff options
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 17 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 23 |
2 files changed, 35 insertions, 5 deletions
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss index d0ecd3aa..c9791ea3 100644 --- a/web-ui/app/scss/style-guide.scss +++ b/web-ui/app/scss/style-guide.scss @@ -16,6 +16,10 @@ nav { opacity: 0.95; } +a.logo-anchor { + color: white; +} + ul li { display: inline; } @@ -87,11 +91,11 @@ section.guide-section { .color-grid { #primary-color-card { background-color: $primary_color; } - #secondary-color-card { background-color: $secondary;} - #top-pane-card { background-color: $top_pane;} - #contrast-card { background-color: $contrast;} + #secondary-color-card { background-color: $secondary; } + #top-pane-card { background-color: $top_pane; } + #contrast-card { background-color: $contrast; } #action-buttons-card { background-color: $action_buttons; } - #success-card { background-color: $success;} + #success-card { background-color: $success; } #attention-card { background-color: $attention; } #warning-card { background-color: $warning; } #error-card { background-color: $error; } @@ -103,4 +107,9 @@ ul.typography li h2 { &.bold-header { font-weight: bold; } &.extra-bold-header { font-weight: 800; } &.lighter-header { font-weight: lighter; } +} + +ul.headers-and-sizes { + margin: 32px 100px 0 0; + display: inline-block; }
\ No newline at end of file diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html index ee6b89fd..adf72bfe 100644 --- a/web-ui/app/style-guide.html +++ b/web-ui/app/style-guide.html @@ -16,7 +16,7 @@ <div id="style-guide-wrap" data-offcanvas> <nav class="top-bar" data-topbar> <ul class="left"> - <li><span>Pixelated Style Guide</span></li> + <li><a class="logo-anchor" href="#guidelines">Pixelated Style Guide</a></li> </ul> <ul class="right"> @@ -142,6 +142,27 @@ <h2 class="lighter-header">Aa</h2> <span>Lighter</span> </li> + </ul> + <ul class="headers-and-sizes"> + <li> + <h1>Header 1</h1> + </li> + <li> + <h2>Header 2</h2> + </li> + <li> + <h3>Header 3</h3> + </li> + <li> + <h4>Header 4</h4> + </li> + <li> + <h5>Header 5</h5> + </li> + <li> + <h6>Header 6</h6> + </li> + </ul> </section> <section id="components" class="guide-section" name="components"> <h2>Components</h2> |