https://github.com/b3log/solo/issues/12805 footer

Bubble/css/base.scss

@@ -31,7 +31,7 @@
 $fade-lighter: rgba(255, 255, 255, .8) !default;
 $gray: #738a94 !default;
 $black: #15171a !default;
-$black-bg: #090a0b !default;
+$black-bg: #232323 !default;
 $link: rgb(119, 182, 255) !default;
 
 body {
@@ -106,6 +106,58 @@ a {
   }
 }
 
+@keyframes bounceInLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes beating {
+  0% {
+    transform: scale(1)
+  }
+
+  20% {
+    transform: scale(1.6)
+  }
+
+  30% {
+    transform: scale(1)
+  }
+
+  50% {
+    transform: scale(1.6)
+  }
+
+  70%,to {
+    transform: scale(1)
+  }
+}
+
 .wrapper {
   max-width: 1040px;
   margin: 0 auto;
@@ -114,6 +166,7 @@ a {
 
 .header {
   position: relative;
+  z-index: 1;
 
   #canvas {
     position: absolute;
@@ -171,6 +224,7 @@ a {
     display: flex;
     justify-content: center;
     flex-direction: column;
+    z-index: 1;
   }
 
   &__h1 {
@@ -213,6 +267,10 @@ a {
     position: absolute;
     bottom: 10px;
     cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
   }
 
   //&__nav {
@@ -241,23 +299,144 @@ a {
   //}
 }
 
-.footer {
+.side {
-  font-size: 13px;
+  &__menu {
-  padding: 20px 0;
+    position: fixed;
-  background-color: $black-bg;
+    z-index: 2;
-  color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.6);
-
+    border-radius: 3px;
-  a {
+    font-size: 12px;
-    color: $fade-lighter;
+    text-transform: uppercase;
+    color: #fff;
+    top: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    cursor: pointer;
+    transition: left .3s ease;
 
     &:hover {
-      text-decoration: none;
+      opacity: .6;
-      color: #fff;
+    }
+
+    &--edge {
+      left: -3px;
+      font-size: 0;
+      background-color: #333;
     }
   }
 
-  .fn__right {
+  &__main {
-    text-align: right;
+    display: none;
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    z-index: 3;
+    transition: all 1s ease;
+
+    &--show {
+      opacity: 1;
+
+      .side__bg {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+
+      .side__panel {
+        animation-name: bounceInLeft;
+      }
+    }
+  }
+
+  &__bg {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    transition: background-color 1s ease;
+  }
+
+  &__panel {
+    width: 280px;
+    height: 100vh;
+    overflow: auto;
+    background: #000 url(../images/side-bg.gif) top / contain no-repeat;
+    animation-name: bounceOutLeft;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    position: fixed;
+    left: 0;
+    z-index: 4;
+    top: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+    color: #555;
+    opacity: .5;
+    transition: all .5s ease-out;
+    &--bottom {
+      transform: rotate(-180deg);
+    }
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.footer {
+  font-size: 12px;
+  padding: 20px 0;
+  background-color: $black-bg;
+  color: #888;
+  margin-top: 200px;
+  line-height: 24px;
+  text-align: center;
+
+  .wrapper {
+    position: relative;
+    &:after {
+      background: url(../images/footer.png) no-repeat center center / cover;
+      position: absolute;
+      bottom: 88px;
+      left: 0;
+      width: 100%;
+      pointer-events: none;
+      content: "";
+      height: 300px;
+    }
+  }
+
+  &__heart {
+    display: inline-block;
+    animation: beating 1s infinite;
+    animation-timing-function: ease-out;
+    margin: 0 3px 5px 5px;
+  }
+
+  svg {
+    margin: 0 5px;
+  }
+
+  a {
+    color: #2daebf;
+
+    &:hover {
+      text-decoration: none;
+      color: #f60;
+    }
   }
 }
 

Bubble/footer.ftl

@@ -18,37 +18,28 @@
 
 -->
 <footer class="footer">
-    <div class="wrapper fn__clear">
+    <div class="wrapper">
-        <div class="fn__left">
+        &copy; ${year}
-            &copy; ${year}
+        <a href="${servePath}">${blogTitle}</a>
-            <a href="${servePath}">${blogTitle}</a>
+        ${footerContent}
-            ${footerContent} &nbsp;•&nbsp;
+        <span class="footer__heart">❤️</span>
-            Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
+        Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
-            <br>
+        <br>
-            Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
+        Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
-            <sup>[<a href="https://github.com/TryGhost/Casper" target="_blank">ref</a>]</sup>
+        <sup>[<a href="https://www.cnblogs.com/jajian" target="_blank">ref</a>]</sup>
-            by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
+        by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a> <br>
-        </div>
+        <#include "../../common-template/macro-user_site.ftl">
-        <div class="fn__right">
+        <@userSite dir=""></@userSite> <br>
-            <a href="${servePath}/tags.html" rel="section">
+        ${statistic.statisticPublishedBlogArticleCount} ${articleLabel} &nbsp;
-            ${allTagsLabel}
+        ${statistic.statisticPublishedBlogCommentCount} ${commentLabel} &nbsp;
-            </a>
+        ${statistic.statisticBlogViewCount} ${viewLabel} &nbsp;
-            &nbsp;•&nbsp;
+        ${onlineVisitorCnt} ${onlineVisitorLabel}
-            <a href="${servePath}/archives.html">
-            ${archiveLabel}
-            </a>
-            &nbsp;•&nbsp;
-            <a rel="archive" href="${servePath}/links.html">
-            ${linkLabel}
-            </a>
-            <br>
-            ${statistic.statisticPublishedBlogArticleCount} ${articleLabel} &nbsp;
-            ${statistic.statisticPublishedBlogCommentCount} ${commentLabel} &nbsp;
-            ${statistic.statisticBlogViewCount} ${viewLabel} &nbsp;
-            ${onlineVisitorCnt} ${onlineVisitorLabel}
-        </div>
     </div>
 </footer>
+<svg class="side__top" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path d="M26.562 13.958c0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303v0c0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303v0zM23.305 10.7c0 0 0 0 0 0 0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303c0-0 0-0 0-0v0c0-0 0-0 0-0 0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303c0 0 0 0 0 0v0zM20.022 7.417c0 0 0 0 0 0 0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303c0-0 0-0 0-0v0c0-0 0-0 0-0 0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303c0 0 0 0 0 0v0zM29.67 0h-27.339c-0.677 0-1.228 0.551-1.228 1.228s0.551 1.228 1.228 1.228h11.151l-10.725 10.725c-0.476 0.476-0.476 1.253 0 1.729 0.226 0.226 0.551 0.351 0.852 0.351s0.626-0.125 0.852-0.351l10.074-10.074v25.936c0 0.677 0.551 1.228 1.228 1.228s1.228-0.551 1.228-1.228v-26.011c0.476 0.426 1.203 0.426 1.679-0.050s0.476-1.253 0-1.729l-0.576-0.576h11.577c0.677 0 1.228-0.551 1.228-1.228 0-0.626-0.551-1.178-1.228-1.178z"></path>
+</svg>
+
 
 <script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script>
 <script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"

Bubble/js/circleMagic.js

@@ -27,6 +27,9 @@
       canvas = document.getElementById('canvas');
       canvas.width = width;
       canvas.height = height;
+      canvas.style.position = 'absolute';
+      canvas.style.left = '0';
+      canvas.style.bottom = '0';
       ctx = canvas.getContext('2d');
 
       //  create circles
@@ -48,19 +51,9 @@
 
     // Event handling
     function addListeners() {
-      window.addEventListener('scroll', scrollCheck, false);
       window.addEventListener('resize', resize, false);
     }
 
-    function scrollCheck() {
-      if (document.body.scrollTop > height) {
-        animateHeader = false;
-      }
-      else {
-        animateHeader = true;
-      }
-    }
-
     function resize() {
       width = container.clientWidth;
       height = container.clientHeight;
@@ -126,4 +119,450 @@
       };
     }
   }
-})(jQuery);
+})(jQuery);
+
+/**
+ * Ribbons Class File.
+ * Creates low-poly ribbons background effect inside a target container.
+ */
+(function( name, factory )
+{
+  if( typeof window === "object" )
+  {
+    window[ name ] = factory();
+  }
+
+})( "Ribbons", function()
+{
+  var _w = window,
+    _b = document.body,
+    _d = document.documentElement;
+
+  // random helper
+  var random = function()
+  {
+    if( arguments.length === 1 ) // only 1 argument
+    {
+      if( Array.isArray( arguments[0] ) ) // extract index from array
+      {
+        var index = Math.round( random( 0, arguments[0].length - 1 ) );
+        return arguments[0][ index ];
+      }
+      return random( 0, arguments[0] ); // assume numeric
+    }
+    else if( arguments.length === 2 ) // two arguments range
+    {
+      return Math.random() * ( arguments[1] - arguments[0] ) + arguments[0];
+    }
+    return 0; // default
+  };
+
+  // screen helper
+  var screenInfo = function( e )
+  {
+    var width   = Math.max( 0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0 ),
+      height  = Math.max( 0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0 ),
+      scrollx = Math.max( 0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0 ) - ( _d.clientLeft || 0 ),
+      scrolly = Math.max( 0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0 ) - ( _d.clientTop || 0 );
+
+    return {
+      width   : width,
+      height  : height,
+      ratio   : width / height,
+      centerx : width / 2,
+      centery : height / 2,
+      scrollx : scrollx,
+      scrolly : scrolly,
+    };
+  };
+
+  // mouse/input helper
+  var mouseInfo = function( e )
+  {
+    var screen = screenInfo( e ),
+      mousex = e ? Math.max( 0, e.pageX || e.clientX || 0 ) : 0,
+      mousey = e ? Math.max( 0, e.pageY || e.clientY || 0 ) : 0;
+
+    return {
+      mousex  : mousex,
+      mousey  : mousey,
+      centerx : mousex - ( screen.width / 2 ),
+      centery : mousey - ( screen.height / 2 ),
+    };
+  };
+
+  // point object
+  var Point = function( x, y )
+  {
+    this.x = 0;
+    this.y = 0;
+    this.set( x, y );
+  };
+  Point.prototype = {
+    constructor: Point,
+
+    set: function( x, y )
+    {
+      this.x = ( x || 0 );
+      this.y = ( y || 0 );
+    },
+    copy: function( point )
+    {
+      this.x = ( point.x || 0 );
+      this.y = ( point.y || 0 );
+      return this;
+    },
+    multiply: function( x, y )
+    {
+      this.x *= ( x || 1 );
+      this.y *= ( y || 1 );
+      return this;
+    },
+    divide: function( x, y )
+    {
+      this.x /= ( x || 1 );
+      this.y /= ( y || 1 );
+      return this;
+    },
+    add: function( x, y )
+    {
+      this.x += ( x || 0 );
+      this.y += ( y || 0 );
+      return this;
+    },
+    subtract: function( x, y )
+    {
+      this.x -= ( x || 0 );
+      this.y -= ( y || 0 );
+      return this;
+    },
+    clampX: function( min, max )
+    {
+      this.x = Math.max( min, Math.min( this.x, max ) );
+      return this;
+    },
+    clampY: function( min, max )
+    {
+      this.y = Math.max( min, Math.min( this.y, max ) );
+      return this;
+    },
+    flipX: function()
+    {
+      this.x *= -1;
+      return this;
+    },
+    flipY: function()
+    {
+      this.y *= -1;
+      return this;
+    },
+  };
+
+  // class constructor
+  var Factory = function( options )
+  {
+    this._canvas  = null;
+    this._context = null;
+    this._sto     = null;
+    this._width   = 0;
+    this._height  = 0;
+    this._scroll  = 0;
+    this._ribbons = [];
+    this._options = {
+      // ribbon color HSL saturation amount
+      colorSaturation: "80%",
+      // ribbon color HSL brightness amount
+      colorBrightness: "60%",
+      // ribbon color opacity amount
+      colorAlpha: 0.65,
+      // how fast to cycle through colors in the HSL color space
+      colorCycleSpeed : 6,
+      // where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
+      verticalPosition : "center",
+      // how fast to get to the other side of the screen
+      horizontalSpeed : 150,
+      // how many ribbons to keep on screen at any given time
+      ribbonCount: 3,
+      // add stroke along with ribbon fill colors
+      strokeSize: 0,
+      // move ribbons vertically by a factor on page scroll
+      parallaxAmount : -0.5,
+      // add animation effect to each ribbon section over time
+      animateSections : true,
+    };
+    this._onDraw   = this._onDraw.bind( this );
+    this._onResize = this._onResize.bind( this );
+    this._onScroll = this._onScroll.bind( this );
+    this.setOptions( options );
+    this.init();
+  };
+
+  // class prototype
+  Factory.prototype = {
+    constructor: Factory,
+
+    // Set and merge local options
+    setOptions: function( options )
+    {
+      if( typeof options === "object" )
+      {
+        for( var key in options )
+        {
+          if( options.hasOwnProperty( key ) )
+          {
+            this._options[ key ] = options[ key ];
+          }
+        }
+      }
+    },
+
+    // Initialize the ribbons effect
+    init: function()
+    {
+      try
+      {
+        this._canvas = document.createElement( "canvas" );
+        this._canvas.style["display"] = "block";
+        this._canvas.style["position"] = "fixed";
+        this._canvas.style["margin"] = "0";
+        this._canvas.style["padding"] = "0";
+        this._canvas.style["border"] = "0";
+        this._canvas.style["outline"] = "0";
+        this._canvas.style["left"] = "0";
+        this._canvas.style["top"] = "0";
+        this._canvas.style["width"] = "100%";
+        this._canvas.style["height"] = "100%";
+        this._canvas.style["z-index"] = "-1";
+        this._onResize();
+
+        this._context = this._canvas.getContext( "2d" );
+        this._context.clearRect( 0, 0, this._width, this._height );
+        this._context.globalAlpha = this._options.colorAlpha;
+
+        window.addEventListener( "resize", this._onResize );
+        document.body.appendChild( this._canvas );
+      }
+      catch( e ) {
+        console.warn( "Canvas Context Error: " + e.toString() );
+        return;
+      }
+      this._onDraw();
+    },
+
+    // Create a new random ribbon and to the list
+    addRibbon: function()
+    {
+      // movement data
+      var dir    = ( Math.round( random( 1, 9 ) ) > 5 ) ? "right" : "left",
+        stop   = 1000,
+        hide   = 200,
+        min    = 0 - hide,
+        max    = this._width + hide,
+        movex  = 0,
+        movey  = 0,
+        startx = ( dir === "right" ) ? min : max,
+        starty = Math.round( random( 0, this._height ) );
+
+      // asjust starty based on options
+      if( /^(top|min)$/i.test( this._options.verticalPosition ) )
+      {
+        starty = 0 + hide;
+      }
+      else if( /^(middle|center)$/i.test( this._options.verticalPosition ) )
+      {
+        starty = ( this._height / 2 );
+      }
+      else if( /^(bottom|max)$/i.test( this._options.verticalPosition ) )
+      {
+        starty = this._height - hide;
+      }
+
+      // ribbon sections data
+      var ribbon = [],
+        point1 = new Point( startx, starty ),
+        point2 = new Point( startx, starty ),
+        point3 = null,
+        color  = Math.round( random( 0, 360 ) ),
+        delay  = 0;
+
+      // buils ribbon sections
+      while( true )
+      {
+        if( stop <= 0 ) break; stop--;
+
+        movex = Math.round( ( Math.random() * 1 - 0.2 ) * this._options.horizontalSpeed );
+        movey = Math.round( ( Math.random() * 1 - 0.5 ) * ( this._height * 0.25 ) );
+
+        point3 = new Point();
+        point3.copy( point2 );
+
+        if( dir === "right" )
+        {
+          point3.add( movex, movey );
+          if( point2.x >= max ) break;
+        }
+        else if( dir === "left" )
+        {
+          point3.subtract( movex, movey );
+          if( point2.x <= min ) break;
+        }
+        // point3.clampY( 0, this._height );
+
+        ribbon.push({ // single ribbon section
+          point1 : new Point( point1.x, point1.y ),
+          point2 : new Point( point2.x, point2.y ),
+          point3 : point3,
+          color  : color,
+          delay  : delay,
+          dir    : dir,
+          alpha  : 0,
+          phase  : 0,
+        });
+
+        point1.copy( point2 );
+        point2.copy( point3 );
+
+        delay += 4;
+        color += this._options.colorCycleSpeed;
+      }
+      this._ribbons.push( ribbon );
+    },
+
+    // Draw single section
+    _drawRibbonSection: function( section )
+    {
+      if( section )
+      {
+        if( section.phase >= 1 && section.alpha <= 0 )
+        {
+          return true; // done
+        }
+        if( section.delay <= 0 )
+        {
+          section.phase += 0.02;
+          section.alpha = Math.sin( section.phase ) * 1;
+          section.alpha = ( section.alpha <= 0 ) ? 0 : section.alpha;
+          section.alpha = ( section.alpha >= 1 ) ? 1 : section.alpha;
+
+          if( this._options.animateSections )
+          {
+            var mod = ( Math.sin( 1 + section.phase * Math.PI / 2 ) * 0.1 );
+
+            if( section.dir === "right" )
+            {
+              section.point1.add( mod, 0 );
+              section.point2.add( mod, 0 );
+              section.point3.add( mod, 0 );
+            } else {
+              section.point1.subtract( mod, 0 );
+              section.point2.subtract( mod, 0 );
+              section.point3.subtract( mod, 0 );
+            }
+            section.point1.add( 0, mod );
+            section.point2.add( 0, mod );
+            section.point3.add( 0, mod );
+          }
+        }
+        else { section.delay -= 0.5; }
+
+        var s = this._options.colorSaturation,
+          l = this._options.colorBrightness,
+          c = "hsla("+ section.color +", "+ s +", "+ l +", "+ section.alpha +" )";
+
+        this._context.save();
+
+        if( this._options.parallaxAmount !== 0 )
+        {
+          this._context.translate( 0, this._scroll * this._options.parallaxAmount );
+        }
+        this._context.beginPath();
+        this._context.moveTo( section.point1.x, section.point1.y );
+        this._context.lineTo( section.point2.x, section.point2.y );
+        this._context.lineTo( section.point3.x, section.point3.y );
+        this._context.fillStyle = c;
+        this._context.fill();
+
+        if( this._options.strokeSize > 0 )
+        {
+          this._context.lineWidth = this._options.strokeSize;
+          this._context.strokeStyle = c;
+          this._context.lineCap = "round";
+          this._context.stroke();
+        }
+        this._context.restore();
+      }
+      return false; // not done yet
+    },
+
+    // Draw ribbons
+    _onDraw: function()
+    {
+      // cleanup on ribbons list to rtemoved finished ribbons
+      for( var i = 0, t = this._ribbons.length; i < t; ++i )
+      {
+        if( !this._ribbons[ i ] )
+        {
+          this._ribbons.splice( i, 1 );
+        }
+      }
+
+      // draw new ribbons
+      this._context.clearRect( 0, 0, this._width, this._height );
+
+      for( var a = 0; a < this._ribbons.length; ++a ) // single ribbon
+      {
+        var ribbon = this._ribbons[ a ],
+          numSections = ribbon.length,
+          numDone = 0;
+
+        for( var b = 0; b < numSections; ++b ) // ribbon section
+        {
+          if( this._drawRibbonSection( ribbon[ b ] ) )
+          {
+            numDone++; // section done
+          }
+        }
+        if( numDone >= numSections ) // ribbon done
+        {
+          this._ribbons[ a ] = null;
+        }
+      }
+      // maintain optional number of ribbons on canvas
+      if( this._ribbons.length < this._options.ribbonCount )
+      {
+        this.addRibbon();
+      }
+      requestAnimationFrame( this._onDraw );
+    },
+
+    // Update container size info
+    _onResize: function( e )
+    {
+      var screen   = screenInfo( e );
+      this._width  = screen.width;
+      this._height = screen.height;
+
+      if( this._canvas )
+      {
+        this._canvas.width  = this._width;
+        this._canvas.height = this._height;
+
+        if( this._context )
+        {
+          this._context.globalAlpha = this._options.colorAlpha;
+        }
+      }
+    },
+
+    // Update container size info
+    _onScroll: function( e )
+    {
+      var screen   = screenInfo( e );
+      this._scroll = screen.scrolly;
+    },
+
+  };
+
+  // export
+  return Factory;
+});

Bubble/js/common.js

@@ -37,9 +37,52 @@ var Skin = {
       $('.fn__progress').attr('value', parseInt($(window).scrollTop())).
         attr('max', parseInt($('body').outerHeight() -
           $(window).height()))
+
+      if ($(window).scrollTop() > $(window).height() - 20) {
+        $('.side__menu').addClass('side__menu--edge')
+        $('.side__top').removeClass('side__top--bottom')
+      } else {
+        $('.side__menu').removeClass('side__menu--edge')
+        $('.side__top').addClass('side__top--bottom')
+      }
     })
 
-    $('.header').circleMagic();
+    $('.header').circleMagic({
+      clearOffset: 0.3,
+      color: 'rgba(255,255,255, .2)',
+      density: 0.2,
+      radius: 15,
+    })
+
+    new Ribbons({
+      colorSaturation: '60%',
+      colorBrightness: '50%',
+      colorAlpha: 0.5,
+      colorCycleSpeed: 5,
+      verticalPosition: 'random',
+      horizontalSpeed: 200,
+      ribbonCount: 3,
+      strokeSize: 0,
+      parallaxAmount: -0.2,
+      animateSections: true,
+    })
+
+    $('.side__menu').click(function () {
+      $('.side__main').addClass('side__main--show').show()
+    })
+    $('.side__bg').click(function () {
+      $('.side__main').removeClass('side__main--show')
+      setTimeout(function () {
+        $('.side__main').hide()
+      }, 1000)
+    })
+    $('.side__top').click(function () {
+      if ($(this).hasClass('side__top--bottom')) {
+        Util.goBottom()
+      } else {
+        Util.goTop()
+      }
+    })
   },
   initArticle: function () {
     page.share()
@@ -127,4 +170,7 @@ var Skin = {
     $(window).scroll()
   },
 }
-Skin.init()
+
+$(document).ready(function () {
+  Skin.init()
+})

Bubble/macro-header.ftl

@@ -18,20 +18,83 @@
 
 -->
 <#macro header type>
-<progress class="fn__progress"></progress>
+    <progress class="fn__progress"></progress>
-<header class="header header--${type}">
+    <header class="header header--${type}">
-    <canvas id="canvas"></canvas>
+        <div class="wrapper header__title">
-    <div class="wrapper header__title">
+            <h1 class="header__h1 fn__flex-inline">
-        <h1 class="header__h1 fn__flex-inline">
+                <a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
-            <a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
+            </h1>
-        </h1>
+            <h2 class="header__desc header__desc--title">${blogSubtitle}</h2>
-        <h2 class="header__desc header__desc--title">${blogSubtitle}</h2>
+            <div class="header__desc">
-        <div class="header__desc">
+                ${noticeBoard}
-            ${noticeBoard}
+            </div>
+            <svg class="header__down" id="headerDown" viewBox="0 0 32 32" width="100%" height="100%">
+                <path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path>
+            </svg>
         </div>
-        <svg class="header__down" id="headerDown" viewBox="0 0 32 32" width="100%" height="100%">
+    </header>
-            <path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path>
+    <div class="side__menu">
+        <svg viewBox="0 0 32 32" width="100%" height="100%">
+            <path d="M30 18h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2s-0.9 2-2 2zM30 6.25h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2s-0.9 2-2 2zM2 25.75h28c1.1 0 2 0.9 2 2s-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2z"></path>
         </svg>
+        <span>
+            &nbsp; menu
+        </span>
+    </div>
+    <div class="side__main">
+        <div class="side__bg"></div>
+        <div class="side__panel">
+            <img src="${faviconURL}">
+            <a href="${servePath}/tags.html" rel="section">
+                ${allTagsLabel}
+            </a>
+            &nbsp;•&nbsp;
+            <a href="${servePath}/archives.html">
+                ${archiveLabel}
+            </a>
+            &nbsp;•&nbsp;
+            <a rel="archive" href="${servePath}/links.html">
+                ${linkLabel}
+            </a>
+            <nav class="wrapper header__nav fn__clear">
+                <a href="${servePath}" rel="start">
+                    <#if type == 'article'>
+                        ${blogTitle}
+                    <#else>
+                        ${indexLabel}
+                    </#if>
+                </a>
+
+                <#list pageNavigations as page>
+                    <a class="fn__flex-inline" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
+                        <#if page.pageIcon != ''><img src="${page.pageIcon}"></#if> ${page.pageTitle}
+                    </a>
+                </#list>
+
+                <a href="${servePath}/search">
+                    ${searchLabel}
+                </a>
+
+                <div class="fn__right">
+
+                    <a rel="alternate" href="${servePath}/rss.xml">
+                        RSS
+                    </a>
+
+                    <#if isLoggedIn>
+                        <a href="${servePath}/admin-index.do#main">
+                            ${adminLabel}
+                        </a>
+                        <a href="${logoutURL}">
+                            ${logoutLabel}
+                        </a>
+                    <#else>
+                        <a rel="alternate" href="${servePath}/start">
+                            ${startToUseLabel}
+                        </a>
+                    </#if>
+                </div>
+            </nav>
+        </div>
     </div>
-</header>
 </#macro>

Bubble/side.ftl

@@ -1,60 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-present, b3log.org
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
--->
-<img src="${faviconURL}">
-<nav class="wrapper header__nav fn__clear">
-    <a href="${servePath}" rel="start">
-        <#if type == 'article'>
-            ${blogTitle}
-        <#else>
-            ${indexLabel}
-        </#if>
-    </a>
-
-    <#list pageNavigations as page>
-        <a class="fn__flex-inline" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
-            <#if page.pageIcon != ''><img src="${page.pageIcon}"></#if> ${page.pageTitle}
-        </a>
-    </#list>
-
-    <a href="${servePath}/search">
-        ${searchLabel}
-    </a>
-
-    <div class="fn__right">
-        <#include "../../common-template/macro-user_site.ftl">
-        <@userSite dir=""></@userSite>
-        <a rel="alternate" href="${servePath}/rss.xml">
-            RSS
-        </a>
-
-        <#if isLoggedIn>
-            <a href="${servePath}/admin-index.do#main">
-                ${adminLabel}
-            </a>
-            <a href="${logoutURL}">
-                ${logoutLabel}
-            </a>
-        <#else>
-            <a rel="alternate" href="${servePath}/start">
-                ${startToUseLabel}
-            </a>
-        </#if>
-    </div>
-</nav>