Add build system. Add readme. Update styles. Rework UI.

rowanhogan · Sep 18, 2015 · 18a6f7b · 18a6f7b
1 parent c4e9030
commit 18a6f7b
Show file tree

Hide file tree

Showing 53 changed files with 893 additions and 555 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.publish
+dist/
+dist/*
+node_modules/
+node_modules/*
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,17 @@
+sudo: false
+language: node_js
+branches:
+  only:
+    - master
+notifications:
+  email: false
+install:
+  - npm install
+before_script:
+  - git config --global user.email $GH_EMAIL
+  - git config --global user.name $GH_USERNAME
+  - git remote set-url origin https://[email protected]/rowanhogan/wikipadia.git
+  - npm install -g gulp
+  - npm install
+script:
+  - gulp deploy
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# [![WikiPadia](http://res.cloudinary.com/rowanhogan/image/upload/c_scale,w_240/v1442544833/logo_sadlam.png)](http://wikipadia.xyz)
+
+---
+
+_WikiPadia_ is a beautiful, customisable Wikipedia reader. It was specifically built for leisurely, late-night reading on an iPad.
+
+The themes and options provide you with the ability to customize your reading experience, as well as the ability to add your own CSS which is saved locally to your device.
+
+The inverted theme allows for better night/low-light reading by re-inverting and darkening images to better display when the _Invert Colors_ setting is enabled — Found in _Settings > General > Accessibility > Invert Colors_ on iOS.
+
+#### Try it out at [wikipadia.xyz](http://wikipadia.xyz).
+
+---
+
+## Running locally
+
+The compiled app runs entirely client side, but to run it in development you'll need NPM & Gulp.
+
+Simply `npm install` and then `gulp` to run the server.
+
+**This is still in very early development — contributions and ideas are welcome!**
diff --git a/android-chrome-144x144.png b/android-chrome-144x144.png
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-36x36.png b/android-chrome-36x36.png
diff --git a/android-chrome-48x48.png b/android-chrome-48x48.png
diff --git a/android-chrome-72x72.png b/android-chrome-72x72.png
diff --git a/android-chrome-96x96.png b/android-chrome-96x96.png
diff --git a/app.js b/app.js
diff --git a/app/images/app-icons/apple-touch-icon-114x114.png b/app/images/app-icons/apple-touch-icon-114x114.png
diff --git a/app/images/app-icons/apple-touch-icon-120x120.png b/app/images/app-icons/apple-touch-icon-120x120.png
diff --git a/app/images/app-icons/apple-touch-icon-144x144.png b/app/images/app-icons/apple-touch-icon-144x144.png
diff --git a/app/images/app-icons/apple-touch-icon-152x152.png b/app/images/app-icons/apple-touch-icon-152x152.png
diff --git a/app/images/app-icons/apple-touch-icon-180x180.png b/app/images/app-icons/apple-touch-icon-180x180.png
diff --git a/app/images/app-icons/apple-touch-icon-57x57.png b/app/images/app-icons/apple-touch-icon-57x57.png
diff --git a/app/images/app-icons/apple-touch-icon-60x60.png b/app/images/app-icons/apple-touch-icon-60x60.png
diff --git a/app/images/app-icons/apple-touch-icon-72x72.png b/app/images/app-icons/apple-touch-icon-72x72.png
diff --git a/app/images/app-icons/apple-touch-icon-76x76.png b/app/images/app-icons/apple-touch-icon-76x76.png
diff --git a/app/images/favicon.ico b/app/images/favicon.ico
diff --git a/app/images/logo.svg b/app/images/logo.svg
diff --git a/app/images/search.svg b/app/images/search.svg
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en" class='initial loading'>
+<head>
+  <title>WikiPadia</title>
+
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="WikiPadia">
+  <meta name="application-name" content="WikiPadia">
+  <meta name="theme-color" content="#ffffff">
+  <link rel="apple-touch-icon" sizes="57x57" href="./images/app-icons/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="./images/app-icons/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="./images/app-icons/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="./images/app-icons/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="./images/app-icons/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="./images/app-icons/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="./images/app-icons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="./images/app-icons/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="./images/app-icons/apple-touch-icon-180x180.png">
+  <link rel="icon" mask href="./images/favicon.ico">
+
+  <link rel="stylesheet" type="text/css" href="./css/style.css">
+</head>
+<body>
+  <button id="menu-toggle" class="menu-link">Menu</button>
+
+  <div id="menu">
+    <h3>Options</h3>
+
+    <ul>
+      <li>
+        <label>Theme:</label>
+        <select id="theme-changer">
+          <option value=''>Light</option>
+          <option value='dark'>Dark</option>
+          <option value='inverted'>Inverted</option>
+        </select>
+        <small><em>Inverted</em> reverts images when screen colors are inverted.</small>
+      </li>
+
+      <li>
+        <label>Custom CSS</label>
+        <textarea id="custom-styles-input" placeholder="e.g. body { color: red; }" autocapitalize="none" spellcheck="false"></textarea>
+
+        <style id="custom-styles" type="text/css" contenteditable></style>
+        <small>Styles are applied immediately and saved locally.</small>
+      </li>
+    </ul>
+
+    <form class="search-form" type="POST">
+      <input type='search' placeholder="Search...">
+      <button type="submit">Search</button>
+    </form>
+  </div>
+
+  <div class="container push">
+    <div id="content">
+      <img class="logo" src="./images/logo.svg" width="250">
+
+      <form class="search-form" type="POST">
+        <input type='search' placeholder="Search to get started...">
+        <button type="submit">Search</button>
+      </form>
+
+      <div class="blurb">
+        <p><em>WikiPadia</em> is a beautiful, customisable Wikipedia reader. It was specifically built for leisurely reading on an iPad.</p>
+      </div>
+
+      <p>The themes and options provide you with the ability to customize your reading experience, as well as the ability to add you own CSS which is saved locally on your device.</p>
+
+      <p>The inverted theme allows for better night/low-light reading by inverting and darkening images to better display when the <em>Invert Colors</em> setting is enabled — Found in <em>Settings &gt; General &gt; Accessibility &gt; Invert Colors</em> on iOS.</p>
+
+    </div>
+
+    <footer>
+      <form class="search-form" type="POST">
+        <input type='search' placeholder="Search...">
+        <button type="submit">Search</button>
+      </form>
+
+      <small class='attribution'><a href="https://github.com/rowanhogan/wikipadia">Made</a> by <a href="http://rowanhogan.com">Rowan Hogan</a>.</small>
+
+      <br>
+
+      <a class="home-link" href="/">Home</a>
+
+    </footer>
+  </div>
+
+  <script type="text/javascript" src="./js/main.js"></script>
+  <script src="https://use.typekit.net/bqq5cix.js"></script>
+  <script>try{Typekit.load({ async: true });}catch(e){}</script>
+</body>
+</html>