diff options
Diffstat (limited to 'web-ui/app')
| -rw-r--r-- | web-ui/app/images/pixelated-screenshot.png | bin | 0 -> 345279 bytes | |||
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 15 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 28 |
3 files changed, 26 insertions, 17 deletions
diff --git a/web-ui/app/images/pixelated-screenshot.png b/web-ui/app/images/pixelated-screenshot.png Binary files differnew file mode 100644 index 00000000..8baa9ee6 --- /dev/null +++ b/web-ui/app/images/pixelated-screenshot.png diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss index 7d18109e..689f32a2 100644 --- a/web-ui/app/scss/style-guide.scss +++ b/web-ui/app/scss/style-guide.scss @@ -6,6 +6,20 @@ body { overflow: scroll !important; } +div#style-guide-wrap { + font-size: 1rem; +} + +div#style-guide-wrap p { + font-size: 1rem; +} + +img.screenshot { + max-width: 60%; + margin: 0 auto; + display: block; +} + nav { position: fixed; z-index: 10; @@ -94,6 +108,7 @@ section.guide-section { /* Color Cards definition */ .color-grid { + margin-bottom: 25px; #primary-color-card { background-color: $primary_color; } #secondary-color-card { background-color: $secondary; } #top-pane-card { background-color: $top_pane; } diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html index c145bd9a..4e038822 100644 --- a/web-ui/app/style-guide.html +++ b/web-ui/app/style-guide.html @@ -16,32 +16,26 @@ <div id="style-guide-wrap" data-offcanvas> <nav class="top-bar" data-topbar> <ul class="left"> - <li><a class="logo-anchor" href="#guidelines">Pixelated Style Guide</a></li> + <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li> </ul> <ul class="right"> - <li><a href="#guidelines">Guidelines</a></li> + <li><a href="#welcome">Welcome</a></li> <li><a href="#colors">Colors</a></li> <li><a href="#typography">Typography</a></li> <li><a href="#components">Components</a></li> <li><a href="#icons">Icons</a></li> </ul> </nav> - <section id="guidelines" class="guide-section" name="guidelines"> - <h2>Basic Guidelines</h2> - - Guidelines, guidelines, guidelines. - </br> - Guidelines, guidelines, guidelines. - </br> - Guidelines, guidelines, guidelines. - </br> - Guidelines, guidelines, guidelines. - </br> - Guidelines, guidelines, guidelines. - </br> - Guidelines, guidelines, guidelines. - </br> + <section id="welcome" class="guide-section" name="welcome"> + <h2>Welcome to the Pixelated Style Guide</h2> + <p> + Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components. + </p> + <p> + This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves. + </p> + <img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" /> </section> <section id="colors" class="guide-section"> <h2>Color Palette</h2> |
