Initial commit with current state + bundled

_includes/JB/posts_collate

@@ -0,0 +1,55 @@
+{% comment %}<!--
+Collate_posts helper. Collated posts by year and month.
+Usage:
+  1) assign the 'posts_collate' variable to a valid array of posts.
+  2) include JB/posts_collate
+  example:
+    {% assign posts_collate = site.posts %}
+    {% include JB/posts_collate %}
+
+  Ordering:
+    Posts are displayed in reverse chronological order.
+    For normal chronological order:
+      1) Change the for loop to this:
+        => 'for post in site.posts reversed'
+      2) Next make sure to change 'post.previous.date' to:
+        => 'post.next.date'
+        
+-->{% endcomment %}
+
+{% if site.JB.posts_collate.provider == "custom" %}
+  {% include custom/posts_collate %}
+{% else %}
+  {% for post in posts_collate  %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+    {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
+  
+    {% if forloop.first %}
+      <h1><strong>{{this_year}}</strong></h1>
+      <p>{{this_month}}</p>
+      <ul>
+    {% endif %}
+  
+    <li><a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></li>
+  
+    {% if forloop.last %}
+      </ul>
+    {% else %}
+      {% if this_year != next_year %}
+        </ul>
+        <h1><strong>{{next_year}}</strong></h1>
+        <p><strong>{{next_month}}</strong></p>
+        <ul>
+      {% else %}    
+        {% if this_month != next_month %}
+          </ul>
+          <p><strong>{{next_month}}</strong></p>
+          <ul>
+        {% endif %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% assign posts_collate = nil %}

_includes/JB/posts_collate~

@@ -0,0 +1,55 @@
+{% comment %}<!--
+Collate_posts helper. Collated posts by year and month.
+Usage:
+  1) assign the 'posts_collate' variable to a valid array of posts.
+  2) include JB/posts_collate
+  example:
+    {% assign posts_collate = site.posts %}
+    {% include JB/posts_collate %}
+
+  Ordering:
+    Posts are displayed in reverse chronological order.
+    For normal chronological order:
+      1) Change the for loop to this:
+        => 'for post in site.posts reversed'
+      2) Next make sure to change 'post.previous.date' to:
+        => 'post.next.date'
+        
+-->{% endcomment %}
+
+{% if site.JB.posts_collate.provider == "custom" %}
+  {% include custom/posts_collate %}
+{% else %}
+  {% for post in posts_collate  %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+    {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
+  
+    {% if forloop.first %}
+      <h1><strong>{{this_year}}</strong></h1>
+      <p>{{this_month}}</p>
+      <ul>
+    {% endif %}
+  
+    <li><a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></li>
+  
+    {% if forloop.last %}
+      </ul>
+    {% else %}
+      {% if this_year != next_year %}
+        </ul>
+        <p><strong>{{next_year}}</strong></p>
+        <p><strong>{{next_month}}</strong></p>
+        <ul>
+      {% else %}    
+        {% if this_month != next_month %}
+          </ul>
+          <p><strong>{{next_month}}</strong></p>
+          <ul>
+        {% endif %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% assign posts_collate = nil %}

_includes/JB/setup

@@ -0,0 +1,22 @@
+{% capture jbcache %}
+  <!--
+  - Dynamically set liquid variables for working with URLs/paths
+  -->
+  {% if site.JB.setup.provider == "custom" %}
+    {% include custom/setup %}
+  {% else %}
+    {% if site.safe and site.JB.BASE_PATH and site.JB.BASE_PATH != '' %}
+      {% assign BASE_PATH = site.JB.BASE_PATH %}
+      {% assign HOME_PATH = site.JB.BASE_PATH %}
+    {% else %}
+      {% assign BASE_PATH = nil %}
+      {% assign HOME_PATH = "/" %}
+    {% endif %}
+
+    {% if site.JB.ASSET_PATH %}
+      {% assign ASSET_PATH = site.JB.ASSET_PATH %}
+    {% else %}
+      {% capture ASSET_PATH %}{{ BASE_PATH }}/assets/themes/{{ page.theme.name }}{% endcapture %}
+    {% endif %}  
+  {% endif %}
+{% endcapture %}{% assign jbcache = nil %}

_includes/base.html

@@ -0,0 +1,7 @@
+{% assign base = '' %}
+{% assign depth = page.url | split: '/' | size | minus: 1 %}
+{% if    depth == 1 %}{% assign base = '..' %}
+{% elsif depth == 2 %}{% assign base = '..' %}
+{% elsif depth == 3 %}{% assign base = '../..' %}
+{% elsif depth == 4 %}{% assign base = '../../..' %}
+{% elsif depth == 5 %}{% assign base = '../../../..' %}{% endif %}

_includes/cookiemonster.html

@@ -0,0 +1 @@
+<img src="{{ base }}/assets/img/cookiemonster_upsidedown.gif" style="position:fixed;top:0;right:0;z-index:77777;"/>

_includes/curtain.css

@@ -0,0 +1,23 @@
+html{
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.curtains{
+    width: 100%;
+    z-index:1;
+    position:relative;
+}
+
+.curtains>li{
+    background: white;
+    display:block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+    overflow: hidden;
+    z-index:1;
+}
+.curtains>li.hidden{display:none;}
+.curtains>li:first-child{z-index:2;}

_includes/home_menu.html

@@ -0,0 +1,26 @@
+
+<a id="music" href="/music">Music</a>
+<a id="about" href="/">About</a>
+<a id="log" href="/">Log</a>
+<a id="discog" href="/">Discog</a>
+<a id="links" href="/">Links</a>
+
+ 
+   <div id="a"><img src="/assets/img/sakrecoerLOGO.png"></div>
+
+   <div id="ab">
+         {% for post in site.categories.music offset: 0 limit: 1 %}
+	
+
+		{{ post.title }}
+
+	   		
+         {% endfor %}
+      
+   </div>
+
+
+   <div id="abc">About</div>
+   <div id="abcd">Log</div>
+   <div id="abcde"></div>
+   <div id="abcdef">Links</div>

_includes/navmenu.css

@@ -0,0 +1,144 @@
+
+#nav {
+ position: fixed;
+ bottom: -10px; left: 7px;
+ font-size: 12px;
+ font-family: futura;
+ padding: 0 0 0 0;
+ z-index: 10000;
+ text-transform: uppercase;
+ text-align: center;
+}
+#nav li {
+ float: left;
+ position: relative;
+ list-style: none;
+ z-index: 10000;
+
+}
+
+
+/* main level link */
+#nav a {
+ font-weight: bold;
+ color: #fff;
+ text-decoration: none;
+ display: block;
+ width:250px;
+ text-shadow: none;
+}
+#nav a:hover {
+ color: #0ff;
+ text-shadow: none;
+}
+
+/* main level link hover */
+#nav .current a, #nav li:hover > a {
+ color: #fff;
+ text-shadow: none;
+}
+
+/* sub levels link hover */
+#nav ul li:hover a, #nav li:hover li a {
+ background: rgba(255,0,0,1);
+ border: none;
+ color: #fff;
+ margin: 0;
+ padding: 0px 0px;
+ border-radius: 0px;
+ text-shadow: none;
+
+}
+#nav ul a:hover {
+ color: #0ff !important;
+ text-shadow: none;
+}
+
+/* dropdown */
+#nav li:hover > ul {
+ display: block;
+}
+
+/* level 2 list */
+#nav ul {
+ display: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ bottom: 25px;
+ left: 0;
+ border: none;
+
+}
+#nav ul li {
+ float: none;
+ margin: 0;
+ padding: 0;
+}
+
+#nav ul a {
+ font-weight: normal;
+ text-shadow: none;
+}
+
+/* level 3+ list */
+#nav ul ul {
+ left: 250px;
+ bottom: 0;
+
+}
+
+
+/* clearfix */
+#nav:after {
+ content: ".";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
+}
+#nav {
+ display: inline-block;
+
+} 
+html[xmlns] #nav {
+ display: block;
+}
+ 
+* html #nav {
+ height: 18px;
+}
+#music_nav:hover{
+    background-color: rgba(255, 0, 24, 0.3);
+
+}
+#music_nav_sub:hover{
+    background-color: rgba(255, 0, 24, 0.3);
+
+}
+#about_nav:hover{
+
+    background-color: rgba(153, 255, 0, 0.3);
+
+}
+
+#log_nav:hover{
+    background-color: rgba(0, 255, 229, 0.3);
+
+}
+#log_nav_sub:hover{
+    background-color: rgba(0, 255, 229, 0.3);
+
+}
+#discog_nav:hover{
+    background-color: rgba(102, 0, 255, 0.3);
+
+}
+
+#links_nav:hover{
+    background-color: rgba(0, 0, 0, 0.3);
+
+}
+
+

