Small CSS fixes and removed About

balkiantheme/static/css/main-desktop.css

@@ -1,109 +1,7 @@
 #badge{
-  position: relative;
+  height: 270px;
-  margin: 0 auto 30px;
-  width: 180px;
-  height: 210px;
-  padding: 0;
-  -webkit-transform: rotate(-4deg);
-  -moz-transform: rotate(-4deg);
-  transform: rotate(-4deg);
 }
 
-/* entire container, keeps perspective */
-
-.flip-container {
-  perspective: 1000;
-  -webkit-perspective: 1000;
-}
-
-#badge {
-  transition: 0.2s;
-  transition-delay: 0.4s;
-}
-
-#badge:hover {
-  -webkit-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  -moz-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  transition-delay: 0s;
-}
-
-/* flip the pane when hovered */
-.flip-container:hover .flipper, .flip-container.hover .flipper {
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-  transform: rotateY(180deg);
-}
-
-.flip-container, .front, .back {
-  width: 180px;
-  height: 180px;
-}
-
-/* flip speed goes here */
-.flipper {
-  transition: 0.8s;
-  transform-style: preserve-3d;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-
-  position: relative;
-}
-
-/* hide back of pane during swap */
-.front, .back {
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 2px;
-  padding-bottom: 30px;
-  background-color: black;
-  box-shadow: -5px 5px 5px #555;
-  -webkit-box-shadow: -5px 5px 15px #555;
-  -moz-box-shadow: -5px 5px 15px #555;
-}
-
-/* front pane, placed above back */
-.front {
-  z-index: 3;
-}
-
-/* back, initially hidden pane */
-.back {
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-  transform: rotateY(180deg);
-  z-index: 4;
-}
-
-.sticky:after {
-  content: "";
-  height: 20px;
-  width: 80px;
-  background: rgba(255,255,255,0.5);
-  position: absolute;
-  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-  top: 0;
-  right: 8px;
-  margin: -8px -40px 0 0;
-  z-index: 1000;
-  -webkit-transform:rotate(43deg);
-  -moz-transform:rotate(43deg);
-  backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-
-/*.flip-container:hover .sticky:after {*/
-  /*content: "";*/
-  /*visibility: hidden;*/
-/*}*/
 
 #container {
   width: 1200px;
@@ -114,18 +12,6 @@
   width: 1200px;
 }
 
-#sidebar {
-  position: relative;
-  width: 300px;
-  float: left;
-  padding: 20px;
-  text-align: right;
-  border-right: dashed 1px #DDD;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-}
-
 
 #content {
   width: 840px;
@@ -243,15 +129,6 @@ div.navbar {
   float: left;
 }
 
