gulp.task('browser-sync', function() {
browserSync.init({
- server: {
- baseDir: "./public/"
- }
+ proxy: "localhost",
+ startPath: 'bookstack-site/public'
});
});
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('public/dist/'))
- .pipe(browserSync.stream())
+ .pipe(browserSync.stream());
});
gulp.task('scripts', function(){
gulp.task('default', ['styles', 'scripts']);
gulp.task('watch', ['browser-sync'], function(){
- gulp.watch("public/*.html", ['bs-reload']);
+ gulp.watch(["public/*.*", "public/**/*"], ['bs-reload']);
gulp.watch('sass/*.scss', ['styles']);
gulp.watch('scripts/*.js', ['scripts']);
});
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/>
+ <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0V0z" fill="none"/>
+ <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0V0z" fill="none"/>
+ <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"/>
+ <path d="M0 0h24v24H0V0z" fill="none"/>
+ <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10l-2.5-1.5L15 12V4h5v8z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78s-.34-.42-.6-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.26.08-.48.26-.6.5s-.15.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M22 18V3H2v15H0v2h24v-2h-2zm-8 0h-4v-1h4v1zm6-3H4V5h16v10z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <circle cx="6.18" cy="17.82" r="2.18"/>
+ <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+ <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M2 20h20v-4H2v4zm2-3h2v2H4v-2zM2 4v4h20V4H2zm4 3H4V5h2v2zm-4 7h20v-4H2v4zm2-3h2v2H4v-2z"/>
+</svg>
\ No newline at end of file
--- /dev/null
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path d="M0 0h24v24H0V0z" id="a"/>
+ </defs>
+ <clipPath id="b">
+ <use overflow="visible" xlink:href="#a"/>
+ </clipPath>
+ <path clip-path="url(#b)" d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>
+</svg>
\ No newline at end of file
+<?php
+
+ // Get Blog articles
+ $blogRss = 'https://www.bookstackapp.com/blog/rss/';
+ $localRssLocation = 'dist/blog.rss';
+ $cacheTimeSeconds = '864000';
+
+ if (file_exists($localRssLocation)) {
+ $lastModified = filemtime($localRssLocation);
+ if (time() - $lastModified >= $cacheTimeSeconds) {
+ $contents = file_get_contents($blogRss);
+ file_put_contents($localRssLocation, $contents);
+ } else {
+ $contents = file_get_contents($localRssLocation);
+ }
+ } else {
+ $contents = file_get_contents($blogRss);
+ file_put_contents($localRssLocation, $contents);
+ }
+
+ $blogItems = [];
+ $rss = simplexml_load_string($contents);
+ if ($rss !== false) {
+ foreach ($rss->channel->{'item'} as $item) {
+ $blogItems[] = $item;
+ }
+ }
+ $blogItems = array_slice($blogItems, 0, 3);
+
+ // Since this is only one page, import the styles to speed things up
+ $styles = file_get_contents('dist/styles.min.css');
+
+ // SVG icon helper
+ function icon($name) {
+ echo(file_get_contents('icons/' . $name . '.svg'));
+ }
+ ?>
+
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>BookStack | A Simple and Free Documenation Platform</title>
- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Material+Icons' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="dist/styles.min.css">
+
+ <style>
+ <?php echo($styles); ?>
+ </style>
+
</head>
<body>
+
<script>
// Standard Google Analytics Stuff
(function(i, s, o, g, r, a, m) {
<header id="header">
<div class="container">
- <div class="row">
- <div class="col-sm-4">
+ <div class="row fix-mobile">
+ <div class="col-sm-5 col-xs-8">
<div class="logo">
<img src="logo.svg" alt="BookStack">
<h1>BookStack</h1>
</div>
</div>
- <div class="col-sm-8 menu">
- <a href="#features"><i class="material-icons">stars</i> Features</a>
- <a href="#demo"><i class="material-icons">touch_app</i> Demo</a>
- <a href="#screenshots"><i class="material-icons">image</i> Screenshots</a>
- <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><i class="material-icons">code</i> Github</a>
- <a href="/blog" target="_blank"><i class="material-icons">rss_feed</i> Blog</a>
+ <div class="col-sm-7 menu col-xs-4">
+ <button id="menu-button" class="button muted" type="button"><?php icon('menu'); ?></button>
+ <div class="inner">
+ <a href="#features"><span class="icon"><?php icon('star'); ?></span> Features</a>
+ <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
+ <a href="#screenshots"><span class="icon"><?php icon('image'); ?></span> Screenshots</a>
+ <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><span class="icon"><?php icon('code'); ?></span> Github</a>
+ <a href="/blog" target="_blank"><span class="icon"><?php icon('rss_feed'); ?></span> Blog</a>
+ </div>
</div>
</div>
<div class="row">
<h2 id="features">Features</h2>
<div class="row">
<div class="col-sm-4">
- <h3><i class="material-icons">code</i>Free & Open Source</h3>
+ <h3><span class="icon"><?php icon('code'); ?></span>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>
</p>
</div>
<div class="col-sm-4" >
- <h3><i class="material-icons">laptop_chromebook</i>Easy, Simple Interface</h3>
+ <h3><span class="icon"><?php icon('laptop_chromebook'); ?></span>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
+ <span class="icon book"><?php icon('book'); ?></span>Books <span class="icon chapter"><?php icon('collections_bookmark'); ?></span>Chapters <span class="icon page"><?php icon('description'); ?></span>Pages
</p>
</div>
<div class="col-sm-4" >
- <h3><i class="material-icons">search</i>Searchable and Connected</h3>
+ <h3><span class="icon"><?php icon('search'); ?></span>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>
</p>
<div class="row">
<div class="col-sm-4">
- <h3><i class="material-icons">build</i>Configurable</h3>
+ <h3><span class="icon"><?php icon('build'); ?></span>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" >
- <h3><i class="material-icons">storage</i>Simple Requirements</h3>
+ <h3><span class="icon"><?php icon('storage'); ?></span>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" >
- <h3><i class="material-icons">directions_boat</i>Powerful Features</h3>
+ <h3><span class="icon"><?php icon('directions_boat'); ?></span>Powerful Features</h3>
<p>
On top of the powerful search and linking there is also cross-book sorting, Page revisions, Image management. Some more mega-features are planned such as static-site generation and quick exporting.
</p>
</div>
<div class="col-sm-6 text-center">
<div class="demo-box text-left " >
- <label>Demo
Site Url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br>
- <label>Admin Email</label> <br><input type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br>
- <label>Admin Password</label> <br><input type="text" onclick="this.select();" value="password" readonly="true"> <br><br>
- <a href="https://demo.bookstackapp.com" class="button" target="_blank">Open Demo Site</a>
+ <label>Demo
site url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br>
+ <label>Admin email</label> <br><input type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br>
+ <label>Admin password</label> <br><input type="text" onclick="this.select();" value="password" readonly="true"> <br><br>
+ <a href="https://demo.bookstackapp.com" class="button" target="_blank">Open demo site</a>
</div>
</div>
</div>
<h2 class="nomargin margin-bottom" id="screenshots">Screenshots</h2>
<div class="my-gallery">
<div class="row">
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Page View</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/page-view.png" data-size="1920x1080">
</a>
</figure>
</div>
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Page Editor</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/page-edit.png" data-size="1920x1080">
</a>
</figure>
</div>
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Image Manager</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/image-manager.png" data-size="1920x1080">
</div>
<div class="row">
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>All Books Overview</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/books-view.png" data-size="1920x1080">
</a>
</figure>
</div>
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Book Overview</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/book-overview.png" data-size="1920x1080">
</a>
</figure>
</div>
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Book Sorting</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/book-sorting.png" data-size="1920x1080">
</div>
<div class="row">
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Global Search</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/search.png" data-size="1920x1080">
</a>
</figure>
</div>
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>App Settings</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/settings-view.png" data-size="1920x1080">
</a>
</figure>
</div>
- <div class="col-sm-4 col-xs-6">
+ <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Profile Update Page</h3>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/profile-edit-view.png" data-size="1920x1080">
</div>
</div>
- <footer class="shaded">
+
+ <div class="shaded md-margin-top padded-vertical large">
+ <div class="container">
+ <h2>Latest From The Blog</h2>
+ <?php foreach($blogItems as $blogItem): ?>
+ <div class="row">
+ <div class="col-md-8">
+ <h3><a href="<?php echo($blogItem->link) ?>"><?php echo($blogItem->title) ?></a></h3>
+ <p><?php echo(strip_tags($blogItem->description)) ?> <a href="<?php echo($blogItem->link) ?>">»</a></p>
+ </div>
+ </div>
+ <?php endforeach; ?>
+ <div class="padded-top"><a class="button" href="/blog">Read the blog »</a></div>
+ </div>
+ </div>
+
+ <footer>
<div class="container">
<div class="row">
- <div class="col-sm-6">
+ <div class="col-sm-3">
<p>
BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank">Dan Brown</a>
</p>
</div>
- <div class="col-sm-6 menu">
- <a href="#features"><i class="material-icons">stars</i> Features</a>
- <a href="#demo"><i class="material-icons">touch_app</i> Demo</a>
- <a href="#screenshots"><i class="material-icons">image</i> Screenshots</a>
- <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><i class="material-icons">code</i> Github</a>
- <a href="/blog" target="_blank"><i class="material-icons">rss_feed</i> Blog</a>
+ <div class="col-sm-9 menu">
+ <a href="#features"><span class="icon"><?php echo file_get_contents('icons/star.svg') ?></span> Features</a>
+ <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
+ <a href="#screenshots"><span class="icon"><?php icon('image'); ?></span> Screenshots</a>
+ <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><span class="icon"><?php icon('code'); ?></span> Github</a>
+ <a href="/blog" target="_blank"><span class="icon"><?php icon('rss_feed'); ?></span> Blog</a>
</div>
</div>
</div>
</div>
</div>
- <script src="libs/photoswipe.min.js"></script>
- <script src="libs/photoswipe-ui-default.min.js"></script>
- <script src="dist/main.min.js"></script>
+ <script async src="libs/photoswipe.min.js"></script>
+ <script async src="libs/photoswipe-ui-default.min.js"></script>
+ <script async src="dist/main.min.js"></script>
</body>
</html>
font-size: 1.2em;
font-weight: 300;
}
+ .icon svg {
+ fill: #FFF;
+ }
}
.logo {
}
}
}
-
-
-.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
-.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
+/* roboto-300 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'),
+ url('fonts/roboto-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+ url('fonts/roboto-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-regular - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'),
+ url('fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+ url('fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-500 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'),
+ url('fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+ url('fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-700 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Roboto Bold'), local('Roboto-Bold'),
+ url('fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+ url('fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
/*
* Header Styles
*/
/**
* Icons
*/
-i {
+span.icon {
padding-right: $-xs;
+ vertical-align: middle;
+ line-height: 1;
+ display: inline-block;
+ width: 24px + $-s;
+ svg {
+ fill: $primary;
+ display: inline-block;
+ vertical-align: top;
+ }
}
+.icon.book svg { fill: $color-book; }
+.icon.chapter svg { fill: $color-chapter; }
+.icon.page svg { fill: $color-page; }
+
@import "blocks";
@import "buttons";
@import "header";
-@import "lists";
@import "photoswipe";
.md-margin-top {
a {
display: inline-block;
padding: $-m;
+ line-height: 1.9;
}
- i.material-icons {
+ span.icon {
font-size: 18px;
vertical-align: top;
padding-right: 4px;
color: #FFF;
}
+header #menu-button {
+ display: none;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ padding-top: $-m;
+}
+
+header #menu-button:focus + .inner {
+ display: block;
+}
+
+@include smaller-than($xl) {
+ body header {
+ padding-top: $-xxl*1.2;
+ }
+ header .row.fix-mobile {
+ top: 0;
+ position: fixed;
+ background-color: $primary;
+ width: 100%;
+ z-index: 99;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+ }
+ header #menu-button {
+ display: inline-block;
+ }
+ header .menu .inner {
+ display: none;
+ right: $-m;
+ overflow: hidden;
+ position: fixed;
+ border-radius: 3px;
+ width: 240px;
+ background-color: #FFF;
+ z-index: 55;
+ padding: 0;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
+ &:focus, &:active {
+ display: block;
+ }
+ a {
+ color: #444;
+ display: block;
+ text-align: left;
+ border-bottom: 1px solid #EEE;
+ padding: $-m $-m*2;
+ }
+ a .icon svg {
+ fill: #444;
+ }
+ }
+ footer .menu {
+ display: none;
+ }
+}
+
footer {
padding-top: $-l;
padding-bottom: $-l;
projects / website / commitdiff