_includes/navmenu.html

@@ -0,0 +1,14 @@
+<ul id="nav">
+	<li><a href="{{ base }}/"><img src="{{ base }}/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" /></a>
+		<ul>
+			
+			<li><a href="{{ base }}/discography/">Discog</a></li>
+			<li><a href="{{ base }}/about/">About</a></li>
+			<li><a href="{{ base }}/links/">Links</a></li>
+			<li><a href="{{ base }}/blog/">Log</a></li>
+			<li><a href="{{ base }}/music/">Music Index</a></li>
+			<li><a href="{{ base }}/">Home</a></li>
+		</ul>
+	</li>
+
+</ul>

_includes/navmenuBCKUP.html

@@ -0,0 +1,27 @@
+<ul id="nav">
+	<li><a href="/"><img src="/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" /></a>
+		<ul>
+			
+			<li><a href="/sakrecoer-discography/">Discog</a></li>
+			<li><a href="/about/">About</a></li>
+			<li><a href="/links/">Links</a></li>
+			<li><a href="/blog/">Log</a>
+				<ul>
+{% for post in site.categories.blog limit: 17 %}
+
+					<li><a href="{{ post.url }}">{{ post.title }}</a></li>
+{% endfor %}
+					<li><a href="/blog/">...Read Moar Articles</a></li>
+				</ul>
+			</li>
+			<li><a href="/music/">Music Index</a>
+				<ul>
+{% for post in site.categories.music %}
+					<li><a href="{{ post.url }}">{{ post.title }}</a></li>
+{% endfor %}
+				</ul>
+			</li>
+		</ul>
+	</li>
+
+</ul>