-#about li {
-  line-height:2em;
-  vertical-align: middle
-  border-bottom:1px solid #DDD;
-  float:left;
-  display:inline;
-  width: 33.333%;
-}
-
 @-webkit-keyframes toright {
   from { 
     padding-left: 0px;

balkiantheme/static/css/main-medium.css

@@ -1,105 +1,3 @@
-#badge{
-  position: relative;
-  margin: 0px auto 10px;
-  width: 80%;
-  height: 180px;
-  padding: 0;
-  -webkit-transform: rotate(-4deg);
-  -moz-transform: rotate(-4deg);
-  transform: rotate(-4deg);
-}
-
-/* entire container, keeps perspective */
-
-.flip-container {
-  perspective: 1000;
-  -webkit-perspective: 1000;
-}
-
-#badge {
-  transition: 0.2s;
-  transition-delay: 0.4s;
-}
-
-#badge:hover {
-  -webkit-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  -moz-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  transition-delay: 0s;
-}
-
-/* flip the pane when hovered */
-.flip-container:hover .flipper, .flip-container.hover .flipper {
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-  transform: rotateY(180deg);
-}
-
-.flip-container, .front, .back {
-  width: 100%;
-}
-
-/* flip speed goes here */
-.flipper {
-  transition: 0.8s;
-  transform-style: preserve-3d;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-
-  position: relative;
-}
-
-/* hide back of pane during swap */
-.front, .back {
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 1%;
-  padding-bottom: 10%;
-  background-color: black;
-  box-shadow: -5px 5px 5px #555;
-  -webkit-box-shadow: -5px 5px 15px #555;
-  -moz-box-shadow: -5px 5px 15px #555;
-}
-
-/* front pane, placed above back */
-.front {
-  z-index: 3;
-}
-
-/* back, initially hidden pane */
-.back {
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  z-index: 4;
-}
-
-.sticky:after {
-  content: "";
-  height: 20px;
-  width: 80px;
-  background: rgba(255,255,255,0.5);
-  position: absolute;
-  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-  top: 0;
-  right: 8px;
-  margin: -8px -40px 0 0;
-  z-index: 1000;
-  -webkit-transform:rotate(43deg);
-  -moz-transform:rotate(43deg);
-  backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-
-.sticky:hover:after {
-  content: "";
-  visibility: hidden;
-}
 
 #contentwrapper {
   position: relative;

balkiantheme/static/css/main.css

@@ -17,12 +17,169 @@ body {
   margin: 0 auto;
 }
 
+
+
+#sidebar {
+  position: relative;
+  width: 300px;
+  float: left;
+  padding: 20px;
+  text-align: right;
+  border-right: dashed 1px #DDD;
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+  box-sizing: border-box;         /* Opera/IE 8+ */
+}
+
+.icons {
+    text-align: center;
+    color: #333;
+    /* text-shadow: 2px 2px #FFD700; */
+}
+
+.coolicon {
+    position: relative;
+}
+
+.coolicon:hover .icon-stack {
+    visibility: none;
+}
+
+.coolicon:hover .explanation {
+    white-space: nowrap;
+    background: #FFD700;
+    display: block;
+    position:absolute;
+    border: 1px solid black;
+    z-index: 99;
+    top: 1em;
+    color: black;
+    font-family: Comfortaa;
+    /* width: 100%; */
+    padding: 0.5em;
+    /* border-radius: 0 10px 10px; */
+    overflow: visible;
+    left: 0;
+  /* transform-origin: 95% 50%; */
+  /* -moz-transform-origin: 95% 50%; */
+  /* -webkit-transform-origin: 95% 50%; */
+  -webkit-transform: rotate(-4deg);
+  -moz-transform: rotate(-4deg);
+  transform: rotate(-4deg);
+}
+/* .coolicon:hover { */
+/*     width: 5em; */
+/* } */
+.explanation {
+    display:none;
+}
+#badge{
+  position: relative;
+  margin: 0px auto 10px;
+  width: 80%;
+  height: 180px;
+  padding: 0;
+  margin-top: -2em;
+  -webkit-transform: rotate(-4deg);
+  -moz-transform: rotate(-4deg);
+  transform: rotate(-4deg);
+  transition: 0.2s;
+  transition-delay: 0.4s;
+}
+
+/* entire container, keeps perspective */
+
+.flip-container {
+  perspective: 1000;
+  -webkit-perspective: 1000;
+}
+
+#badge:hover {
+  -webkit-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
+  -moz-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
+  transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
+  transition-delay: 0s;
+}
+
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+
+.flip-container, .front, .back {
+  width: 100%;
+}
+
+/* flip speed goes here */
+.flipper {
+  transition: 0.8s;
+  transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+
+  position: relative;
+}
+
+/* hide back of pane during swap */
+.front, .back {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 1%;
+  padding-bottom: 10%;
+  background-color: black;
+  box-shadow: -5px 5px 5px #555;
+  -webkit-box-shadow: -5px 5px 15px #555;
+  -moz-box-shadow: -5px 5px 15px #555;
+}
+
+/* front pane, placed above back */
+.front {
+  z-index: 3;
+}
+
+/* back, initially hidden pane */
+.back {
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  z-index: 4;
+}
+
+.sticky:after {
+  content: "";
+  height: 20px;
+  width: 80px;
+  background: rgba(255,255,255,0.5);
+  position: absolute;
+  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+  top: 0;
+  right: 8px;
+  margin: -8px -40px 0 0;
+  z-index: 1000;
+  -webkit-transform:rotate(43deg);
+  -moz-transform:rotate(43deg);
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.sticky:hover:after {
+  content: "";
+  visibility: hidden;
+}
+
 #contentwrapper {
   position: relative;
   background-color: rgba(255, 255, 255, 0.5);
   overflow: display;
   border: 1px solid #CCC;
-  padding-bottom: 12.5em;
+  padding-bottom: 10.5em;
 }
 
 a {
@@ -31,12 +188,12 @@ a {
 }
 
 footer {
-  height: 12em;
+    font-family: Comfortaa;
+    height: 10em;
     bottom: -0em;
     position: absolute;
     background-color: #000;
     color: white;
-  font-weight: bold;
     text-align: center;
     margin: 0 auto;
     width: 100%;
@@ -152,7 +309,7 @@ footer a:hover {
   position: relative;
   list-style-type: none;
   display: inline-block;
-  height: 100px;
+  height: 80px;
   width: 80px;
   padding: 0;
 }

balkiantheme/templates/base.html

@@ -19,6 +19,22 @@
     <link rel="stylesheet" media="only screen and (min-width: 600px) and (max-width: 1199px)" href="{{ SITE_URL }}/theme/css/main-medium.css">
     <link rel="stylesheet" media="only screen and (min-width: 1200px)" href="{{ SITE_URL }}/theme/css/main-desktop.css">
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300|Comfortaa' rel='stylesheet' type='text/css'>
+<!-- Piwik -->
+    <script type="text/javascript">
+    var _paq = _paq || [];
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+    var u="//piwik.sinpapel.es/";
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
+    _paq.push(['setSiteId', 2]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+    })();
+    </script>
+    <noscript><p><img src="//piwik.sinpapel.es/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
+    <!-- End Piwik Code -->
+
   </head>
   <body>
     <div id="container" class="container">
@@ -62,8 +78,30 @@
                 </div>
               </div>
           </div>
+
+          <div id="about" style="clear:both;">
+            <!-- <h1 class="title">Interests</h1> -->
+            <div class="icons">
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-linux"></i></span><span class="explanation">Linux lover</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-android"></i></span><span class="explanation">Android dev</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-github"></i> </span><span class="explanation">GitHub user</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-stackexchange"></i> </span><span class="explanation">StackExchange fan</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-music"></i> </span><span class="explanation">Music lover</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-film"></i> </span><span class="explanation">Movie fan</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-comments"></i> </span><span class="explanation">Always on IM</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-laptop"></i> </span><span class="explanation">Always on a PC</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-pencil"></i> </span><span class="explanation">Occassional writter</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-moon"></i> </span><span class="explanation">Night owl</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-terminal"></i></span>      <span class="explanation">CLI user</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-flag"></i></span>      <span class="explanation">Linguist wannabe</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-code"></i> </span>           <span class="explanation">Love to code</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-book"></i></span>      <span class="explanation">Keen reader</span></span>
+              <span class="coolicon"><span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-quote-right"></i></span>      <span class="explanation">Quotes on demand</span></span>
+            </div>
+          </div>
+          
           <div class="entries">
-            <h1 class="title">Latest entries</h1>
+            <h2 class="title">Latest entries</h2>
             <dl>
                 {% for p in articles[:5] %}
                 <dt><a href="{{ SITE_URL }}/{{ p.url }}">{{ p.title }}</a></dt>
@@ -73,6 +111,7 @@
                 {% endfor %}
             </dl>
           </div>
+
           <!--Sidebar content-->
         </div>
         <div id="content">

content/pages/about.md

@@ -1,22 +0,0 @@
-title: About
-
-<div id="about">
-  <ul>
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-linux"></i> </span> GNU/Linux Fanboy</li>
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-android"></i> </span> Android User</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-github"></i> </span> Github Fan</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-stackexchange"></i> </span> StackOverflow Dependent</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-music"></i> </span> Music Lover</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-film"></i> </span> Films Lover</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-comments"></i> </span> Usual Chatter</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-laptop"></i> </span> IT Person</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-gamepad"></i> </span> Casual Gamer</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-pencil"></i> </span> Amateur Writer</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-moon"></i> </span> Night Owl</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-terminal"></i> </span> Terminal User</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-flag"></i> </span> Hobbyist Linguist</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-code"></i> </span> Amateur Coder</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-book"></i> </span> On-and-off Reader</li>      
-    <li> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base" ></i><i class="icon-quote-right"></i> </span> Quote lover</li>      
-  </ul>
-</div>