Style updates!

rowanhogan · Sep 26, 2015 · 333a48d · 333a48d
1 parent 62abace
commit 333a48d
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 107 deletions.
diff --git a/app/index.html b/app/index.html
@@ -23,22 +23,49 @@
   <link rel="stylesheet" type="text/css" href="./css/style.css">
 </head>
 <body>
-  <button id="menu-toggle" class="menu-link">Menu</button>
+  <button id="menu-toggle" class="menu-toggle">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>
+      <li id="theme-changer">
+        <label>Theme</label>
+
+        <fieldset class="radio">
+          <span>
+            <input type='radio' name="theme" value='' />
+            <label>Light</label>
+          </span>
+          <span>
+            <input type='radio' name="theme" value='dark' />
+            <label>Dark</label>
+          </span>
+          <span>
+            <input type='radio' name="theme" value='inverted' />
+            <label>Inverted</label>
+          </span>
+        </fieldset>
+
         <small><em>Inverted</em> reverts images when screen colors are inverted.</small>
       </li>
 
+      <li id="font-changer">
+        <label>Font</label>
+
+        <fieldset class="radio">
+          <span>
+            <input type='radio' name="font" value="" />
+            <label class='serif-stack'>Serif</label>
+          </span>
+
+          <span>
+            <input type='radio' name="font" value="sans" />
+            <label>Sans</label>
+          </span>
+        </fieldset>
+      </li>
+
       <li>
         <label>Custom CSS</label>
         <textarea id="custom-styles-input" placeholder="e.g. body { color: red; }" autocapitalize="none" autocorrect="off" spellcheck="false"></textarea>
@@ -90,8 +117,11 @@ <h1 class='logo'>Wik<em>i<span>P</span>ad</em>ia</h1>
     </footer>
   </div>
 
+  <button class="menu-toggle menu-overlay">Menu</button>
+
   <script type="text/javascript" src="./js/main.js"></script>
-  <link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
+
+  <link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700|Roboto:400,400italic,700' rel='stylesheet' type='text/css'>
 
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -2,6 +2,7 @@
 var attachFastClick = require('fastclick');
 var handleNewPage = require('./components/handleNewPage');
 var handleTheme = require('./components/handleTheme');
