Better handling of a long title; option to disable the share FAB; --> Version 0.6

config.php

@@ -24,6 +24,8 @@ $blogmainname = '';
 $blogintro = 'yes';
 // Disqus - Provide here your Disqus shortname. Leave empty if you don't want to use it.
 $blogdisqus = 'rangitaki';
+// Share FAB - this enables or disables the share button
+$sharefab = 'yes';
 // Google Analytics - Provide here your Google Analytics Tracking-ID. Leave empty if you don't want to use it.
 $bloganalytics = '';
 // Footer - set here the text for your footer (e.g. a copyright info).  You can replace the whole text after the '=' with your own one.

index.php

@@ -126,7 +126,7 @@ THE SOFTWARE.
                             } else {
                                 ?>
                             </a>
-                        › <a href="<?php echo "./?blog=$getblog"?>">
+                            › <a href="<?php echo "./?blog=$getblog" ?>">
                                 <?php
                                 echo BlogListGenerator::getName("./blogs/$getblog.md");
                             }
@@ -134,6 +134,7 @@ THE SOFTWARE.
                         </a>
                     </span>
                 </nobr>
+                <div class="fadeout"></div>
             </div>
             <?php
             if (file_exists("blogs/$blog.md") && $getarticle == "" && $blogintro == "yes" && $gettag == "") {
@@ -182,14 +183,17 @@ THE SOFTWARE.
             <div class="footer">
                 <?php echo $blogfooter; ?>
             </div>
+            <?php
+            if ($sharefab == "yes") {
+                ?>
                 <div class="fabmenu">
                     <div class="subfab">
-                    <a href='mailto:?subject=<?php echo $blogtitle; ?>&body=<?php echo $LANG_Check_out_this_blog;?>: <?php echo $url; ?>'  target="blank">
+                        <a href='mailto:?subject=<?php echo $blogtitle; ?>&body=<?php echo $LANG_Check_out_this_blog; ?>: <?php echo $url; ?>'  target="blank">
                             <img src="./res/img/email.svg" class="subfab-img" />
                         </a>
                     </div>
                     <div class="subfab">    
-                    <a href='https://twitter.com/intent/tweet?text=<?php echo $LANG_Check_out;?>: <?php echo $url; ?>&original_referer='  target="blank">
+                        <a href='https://twitter.com/intent/tweet?text=<?php echo $LANG_Check_out; ?>: <?php echo $url; ?>&original_referer='  target="blank">
                             <img src="./res/img/twitter.svg" class="subfab-img" />
                         </a>
                     </div>
@@ -207,6 +211,9 @@ THE SOFTWARE.
                         <img src="./res/img/share.svg" class="fab-img" alt="Share" />
                     </div>
                 </div>
+                <?php
+            }
+            ?>
         </div>
         <script src="./res/js/jquery-2.1.4.min.js"></script>
         <script src="./res/js/app.js"></script>

res/css/rangitaki.css

@@ -72,6 +72,14 @@ body{
     color: #fff;
 }
 
+.fadeout{
+    position: absolute;
+    height: 64px;
+    top: 0px;
+    right: 0px;
+    width: 40px;
+}
+
 .nav-img{
     height: 26px;
     padding: 19px;

themes/background-img.css

@@ -30,7 +30,7 @@ body{
     font-family: "Roboto", sans-serif;
     background: #f6f6f6;
     color: #383838;
-    background-image: url(http://marcel-kapfer.de/res/img/druck.png);
+    background-image: url(//marcel-kapfer.de/res/img/druck.png);
     background-size: cover;
     background-attachment: fixed;
     background-position: top center;
@@ -51,6 +51,14 @@ body{
     color: #fff;
 }
 
+.fadeout{
+    background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, rgba(0, 0, 0, 0.45) 100%); /* FF3.6+ */
+    background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%); /* W3C */
+}
+
 .nav{
     background-color: #fff;
     border-right: 1px solid #e0e0e0;

themes/material-dark.css

@@ -47,6 +47,14 @@ body{
     color: #fff;
 }
 
+.fadeout{
+    background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, #212121 100%); /* FF3.6+ */
+    background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,#212121 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba(30,87,153,0) 0%,#212121 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba(30,87,153,0) 0%,#212121 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba(30,87,153,0) 0%,#212121 100%); /* W3C */
+}
+
 .nav{
     background-color: #424242;
     border-right: 1px solid #1f1f1f;

themes/material-light.css

@@ -47,6 +47,14 @@ body{
     color: #fff;
 }
 
+.fadeout{
+    background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, #ff4415 100%); /* FF3.6+ */
+    background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,#ff4415 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba(30,87,153,0) 0%,#ff4415 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba(30,87,153,0) 0%,#ff4415 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba(30,87,153,0) 0%,#ff4415 100%); /* W3C */
+}
+
 .nav{
     background-color: #fff;
     border-right: 1px solid #e0e0e0;