asciibook 0.0.2.beta1 → 0.0.4

data/theme/html/html.css

@@ -1,16 +1,97 @@
-.toolbar {
-  position: fixed;
+html,
+body {
+  height: 100%;
+}
+
+.preload * {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -ms-transition: none !important;
+  -o-transition: none !important;
+}
+
+.drawer .drawer-content {
+  width: 240px;
+  position: absolute;
   top: 0;
+  left: -240px;
+  bottom: 0;
+  overflow-y: auto;
+  transition: left 0.15s;
+  background: #fafafa;
+  border-right: 1px solid #eee;
+  box-sizing: border-box;
+}
+
+.drawer.open .drawer-content {
   left: 0;
+}
+
+.drawer-menu ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.drawer-menu-item {
+  padding: 10px 16px;
+  display: block;
+  text-decoration: none;
+  color: #555;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.drawer-menu-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.drawer-menu-item.active {
+  background: rgba(0, 0, 0, 0.05);
+  color: #3f51b5;
+}
+
+.drawer-menu ol ol .drawer-menu-item {
+  padding-left: 32px;
+}
+
+.main {
+  position: absolute;
+  top: 0;
   right: 0;
-  padding: 0.25em 1.25em;
+  left: 0;
+  bottom: 0;
+  transition: left 0.15s;
+}
+
+.drawer.open + .main {
+  left: 240px;
+}
+
+.main-content {
+  position: absolute;
+  top: 56px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  padding: 32px;
+  outline: 0;
+}
+
+.container {
+  max-width: 768px;
+  margin: 0 auto;
+}
+
+.toolbar {
+  padding: 4px;
   display: flex;
-  background: white;
-  z-index: 100;
 }
 
 .toolbar-title {
-  padding: 0.75em;
+  padding: 12px;
   flex-grow: 1;
   font-weight: bold;
 }
@@ -25,7 +106,7 @@
 }
 
 .toolbar-action {
-  padding: 0.25em;
+  padding: 4px;
 }
 
 .button {
@@ -41,20 +122,47 @@
   line-height: 1;
   border: none;
   padding: 0;
+  color: #999;
+}
+
+.button:hover {
+  color: #555;
+}
+
+.button:active,
+.button.active {
+  color: #333;
+}
+
+.button:disabled,
+.button.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.button-text {
+  padding: 8px 16px;
 }
 
 .button-icon {
-  padding: 0.5em;
+  padding: 8px;
+  border-radius: 50%;
 }
 
