--- /dev/null
+node_modules
+public/dist
\ No newline at end of file
--- /dev/null
+var gulp = require('gulp'),
+ plumber = require('gulp-plumber'),
+ rename = require('gulp-rename');
+var autoprefixer = require('gulp-autoprefixer');
+var babel = require('gulp-babel');
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
+var minifycss = require('gulp-minify-css');
+var sass = require('gulp-sass');
+var browserSync = require('browser-sync').create();
+
+gulp.task('browser-sync', function() {
+ browserSync.init({
+ server: {
+ baseDir: "./public/"
+ }
+ });
+});
+
+gulp.task('bs-reload', function () {
+ browserSync.reload();
+});
+
+
+gulp.task('styles', function(){
+ gulp.src(['sass/**/*.scss'])
+ .pipe(plumber({
+ errorHandler: function (error) {
+ console.log(error.message);
+ this.emit('end');
+ }}))
+ .pipe(sass())
+ .pipe(autoprefixer('last 2 versions'))
+ .pipe(gulp.dest('public/dist/'))
+ .pipe(browserSync.stream())
+ .pipe(rename({suffix: '.min'}))
+ .pipe(minifycss())
+ .pipe(gulp.dest('public/dist/'))
+ .pipe(browserSync.stream())
+});
+
+gulp.task('scripts', function(){
+ return gulp.src('scripts/**/*.js')
+ .pipe(plumber({
+ errorHandler: function (error) {
+ console.log(error.message);
+ this.emit('end');
+ }}))
+ .pipe(concat('main.js'))
+ .pipe(babel())
+ .pipe(gulp.dest('public/dist/'))
+ .pipe(browserSync.stream())
+ .pipe(rename({suffix: '.min'}))
+ .pipe(uglify())
+ .pipe(gulp.dest('public/dist/'))
+ .pipe(browserSync.stream())
+});
+
+gulp.task('default', ['styles', 'scripts']);
+
+gulp.task('watch', ['browser-sync'], function(){
+ gulp.watch("public/*.html", ['bs-reload']);
+ gulp.watch('sass/*.scss', ['styles']);
+ gulp.watch('scripts/*.js', ['scripts']);
+});
\ No newline at end of file
--- /dev/null
+{
+ "name": "BookStack-Site",
+ "version": "1.0.0",
+ "description": "The front-end site for bookstack",
+ "main": "gulpfile.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "Dan Brown",
+ "license": "MIT",
+ "devDependencies": {
+ "browser-sync": "2.9.11",
+ "gulp": "3.9.0",
+ "gulp-autoprefixer": "3.0.2",
+ "gulp-babel": "5.2.1",
+ "gulp-concat": "2.6.0",
+ "gulp-minify-css": "1.2.1",
+ "gulp-plumber": "1.0.1",
+ "gulp-rename": "1.2.2",
+ "gulp-sass": "2.0.4",
+ "gulp-uglify": "1.4.1",
+ },
+ "dependencies": {
+ }
+}
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>BookStack</title>
+ <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,300,300italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet">
+ <link rel="stylesheet" href="/dist/styles.css">
+</head>
+<body>
+<header id="header">
+ <div class="container">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="logo">
+ <img src="/logo.svg" alt="BookStack">
+ <h1>BookStack</h1>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-4 spaced">
+ <h2 class="wow fadeIn long">Simple & Free Documentation</h2>
+ <p class="wow fadeIn long" data-wow-delay="120ms">BookStack is a simple, self-hosted, easy-to-use platform for organising and storing information.</p>
+ <a href="https://github.com/ssddanbrown/BookStack" class="button pos wow fadeIn long" data-wow-delay="240ms">View on GitHub</a>
+ </div>
+ <div class="col-md-8 screenshot-container">
+ <img class="wow screenshot" src="/bookstack-screenshot.png" alt="BookStack ScreenShot">
+ </div>
+ </div>
+
+ </div>
+</header>
+ <div class="container md-margin-top">
+ <div class="row">
+ <div class="col-md-12">
+ <h2>Features</h2>
+ </div>
+ </div>
+ <div class="row">
+
+ <div class="col-sm-4 wow fadeIn">
+ <h3><i class="material-icons">code</i>Free & Open Source</h3>
+ <p>BookStack is fully free and open, MIT licensed. The source is available on GitHub. There is no cost to downloading and installing your own instance of bookstack.
+ </p>
+ <p>
+ <a href="https://github.com/ssddanbrown/BookStack">View the source here »</a>
+ </p>
+ </div>
+
+ <div class="col-sm-4 wow fadeIn" data-wow-delay="240ms">
+ <h3><i class="material-icons">laptop_chromebook</i>Easy, Simple Interface</h3>
+ <p>
+ Simplicity has been the top priority when building BookStack. The page editor has a simple WYSIWYG interface and all content is broken into three simple real world groups:
+ </p>
+ <p>
+ <i class="material-icons text-book">book</i> Books <i class="material-icons text-chapter">collections_bookmark</i> Chapters <i class="material-icons text-page">description</i> Pages
+ </p>
+ </div>
+
+ <div class="col-sm-4 wow fadeIn" data-wow-delay="480ms">
+ <h3><i class="material-icons">search</i>Searchable and Connected</h3>
+ <p>
+ The content in BookStack is fully searchable. You are able to search at book level or across all books, chapters & pages. The ability to link directly to any paragraph allows you to keeps your documentation connected.
+ </p>
+ </div>
+
+ </div>
+
+ <p>
+ <br>
+ </p>
+
+ <div class="row">
+
+ <div class="col-sm-4 wow fadeIn">
+ <h3><i class="material-icons">build</i>Configurable</h3>
+ <p>
+ Configuration options allow you to set-up BookStack to suit your use case. You can change the name, Logo and registration options. You can also change whether the whole system is publicly viewable or not.
+ </p>
+ </div>
+
+ <div class="col-sm-4 wow fadeIn" data-wow-delay="240ms">
+ <h3><i class="material-icons">storage</i>Simple Requirements</h3>
+ <p>
+ BookStack is built using PHP, on top of the Laravel framework and it uses MySQL to store data. Performance has been kept in mind and BookStack can run happily on a $5 Digital Ocean VPS.
+ </p>
+ </div>
+
+ <div class="col-sm-4 wow fadeIn" data-wow-delay="480ms">
+ <h3><i class="material-icons">directions_boat</i>Powerful Features</h3>
+ <p>
+ On top of the powerful search and linking there is also cross-book sorting, Page revisions, Image managment. Some more mega-features are planned such as static-site generation and quick exporting.
+ </p>
+ </div>
+
+ </div>
+
+ <div class="row">
+ <div class="col-md-12">
+ <h3 class="text-center text-muted">
+ Demo Page Coming Soon
+ </h3>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <hr>
+ <div class="container">
+ <p class="text-muted">
+ BookStack - Created By <a href="http://danb.me" title="danb.me">Dan Brown</a>
+ </p>
+ </div>
+ </footer>
+ <script src="libs/wow.min.js"></script>
+ <script src="dist/main.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+/*! WOW - v1.1.2 - 2015-04-07
+* Copyright (c) 2015 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="svg4200" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="61.699mm" width="65.023mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 230.39711 218.6199">
+ <g id="layer1" stroke-linejoin="round" fill-rule="evenodd" transform="translate(-245.27 -58.434)" stroke="#0288d1" stroke-width="6" fill="#fff">
+ <g stroke-linecap="round">
+ <path id="path5686" d="m343.79 238.6 128.88-74.409-92.058-53.15-128.88 74.409z"/>
+ <path id="path5688" d="m251.73 185.45v21.26l92.058 53.15 128.88-74.409v-21.26"/>
+ <path id="path5694" d="m343.79 274.03-92.058-53.15s-7.5-16.918 0-28.346l92.058 53.15 128.88-74.409v28.346l-128.88 74.409"/>
+ <path id="path5686-5" d="m343.79 188.99 128.88-74.41-92.06-53.146-128.88 74.406z"/>
+ <path id="path5692-7" d="m343.79 188.99 128.88-74.409 0.00001 28.346-128.88 74.409-92.058-53.15s-6.0714-17.632 0-28.346z"/>
+ <path id="path5694-5" d="m343.79 245.69-92.058-53.15s-7.5-16.918 0-28.346l92.058 53.15 128.88-74.409-0.00001 28.346-128.88 74.409"/>
+ </g>
+ <path id="path5831" d="m402.09 73.836-55.234 31.89 21.48 1.7716 3.0686 12.402 55.235-31.89z"/>
+ </g>
+</svg>
--- /dev/null
+
+.anim.fadeIn {
+ opacity: 0;
+ animation-name: fadeIn;
+ animation-duration: 480ms;
+ animation-timing-function: cubic-bezier(.62, .28, .23, .99);
+ animation-fill-mode: forwards;
+ &.long {
+ animation-duration: 880ms;
+ animation-name: fadeInLeft;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+.anim.scaleIn {
+ opacity: 0;
+ animation-name: scaleIn;
+ animation-duration: 880ms;
+ animation-timing-function: cubic-bezier(.62, .28, .23, .99);
+ transform-origin: 0% 0%;
+}
+
+@keyframes scaleIn {
+ 0% {
+ opacity: 0;
+ transform: scale3d(0, 0, 0);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale3d(0, 0, 0);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ transform: translate3d(-400px, 0, 0);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes loadingBob {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+ 30% {
+ transform: translate3d(0, 0, 0);
+ }
+ 50% {
+ transform: translate3d(0, -10px, 0);
+ }
+ 70% {
+ transform: translate3d(0, 0, 0);
+ }
+ 100% {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes screenshot {
+ 0% {
+ transform: translate3d(400px, 20px, 0) scale3d(0, 0, 0);
+ }
+ 100% {
+ transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+ }
+}
+
+.anim.screenshot {
+ transform-origin: 50% 50%;
+ animation-name: screenshot;
+ animation-duration: 880ms;
+ animation-delay: 0s;
+ animation-timing-function: cubic-bezier(.62, .28, .23, .99);
+}
\ No newline at end of file
--- /dev/null
+
+/*
+* This file container all block styling including background shading,
+* margins, paddings & borders.
+*/
+
+
+/*
+* Background Shading
+*/
+.shaded {
+ background-color: #f1f1f1;
+ &.pos {
+ background-color: lighten($positive, 40%);
+ }
+ &.neg {
+ background-color: lighten($negative, 20%);
+ }
+ &.primary {
+ background-color: lighten($primary, 40%);
+ }
+ &.secondary {
+ background-color: lighten($secondary, 30%);
+ }
+}
+
+/*
+* Bordering
+*/
+.bordered {
+ border: 1px solid #BBB;
+ &.pos {
+ border-color: $positive;
+ }
+ &.neg {
+ border-color: $negative;
+ }
+ &.primary {
+ border-color: $primary;
+ }
+ &.secondary {
+ border-color: $secondary;
+ }
+ &.thick {
+ border-width: 2px;
+ }
+}
+.rounded {
+ border-radius: 3px;
+}
+
+/*
+* Padding
+*/
+.nopadding {
+ padding: 0;
+}
+.padded {
+ padding: $-l;
+ &.large {
+ padding: $-xl;
+ }
+ >h1, >h2, >h3, >h4 {
+ &:first-child {
+ margin-top: 0.1em;
+ }
+ }
+}
+.padded-vertical, .padded-top {
+ padding-top: $-m;
+ &.large {
+ padding-top: $-xl;
+ }
+}
+
+.padded-vertical, .padded-bottom {
+ padding-bottom: $-m;
+ &.large {
+ padding-bottom: $-xl;
+ }
+}
+.padded-horizontal, .padded-left {
+ padding-left: $-m;
+ &.large {
+ padding-left: $-xl;
+ }
+}
+.padded-horizontal, .padded-right {
+ padding-right: $-m;
+ &.large {
+ padding-right: $-xl;
+ }
+}
+
+/*
+* Margins
+*/
+.margins {
+ margin: $-l;
+ &.large {
+ margin: $-xl;
+ }
+}
+.margins-vertical, .margin-top {
+ margin-top: $-m;
+ &.large {
+ margin-top: $-xl;
+ }
+}
+.margins-vertical, .margin-bottom {
+ margin-bottom: $-m;
+ &.large {
+ margin-bottom: $-xl;
+ }
+}
+.margins-horizontal, .margin-left {
+ margin-left: $-m;
+ &.large {
+ margin-left: $-xl;
+ }
+}
+.margins-horizontal, .margin-right {
+ margin-right: $-m;
+ &.large {
+ margin-right: $-xl;
+ }
+}
--- /dev/null
+
+@mixin generate-button-colors($textColor, $backgroundColor) {
+ background-color: $backgroundColor;
+ color: $textColor;
+ &:hover {
+ background-color: lighten($backgroundColor, 8%);
+ box-shadow: $bs-med;
+ text-decoration: none;
+ color: $textColor;
+ }
+ &:active {
+ background-color: darken($backgroundColor, 8%);
+ }
+}
+
+// Button Specific Variables
+$button-border-radius: 2px;
+
+.button-base {
+ text-decoration: none;
+ font-size: $fs-m;
+ line-height: 1.4em;
+ padding: $-xs $-m;
+ margin: $-xs $-xs $-xs 0;
+ display: inline-block;
+ border: none;
+ font-weight: 500;
+ font-family: $text;
+ outline: 0;
+ border-radius: $button-border-radius;
+ cursor: pointer;
+ transition: all ease-in-out 120ms;
+ box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
+ @include generate-button-colors(#EEE, $primary);
+}
+
+.button, input[type="button"], input[type="submit"] {
+ @extend .button-base;
+ &.pos {
+ @include generate-button-colors(#EEE, $positive);
+ }
+ &.neg {
+ @include generate-button-colors(#EEE, $negative);
+ }
+ &.secondary {
+ @include generate-button-colors(#EEE, $secondary);
+ }
+ &.muted {
+ @include generate-button-colors(#EEE, #888);
+ }
+}
+
+.text-button {
+ @extend .link;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+ border: none;
+ &:focus, &:active {
+ outline: 0;
+ }
+ &.neg {
+ color: $negative;
+ }
+}
+
+.button-group {
+ @include clearfix;
+ .button, button[type="button"] {
+ margin: $-xs 0 $-xs 0;
+ float: left;
+ border-radius: 0;
+ &:first-child {
+ border-radius: $button-border-radius 0 0 $button-border-radius;
+ }
+ &:last-child {
+ border-radius: 0 $button-border-radius $button-border-radius 0;
+ }
+ }
+}
+
+.button.block {
+ width: 100%;
+ text-align: center;
+ display: block;
+}
+
+.button.icon {
+ i {
+ padding-right: 0;
+ }
+}
+
--- /dev/null
+
+/** Flexbox styling rules **/
+body.flexbox {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ height: 100%;
+ min-height: 100%;
+ max-height: 100%;
+ overflow: hidden;
+ #content {
+ flex: 1;
+ display: flex;
+ }
+}
+
+.flex-fill {
+ display: flex;
+ align-items: stretch;
+ .flex, &.flex {
+ flex: 1;
+ }
+}
+
+/** Rules for all columns */
+div[class^="col-"] img {
+ max-width: 100%;
+}
+
+.container {
+ max-width: $max-width;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: $-m;
+ padding-right: $-m;
+ &.fluid {
+ max-width: 100%;
+ }
+ &.small {
+ max-width: 840px;
+ }
+}
+
+.center-box {
+ margin: $-xl auto 0 auto;
+ padding: $-m $-xxl $-xl*2 $-xxl;
+ max-width: 346px;
+ display: inline-block;
+ text-align: left;
+ vertical-align: top;
+ &.login {
+ background-color: #EEE;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid #DDD;
+ }
+}
+
+.row {
+ margin-left: -$-m;
+ margin-right: -$-m;
+}
+
+.float {
+ float: left;
+ &.right {
+ float: right;
+ }
+}
+
+.block {
+ display: block;
+ position: relative;
+}
+
+.inline {
+ display: inline;
+}
+
+.block.inline {
+ display: inline-block;
+}
+
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+ position: relative;
+ min-height: 1px;
+ padding-left: $-m;
+ padding-right: $-m;
+}
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+ float: left;
+}
+.col-xs-12 {
+ width: 100%;
+}
+.col-xs-11 {
+ width: 91.66666667%;
+}
+.col-xs-10 {
+ width: 83.33333333%;
+}
+.col-xs-9 {
+ width: 75%;
+}
+.col-xs-8 {
+ width: 66.66666667%;
+}
+.col-xs-7 {
+ width: 58.33333333%;
+}
+.col-xs-6 {
+ width: 50%;
+}
+.col-xs-5 {
+ width: 41.66666667%;
+}
+.col-xs-4 {
+ width: 33.33333333%;
+}
+.col-xs-3 {
+ width: 25%;
+}
+.col-xs-2 {
+ width: 16.66666667%;
+}
+.col-xs-1 {
+ width: 8.33333333%;
+}
+.col-xs-pull-12 {
+ right: 100%;
+}
+.col-xs-pull-11 {
+ right: 91.66666667%;
+}
+.col-xs-pull-10 {
+ right: 83.33333333%;
+}
+.col-xs-pull-9 {
+ right: 75%;
+}
+.col-xs-pull-8 {
+ right: 66.66666667%;
+}
+.col-xs-pull-7 {
+ right: 58.33333333%;
+}
+.col-xs-pull-6 {
+ right: 50%;
+}
+.col-xs-pull-5 {
+ right: 41.66666667%;
+}
+.col-xs-pull-4 {
+ right: 33.33333333%;
+}
+.col-xs-pull-3 {
+ right: 25%;
+}
+.col-xs-pull-2 {
+ right: 16.66666667%;
+}
+.col-xs-pull-1 {
+ right: 8.33333333%;
+}
+.col-xs-pull-0 {
+ right: auto;
+}
+.col-xs-push-12 {
+ left: 100%;
+}
+.col-xs-push-11 {
+ left: 91.66666667%;
+}
+.col-xs-push-10 {
+ left: 83.33333333%;
+}
+.col-xs-push-9 {
+ left: 75%;
+}
+.col-xs-push-8 {
+ left: 66.66666667%;
+}
+.col-xs-push-7 {
+ left: 58.33333333%;
+}
+.col-xs-push-6 {
+ left: 50%;
+}
+.col-xs-push-5 {
+ left: 41.66666667%;
+}
+.col-xs-push-4 {
+ left: 33.33333333%;
+}
+.col-xs-push-3 {
+ left: 25%;
+}
+.col-xs-push-2 {
+ left: 16.66666667%;
+}
+.col-xs-push-1 {
+ left: 8.33333333%;
+}
+.col-xs-push-0 {
+ left: auto;
+}
+.col-xs-offset-12 {
+ margin-left: 100%;
+}
+.col-xs-offset-11 {
+ margin-left: 91.66666667%;
+}
+.col-xs-offset-10 {
+ margin-left: 83.33333333%;
+}
+.col-xs-offset-9 {
+ margin-left: 75%;
+}
+.col-xs-offset-8 {
+ margin-left: 66.66666667%;
+}
+.col-xs-offset-7 {
+ margin-left: 58.33333333%;
+}
+.col-xs-offset-6 {
+ margin-left: 50%;
+}
+.col-xs-offset-5 {
+ margin-left: 41.66666667%;
+}
+.col-xs-offset-4 {
+ margin-left: 33.33333333%;
+}
+.col-xs-offset-3 {
+ margin-left: 25%;
+}
+.col-xs-offset-2 {
+ margin-left: 16.66666667%;
+}
+.col-xs-offset-1 {
+ margin-left: 8.33333333%;
+}
+.col-xs-offset-0 {
+ margin-left: 0%;
+}
+@media (min-width: 768px) {
+ .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+ float: left;
+ }
+ .col-sm-12 {
+ width: 100%;
+ }
+ .col-sm-11 {
+ width: 91.66666667%;
+ }
+ .col-sm-10 {
+ width: 83.33333333%;
+ }
+ .col-sm-9 {
+ width: 75%;
+ }
+ .col-sm-8 {
+ width: 66.66666667%;
+ }
+ .col-sm-7 {
+ width: 58.33333333%;
+ }
+ .col-sm-6 {
+ width: 50%;
+ }
+ .col-sm-5 {
+ width: 41.66666667%;
+ }
+ .col-sm-4 {
+ width: 33.33333333%;
+ }
+ .col-sm-3 {
+ width: 25%;
+ }
+ .col-sm-2 {
+ width: 16.66666667%;
+ }
+ .col-sm-1 {
+ width: 8.33333333%;
+ }
+ .col-sm-pull-12 {
+ right: 100%;
+ }
+ .col-sm-pull-11 {
+ right: 91.66666667%;
+ }
+ .col-sm-pull-10 {
+ right: 83.33333333%;
+ }
+ .col-sm-pull-9 {
+ right: 75%;
+ }
+ .col-sm-pull-8 {
+ right: 66.66666667%;
+ }
+ .col-sm-pull-7 {
+ right: 58.33333333%;
+ }
+ .col-sm-pull-6 {
+ right: 50%;
+ }
+ .col-sm-pull-5 {
+ right: 41.66666667%;
+ }
+ .col-sm-pull-4 {
+ right: 33.33333333%;
+ }
+ .col-sm-pull-3 {
+ right: 25%;
+ }
+ .col-sm-pull-2 {
+ right: 16.66666667%;
+ }
+ .col-sm-pull-1 {
+ right: 8.33333333%;
+ }
+ .col-sm-pull-0 {
+ right: auto;
+ }
+ .col-sm-push-12 {
+ left: 100%;
+ }
+ .col-sm-push-11 {
+ left: 91.66666667%;
+ }
+ .col-sm-push-10 {
+ left: 83.33333333%;
+ }
+ .col-sm-push-9 {
+ left: 75%;
+ }
+ .col-sm-push-8 {
+ left: 66.66666667%;
+ }
+ .col-sm-push-7 {
+ left: 58.33333333%;
+ }
+ .col-sm-push-6 {
+ left: 50%;
+ }
+ .col-sm-push-5 {
+ left: 41.66666667%;
+ }
+ .col-sm-push-4 {
+ left: 33.33333333%;
+ }
+ .col-sm-push-3 {
+ left: 25%;
+ }
+ .col-sm-push-2 {
+ left: 16.66666667%;
+ }
+ .col-sm-push-1 {
+ left: 8.33333333%;
+ }
+ .col-sm-push-0 {
+ left: auto;
+ }
+ .col-sm-offset-12 {
+ margin-left: 100%;
+ }
+ .col-sm-offset-11 {
+ margin-left: 91.66666667%;
+ }
+ .col-sm-offset-10 {
+ margin-left: 83.33333333%;
+ }
+ .col-sm-offset-9 {
+ margin-left: 75%;
+ }
+ .col-sm-offset-8 {
+ margin-left: 66.66666667%;
+ }
+ .col-sm-offset-7 {
+ margin-left: 58.33333333%;
+ }
+ .col-sm-offset-6 {
+ margin-left: 50%;
+ }
+ .col-sm-offset-5 {
+ margin-left: 41.66666667%;
+ }
+ .col-sm-offset-4 {
+ margin-left: 33.33333333%;
+ }
+ .col-sm-offset-3 {
+ margin-left: 25%;
+ }
+ .col-sm-offset-2 {
+ margin-left: 16.66666667%;
+ }
+ .col-sm-offset-1 {
+ margin-left: 8.33333333%;
+ }
+ .col-sm-offset-0 {
+ margin-left: 0%;
+ }
+}
+@media (min-width: 992px) {
+ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+ float: left;
+ }
+ .col-md-12 {
+ width: 100%;
+ }
+ .col-md-11 {
+ width: 91.66666667%;
+ }
+ .col-md-10 {
+ width: 83.33333333%;
+ }
+ .col-md-9 {
+ width: 75%;
+ }
+ .col-md-8 {
+ width: 66.66666667%;
+ }
+ .col-md-7 {
+ width: 58.33333333%;
+ }
+ .col-md-6 {
+ width: 50%;
+ }
+ .col-md-5 {
+ width: 41.66666667%;
+ }
+ .col-md-4 {
+ width: 33.33333333%;
+ }
+ .col-md-3 {
+ width: 25%;
+ }
+ .col-md-2 {
+ width: 16.66666667%;
+ }
+ .col-md-1 {
+ width: 8.33333333%;
+ }
+ .col-md-pull-12 {
+ right: 100%;
+ }
+ .col-md-pull-11 {
+ right: 91.66666667%;
+ }
+ .col-md-pull-10 {
+ right: 83.33333333%;
+ }
+ .col-md-pull-9 {
+ right: 75%;
+ }
+ .col-md-pull-8 {
+ right: 66.66666667%;
+ }
+ .col-md-pull-7 {
+ right: 58.33333333%;
+ }
+ .col-md-pull-6 {
+ right: 50%;
+ }
+ .col-md-pull-5 {
+ right: 41.66666667%;
+ }
+ .col-md-pull-4 {
+ right: 33.33333333%;
+ }
+ .col-md-pull-3 {
+ right: 25%;
+ }
+ .col-md-pull-2 {
+ right: 16.66666667%;
+ }
+ .col-md-pull-1 {
+ right: 8.33333333%;
+ }
+ .col-md-pull-0 {
+ right: auto;
+ }
+ .col-md-push-12 {
+ left: 100%;
+ }
+ .col-md-push-11 {
+ left: 91.66666667%;
+ }
+ .col-md-push-10 {
+ left: 83.33333333%;
+ }
+ .col-md-push-9 {
+ left: 75%;
+ }
+ .col-md-push-8 {
+ left: 66.66666667%;
+ }
+ .col-md-push-7 {
+ left: 58.33333333%;
+ }
+ .col-md-push-6 {
+ left: 50%;
+ }
+ .col-md-push-5 {
+ left: 41.66666667%;
+ }
+ .col-md-push-4 {
+ left: 33.33333333%;
+ }
+ .col-md-push-3 {
+ left: 25%;
+ }
+ .col-md-push-2 {
+ left: 16.66666667%;
+ }
+ .col-md-push-1 {
+ left: 8.33333333%;
+ }
+ .col-md-push-0 {
+ left: auto;
+ }
+ .col-md-offset-12 {
+ margin-left: 100%;
+ }
+ .col-md-offset-11 {
+ margin-left: 91.66666667%;
+ }
+ .col-md-offset-10 {
+ margin-left: 83.33333333%;
+ }
+ .col-md-offset-9 {
+ margin-left: 75%;
+ }
+ .col-md-offset-8 {
+ margin-left: 66.66666667%;
+ }
+ .col-md-offset-7 {
+ margin-left: 58.33333333%;
+ }
+ .col-md-offset-6 {
+ margin-left: 50%;
+ }
+ .col-md-offset-5 {
+ margin-left: 41.66666667%;
+ }
+ .col-md-offset-4 {
+ margin-left: 33.33333333%;
+ }
+ .col-md-offset-3 {
+ margin-left: 25%;
+ }
+ .col-md-offset-2 {
+ margin-left: 16.66666667%;
+ }
+ .col-md-offset-1 {
+ margin-left: 8.33333333%;
+ }
+ .col-md-offset-0 {
+ margin-left: 0%;
+ }
+}
+@media (min-width: 1200px) {
+ .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+ float: left;
+ }
+ .col-lg-12 {
+ width: 100%;
+ }
+ .col-lg-11 {
+ width: 91.66666667%;
+ }
+ .col-lg-10 {
+ width: 83.33333333%;
+ }
+ .col-lg-9 {
+ width: 75%;
+ }
+ .col-lg-8 {
+ width: 66.66666667%;
+ }
+ .col-lg-7 {
+ width: 58.33333333%;
+ }
+ .col-lg-6 {
+ width: 50%;
+ }
+ .col-lg-5 {
+ width: 41.66666667%;
+ }
+ .col-lg-4 {
+ width: 33.33333333%;
+ }
+ .col-lg-3 {
+ width: 25%;
+ }
+ .col-lg-2 {
+ width: 16.66666667%;
+ }
+ .col-lg-1 {
+ width: 8.33333333%;
+ }
+ .col-lg-pull-12 {
+ right: 100%;
+ }
+ .col-lg-pull-11 {
+ right: 91.66666667%;
+ }
+ .col-lg-pull-10 {
+ right: 83.33333333%;
+ }
+ .col-lg-pull-9 {
+ right: 75%;
+ }
+ .col-lg-pull-8 {
+ right: 66.66666667%;
+ }
+ .col-lg-pull-7 {
+ right: 58.33333333%;
+ }
+ .col-lg-pull-6 {
+ right: 50%;
+ }
+ .col-lg-pull-5 {
+ right: 41.66666667%;
+ }
+ .col-lg-pull-4 {
+ right: 33.33333333%;
+ }
+ .col-lg-pull-3 {
+ right: 25%;
+ }
+ .col-lg-pull-2 {
+ right: 16.66666667%;
+ }
+ .col-lg-pull-1 {
+ right: 8.33333333%;
+ }
+ .col-lg-pull-0 {
+ right: auto;
+ }
+ .col-lg-push-12 {
+ left: 100%;
+ }
+ .col-lg-push-11 {
+ left: 91.66666667%;
+ }
+ .col-lg-push-10 {
+ left: 83.33333333%;
+ }
+ .col-lg-push-9 {
+ left: 75%;
+ }
+ .col-lg-push-8 {
+ left: 66.66666667%;
+ }
+ .col-lg-push-7 {
+ left: 58.33333333%;
+ }
+ .col-lg-push-6 {
+ left: 50%;
+ }
+ .col-lg-push-5 {
+ left: 41.66666667%;
+ }
+ .col-lg-push-4 {
+ left: 33.33333333%;
+ }
+ .col-lg-push-3 {
+ left: 25%;
+ }
+ .col-lg-push-2 {
+ left: 16.66666667%;
+ }
+ .col-lg-push-1 {
+ left: 8.33333333%;
+ }
+ .col-lg-push-0 {
+ left: auto;
+ }
+ .col-lg-offset-12 {
+ margin-left: 100%;
+ }
+ .col-lg-offset-11 {
+ margin-left: 91.66666667%;
+ }
+ .col-lg-offset-10 {
+ margin-left: 83.33333333%;
+ }
+ .col-lg-offset-9 {
+ margin-left: 75%;
+ }
+ .col-lg-offset-8 {
+ margin-left: 66.66666667%;
+ }
+ .col-lg-offset-7 {
+ margin-left: 58.33333333%;
+ }
+ .col-lg-offset-6 {
+ margin-left: 50%;
+ }
+ .col-lg-offset-5 {
+ margin-left: 41.66666667%;
+ }
+ .col-lg-offset-4 {
+ margin-left: 33.33333333%;
+ }
+ .col-lg-offset-3 {
+ margin-left: 25%;
+ }
+ .col-lg-offset-2 {
+ margin-left: 16.66666667%;
+ }
+ .col-lg-offset-1 {
+ margin-left: 8.33333333%;
+ }
+ .col-lg-offset-0 {
+ margin-left: 0%;
+ }
+}
+.clearfix:before,
+.clearfix:after,
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after {
+ content: " ";
+ display: table;
+}
+.clearfix:after,
+.container:after,
+.container-fluid:after,
+.row:after {
+ clear: both;
+}
+.center-block {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
--- /dev/null
+/**
+ * Includes the main navigation header and the faded toolbar.
+ */
+
+header {
+ display: block;
+ z-index: 2;
+ top: 0;
+ background-color: $primary-dark;
+ color: #fff;
+ h2 {
+ color: #FFF;
+ font-size: 3.333em;
+ font-weight: 300;
+ }
+ .spaced {
+ margin-top: $-xxl;
+ margin-bottom: $-xxl*2;
+ h2, p {
+ max-width: 420px;
+ }
+ @include smaller-than($screen-lg) {
+ position: relative;
+ margin-top: $-m;
+ margin-bottom: $-m*2;
+ }
+ }
+ p {
+ font-size: 1.2em;
+ font-weight: 300;
+ }
+}
+
+.logo {
+ text-align: left;
+ margin: $-m 0;
+ h1, img {
+ vertical-align: top;
+ display: inline-block;
+ margin: 0;
+ }
+ h1 {
+ color: #FFF;
+ font-size: 2.666em;
+ font-weight: 400;
+ }
+ img {
+ margin-right: $-l;
+ height: 48px;
+ //padding-top: $-m;
+ }
+}
+
+
+.breadcrumbs span.sep {
+ color: #aaa;
+ padding: 0 $-xs;
+}
+
+.faded {
+ a, button, span {
+ color: #666;
+ }
+ .text-button {
+ opacity: 0.5;
+ transition: all ease-in-out 120ms;
+ &:hover {
+ opacity: 1;
+ text-decoration: none;
+ }
+ }
+}
+
+.faded-small {
+ color: #000;
+ font-size: 0.9em;
+ background-color: rgba(21, 101, 192, 0.15);
+}
+
+.breadcrumbs .text-button, .action-buttons .text-button {
+ display: inline-block;
+ padding: $-s;
+ &:last-child {
+ padding-right: 0;
+ }
+}
+.action-buttons {
+ text-align: right;
+ &.text-left {
+ text-align: left;
+ .text-button {
+ padding-right: $-m;
+ padding-left: 0;
+ }
+ }
+}
+
+.setting-nav {
+ text-align: center;
+ a {
+ padding: $-m;
+ display: inline-block;
+ color: #666;
+ &.selected {
+ border-bottom: 2px solid $primary;
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+* {
+ box-sizing: border-box;
+}
+html {
+ background-color: #FFFFFF;
+ height: 100%;
+}
+body {
+ font-family: $text;
+ font-size: $fs-m;
+ line-height: 1.6;
+ color: #616161;
+ -webkit-font-smoothing: antialiased;
+}
+
+table {
+ min-width: 100px;
+ td {
+ min-width: 10px;
+ padding: 4px 6px;
+ border: 1px solid #DDD;
+ }
+}
\ No newline at end of file
--- /dev/null
+.page-list {
+ h3 {
+ margin: $-l 0 $-m 0;
+ }
+ a.chapter {
+ color: $color-chapter;
+ }
+ .inset-list {
+ display: block;
+ overflow: hidden;
+ // padding-left: $-m;
+ margin-bottom: $-l;
+ }
+ h4 {
+ display: block;
+ margin: $-s 0 0 0;
+ border-left: 5px solid $color-page;
+ padding: $-xs 0 $-xs $-m;
+ }
+ hr {
+ margin-top: 0;
+ }
+ .page, .chapter, .book {
+ padding-left: $-l;
+ }
+ .page {
+ border-left: 5px solid $color-page;
+ }
+ .chapter {
+ border-left: 5px solid $color-chapter;
+ }
+ .book {
+ border-left: 5px solid $color-book;
+ }
+}
+.chapter-toggle {
+ cursor: pointer;
+ margin: 0 0 $-l 0;
+ transition: all ease-in-out 180ms;
+ user-select: none;
+ i {
+ transition: all ease-in-out 180ms;
+ transform: rotate(0deg);
+ transform-origin: 25% 50%;
+ }
+ &.open {
+ margin-bottom: 0;
+ }
+ &.open i {
+ transform: rotate(90deg);
+ }
+}
+
+.page-nav-list {
+ $nav-indent: $-s;
+ margin-left: 2px;
+ list-style: none;
+ li {
+ //border-left: 1px solid rgba(0, 0, 0, 0.1);
+ padding-left: $-xs;
+ border-left: 2px solid #888;
+ margin-bottom: 4px;
+ }
+ li a {
+ color: #555;
+ }
+ .nav-H2 {
+ margin-left: $nav-indent;
+ font-size: 0.95em;
+ }
+ .nav-H3 {
+ margin-left: $nav-indent*2;
+ font-size: 0.90em
+ }
+ .nav-H4 {
+ margin-left: $nav-indent*3;
+ font-size: 0.85em
+ }
+ .nav-H5 {
+ margin-left: $nav-indent*4;
+ font-size: 0.80em
+ }
+ .nav-H6 {
+ margin-left: $nav-indent*5;
+ font-size: 0.75em
+ }
+}
+
+// Sidebar list
+.book-tree {
+ margin-top: $-xl;
+}
+.book-tree h4 {
+ padding: $-m $-s 0 $-s;
+ i {
+ padding-right: $-s;
+ }
+}
+.book-tree .sidebar-page-list {
+ list-style: none;
+ margin: 0;
+ margin-top: $-xs;
+ border-left: 5px solid $color-book;
+ li a {
+ display: block;
+ border-bottom: none;
+ padding-left: $-s;
+ padding: $-xs 0 $-xs $-s;
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ text-decoration: none;
+ }
+ }
+ li, a {
+ display: block;
+ }
+ a.bold {
+ color: #EEE !important;
+ }
+ ul {
+ list-style: none;
+ margin: 0;
+ }
+ .book {
+ color: $color-book !important;
+ &.selected {
+ background-color: rgba($color-book, 0.29);
+ }
+ }
+ .chapter {
+ color: $color-chapter !important;
+ &.selected {
+ background-color: rgba($color-chapter, 0.12);
+ }
+ }
+ .list-item-chapter {
+ border-left: 5px solid $color-chapter;
+ margin: 10px 10px;
+ display: block;
+ }
+ .list-item-page {
+ border-bottom: none;
+ }
+ .page {
+ color: $color-page !important;
+ border-left: 5px solid $color-page;
+ margin: 10px 10px;
+ border-bottom: none;
+ &.selected {
+ background-color: rgba($color-page, 0.1);
+ }
+ }
+}
+
+// Sortable Lists
+.sortable-page-list, .sortable-page-list ul {
+ list-style: none;
+ background-color: #FFF;
+}
+.sort-box {
+ margin-bottom: $-m;
+ padding: 0 $-l 0 $-l;
+ border-left: 4px solid $color-book;
+}
+.sortable-page-list {
+ margin-left: 0;
+ > ul {
+ margin-left: 0;
+ }
+ ul {
+ margin-bottom: 0;
+ margin-top: 0;
+ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
+ }
+ li {
+ border: 1px solid #DDD;
+ padding: $-xs $-s;
+ margin-top: -1px;
+ min-height: 38px;
+ &.text-chapter {
+ border-left: 2px solid $color-chapter;
+ }
+ &.text-page {
+ border-left: 2px solid $color-page;
+ }
+ }
+ li:first-child {
+ margin-top: $-xs;
+ }
+}
+.sortable-page-list li.placeholder {
+ position: relative;
+}
+.sortable-page-list li.placeholder:before {
+ position: absolute;
+}
+
+
+.activity-list-item {
+ padding: $-s 0;
+ color: #888;
+ border-bottom: 1px solid #EEE;
+ font-size: 0.9em;
+ .left {
+ float: left;
+ }
+ .left + .right {
+ margin-left: 30px + $-s;
+ }
+}
\ No newline at end of file
--- /dev/null
+// Responsive breakpoint control
+@mixin smaller-than($size) {
+ @media screen and (max-width: $size) { @content; }
+}
+@mixin larger-than($size) {
+ @media screen and (min-width: $size) { @content; }
+}
+@mixin clearfix() {
+ &:after {
+ display: block;
+ content: '';
+ font-size: 0;
+ clear: both;
+ position: relative;
+ }
+}
--- /dev/null
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+ display: block; }
+
+body {
+ line-height: 1; }
+
+ol, ul {
+ list-style: none; }
+
+blockquote, q {
+ quotes: none; }
+
+blockquote {
+ &:before, &:after {
+ content: '';
+ content: none; } }
+
+q {
+ &:before, &:after {
+ content: '';
+ content: none; } }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0; }
--- /dev/null
+/*
+ * Header Styles
+ */
+
+h1 {
+ font-size: 3.625em;
+ line-height: 1.22222222em;
+ margin-top: 0.48888889em;
+ margin-bottom: 0.48888889em;
+}
+h2 {
+ font-size: 2.8275em;
+ line-height: 1.294117647em;
+ margin-top: 0.8627451em;
+ margin-bottom: 0.43137255em;
+}
+h3 {
+ font-size: 1.75em;
+ line-height: 1.571428572em;
+ margin-top: 0.78571429em;
+ margin-bottom: 0.43137255em;
+}
+h4 {
+ font-size: 1em;
+ line-height: 1.375em;
+ margin-top: 0.78571429em;
+ margin-bottom: 0.43137255em;
+}
+
+h1, h2, h3, h4 {
+ font-weight: 400;
+ position: relative;
+ display: block;
+ color: #555;
+ .subheader {
+ display: block;
+ font-size: 0.5em;
+ line-height: 1em;
+ color: lighten($text-dark, 16%);
+ }
+}
+
+/*
+ * Link styling
+ */
+a, .link {
+ color: $primary;
+ cursor: pointer;
+ text-decoration: none;
+ transition: color ease-in-out 80ms;
+ font-family: $text;
+ line-height: 1.6;
+ &:hover {
+ text-decoration: underline;
+ color: darken($primary, 20%);
+ }
+ i {
+ padding-right: $-s;
+ }
+ i.zmdi-hc-flip-horizontal {
+ padding-right: 0;
+ padding-left: $-s;
+ }
+}
+
+/*
+ * Other HTML Text Elements
+ */
+p, ul, ol, pre, table, blockquote {
+ margin-top: 0.3em;
+ margin-bottom: 1em;
+}
+
+hr {
+ border: 0;
+ height: 1px;
+ border: 0;
+ background: #EAEAEA;
+ margin-bottom: $-l;
+ &.faded {
+ background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
+ }
+ &.margin-top, &.even {
+ margin-top: $-l;
+ }
+}
+
+strong, b, .bold, .strong {
+ font-weight: bold;
+ > strong, > b, > .bold, > .strong {
+ font-weight: bolder;
+ }
+}
+
+em, i, .italic {
+ font-style: italic;
+}
+
+small, p.small, span.small, .text-small {
+ font-size: 0.8em;
+ color: lighten($text-dark, 20%);
+}
+
+sup, .superscript {
+ vertical-align: super;
+ font-size: 0.8em;
+}
+
+pre {
+ font-family: monospace;
+ white-space:pre;
+ font-size: 0.8em;
+ overflow: hidden;
+ border-radius: 4px;
+ box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06);
+ border: 1px solid rgba(221, 221, 221, 0.66);
+ background-color: #fdf6e3;
+ padding: 0.5em;
+}
+
+blockquote {
+ display: block;
+ position: relative;
+ border-left: 4px solid $primary;
+ background-color: #F8F8F8;
+ padding: $-s $-m $-s $-xl;
+ &:before {
+ content: "\201C";
+ font-size: 2em;
+ font-weight: bold;
+ position: absolute;
+ top: $-s;
+ left: $-s;
+ color: lighten($text-dark, 20%);
+ }
+}
+
+.code-base {
+ background-color: #F8F8F8;
+ font-family: monospace;
+ font-size: 0.80em;
+ border: 1px solid #DDD;
+ border-radius: 3px;
+}
+
+code {
+ @extend .code-base;
+ display: inline;
+ padding: 1px 3px;
+ white-space:pre;
+ line-height: 1.2em;
+ margin-bottom: 1.2em;
+}
+
+span.code {
+ @extend .code-base;
+ padding: 1px $-xs;
+}
+/*
+ * Text colors
+ */
+p.pos, p .pos, span.pos, .text-pos {
+ color: $positive;
+ &:hover {
+ color: $positive;
+ }
+}
+
+p.neg, p .neg, span.neg, .text-neg {
+ color: $negative;
+ &:hover {
+ color: $negative;
+ }
+}
+
+p.muted, p .muted, span.muted, .text-muted {
+ color: lighten($text-dark, 26%);
+ &.small, .small {
+ color: lighten($text-dark, 42%);
+ }
+}
+
+p.primary, p .primary, span.primary, .text-primary {
+ color: $primary;
+ &:hover {
+ color: $primary;
+ }
+}
+
+p.secondary, p .secondary, span.secondary, .text-secondary {
+ color: $secondary;
+ &:hover {
+ color: $secondary;
+ }
+}
+
+.text-book {
+ color: $color-book;
+ &:hover {
+ color: $color-book;
+ }
+}
+.text-page {
+ color: $color-page;
+ &:hover {
+ color: $color-page;
+ }
+}
+.text-chapter {
+ color: $color-chapter;
+ &:hover {
+ color: $color-chapter;
+ }
+}
+
+span.highlight {
+ //background-color: rgba($primary, 0.2);
+ font-weight: bold;
+ //padding: 2px 4px;
+}
+
+/*
+ * Lists
+ */
+ul {
+ list-style: disc;
+ margin-left: $-m*1.5;
+}
+
+/*
+ * Generic text styling classes
+ */
+.underlined {
+ text-decoration: underline;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.text-right {
+ text-align: right;
+}
+
+/**
+ * Grouping
+ */
+.header-group {
+ margin: $-m 0;
+ h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ }
+}
+
+span.sep {
+ color: #BBB;
+ padding: 0 $-xs;
+}
+
+.list > * {
+ display: block;
+}
+
+/**
+ * Icons
+ */
+i {
+ padding-right: $-xs;
+}
+
--- /dev/null
+// Variables
+///////////////
+
+// Sizes
+$max-width: 1400px;
+
+// Screen breakpoints
+$xl: 1100px;
+$ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
+$l: 1000px;
+$m: 800px;
+$s: 600px;
+$xs: 400px;
+$xxs: 360px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-sm: 768px;
+
+// Spacing (Margins+Padding)
+$-xxxl: 64px;
+$-xxl: 48px;
+$-xl: 32px;
+$-l: 24px;
+$-m: 16px;
+$-s: 12px;
+$-xs: 6px;
+$-xxs: 3px;
+
+// Fonts
+$heading: 'Roboto', Helvetica, Arial, sans-serif;
+$text: 'Roboto', Helvetica, Arial, sans-serif;
+$fs-m: 15px;
+$fs-s: 14px;
+
+// Colours
+$primary: #0288D1;
+$primary-dark: #0288D1;
+$secondary: #e27b41;
+$positive: #52A256;
+$negative: #E84F4F;
+
+// Item Colors
+$color-book: #009688;
+$color-chapter: #ef7c3c;
+$color-page: $primary;
+
+// Text colours
+$text-dark: #444;
+$text-light: #EEE;
+
+// Shadows
+$bs-light: 0 0 4px 1px #CCC;
+$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
+$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
--- /dev/null
+@import "reset";
+@import "variables";
+@import "mixins";
+@import "html";
+@import "text";
+@import "grid";
+@import "blocks";
+@import "buttons";
+@import "animations";
+@import "header";
+@import "lists";
+
+.md-margin-top {
+ margin-top: $-xxl*1.6;
+ @include smaller-than($screen-lg) {
+ margin-top: $-m;
+ }
+}
+
+.screenshot-container {
+ perspective: 1000px;
+ perspective-origin: 50% 50%;
+}
+.screenshot {
+ border-radius: 4px;
+ display: inline-block;
+ overflow: hidden;
+ box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
+ border: 1px solid #DDD;
+ position: absolute;
+ max-width: 100%;
+ transform: rotateY(0);
+ transition: all ease-in-out 200ms;
+ &:hover {
+ transform: rotateY(-20deg);
+ }
+ @include smaller-than($screen-lg) {
+ position: relative;
+ width: 80%;
+ display: block;
+ margin-bottom: $-l;
+ }
+}
+
+footer {
+ padding-bottom: $-s;
+}
+
+
+h3 > i {
+ color: $primary;
+ vertical-align: top;
+ padding-top: 8px;
+ padding-right: $-s;
+}
+
+p > i {
+ vertical-align: top;
+}
\ No newline at end of file
--- /dev/null
+
+var wow = new WOW(
+ {
+ boxClass: 'wow', // animated element css class (default is wow)
+ animateClass: 'anim', // animation css class (default is animated)
+ offset: 80, // distance to the element when triggering the animation (default is 0)
+ mobile: true, // trigger animations on mobile devices (default is true)
+ live: true, // act on asynchronously loaded content (default is true)
+ scrollContainer: null // optional scroll container selector, otherwise use window
+ }
+);
+wow.init();
\ No newline at end of file
projects / website / commitdiff