diff options
Diffstat (limited to 'web-ui/app/style-guide.html')
| -rw-r--r-- | web-ui/app/style-guide.html | 187 |
1 files changed, 0 insertions, 187 deletions
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html deleted file mode 100644 index 3c464ed6..00000000 --- a/web-ui/app/style-guide.html +++ /dev/null @@ -1,187 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -<title>Pixelated Style Guide</title> -<meta name="description" content=""> -<meta name="viewport" content="width=device-width"> -<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -<link href="css/opensans.css" rel="stylesheet" type="text/css"> -<link href="css/news-cycle.css" rel="stylesheet" type="text/css"/> -<link href="css/style-guide.css" rel="stylesheet" type="text/css"/> -<link rel="stylesheet" href="../css/main.css"> -</head> -<body> - <div id="style-guide-wrap" data-offcanvas> - <nav class="top-bar" data-topbar> - <ul class="left"> - <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li> - </ul> - - <ul class="right"> - <li><a href="#welcome">Home</a></li> - <li><a href="#colors">Colors</a></li> - <li><a href="#typography">Typography</a></li> - <li><a href="#icons">Icons</a></li> - </ul> - </nav> - <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> - </br> - <div class="color-grid"> - <div id="primary-color-card" class="color-card"> - <p class="color-label"> - <span class="color-name">PRIMARY COLOR</span> - <br>#EF4E2F - </p> - </div> - <div id="secondary-color-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SECONDARY COLOR</span> - <br>#3E3A37 - </p> - </div> - <div id="top-pane-card" class="color-card"> - <p class="color-label"> - <span class="color-name">TOP PANE</span> - <br>#EAEAEA - </p> - </div> - <div id="contrast-card" class="color-card"> - <p class="color-label"> - <span class="color-name">CONTRAST</span> - <br>#F2F3ED - </p> - </div> - <div id="action-buttons-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ACTION BUTTONS</span> - <br>#2ba6cb - </p> - </div> - </div> - <br> - - <div class="color-grid"> - <div id="success-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SUCCESS</span> - <br>#2DAB49 - </p> - </div> - <div id="attention-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ATTENTION</span> - <br>#F6A40A - </p> - </div> - <div id="warning-card" class="color-card"> - <p class="color-label"> - <span class="color-name">WARNING</span> - <br>#F7E8AF - </p> - </div> - <div id="error-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ERROR</span> - <br>#D72A25 - </p> - </div> - <div id="search-highlight-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SEARCH HIGHLIGHT</span> - <br>#FFEF29 - </p> - </div> - <div id="count-background-card" class="color-card"> - <p class="color-label"> - <span class="color-name">COUNT BACKGROUND</span> - <br>#C0B9B9 - </p> - </div> - </div> - </section> - <section id="typography" class="guide-section"> - <h2>Typography</h2> - - </br> - Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson. - </br> - <ul class="typography"> - <li> - <h2>Aa</h2> - <span>Regular</span> - </li> - <li> - <h2 class="bold-header">Aa</h2> - <span>Bold</span> - </li> - <li> - <h2 class="extra-bold-header">Aa</h2> - <span>Extra Bold</span> - </li> - <li> - <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> - <li> - <i>Italics</i><br> - </li> - <li> - <strong>Strong / Emphasized</strong><br> - </li> - <li> - <small>Small Text</small> - </li> - </ul> - </section> - <section id="icons" class="guide-section" name="icons"> - <h2>Icons</h2> - <p>Every icon in Pixelated comes from a font called <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a> - <p>Here are some of the icons we're currently using on Pixelated</p> - <i class="fa fa-inbox"></i> - <i class="fa fa-send"></i> - <i class="fa fa-pencil"></i> - <i class="fa fa-trash-o"></i> - <i class="fa fa-archive"></i> - <i class="fa fa-tags"></i> - <i class="fa fa-navicon"></i> - <i class="fa fa-refresh"></i> - </section> - </div> - -<script src="/bower_components/jquery/dist/jquery.js"></script> -<script src="/js/style_guide/main.js"></script> -</body> -</html> |