Initial commit with current state + bundled

assets/css/frontpage.css

@@ -0,0 +1,291 @@
+---
+---
+{% include base.html %}
+{% include normalize.css %}
+{% include style.css %}
+
+/*! sakrecoer front-sheet */
+
+html{
+ -webkit-transition:.5s background;
+ transition:.5s background;
+ background:url({{ base }}/assets/img/bg/frontpage.jpg) no-repeat;
+ background-size:cover;
+}
+body{
+ margin:0;
+ padding:0;
+ background:transparent;
+ font-family: futura, Helvetica, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4 {
+ font-family: futura;
+ text-transform: uppercase;
+}
+a:link,
+a:visited,
+a:hover,
+a:active,
+a:focus {
+ text-decoration: none;
+  -webkit-transition:.5s background;
+ transition:.5s background
+}
+a,
+a:link,
+a:visited {
+ color: #fff;
+
+-webkit-transition-property: hover;
+ -webkit-transition: color 0.5s ease-in-out;
+ -moz-transition: color 0.5s linear 0s; /* firefox 4 */
+  -o-transition-property: color; /* opera 10.5 */
+  -o-transition-duration: 0.5s;
+text-shadow: 1px 0px 14px rgba(255, 255, 255, 0.5),
+	    -1px 0px 14px rgba(255, 255, 255, 0.5),
+             0px -1px 14px rgba(255, 255, 255, 0.5),
+	     0px 1px 14px rgba(255, 255, 255, 0.5);
+-webkit-transition-property: hover;
+ -webkit-transition: text-shadow .5s ease-in-out;
+ -moz-transition: text-shadow .5s linear 0s; /* firefox 4 */
+  -o-transition-property: text-shadow; /* opera 10.5 */
+  -o-transition-duration: .5s;
+}
+
+a:hover {
+ color: #f00;
+text-shadow: 1px 0px 4px rgba(255, 255, 255, 0.5),
+	    -1px 0px 4px rgba(255, 255, 255, 0.5),
+             0px -1px 4px rgba(255, 255, 255, 0.5),
+	     0px 1px 4px rgba(255, 255, 255, 0.5);
+}
+a:active {
+ color: #000;
+}
+div{
+
+ z-index: -10
+}
+/* ------ magicvideo ---- */
+
+video{
+ position:fixed;
+ right:0;
+ bottom:0;
+ min-width:100%;
+ min-height:100%;
+ width:auto;
+ height:auto;
+ z-index:-100;
+ background:url({{ base }}/assets/img/bg/frontpage.jpg) no-repeat;
+ background-size:cover;
+ -webkit-transition:1s opacity;transition:1s opacity;
+}
+
+h1{
+ font-size:3rem;
+ text-transform:uppercase;
+ margin-top:0;
+ letter-spacing:.3rem;
+  font-family: futurabold;
+}
+.stopfade{
+ opacity:.5
+}
+#video_pause {
+ font-family: futura;
+ text-transform: uppercase;
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+ display:block;
+ width:50px;
+ padding:.2rem;
+ border:none;
+ margin:0rem 0rem;
+ font-size:.7rem;
+ background:rgba(255,0,0,.23);
+ color:#fff;
+ border-radius:3px;
+ cursor:pointer;
+ -webkit-transition:.3s background;
+ transition:.3s background;
+}
+#video_pause:hover{
+ background:rgba(0,0,0,.5);
+ color: #fff;
+} 
+
+/* ---- hide divs  ---- */
+
+
+
+#abcdef,#abcde,#abcd,#abc,#ab {
+    display: none;
+    background-color: transparent;
+   
+
+}
+/*show .ab*/
+#music:hover ~ #ab {
+    display: block;
+    
+}
+/*show .abc*/
+#about:hover ~ #abc {
+    display: block;
+}
+/*show .abcd*/
+#log:hover ~ #abcd {
+    display: block;
+}
+/*show .abcde*/
+#discog:hover ~ #abcde {
+    display: block;
+}
+/*show .abcdef*/
+#links:hover ~ #abcdef {
+    display: block;
+}
+#music:hover ~ #a,
+#about:hover ~ #a,
+#log:hover ~ #a,
+#discog:hover ~ #a,
+#links:hover ~ #a{
+    display: none;
+
+}
+#music,
+#about,
+#log,
+#discog,
+#links{
+  font-family: futurabold;
+  line-height: 1.2;
+  text-transform: uppercase;
+  float:right;
+  font-size: 5em;
+  font-weight: bold;
+  width: 100%;
+  text-align: left;
+  color: transparent;
+  border-radius: 3px;
+}
+#music:hover{
+    background-color: rgba(255, 0, 24, 0.3);
+
+}
+
+#about:hover{
+
+    background-color: rgba(153, 255, 0, 0.5);
+
+}
+
+#log:hover{
+    background-color: rgba(0, 255, 229, 0.3);
+
+}
+
+#discog:hover{
+    background-color: rgba(102, 0, 255, 0.3);
+
+}
+
+#links:hover{
+    background-color: rgba(0, 0, 0, 0.3);
+
+}
+
+#a, #ab, #abc, #abcd, #abcde, #abcdef{
+     position:absolute;
+
+   width: 100%;
+   height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* default */
+#a{
+ background:url('../img/sakrecoerLOGO.png') no-repeat center center; 
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain; 
+     background-color:rgba(255, 0, 24, 0.5);
+     height: 90%;
+     top: 10%;
+     position:absolute;
+     text-align: center;
+    background-color: rgba(0, 0, 0, 0);
+    opacity: .8;
+}
+
+/*  music  */
+#ab{
+    background:url('../img/bg/boombbox.jpg') no-repeat center center; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover; 
+     background-color: rgba(255, 0, 24, 0.5);
+    font-family: futura;
+    opacity: .75;
+}
+
+/*  about  */
+#abc{
+    position:fixed;
+    top:30%; left:36%;
+    width: 350px; height: 350px; padding: 0 7px 30px 7px;
+    background-color: rgba(153, 255, 0, 1);
+    font-family: futura;
+    opacity: 1;
+    letter-spacing: -1px;
+    text-transform: uppercase; font-size:24px; 
+    text-align: center;   
+    border-radius:4px; color:#000;
+}
+#abc p {
+line-height:24px;
+}
+/*  blog  */
+#abcd{
+    background-color: rgba(0, 255, 229, 0.2);
+    font-family: futura, Helvetica; color: rgba(0, 255, 229, 0.2);
+    letter-spacing: -1px;
+    text-transform: uppercase; font-size:24px; 
+    text-align: justify;   
+    border-radius:4px;
+}
+/*  discog  */
+#abcde{
+    background:url('../img/discog2014.jpg') no-repeat center center; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover; 
+     background-color: rgba(255, 0, 24, 0.5);
+    font-family: futura;
+    opacity: .6;
+}
+/*  links  */
+#abcdef{
+    background:url('../img/Chain_1.png') no-repeat center center; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover; 
+    text-align: center;
+    font-family: futura;
+}
+
+#logo {
+ margin: auto
+}
+
+