+var handleFont = require('./components/handleFont');
 var eventHandlers = require('./components/eventHandlers')
 
 if (window.location.hostname.split('.').length > 2) {
@@ -24,8 +25,23 @@ if (window.location.hostname.split('.').length > 2) {
   }
 
   if (localStorage.getItem('theme')) {
-    document.getElementById('theme-changer').value = localStorage.getItem('theme');
-    handleTheme(localStorage.getItem('theme'));
+    var theme = localStorage.getItem('theme'),
+        input = document.getElementById('theme-changer').querySelectorAll('input[value=' + theme + ']');
+
+    input[0].checked = true;
+    handleTheme(theme);
+  } else {
+    document.getElementById('theme-changer').querySelectorAll('input')[0].checked = true;
+  }
+
+  if (localStorage.getItem('font')) {
+    var font = localStorage.getItem('font'),
+        input = document.getElementById('font-changer').querySelectorAll('input[value=' + font + ']');
+
+    input[0].checked = true;
+    handleFont(font);
+  } else {
+    document.getElementById('font-changer').querySelectorAll('input')[0].checked = true;
   }
 
   if (localStorage.getItem('customStyles')) {

diff --git a/app/scripts/components/eventHandlers.js b/app/scripts/components/eventHandlers.js
@@ -1,6 +1,7 @@
 
 var $ = require('jquery');
 var handleTheme = require('./handleTheme');
+var handleFont = require('./handleFont');
 
 $(document).on('keyup', '#custom-styles-input', function(e) {
   var styles = $(this).val();
@@ -15,18 +16,32 @@ $(document).on('submit', '.search-form', function(e) {
   window.location.search = $(this).find('input').val().replace(' ', '_');
 });
 
-$(document).on('change', '#theme-changer', function(e) {
+$(document).on('change', '#theme-changer input', function(e) {
   e.preventDefault();
 
   var theme = $(this).val();
   handleTheme(theme);
 });
 
-$(document).on('click', '#menu-toggle', function(e) {
+$(document).on('change', '#font-changer input', function(e) {
   e.preventDefault();
 
-  $(this).toggleClass('active');
+  var font = $(this).val();
+  handleFont(font);
+});
+
+$(document).on('click', '.menu-toggle', function(e) {
+  e.preventDefault();
+
+  $('.menu-toggle').toggleClass('active');
   $('body').toggleClass('sidebar-active');
 });
 
+$(document).on('keyup', function(e) {
+  if (e.which == 27) {
+    $('body').removeClass('sidebar-active');
+    $('.menu-toggle').removeClass('active');
+  }
+});
+
 
diff --git a/app/scripts/components/handleFont.js b/app/scripts/components/handleFont.js
@@ -0,0 +1,14 @@
+
+function handleFont (font) {
+  var htmlEl = document.body.parentElement;
+
+  htmlEl.classList.remove('sans');
+
+  if (font.length) {
+    htmlEl.classList.add(font);
+  }
+
+  localStorage.setItem('font', font);
+}
+
+module.exports = handleFont;
diff --git a/app/styles/_app.scss b/app/styles/_app.scss
@@ -65,6 +65,56 @@ textarea {
   border: 0;
 }
 
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.radio span {
+  display: table-cell;
+  width: 100em;
+  position: relative;
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    appearance: none;
+
+    &:checked + label {
+      background: #444;
+      color: white;
+    }
+  }
+
+  &:first-child label {
+    border-radius: .5em 0 0 .5em;
+    border-left-width: 0;
+  }
+
+  &:last-child label {
+    border-radius: 0 .5em .5em 0;
+  }
+
+  label {
+    display: block;
+    padding: .5em .75em;
+    background: #ddd;
+    text-align: center;
+    border-left: thin solid #bbb;
+  }
+}
+
 .container {
   position: relative;
   padding: 2em 3em;
@@ -91,6 +141,7 @@ textarea {
     width: 1.5em;
     left: 50%;
     margin-left: -.75em;
+    transition: transform 200ms ease;
   }
 
   &:before {
@@ -107,14 +158,14 @@ textarea {
   }
 
   &.active:before {
-    transform: rotate(-45deg);
+    transform: rotate(45deg);
     bottom: 1.5em;
     top: auto;
     box-shadow: none;
   }
 
   &.active:after {
-    transform: rotate(45deg);
+    transform: rotate(135deg);
     top: 1.35em;
     bottom: auto;
   }
@@ -136,6 +187,8 @@ textarea {
   width: $sidebar-width;
   max-width: 100%;
   transform: translateX($sidebar-width);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   h3 {
     margin-top: 0;
@@ -181,11 +234,33 @@ textarea {
 .sidebar-active {
   #menu {
     transform: translateX(0);
+    box-shadow: -1px 0 1em 0 rgba(black, 0.2);
   }
+}
 
-  .push {
-    transform: translateX(-#{$sidebar-width});
-  }
+.menu-overlay {
+  position: fixed;
+  padding: 0;
+  top: -100px;
+  left: -100px;
+  width: 0;
+  height: 0;
+  background-color: rgba(black, 0.25) !important;
+  overflow: hidden;
+  text-indent: -999999px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 300ms ease;
+}
+
+.sidebar-active .menu-overlay {
+  opacity: 1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  right: 0;
+  width: 100%;
 }
 
 .search-form {
@@ -320,93 +395,6 @@ footer {
   }
 }
 
-// Themes
-
-.dark {
-  background: #111;
-  color: #eee;
-
-  .infobox {
-    color: #eee;
-  }
-
-  code, pre {
-    background-color: #333;
-  }
-
-  table {
-    background-color: transparent !important;
-  }
-
-  input, textarea, button, select, #custom-styles {
-    background-color: black;
-    color: #bbb;
-  }
-
-  a {
-    color: darkorange;
-  }
-
-  #menu {
-    background-color: #222;
-  }
-
-  #menu-toggle {
-    background: transparent !important;
-
-    &:before {
-      box-shadow: 0 7px 0 #bbb;
-    }
-
-    &.active:before {
-      box-shadow: none;
-    }
-  }
-
-  .loading:before {
-    border-right-color: #ddd;
-    background: black;
-    box-shadow: 0 0 0 100000px black;
-  }
-
-  img {
-    opacity: .75;
-  }
-
-  .navbox-list {
-    border-color: black;
-  }
-
-  .navbox, .navbox-subgroup,
-  .navbox-abovebelow,
-  th.navbox-group,
-  .navbox-subgroup .navbox-title {
-    background: #222;
-  }
-
-  .navbox th,
-  .navbox-title {
-    background: #444;
-  }
-
-  .navbox-even {
-    background: #666;
-  }
-
-  button {
-    background-color: #333 !important;
-  }
-
-  .search-form input {
-    border-color: #333;
-  }
-}
-
-.inverted img {
-  filter: invert(100%);
-  opacity: .5;
-}
-
 .initial {
   body {
     max-width: 500px;