Converted to php, added blog, made icons svg, localised assets, inlined css

diff --git a/gulpfile.js b/gulpfile.js
index 07d3cc8d0941ecbe70180dd715cf55ea894fc0a5..215748c7d0290ca8b497de80c8078eceae9629e7 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -11,9 +11,8 @@ var browserSync = require('browser-sync').create();
   gulp.task('browser-sync', function() {    browserSync.init({    gulp.task('browser-sync', function() {    browserSync.init({ 
-    server: { -       baseDir: "./public/" -    } +    proxy: "localhost", +    startPath: 'bookstack-site/public' 
   });  });      });  });   

@@ -36,7 +35,7 @@ gulp.task('styles', function(){
     .pipe(rename({suffix: '.min'}))      .pipe(minifycss())      .pipe(gulp.dest('public/dist/'))      .pipe(rename({suffix: '.min'}))      .pipe(minifycss())      .pipe(gulp.dest('public/dist/')) 
-    .pipe(browserSync.stream()) +    .pipe(browserSync.stream()); 
 });    gulp.task('scripts', function(){  });    gulp.task('scripts', function(){ 

@@ -59,7 +58,7 @@ gulp.task('scripts', function(){
 gulp.task('default', ['styles', 'scripts']);    gulp.task('watch', ['browser-sync'], 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    gulp.watch('sass/*.scss', ['styles']);    gulp.watch('scripts/*.js', ['scripts']);  }); \ No newline at end of file 

diff --git a/public/fonts/roboto-v15-latin-300.woff b/public/fonts/roboto-v15-latin-300.woff
new file mode 100644 (file) index 0000000..7e6c479 Binary files /dev/null and b/public/fonts/roboto-v15-latin-300.woff differ

diff --git a/public/fonts/roboto-v15-latin-300.woff2 b/public/fonts/roboto-v15-latin-300.woff2
new file mode 100644 (file) index 0000000..c34c128 Binary files /dev/null and b/public/fonts/roboto-v15-latin-300.woff2 differ

diff --git a/public/fonts/roboto-v15-latin-500.woff b/public/fonts/roboto-v15-latin-500.woff
new file mode 100644 (file) index 0000000..a1b9176 Binary files /dev/null and b/public/fonts/roboto-v15-latin-500.woff differ

diff --git a/public/fonts/roboto-v15-latin-500.woff2 b/public/fonts/roboto-v15-latin-500.woff2
new file mode 100644 (file) index 0000000..5f96609 Binary files /dev/null and b/public/fonts/roboto-v15-latin-500.woff2 differ

diff --git a/public/fonts/roboto-v15-latin-700.woff b/public/fonts/roboto-v15-latin-700.woff
new file mode 100644 (file) index 0000000..bf737c1 Binary files /dev/null and b/public/fonts/roboto-v15-latin-700.woff differ

diff --git a/public/fonts/roboto-v15-latin-700.woff2 b/public/fonts/roboto-v15-latin-700.woff2
new file mode 100644 (file) index 0000000..11cde5d Binary files /dev/null and b/public/fonts/roboto-v15-latin-700.woff2 differ

diff --git a/public/fonts/roboto-v15-latin-regular.woff b/public/fonts/roboto-v15-latin-regular.woff
new file mode 100644 (file) index 0000000..941dfa4 Binary files /dev/null and b/public/fonts/roboto-v15-latin-regular.woff differ

diff --git a/public/fonts/roboto-v15-latin-regular.woff2 b/public/fonts/roboto-v15-latin-regular.woff2
new file mode 100644 (file) index 0000000..120796b Binary files /dev/null and b/public/fonts/roboto-v15-latin-regular.woff2 differ

diff --git a/public/icons/book.svg b/public/icons/book.svg
new file mode 100644 (file) index 0000000..2792340
--- /dev/null
+++ b/public/icons/book.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/build.svg b/public/icons/build.svg
new file mode 100644 (file) index 0000000..7978189
--- /dev/null
+++ b/public/icons/build.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/code.svg b/public/icons/code.svg
new file mode 100644 (file) index 0000000..d167160
--- /dev/null
+++ b/public/icons/code.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/collections_bookmark.svg b/public/icons/collections_bookmark.svg
new file mode 100644 (file) index 0000000..6c8fd44
--- /dev/null
+++ b/public/icons/collections_bookmark.svg
@@ -0,0 +1,6 @@
+<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 

diff --git a/public/icons/description.svg b/public/icons/description.svg
new file mode 100644 (file) index 0000000..2e8be40
--- /dev/null
+++ b/public/icons/description.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/directions_boat.svg b/public/icons/directions_boat.svg
new file mode 100644 (file) index 0000000..27e6931
--- /dev/null
+++ b/public/icons/directions_boat.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/image.svg b/public/icons/image.svg
new file mode 100644 (file) index 0000000..7a1f19c
--- /dev/null
+++ b/public/icons/image.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/laptop_chromebook.svg b/public/icons/laptop_chromebook.svg
new file mode 100644 (file) index 0000000..714a399
--- /dev/null
+++ b/public/icons/laptop_chromebook.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/menu.svg b/public/icons/menu.svg
new file mode 100644 (file) index 0000000..3521f19
--- /dev/null
+++ b/public/icons/menu.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/rss_feed.svg b/public/icons/rss_feed.svg
new file mode 100644 (file) index 0000000..9291694
--- /dev/null
+++ b/public/icons/rss_feed.svg
@@ -0,0 +1,5 @@
+<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 

diff --git a/public/icons/search.svg b/public/icons/search.svg
new file mode 100644 (file) index 0000000..9b1073e
--- /dev/null
+++ b/public/icons/search.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/star.svg b/public/icons/star.svg
new file mode 100644 (file) index 0000000..e02b658
--- /dev/null
+++ b/public/icons/star.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/storage.svg b/public/icons/storage.svg
new file mode 100644 (file) index 0000000..ad2f909
--- /dev/null
+++ b/public/icons/storage.svg
@@ -0,0 +1,4 @@
+<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 

diff --git a/public/icons/touch_app.svg b/public/icons/touch_app.svg
new file mode 100644 (file) index 0000000..2922654
--- /dev/null
+++ b/public/icons/touch_app.svg
@@ -0,0 +1,9 @@
+<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 

diff --git a/public/index.html b/public/index.php
similarity index 66% rename from public/index.html rename to public/index.php index 0f25a0511ab1fbd5052c035385d7efbae8b8895a..a39234343b4ca3656b268ec0af36e290d9fbd4ae 100644 (file)
--- a/public/index.html
+++ b/public/index.php
@@ -1,3 +1,41 @@
+<?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">    <!DOCTYPE html>  <html lang="en">   

@@ -5,11 +43,15 @@
     <meta charset="UTF-8">      <meta name="viewport" content="initial-scale=1">      <title>BookStack | A Simple and Free Documenation Platform</title>      <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>  </head>    <body> 
+ 
     <script>      // Standard Google Analytics Stuff      (function(i, s, o, g, r, a, m) {      <script>      // Standard Google Analytics Stuff      (function(i, s, o, g, r, a, m) { 

@@ -30,19 +72,22 @@
       <header id="header">          <div class="container">        <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="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">                  </div>              </div>              <div class="row"> 

@@ -61,7 +106,7 @@
         <h2 id="features">Features</h2>          <div class="row">              <div class="col-sm-4">          <h2 id="features">Features</h2>          <div class="row">              <div class="col-sm-4"> 
-                <h3><i class="material-icons">code</i>Free &amp; Open Source</h3> +                <h3><span class="icon"><?php icon('code'); ?></span>Free &amp; 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>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> 

@@ -69,16 +114,16 @@
                 </p>              </div>              <div class="col-sm-4" >                  </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>                  <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 &nbsp;&nbsp;<i class="material-icons text-chapter">collections_bookmark</i> Chapters&nbsp;&nbsp; <i class="material-icons text-page">description</i> Pages +                    <span class="icon book"><?php icon('book'); ?></span>Books &nbsp;&nbsp;<span class="icon chapter"><?php icon('collections_bookmark'); ?></span>Chapters&nbsp;&nbsp; <span class="icon page"><?php icon('description'); ?></span>Pages 
                 </p>              </div>              <div class="col-sm-4" >                  </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 &amp; pages. The ability to link directly to any paragraph allows you to keeps your documentation connected.                  </p>                  <p>                      The content in BookStack is fully searchable. You are able to search at book level or across all books, chapters &amp; pages. The ability to link directly to any paragraph allows you to keeps your documentation connected.                  </p> 

@@ -89,19 +134,19 @@
         </p>          <div class="row">              <div class="col-sm-4">          </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" >                  <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" >                  <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>                  <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> 

@@ -129,10 +174,10 @@
                        </div>                         <div class="col-sm-6 text-center">                                         <div class="demo-box text-left " >                         </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>                                         </div>                         </div>                 </div> 

@@ -144,7 +189,7 @@
                        <h2 class="nomargin margin-bottom" id="screenshots">Screenshots</h2>                         <div class="my-gallery">                                 <div class="row">                         <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">                                                 <h3>Page View</h3>                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/page-view.png" data-size="1920x1080"> 

@@ -152,7 +197,7 @@
                                                    </a>                                                 </figure>                                         </div>                                                     </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">                                                 <h3>Page Editor</h3>                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/page-edit.png" data-size="1920x1080"> 

@@ -160,7 +205,7 @@
                                                    </a>                                                 </figure>                                         </div>                                                     </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">                                                 <h3>Image Manager</h3>                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/image-manager.png" data-size="1920x1080"> 

@@ -171,7 +216,7 @@
                                </div>                                   <div class="row">                                 </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">                                                 <h3>All Books Overview</h3>                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/books-view.png" data-size="1920x1080"> 

@@ -179,7 +224,7 @@
                                                    </a>                                                 </figure>                                         </div>                                                     </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">                                                 <h3>Book Overview</h3>                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/book-overview.png" data-size="1920x1080"> 

@@ -187,7 +232,7 @@
                                                    </a>                                                 </figure>                                         </div>                                                     </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">                                                 <h3>Book Sorting</h3>                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/book-sorting.png" data-size="1920x1080"> 

@@ -198,7 +243,7 @@
                                </div>                                   <div class="row">                                 </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">                                                 <h3>Global Search</h3>                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/search.png" data-size="1920x1080"> 

@@ -206,7 +251,7 @@
                                                    </a>                                                 </figure>                                         </div>                                                     </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">                                                 <h3>App Settings</h3>                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">                                                     <a href="images/screenshots/settings-view.png" data-size="1920x1080"> 

@@ -214,7 +259,7 @@
                                                    </a>                                                 </figure>                                         </div>                                                     </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">                                                 <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"> 

@@ -228,20 +273,36 @@
                </div>         </div>                   </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) ?>">&raquo;</a></p> +                    </div> +                </div> +              <?php endforeach; ?> +              <div class="padded-top"><a class="button" href="/blog">Read the blog &raquo;</a></div>     +        </div> +    </div> + +    <footer> 
         <div class="container">              <div class="row">          <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>                         <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>          </div> 

@@ -285,9 +346,9 @@
            </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>  </body>    </html> 

diff --git a/sass/_header.scss b/sass/_header.scss
index a39fcdcd8b60c81c2895e55426af26d13a204c6b..1e95bd8195958bad027db943bfeebec40ff10e4c 100644 (file)
--- a/sass/_header.scss
+++ b/sass/_header.scss
@@ -32,6 +32,9 @@ header {
     font-size: 1.2em;      font-weight: 300;    }      font-size: 1.2em;      font-weight: 300;    } 
+  .icon svg { +    fill: #FFF; +  } 
 }    .logo {  }    .logo { 

@@ -62,59 +65,3 @@ header {
     }    }  }      }    }  } 