_includes/next_song.html

@@ -0,0 +1,14 @@
+  {% for post in site.categories.music %}
+        {% if post.url == page.url %}
+            {% assign post_index0 = forloop.index0 %}
+            {% assign post_index1 = forloop.index %}
+        {% endif %}
+    {% endfor %}
+    {% for post in site.categories.music %}
+        {% if post_index0 == forloop.index %}
+            {% assign next_post = post.url %}
+        {% endif %}
+        {% if post_index1 == forloop.index0 %}
+            {% assign prev_post = post.url %}
+        {% endif %}
+    {% endfor %}

_includes/normalize.css

@@ -0,0 +1,386 @@
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

_includes/style.css

@@ -0,0 +1,133 @@
+/*! sakrecoer sheet */
+@font-face {
+ font-family: futura;
+ src: url('{{ base }}/assets/fonts/free_avantgarde.woff');
+}
+@font-face {
+ font-family: futurabold;
+ src: url('{{ base }}/assets/fonts/free_avantgardeBOLD.woff');
+}
+
+html{
+ -webkit-transition:.5s background;
+ transition:.5s background;
+ font-family: futura,sans-serif;
+}
+body{
+ background:url({{ base }}/assets/img/bg/frontpage.jpg) #fff no-repeat; background-size:cover; background-attachment: fixed;
+ margin:0;
+ font-family: futura,sans-serif;
+ color: #000;
+}
+h1,
+h2,
+h3,
+h4 {
+ font-family: futurabold; text-transform: uppercase;
+}
+p {
+ font-family: futura;
+}
+b,
+strong {
+ font-family: futurabold;
+}
+a:link,
+a:visited,
+a:hover,
+a:active,
+a:focus {
+ text-decoration: none;
+  -webkit-transition:.6s background;
+  transition:.6s background
+}
+a,
+a:link,
+a:visited {
+ color: #fff;
+ -webkit-transition-property: hover;
+ -webkit-transition: color 0.15s ease-in-out;
+ -moz-transition: color 0.15s linear 0s; /* firefox 4 */
+ -o-transition-property: color; /* opera 10.5 */
+ -o-transition-duration: 0.15s;
+}
+a:hover {
+ color: #0ff;
+}
+a:active {
+ color: #f00;
+}
+#navigation {
+ position: fixed; bottom: 0; left: 0; z-index: 1000;
+ width: 250px; height: 85%; padding: 10px;
+ background-color: rgba(0,0,0,.4);   
+ text-align: center;
+ border-radius: 0 100% 0 0;
+ opacity: .33;
+ -webkit-transition-property: hover;
+ -webkit-transition: opacity 0.7s ease-in-out;
+ -moz-transition: opacity 0.7s linear 0s; /* firefox 4 */
+ -o-transition-property: opacity; /* opera 10.5 */
+ -o-transition-duration: 0.7s;
+}
+#navigation:hover {
+ opacity: 1;
+ z-index: 10;
+}
+
+/* content */
+#content{
+ position: absolute; top: 140px; left: 20px; 
+ width: 66%; margin: 0 0 0 300px; padding: 10px;
+ box-shadow:2px 2px 10px #000;
+ background: rgba(0, 0, 0, 0.25);
+ border-radius: 4px;
+}
+/*  blog  */
+#blogcontent{
+ position: absolute; top: 25px; 
+ left: 20px; width: 66%; margin: 400px 0 0 300px; padding: 15px;
+ box-shadow:2px 2px 10px #000;
+ background: url({{ base }}/assets/img/bg/paper_background_lined.jpg) rgba(255, 255, 255, 0.25);
+ border-radius: 4px;
+ line-height: 32px;
+}
+#blogcontent h1,
+#blogcontent p{
+ color:#000;
+}
+#blogcontent h1{
+ position: relative;
+ margin: 8px 10px 0 0;
+}
+#blogcontent a {
+ color: #000;
+}
+#blogcontent a:hover {
+ color: #0ff;
+}
+.date {
+ font-size: 18px;
+ height: 5px; padding: 0; margin: 0;
+}
+td {
+ vertical-align: top;
+}
+hr {
+ border: 1px solid #000;
+ height: 1px;
+}
+
+/* Fullscreen Background image */
+.image-fullscreen,
+.image-fullscreen .mask {
+  background-size: cover;
+  background-repeat: no-repeat;
+  position:fixed;
+  left:0px;
+  top:0px;
+  right:0px;
+  bottom:0px;
+  z-index: -1;
+  }
+

