Merge pull request #117 from darkwing/design-mockup

Mockup of possible oghliner site design
mozilla · Nov 2, 2015 · c2fa56b · c2fa56b
2 parents 5d5b271 + 58e3bec
commit c2fa56b
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 464 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 dist/
 coverage/
+app/styles/tabzilla/
diff --git a/app/images/bg_hr.png b/app/images/bg_hr.png
diff --git a/app/images/blacktocat.png b/app/images/blacktocat.png
diff --git a/app/images/icon_download.png b/app/images/icon_download.png
diff --git a/app/images/sprite_download.png b/app/images/sprite_download.png
diff --git a/app/index.html b/app/index.html
@@ -5,44 +5,71 @@
     <meta charset="utf-8">
     <title>Oghliner</title>
     <meta name="description" content="Oghliner : template and tool for deploying Offline Web Apps to GitHub Pages">
-    <link rel="stylesheet" type="text/css" media="screen" href="styles/stylesheet.css">
+    <link rel="stylesheet" type="text/css" media="all" href="styles/stylesheet.css">
+    <link rel="stylesheet" type="text/css" media="all" href="styles/tabzilla/css/tabzilla.css">
     <script src="scripts/offline-manager.js"></script>
   </head>
 
   <body>
 
-<a href="https://github.com/mozilla/oghliner"><img style="position: absolute; top: 0; right: 0; border: 0; padding: 0; margin: 0; box-shadow: none;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
+    <div class="wrapper">
 
-    <!-- HEADER -->
-    <div id="header_wrap" class="outer">
-        <header class="inner">
-          <h1 id="project_title">Oghliner</h1>
-          <h2 id="project_tagline">deploy Offline Web Apps to GitHub Pages</h2>
-        </header>
+    <div class="center">
+      <div id="tabzilla">
+        <a href="https://www.mozilla.org/">Mozilla</a>
+      </div>
     </div>
 
     <!-- MAIN CONTENT -->
-    <div id="main_content_wrap" class="outer">
-      <section id="main_content" class="inner">
+    <main class="center">
+      <h1>Oghliner</h1>
+      <h2>Deploy Offline Web Apps to GitHub Pages</h2>
+
+      <section class="buttons">
+        <a href="https://github.com/mozilla/oghliner" class="button">Fork on GitHub</a>
+        <a href="https://www.npmjs.com/package/oghliner" class="button">Discover on npm</a>
+      </section>
+
+      <section>
         <p>Oghliner is an experimental template and tool for deploying Offline Web Apps to GitHub Pages. As a template, Oghliner can be used to bootstrap an offline app that deploys to GitHub Pages. As a tool, Oghliner adds offlining and GitHub Pages deployment into your existing app.</p>
 
         <p>Offline Web Apps are web apps that work when your network doesn't. They use Service Workers to cache and serve your app's assets (HTML, JavaScript, CSS, images, etc.) on a user's machine, regardless of the status of its network connection. And they degrade gracefully, so the app works identically in browsers that don't support Service Workers when the machine is online.</p>
 
-        <p>For more information about Service Workers, see <a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">Introduction to Service Worker</a>, <a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md">ServiceWorkers Explained</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a>.
+        <p>For more information about Service Workers, see:</p>
+        <ul>
+          <li><a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">Introduction to Service Worker</a></li>
+          <li><a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md">ServiceWorkers Explained</a></li>
+          <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+        </ul>
 
-        <p>GitHub Pages is a great, simple web host for static sites and apps. If you're reading this page, then you're browsing a GitHub Pages site! For more information about GitHub Pages, see <a href="https://help.github.com/categories/github-pages-basics/">What are GitHub Pages</a>, <a href="https://pages.github.com/">GitHub Pages</a>, and <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Basics</a>.
+        <p>GitHub Pages is a great, simple web host for static sites and apps. If you're reading this page, then you're browsing a GitHub Pages site! For more information about GitHub Pages, see:</p>
 
-        <p>To find out the status of browser support for Service Workers, see <a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker Ready?</a> and <a href="http://caniuse.com/serviceworkers">Can I use Service Workers?</a></p>
+        <ul>
+          <li><a href="https://help.github.com/categories/github-pages-basics/">What are GitHub Pages</a></li>
+          <li><a href="https://pages.github.com/">GitHub Pages</a></li>
+          <li><a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Basics</a></li>
+        </ul>
+
+        <p>To find out the status of browser support for Service Workers, see:
+        <ul>
+          <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker Ready?</a></li>
+          <li><a href="http://caniuse.com/serviceworkers">Can I use Service Workers?</a></li>
+        </ul>
 
         <p>To learn how to use Oghliner, see its <a href="https://www.npmjs.com/package/oghliner">NPM registry entry</a> and <a href="https://github.com/mozilla/oghliner">browse the source</a>.</p>
       </section>
+    </main>
+
     </div>
 
     <!-- FOOTER  -->
-    <div id="footer_wrap" class="outer">
-      <footer class="inner">
-        <p class="copyright">Oghliner is a <a href="https://github.com/mozilla">Mozilla</a> project.
-      </footer>
-    </div>
+    <footer class="inner">
+      <p>
+        <span class="copyright">Oghliner is a <a href="https://github.com/mozilla">Mozilla</a> project.</span>
+        &bull;
+        <a href="https://github.com/mozilla/oghliner">Oghliner on GitHub</a>
+      </p>
+    </footer>
+
   </body>
 </html>
diff --git a/app/styles/github-light.css b/app/styles/github-light.css