assets/css/kid3index.css

@@ -0,0 +1,140 @@
+---
+---
+{% include base.html %}
+/*! Index page */
+@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: futurabold, Helvetica, Arial, sans-serif, sans;
+ font-size: 1em;
+ background: rgba(0,76,255,1);
+}
+body, p{
+ margin:0;
+ background: rgba(0,76,255,1);
+}
+h1,
+h2,
+h3,
+h4 {
+ font-weight:bold;
+ text-transform: uppercase;
+}
+
+b,
+strong {
+ font-weight:bold;
+}
+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: rgba(0,76,255,0.9);
+}
+a:active {
+ color: #f00;
+}
+.vignette {
+float: left;
+width:320px;
+min-width:320px;
+height:320px;
+background:no-repeat;
+background-size: 370px;
+ background-color: rgba(255,0,76,.0);
+ box-shadow: 1px 0px 37px rgba(255,0,76,.1),
+	    -1px 0px 37px rgba(255,0,76,.1),
+             0px -1px 37px rgba(255,0,76,.1),
+	     0px 1px 37px rgba(255,0,76,.1);
+}
+#picker {
+
+}
+#picker p {
+ position:relative;
+width:77%;
+ height: 77%;
+ margin: auto;
+ padding: 17px;
+ border-radius: 2px;
+ background: rgba(0,76,255,0);
+ color:rgba(215,215,215,0.3);
+ -webkit-transition-property: hover;
+ -webkit-transition: background 0.15s ease-in-out;
+ -moz-transition: background 0.15s linear 0s; /* firefox 4 */
+ -o-transition-property: background; /* opera 10.5 */
+ -o-transition-duration: 0.15s;
+
+ line-height: 1.3em;
+ letter-spacing: -0.1em;
+}
+#picker p:hover{
+ background: rgba(255,0,0,.7);
+ color: #d7d7d7;
+}
+strong {
+font-size:2em;
+}
+.title{
+  text-shadow: 1px 0px 2px rgba(0,76,255,.5),
+	    -1px 0px 2px rgba(0,76,255,.5),
+             0px -1px 2px rgba(0,76,255,.5),
+	     0px 1px 2px rgba(0,76,255,.5);
+}
+#pagetitle {
+ z-index: 100;
+ text-transform: none;
+ position: fixed; bottom: 10px; left:17px;
+ font-size:2.5em;
+ letter-spacing:-.05em;
+ line-height: .95em;
+ color:rgba(119,119,119,0);
+ background-color:rgba(255,0,76,.5);
+ box-shadow: 1px 0px 27px rgba(255,0,76,.1),
+	    -1px 0px 27px rgba(255,0,76,.1),
+             0px -1px 27px rgba(255,0,76,.1),
+	     0px 1px 27px rgba(255,0,76,.1);
+ padding:7px;
+ border-radius: 2px;
+}
+h1:hover{
+  text-shadow: 1px 0px 0px rgba(0,76,255,.5),
+	    -1px 0px 0px rgba(0,76,255,.5),
+             0px -1px 0px rgba(0,76,255,.5),
+	     0px 1px 0px rgba(0,76,255,.5);
+ -webkit-transition-property: hover;
+ -webkit-transition: text-shadow 0.3s ease-in-out;
+ -moz-transition: text-shadow 0.3s linear 0s; /* firefox 4 */
+ -o-transition-property: text-shadow; /* opera 10.5 */
+ -o-transition-duration: 0.3s;
+
+}
+#navigation {
+ position: fixed; bottom: 130px; left:17px;
+ z-index: 10;
+}
+{% include navmenu.css %}

