summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/images/pixelated-screenshot.pngbin0 -> 345279 bytes
-rw-r--r--web-ui/app/scss/style-guide.scss15
-rw-r--r--web-ui/app/style-guide.html28
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
new file mode 100644
index 00000000..8baa9ee6
--- /dev/null
+++ b/web-ui/app/images/pixelated-screenshot.png
Binary files differ
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>