- - -.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 

diff --git a/sass/_lists.scss b/sass/_lists.scss
deleted file mode 100644 (file) index f06e647..0000000
--- a/sass/_lists.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-.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 

diff --git a/sass/_text.scss b/sass/_text.scss
index d456ef3dd012936c9c253531f3558146f7ddd02e..fcc08f3c8cacfcecd447c6377ec7fec66bfc592c 100644 (file)
--- a/sass/_text.scss
+++ b/sass/_text.scss
@@ -1,3 +1,40 @@
+/* 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   */  /*   * Header Styles   */ 

@@ -268,7 +305,20 @@ span.sep {
 /**    * Icons    */  /**    * Icons    */ 
-i { +span.icon { 
   padding-right: $-xs;    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; } + 

diff --git a/sass/styles.scss b/sass/styles.scss
index cb9c8d97f7cf7df97e196013bef0ddf327d52b25..0eb217a4bb20fd9a3773f17254fd35c8b4205395 100644 (file)
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -7,7 +7,6 @@
 @import "blocks";  @import "buttons";  @import "header";  @import "blocks";  @import "buttons";  @import "header"; 
-@import "lists"; 
 @import "photoswipe";    .md-margin-top {  @import "photoswipe";    .md-margin-top { 

@@ -54,8 +53,9 @@ header .menu, footer .menu {
   a {      display: inline-block;      padding: $-m;    a {      display: inline-block;      padding: $-m; 
+    line-height: 1.9; 
   }    } 
-  i.material-icons { +  span.icon { 
     font-size: 18px;      vertical-align: top;      padding-right: 4px;      font-size: 18px;      vertical-align: top;      padding-right: 4px; 

@@ -69,6 +69,63 @@ header .menu a {
   color: #FFF;  }      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;  footer {    padding-top: $-l;    padding-bottom: $-l;