adding screenshots

_layouts/page.html

@@ -28,7 +28,7 @@
     {% include github-corner.html %}
 
     <ul class="sidenav sidenav-fixed" style="transform: translateX(0px);">
-        <li><a class="subheader white-text">Widgets</a></li>
+        <li><a class="white-text active" href="#tabMain">Awesome WM Widgets</a></li>
 
         {% for widget in site.widgets %}
         <li class="tab col s2 ">
@@ -54,6 +54,11 @@
                     <img src="https://github.com/streetturtle/AwesomeWM/blob/master/screenshot.png?raw=true"/>
                 </div>
 
+                <div id="tabMain" class="widget col s12 active">
+                    <h1>Awesome WM Widgets</h1>
+                    <p>This is a project page of the github repo with set of widgets for Awesome Window Manager</p>
+                </div>
+
                 {% for widget in site.widgets %}
                 <div id="tab{{ widget.title | replace: ' ', '_' }}" class="widget col s12 hide">{{
                     widget.content }}

_widgets/brightness-widget.md

@@ -4,7 +4,7 @@ layout: page
 
 # Brightness widget
 
-![Brightness widget](./br-wid-1.png)
+![Brightness widget]({{'/assets/img/screenshots/brightness-wid-1.png' | relative_url }})
 
 This widget represents current brightness level.
 

_widgets/cpu-widget.md

@@ -5,7 +5,7 @@ layout: page
 
 This widget shows the average CPU load among all cores of the machine:
 
-![screenshot](out.gif)
+![screenshot]({{'/assets/img/screenshots/cpu-widget.gif' | relative_url }})
 
 When the load is more than 80% the graph becomes red. You can easily customize the widget by changing colors, step width, step spacing, width and interval.
 

_widgets/ram-widget.md

@@ -5,7 +5,7 @@ layout: page
 
 This widget shows the RAM usage. When clicked another widget appears with more detailed information:
 
-![screenshot](./out.gif)
+![screenshot]({{'/assets/img/screenshots/ram-widget.gif' | relative_url }})
 
 ## Installation
 

_widgets/spotify-shell.md

@@ -4,7 +4,7 @@ layout: page
 # Spotify Shell
 
 
-![demo](./demo.gif)
+![demo]({{'/assets/img/screenshots/spotify-shell.gif' | relative_url }})
 
 ## Features
 

_widgets/spotify-widget.md

@@ -3,7 +3,7 @@ layout: page
 ---
 # Spotify widget
 
-This widget displays currently playing song on [Spotify for Linux](https://www.spotify.com/download/linux/) client: ![screenshot](./spo-wid-1.png) and consists of two parts: 
+This widget displays currently playing song on [Spotify for Linux](https://www.spotify.com/download/linux/) client: ![screenshot]({{'/assets/img/screenshots/spotify-widget.png' | relative_url }}) and consists of two parts:
 
  - status icon which shows if music is currently playing
  - artist and name of the current song playing

assets/js/init.js

@@ -33,7 +33,7 @@ $(document).ready(function(){
 
         //show target tab content
         var target_tab_selector = $(this).attr('href');
-        $(target_tab_selector).removeClass('hide ');
+        $(target_tab_selector).removeClass('hide');
         $(target_tab_selector).addClass('active fade-in');
     });