assets/css/kid3player.css

@@ -0,0 +1,192 @@
+---
+---
+{% include base.html %}
+
+@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');
+}
+/*! Track Pages */
+html{
+ -webkit-transition:.5s background;
+ transition:.5s background;
+ font-family: Futura, Helvetica, Arial, sans-serif, sans;
+ font-size: 1em;
+}
+body, p{
+ margin:0;
+}
+h1,
+h2,
+h3,
+h4 {
+ font-weight:bold;
+ text-transform: uppercase;
+}
+
+b,
+strong {
+ font-weight:bold;
+}
+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: rgba(0,76,255,0.9);
+}
+a:active {
+ color: #f00;
+}
+#navigation {
+ z-index: 100000;
+ position: fixed; top:10px; left: 10px; z-index: 1000;
+ width: 150px; height: 290px;padding: 10px;
+ background-color: rgba(0,204,255,0.5);   
+ text-align: center;
+ border-radius: 75px ;
+ 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 {
+ background-color: rgba(0,204,255,0.5); 
+ opacity: 1;
+
+}
+#lyrics {
+ position: absolute; left:350px; top:60px; z-index: 1000;
+ min-width:600px;
+ padding: 0 .75em 200px .75em;
+ margin-right:20%;
+ background-color: rgba(0,76,255,0);   
+ text-align: left;
+ font-size: .85em;
+ color: rgba(0,204,255,0);
+ border-radius: 2px ;
+ opacity: 1;
+ -webkit-transition-property: hover;
+ -webkit-transition: background-color 0.7s ease-in-out;
+ -moz-transition: background-color 0.7s linear 0s; /* firefox 4 */
+ -o-transition-property: background-color; /* opera 10.5 */
+ -o-transition-duration: 0.7s;
+}
+#lyrics:hover {
+ background-color: rgba(0,76,255,1); 
+ opacity: .9;
+ z-index: 10;
+ color: rgba(0,204,255,.9);
+ border-radius: 3px;
+}
+
+.title{
+ font-family: Futurabold, Helvetica, Arial, sans-serif, sans;
+ font-size:6em;
+ line-height:.8em;
+ letter-spacing:-.1em;
+ color:rgba(0,204,255,0);
+  text-shadow: 1px 0px 27px rgba(0,204,255,.2),
+	    -1px 0px 27px rgba(0,204,255,.2),
+             0px -1px 27px rgba(0,204,255,.2),
+	     0px 1px 27px rgba(0,204,255,.2);
+}
+h1 {
+  -webkit-transition-property: hover;
+  -webkit-transition: text-shadow 0.7s ease-in-out;
+  -moz-transition: text-shadow 0.7s linear 0s; /* firefox 4 */
+  -o-transition-property: text-shadow; /* opera 10.5 */
+  -o-transition-duration: 0.7s;
+}
+h1:hover {
+  text-shadow: 1px 0px 0px rgba(0,204,255,.5),
+	    -1px 0px 0px rgba(0,204,255,.5),
+             0px -1px 0px rgba(0,204,255,.5),
+	     0px 1px 0px rgba(0,204,255,.5);
+ -webkit-transition-property: hover;
+ -webkit-transition: text-shadow 0.7s ease-in-out;
+ -moz-transition: text-shadow 0.7s linear 0s; /* firefox 4 */
+ -o-transition-property: text-shadow; /* opera 10.5 */
+ -o-transition-duration: 0.7s;
+}
+audio{
+ position:fixed;
+ right:0;
+ bottom:0;
+ min-width:100%;
+ min-height:100%;
+ width:100%;
+ height:100%; 
+ background:#777 no-repeat;
+ background-size:cover;
+ opacity:0;
+ -webkit-transition:1s opacity;transition:1s opacity;
+ display: block;
+}
+.stopfade{
+ opacity:.7;
+
+}
+#mu_pause {
+ font-weight: bold;
+ line-height: 1em;
+ font-size:2em;
+ font-family: Futurabold, Helvetica, Arial, sans-serif;
+ text-transform: uppercase;
+ /* position: fixed;
+ bottom: 30%;
+ right: 40%; */
+ display:block;
+ width:150px;
+ height: 150px;
+ border-radius: 50%;
+ border:none;
+ background:rgba(0,204,255,1);
+ cursor:pointer;
+ -webkit-transition:.3s background;
+ transition:.3s background;
+ z-index: 10000;
+  color: #fff;
+}
+#mu_pause:hover{
+ background:rgba(0,76,255,.9);
+ color: #fff;
+} 
+
+#tracktime {
+ position: fixed; right: 10px; bottom:0px; 
+ font-size: 12em; line-height:0.9em; letter-spacing: -0.1em; color: rgba(119,119,119,0);
+ font-family: Helvetica, Arial, Sans-serif, Sans;
+ font-weight: bold;
+  text-shadow: 1px 0px 14px rgba(0,204,255,.5),
+	    -1px 0px 14px rgba(0,204,255,.5),
+             0px -1px 14px rgba(0,204,255,.5),
+	     0px 1px 14px rgba(0,204,255,.5);
+ z-index: 100;
+}
+.arrow {
+ font-size: 2em;
+ line-height: .9em;
+}
+{% include navmenu.css %}