-.button-icon svg {
+.button-icon {
   fill: #999;
 }
 
-.button-icon:hover svg {
+.button-icon:hover {
   fill: #555;
 }
 
+.button-icon {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+}
+
 .dropdown {
   position: relative;
 }
@@ -62,7 +170,7 @@
 .dropdown-menu {
   display: none;
   position: absolute;
-  min-width: 320px;
+  min-width: 240px;
   max-width: 90%;
   max-height: 480px;
   top: 100%;
@@ -72,6 +180,7 @@
   z-index: 10;
   overflow-y: auto;
   background: white;
+  font-size: 14px;
 }
 
 .dropdown.open .dropdown-menu {
@@ -86,9 +195,10 @@
 
 .dropdown-menu-item {
   display: block;
-  padding: 12px;
+  padding: 10px 12px;
   text-decoration: none;
   color: #555;
+  line-height: 20px;
 }
 
 .dropdown-menu-item:hover {
@@ -104,10 +214,54 @@
   padding-left: 24px;
 }
 
-.content {
-  padding: 2em;
-  max-width: 768px;
-  margin: 0 auto;
+.dropdown-group {
+  margin: 16px;
+}
+
+.dropdown-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: #777;
+}
+
+.dropdown-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.font-family-options .button {
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.background-options .button {
+  border: 1px solid #ccc;
+}
+
+.background-options .button svg {
+  display: none;
+}
+
+.background-options .button.active svg {
+  display: block;
+}
+
+.background-options .button[data-value="white"] {
+  background: white;
+}
+
+.background-options .button[data-value="warm"] {
+  background: #fff8e1;
+}
+
+.background-options .button[data-value="dim"] {
+  background: #424242;
+}
+
+.background-options .button[data-value="black"] {
+  background: black;
 }
 
 .paginator {
@@ -115,16 +269,15 @@
 
 .paginator a {
   padding: 32px;
+  fill: #999;
+  text-decoration: none;
 }
 
 .paginator a svg {
-  fill: #ccc;
-  width: 48px;
-  height: 48px;
 }
 
-.paginator a:hover svg {
-  fill: #999;
+.paginator a:hover {
+  fill: #555;
 }
 
 .paginator a.disabled {
@@ -133,33 +286,201 @@
 
 .paginator-prev {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  position: fixed;
-  top: 48px;
+  position: absolute;
+  top: 56px;
   bottom: 0;
   left: 0;
 }
 
 .paginator-next {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  position: fixed;
-  top: 48px;
+  position: absolute;
+  top: 56px;
   bottom: 0;
   right: 0;
 }
 
-.main {
-  margin-top: 56px;
+/* Theme */
+
+body[data-font-size="50"] .main-content {
+  font-size: 50%;
+}
+
+body[data-font-size="67"] .main-content {
+  font-size: 67%;
+}
+
+body[data-font-size="75"] .main-content {
+  font-size: 75%;
+}
+
+body[data-font-size="80"] .main-content {
+  font-size: 80%;
+}
+
+body[data-font-size="90"] .main-content {
+  font-size: 90%;
+}
+
+body[data-font-size="100"] .main-content {
+  font-size: 100%;
+}
+
+body[data-font-size="110"] .main-content {
+  font-size: 110%;
+}
+
+body[data-font-size="125"] .main-content {
+  font-size: 125%;
+}
+
+body[data-font-size="150"] .main-content {
+  font-size: 150%;
+}
+
+body[data-font-size="175"] .main-content {
+  font-size: 175%;
+}
+
+body[data-font-size="200"] .main-content {
+  font-size: 200%;
+}
+
+body[data-font-family="serif"] .main-content {
+  font-family: serif;
+}
+
+body[data-font-family="sans-serif"] .main-content {
+  font-family: sans-serif;
+}
+
+body[data-background="white"] {
+  background: white;
+}
+
+body[data-background="warm"] {
+  background: #fff8e1;
+}
+
+body[data-background="dim"] {
+  background: #424242;
+}
+
+body[data-background="dim"] .main-content,
+body[data-background="dim"] .main-content h1,
+body[data-background="dim"] .main-content h2,
+body[data-background="dim"] .main-content h3,
+body[data-background="dim"] .main-content h4,
+body[data-background="dim"] .main-content h5,
+body[data-background="dim"] .main-content h6 {
+  color: #ddd;
+}
+
+body[data-background="dim"] .main-content pre,
+body[data-background="dim"] .main-content *:not(pre) code,
+body[data-background="dim"] .main-content .example,
+body[data-background="dim"] .main-content .sidebar,
+body[data-background="dim"] .main-content blockquote {
+  background: transparent;
+}
+
+body[data-background="dim"] .main-content pre span {
+  color: #ddd;
+}
+
+body[data-background="dim"] .main-content a {
+  color: #81d4fa;
+}
+
+body[data-background="dim"] .main-content a.callout {
+  color: #ddd;
+}
+
+body[data-background="black"] {
+  background: black;
+}
+
+body[data-background="black"] .main-content,
+body[data-background="black"] .main-content h1,
+body[data-background="black"] .main-content h2,
+body[data-background="black"] .main-content h3,
+body[data-background="black"] .main-content h4,
+body[data-background="black"] .main-content h5,
+body[data-background="black"] .main-content h6 {
+  color: #ddd;
+}
+
+body[data-background="black"] .main-content pre,
+body[data-background="black"] .main-content *:not(pre) code,
+body[data-background="black"] .main-content .example,
+body[data-background="black"] .main-content .sidebar,
+body[data-background="black"] .main-content blockquote {
+  background: transparent;
 }
 
-@media (max-width: 992px) {
+body[data-background="black"] .main-content pre span {
+  color: #ddd;
+}
+
+body[data-background="black"] .main-content a {
+  color: #81d4fa;
+}
+
+body[data-background="black"] .main-content a.callout {
+  color: #ddd;
+}
+/* responsive */
+
+@media (max-width: 1280px) {
+  .drawer.open .drawer-content {
+    z-index: 20;
+    background: white;
+  }
+
+  .drawer .drawer-backdrop {
+    display: none;
+  }
+
+  .drawer.open .drawer-backdrop {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.15);
+  }
+
+  .drawer.open + .main {
+    left: 0;
+  }
+
+  .drawer.open .drawer-content {
+    border: none;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .main-content {
+    bottom: 56px;
+  }
+
   .paginator {
     display: flex;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 
   .paginator a {
-    padding: 1em;
+    padding: 16px;
   }
 
   .paginator-prev {
@@ -176,15 +497,7 @@
 }
 
 @media (max-width: 480px) {
-  .toolbar {
-    padding: 0.25em;
-  }
-
-  .content {
-    padding: 1em;
-  }
-
-  .paginator a {
-    padding: 0.25em;
+  .main-content {
+    padding: 16px;
   }
 }

data/theme/html/html.js

@@ -1,9 +1,45 @@
-(function() {
+function isDesktop() {
+  return window.innerWidth > 1280;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Drawer
+  var drawer = document.querySelector('#drawer');
+  var drawerToggle = document.querySelector('#drawer-toggle');
+  var drawerBackdrop = drawer.querySelector('.drawer-backdrop');
+
+  drawerToggle.addEventListener('click', function() {
+    drawer.classList.toggle('open');
+    if (isDesktop()) {
+      localStorage.setItem('drawerOpened', drawer.classList.contains('open'));
+    }
+  })
+
+  drawerBackdrop.addEventListener('click', function() {
+    drawer.classList.remove('open');
+  })
+
+  // restore drawer state
+  if (isDesktop() && localStorage.getItem('drawerOpened') == 'true') {
+    drawer.classList.add('open');
+  }
+
+  // store drawer offset
+  window.addEventListener('beforeunload', function() {
+    localStorage.setItem('drawerScrollTop', drawer.querySelector('.drawer-content').scrollTop);
+  });
+
+  // restore drawer offset
+  if (localStorage.getItem('drawerScrollTop')) {
+    drawer.querySelector('.drawer-content').scrollTop = parseInt(localStorage.getItem('drawerScrollTop'));
+  }
+
+  // Dropdown
   document.querySelectorAll('.dropdown-toggle').forEach(function(element){
-    var dropdown = element.closest('.dropdown')
+    var dropdown = element.closest('.dropdown');
 
     function openMenu() {
-      dropdown.classList.add('open')
+      dropdown.classList.add('open');
       document.addEventListener('click', closeMenuOutside);
     }
 
@@ -26,4 +62,98 @@
       }
     });
   })
-})();
+
+  // Hot keys
+  document.addEventListener('keyup', function(event) {
+    switch (event.which) {
+      case 37:
+        document.querySelector('.paginator-prev').click();
+        break;
+      case 39:
+        document.querySelector('.paginator-next').click();
+        break;
+    }
+  })
+
+  // Custom style
+  document.body.dataset.fontSize = localStorage.getItem('fontSize') || '100';
+  document.body.dataset.fontFamily = localStorage.getItem('fontFamily') || 'sans-serif';
+  document.body.dataset.background = localStorage.getItem('background') || 'white';
+
+  function updataFonsSizeText() {
+    document.querySelector('#font-size-text').textContent = document.body.dataset.fontSize + '%';
+  }
+  updataFonsSizeText();
+
+  function updateFontFamilyButton() {
+    document.querySelectorAll('.font-family-options .button').forEach(function(button){
+      if (button.dataset.value == document.body.dataset.fontFamily) {
+        button.classList.add('active')
+      } else {
+        button.classList.remove('active')
+      }
+    });
+  }
+  updateFontFamilyButton();
+
+  function updateBackgroundButton() {
+    document.querySelectorAll('.background-options .button').forEach(function(button){
+      if (button.dataset.value == document.body.dataset.background) {
+        button.classList.add('active')
+      } else {
+        button.classList.remove('active')
+      }
+    });
+  }
+  updateBackgroundButton();
+
+  function updateStyle(key, value) {
+    localStorage.setItem(key, value);
+    document.body.dataset[key] = value;
+  }
+
+  var fontSizeList = [50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200];
+  document.querySelectorAll('.font-size-options .button').forEach(function(element){
+    element.addEventListener('click', function() {
+      var index = fontSizeList.indexOf(parseInt(document.body.dataset.fontSize));
+
+      if (index == -1) {
+        index = 5;
+      }
+
+      switch (this.dataset.action) {
+        case 'add':
+          index += 1
+          break;
+        case 'reduce':
+          index -= 1
+          break;
+        default:
+      }
+
+      if (value = fontSizeList[index]) {
+        updateStyle('fontSize', value);
+        updataFonsSizeText();
+      }
+    });
+  });
+
+  document.querySelectorAll('.font-family-options .button').forEach(function(element) {
+    element.addEventListener('click', function() {
+      updateStyle('fontFamily', this.dataset.value);
+      updateFontFamilyButton();
+    });
+  });
+
+  document.querySelectorAll('.background-options .button').forEach(function(element) {
+    element.addEventListener('click', function() {
+      updateStyle('background', this.dataset.value);
+      updateBackgroundButton();
+    });
+  });
+
+  // set default scroll element
+  document.querySelector('.main-content').focus();
+
+  document.body.classList.remove('preload');
+});