_includes/style_passed.css

@@ -0,0 +1,267 @@
+/*! sakrecoer sheet */
+@font-face {
+ font-family: futura;
+ src: url('free_avantgarde.woff');
+}
+body {
+ background: #fff url(/assets/img/bg/micro_logo.png);
+ font-size: 1em;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ padding: 40px 20px 40px 20px;
+
+}
+h1,
+h2,
+h3,
+h4 {
+ font-family: futura;
+ text-transform: uppercase;
+}
+a:link,
+a:visited,
+a:hover,
+a:active,
+a:focus {
+ text-decoration: none;
+}
+a,
+a:link,
+a:visited {
+ color: #fff;
+-webkit-transition-property: hover;
+ -webkit-transition: color 0.15s ease-in-out;
+ -moz-transition: color 0.15s linear 0s; /* firefox 4 */
+  -o-transition-property: color; /* opera 10.5 */
+  -o-transition-duration: 0.15s;
+text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
+	    -1px 0px 4px rgba(255, 0, 0, 0.5),
+             0px -1px 4px rgba(255, 0, 0, 0.5),
+	     0px 1px 4px rgba(255, 0, 0, 0.5);
+}
+
+a:hover {
+ color: #f00;
+text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
+	    -1px 0px 4px rgba(255, 0, 0, 0.5),
+             0px -1px 4px rgba(255, 0, 0, 0.5),
+	     0px 1px 4px rgba(255, 0, 0, 0.5);
+}
+a:active {
+ color: #000;
+}
+#header {
+ text-align: left;
+ position: fixed;
+ top:20px;
+ left: 20px;
+ line-height: 24px;
+ z-index: 1000;
+ text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
+	    -1px 0px 4px rgba(255, 0, 0, 0.5),
+             0px -1px 4px rgba(255, 0, 0, 0.5),
+	     0px 1px 4px rgba(255, 0, 0, 0.5);
+}
+#miniheader {
+ position: fixed;
+ top:20px;
+ left: 20px;
+ line-height: 24px;
+ z-index: 999999;
+ text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
+	    -1px 0px 4px rgba(255, 0, 0, 0.5),
+             0px -1px 4px rgba(255, 0, 0, 0.5),
+	     0px 1px 4px rgba(255, 0, 0, 0.5);
+ text-align: left;
+}
+.tagline {
+ text-align: left;
+ margin-left: 5px;
+ margin-top: -5px;
+ font-size: 14px;
+}
+.minitagline {
+ text-align: left;
+ margin-left: 5px;
+ margin-top: -5px;
+ font-size: 9px;
+}
+#main-menu-links {
+ font-family: BAnkrutt;
+ font-size: 48px;
+ margin-left: 5px;
+ line-height: 36px
+}
+
+#main-menu-links a {
+ color: #fff;
+ float: left; /* LTR */
+ text-decoration: none;
+}
+#main-menu-links a:hover,
+#main-menu-links a:focus {
+ color: #f00;
+}
+#main-menu-links a:active {
+ color: #000;
+}
+
+#minimain-menu-links {
+ font-family: BAnkrutt;
+ font-size: 24px;
+ margin-left: 5px;
+ line-height: 24px
+}
+
+#minimain-menu-links a {
+ color: #fff;
+ float: left; /* LTR */
+ text-decoration: none;
+}
+#minimain-menu-links a:hover,
+#minimain-menu-links a:focus {
+ color: #f00;
+}
+#minimain-menu-links a:active {
+ color: #000;
+}
+
+#content{
+ position: absolute;
+ top: 25px;
+ left: 20px;
+ width: 66%;
+ margin: 0 0 0 300px;
+ padding: 10px;
+ box-shadow:2px 2px 10px #000;
+ background: rgba(0, 0, 0, 0.25);
+ border-radius: 4px;
+}
+#blogcontent{
+  line-height: 32px;
+ position: absolute;
+ top: 25px;
+ left: 20px;
+ width: 66%;
+ margin: 400px 0 0 300px;
+ padding: 17px;
+ box-shadow:2px 2px 10px #000;
+ background: url(/assets/img/bg/paper_background_lined.jpg) rgba(255, 255, 255, 0.25);
+ border-radius: 4px;
+}
+#blogcontent h1{
+ margin: 46px 10px 0 0;
+}
+#About .about,
+#Blog .blog,
+#Discography .discog,
+#Music .music,
+#Video .video,
+#Links .links,
+#Pictures .pictures {
+  color: #f00;
+ text-shadow: 1px 0px 4px rgba(255, 255, 255, 0.25),
+	    -1px 0px 4px rgba(255, 255, 255, 0.25),
+             0px -1px 4px rgba(255, 255, 255, 0.25),
+	     0px 1px 4px rgba(255, 255, 255, 0.25);
+}
+.date {
+  font-size: 12px;
+}
+#footer {
+ position: fixed;
+ bottom:20px;
+ right: 25px;
+ font-size: 12px;
+ text-align: right;
+ z-index: 1000;
+ text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
+	    -1px 0px 4px rgba(255, 0, 0, 0.5),
+             0px -1px 4px rgba(255, 0, 0, 0.5),
+	     0px 1px 4px rgba(255, 0, 0, 0.5);
+}
+/* Fullscreen Background image */
+.image-fullscreen,
+.image-fullscreen .mask {
+  background-size: cover;
+  background-repeat: no-repeat;
+  position:fixed;
+  left:0px;
+  top:0px;
+  right:0px;
+  bottom:0px;
+  z-index: -1;
+  }
+
+td {
+  vertical-align: top;
+}
+#musictable{
+ width: 100%;
+}
+.playercell {
+  padding-top: 15px;
+  width: 420px;
+}
+.lyricell {
+  width: 550px;
+}
+img.floatleft { 
+ float: left; 
+ margin: 8px; 
+}
+/* Gallery */
+
+.gallerytitle {
+ font-size: 4em;
+ opacity: 0;
+}
+h1.gallerytitle:hover {
+ font-size: 4em;
+ opacity: 0.75;
+ color: #0ff;
+}
+.gindex-title {
+font-size:2em;
+color:#fff;
+opacity:0.75;
+text-shadow:0 0 10px #007572;
+background:rgba(255, 0, 0, 0.5);
+padding:5px;
+height: 75px;
+opacity: 1;
+}
+.gindex-img {
+ opacity: 0.5;
+}
+.gindex-img:hover {
+ opacity: 1;
+}
+#Pictures {
+  background: #000;
+}
+/* Jukebox Pager */
+#jukepager{
+  background: url(/assets/img/bg/micro_logo.png);
+}
+#jukepager div{
+  text-align: center;
+  padding: 300px;
+}
+#jukepager h1 {
+  font-size: 3em;
+}
+#headline h1 {
+  font-size: 8em;
+  margin: 0;
+  padding: 0 0 0 300px;
+  font-weight: bold;
+  line-height: 0.7em;
+  letter-spacing: -0.1em;
+}
+#headline p {
+  font-size: 2em;
+  padding: 0 5px 0 300px;
+  font-weight: bold;
+  line-height: 0.8em;
+  letter-spacing: -0.05em;
+}