assets/css/music.css

@@ -0,0 +1,169 @@
+
+---
+---
+{%include base.html %}
+/* skipper */
+
+#skipper {
+ position: absolute; bottom:0; 
+ z-index: 1; 
+ 
+}
+
+/* */
+
+
+audio{
+ position:fixed;
+ right:0;
+ bottom:0;
+ min-width:100%;
+ min-height:100%;
+ width:100%;
+ height:100%; 
+
+
+ background:url({{ base }}/img/bg/frontpage.jpg) no-repeat;
+
+
+
+ background-size:cover;
+ opacity:0;
+ -webkit-transition:1s opacity;transition:1s opacity;
+
+ display: block;
+}
+
+.stopfade{
+ opacity:.7;
+}
+#mu_pause {
+ font-family: futurabold;
+ font-weight: bold;
+ line-height: 1em;
+ font-size:3em;
+ text-transform: uppercase;
+ /* position: fixed;
+ bottom: 30%;
+ right: 40%; */
+ display:block;
+ width:250px;
+ height: 250px;
+ border-radius: 50%;
+ border:none;
+ background:rgba(255,0,0,1);
+ cursor:pointer;
+ -webkit-transition:.3s background;
+ transition:.3s background;
+ z-index: 10000;
+  color: #fff;
+
+
+}
+#mu_pause:hover{
+ background:rgba(0,255,255,.6);
+ color: #fff;
+
+} 
+/* ---- hide divs  ---- */
+
+
+
+#abc,#ab {
+    display: none;
+    background-color: transparent;
+
+}
+/*show .ab*/
+#download:hover ~ #ab {
+    display: block;
+}
+/*show .abc*/
+
+#lyrics:hover ~ #abc {
+    display: block;
+    opacity: 1;
+ -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;
+}
+
+#download:hover ~ #a,
+#lyrics:hover ~ #a{
+    display: none;
+}
+#download,
+#lyrics{
+  font-family: futurabold;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+#a, #ab, #abc {
+   position: fixed;
+   bottom: 0px;
+   right: 0px;
+   width: 75%;
+   height: 85%;
+    background-color: transparent;
+}
+
+/* default */
+#a{
+   width: 1px;
+   height: 1px;
+}
+
+/*  download  */
+#ab {
+    top:140px; left:350px;
+    width: 600px; height: 120px;padding: 17px;
+    background-color: rgba(0, 0, 0, .4);
+    font-family: futura; font-size:24px; text-align: left;
+    opacity: 1;
+    text-transform:uppercase;
+    border-radius:4px;
+}
+
+/*  lyrics  */
+#abc{
+    top:140px; left:350px;
+    width: 600px; height:120px;padding: 17px;
+    background-color: rgba(0, 0, 0, .4);
+    font-family: futura; font-size:12px; text-align: left;
+    opacity: 1;
+    border-radius:4px;
+}
+
+
+
+#tracktime {
+ position: fixed; right: 10px; bottom:-10px; 
+ font-size: 272px; font-family: futurabold; line-height:288px; letter-spacing: -20px; color: rgba(0,255,255,.3);
+
+}
+
+#random_posts{
+ position: fixed; right: 20px; top:140px;
+ width: 300px;
+ font-family: futura; font-size: 12px;
+ line-height: 10px;
+ background:rgba(0,0,0,1);
+ border-radius: 4px;
+ padding: 7px;
+ -webkit-transition:1s opacity;transition:1s opacity;
+ opacity: .3;
+ z-index: 1000;
+}
+hr {
+ border-color: #222;
+}
+#random_posts:hover{
+ opacity: .7;
+
+}
+
+
+