_includes/video_BG.html

@@ -0,0 +1,59 @@
+{% include base.html %}
+    <button id="video_pause">Pause<br />Video</button>
+
+
+ <video autoplay loop poster="{{ base }}/assets/img/bg/frontpage.jpg" id="bgvid">
+   <source src="{{ base }}/assets/vi/0001-0076.webm" type="video/webm">
+   <source src="{{ base }}/assets/vi/0001-0076.mp4" type="video/mp4">
+ </video>
+
+
+
+<script type="text/javascript">
+
+
+var vid = document.getElementsByTagName("video")[0];vid.playbackRate = 0.1;
+
+var pauseButton = document.getElementById("video_pause");
+
+function vidFade() {
+
+vid.classList.add("stopfade");
+
+}
+
+vid.addEventListener('ended', function() {
+
+// only functional if "loop" is removed
+
+vid.pause();
+
+// to capture IE10
+
+vidFade();
+
+});
+
+pauseButton.addEventListener("click", function() {
+
+vid.classList.toggle("stopfade");
+
+if (vid.paused) {
+
+vid.play();
+
+pauseButton.innerHTML = "Pause Video";
+
+} else {
+
+vid.pause();
+
+ pauseButton.innerHTML = "Resume Video";
+
+}
+
+});
+
+
+</script>
+