assets/css/normalize.css

@@ -0,0 +1,396 @@
+/*! 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;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * 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;
+}

assets/css/style.css

@@ -0,0 +1,171 @@
+/*! sakrecoer sheet */
+@font-face {
+ font-family: BAnkrutt;
+ src: url('BAnkrutt.otf');
+}
+body {
+ margin: auto;
+ background-color: #606;
+ font-size: 1em;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ padding: 5px 20px 40px 20px;
+ text-align: left;
+ background-image:url('/assets/img/micro_logo.png');
+}
+h1,
+h2,
+h3,
+h4 {
+ font-family: BAnkrutt;
+ text-transform: lowercase;
+}
+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;
+}
+
+/*! NAVIGATION */
+
+#header {
+ margin: auto;
+ 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);
+
+text-align: center;
+}
+#footer {
+ margin: auto;
+ line-height: 12px;
+ font-size: 0.75em;
+ text-align: center;
+ 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);
+}
+#main-menu-links {
+margin: auto;
+ font-family: BAnkrutt;
+ font-size: 3em;
+ margin-right: 5px;
+ line-height: 36px
+}
+
+#main-menu-links a {
+ color: #fff;
+ text-decoration: none;
+}
+#main-menu-links a:hover,
+#main-menu-links a:focus {
+ color: #f00;
+}
+#main-menu-links a:active {
+ color: #000;
+}
+#footer-menu-links {
+margin: auto;
+ font-family: BAnkrutt;
+ font-size: 3em;
+ line-height: 36px;
+ margin: auto;
+ text-align: center;
+ 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);
+}
+
+#footer-menu-links a {
+ color: #fff;
+ text-decoration: none;
+}
+#footer-menu-links a:hover,
+#main-menu-links a:focus {
+ color: #f00;
+}
+#footer-menu-links a:active {
+ color: #000;
+}
+
+/*! CONTENT */
+
+#content{
+ margin: auto;
+ text-shadow:2px 2px 4px #fff;
+ text-align: left;
+}
+#About .about,
+#Blog .blog,
+#Discography .discog,
+#Music .music,
+#Video .video {
+  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);
+}
+.tagline {
+ text-align: center;
+ margin-right: 5px;
+ margin-top: -5px;
+ font-size: 1.2em;
+}
+.date {
+  font-size: 0.6em;
+}
+/* Fullscreen Background image */
+.image-fullscreen,
+.image-fullscreen .mask {
+  background-repeat: repeat;
+  position:fixed;
+  left:0px;
+  top:0px;
+  right:0px;
+  bottom:0px;
+  z-index: -1;
+  }
+
+td {
+  vertical-align: top;
+}
+#nextpager {
+ width: 100%;
+ text-align: center;
+ font-size: 1em;
+ padding: 30px 0 0 0;
+}

assets/css/style2014.css

@@ -0,0 +1,6 @@
+---
+---
+{% include base.html %}
+{% include normalize.css %}
+{% include style.css %}
+{% include navmenu.css %}