Working on the CSS some more, it's really nice now :)

3 files changed, 129 insertions, 37 deletions

diff --git a/crumbs/static/css/cr_title.css b/crumbs/static/css/cr_title.css
index 4f8590c..742a535 100644
--- a/crumbs/static/css/cr_title.css
+++ b/crumbs/static/css/cr_title.css
@@ -5,13 +5,13 @@ This file contains all definitions are are EXCLUSIVE for the title
 */
 
 .title {
-    padding-top: 50px;
+    padding-top: 20px;
     padding-bottom: 50px;
 }
 
 .title h1 {
     font-family: 'Inconsolata', monospace;
-    font-size: 48px;
+    font-size: 58px;
 }
 
 .cursor {
@@ -38,30 +38,84 @@ This file contains all definitions are are EXCLUSIVE for the title
     margin: 0 auto;
     display: flex;
     padding-bottom: 150px;
-  }
+}
   
   /* This is a block */
-  .colour {
+.colour {
     display: flex;
     flex-direction: column;
     height: 75px;
     width: 75px;
-  }
+}
+
+/* Colour defitions */
+.colour1  { background-color: #3c3c3c; }
+.colour2  { background-color: #525252; }
+.colour3  { background-color: #74736a; }
+.colour4  { background-color: #9f9e93; }
+.colour5  { background-color: #d2cfc7; }
+.colour6  { background-color: #e7e5df; }
+.colour7  { background-color: #f1f0ec; }
+.colour8  { background-color: #ef787b; }
+.colour9  { background-color: #f6915f; }
+.colour10 { background-color: #fdcb71; }
+.colour11 { background-color: #99cb9b; }
+.colour12 { background-color: #6ccaca; }
+.colour13 { background-color: #6997c8; }
+.colour14 { background-color: #ca98c9; }
+.colour15 { background-color: #ce7b59; }
   
-  /* Colour defitions */
-  .colour1  { background-color: #3c3c3c; }
-  .colour2  { background-color: #525252; }
-  .colour3  { background-color: #74736a; }
-  .colour4  { background-color: #9f9e93; }
-  .colour5  { background-color: #d2cfc7; }
-  .colour6  { background-color: #e7e5df; }
-  .colour7  { background-color: #f1f0ec; }
-  .colour8  { background-color: #ef787b; }
-  .colour9  { background-color: #f6915f; }
-  .colour10 { background-color: #fdcb71; }
-  .colour11 { background-color: #99cb9b; }
-  .colour12 { background-color: #6ccaca; }
-  .colour13 { background-color: #6997c8; }
-  .colour14 { background-color: #ca98c9; }
-  .colour15 { background-color: #ce7b59; }
-  
\ No newline at end of file
+
+.span {
+    display: inline-block;
+}
+
+a, a:visited, a:hover, a:active, a:link{
+    color: #BEBEBE;
+    text-decoration: none;
+}
+
+#twitter:hover {
+    color: #6997c8;
+    animation: .45s jump infinite linear;
+}
+#github:hover {
+    color: #ef787b;
+    animation: .45s jump infinite linear;
+}
+#keys:hover {
+    color: #ca98c9;
+    animation: .45s jump infinite linear;
+}
+
+#email:hover {
+    color: #99cb9b;
+}
+
+div.icons {
+    padding-top: 25px;
+    padding-bottom: 25px;
+}
+
+.icons h1 {
+    font-family: Inconsolata;
+    font-size: 42px;
+    line-height: 42px;
+    font-style: normal;
+    font-variant: normal;
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-.075em);
+  }
+  80% {
+    transform: translateY(.025em);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
diff --git a/crumbs/static/css/crums.css b/crumbs/static/css/crumbs.css
index aa28ff2..3ec495a 100644
--- a/crumbs/static/css/crums.css
+++ b/crumbs/static/css/crumbs.css
@@ -5,13 +5,8 @@
 **************************************/
 
 
-
 body {
   font-family: 'Montserrat', sans-serif;
-  font-style: normal;
-  font-variant: normal;
-  /* font-size: 26px; */
-  /* font-weight: 400; */
   color: #BEBEBE;
   background-color: #222222;
   background-image: none;
@@ -25,3 +20,28 @@ p {
   font-size: 22px;
   font-weight: 300;
 }
+
+
+div.navigation {
+  padding-top: 12px;
+  padding-bottom: 75px;
+  padding-right: 32px;
+  height: 75px;
+  line-height: 75px;
+}
+
+div.navigation a {
+  font-weight: 500;
+  font-size: 22px;
+  color:#FFF;
+  
+  text-decoration: none;
+  padding-left: 48px;
+  /* margin-left: 20px; */
+  text-transform: lowercase;
+  /* transition: all 0.2s ease-out; */
+}
+
+div.navigation a:hover {
+
+}
\ No newline at end of file
diff --git a/crumbs/templates/home.html b/crumbs/templates/home.html
index 27fd976..3199d9c 100755
--- a/crumbs/templates/home.html
+++ b/crumbs/templates/home.html
@@ -2,15 +2,12 @@
 <html lang="{{ DEFAULT_LANG }}">
   <head>
     <meta charset="utf-8">
-    {% block head %}
 
-    <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
-
-    <!-- Inconsolata for code? -->
-    <!-- <link href="https://fonts.googleapis.com/css?family=Inconsolata|Quicksand:300,400|Roboto:300,400&amp;subset=cyrillic,cyrillic-ext" rel="stylesheet"> -->
+    <title{{ SITENAME }}</title>
 
     <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500|Raleway:200,200i,300,300i,400,400i,500" rel="stylesheet"> 
+    <!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500|Raleway:200,200i,300,300i,400,400i,500" rel="stylesheet">  -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500;subset=cyrillic,latin-ext" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 
     <!-- Include font awesome -->
@@ -18,11 +15,10 @@
 
     <!-- Load bootstrap, then my own CSS -->
     <link href="{{ SITEURL }}/theme/css/bootstrap.min.css" rel="stylesheet">
-    <link href="{{ SITEURL }}/theme/css/crums.css" rel="stylesheet">
+    <link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
     <link href="{{ SITEURL }}/theme/css/cr_title.css" rel="stylesheet">
     <!-- /Stylesheets -->
 
-    {% endblock head %}
   </head>
 
   <body>
@@ -31,11 +27,28 @@
     <div class="container">
 
       <!-- Add dynamic header -->
+      <div class="navigation">
+        <div class="nav pull-right">
+
+          <!-- Loop through all pages -->
+          {% for title, link in MENUITEMS %}
+
+            <!-- Do magic with http/https -->
+            {% if 'http://' in link or 'https://' in link %}
+              <a class="naughty" href="{{ link }}">{{ title }} </a>
+            {% else %}
+              <a class="naughty" href="{{ SITEURL }}{{ link }}">{{ title }} </a>
+            {% endif %}
+
+          {% endfor %}
+        </div>
+      </div>
+      <!-- /Static navbar -->
 
       <hr/>
 
       <!-- The page title -->
-      <div class="title">
+      <div class="title" title="Inconsolata is my favourite monospace font">
         <h1>
           <span id="t-color-red"><b># ~ </b></span>
           <span id="t-color-org">Fun</span>
@@ -72,8 +85,13 @@
         I like taking photos, writing stories and starting way too many personal projects.
       </p>
 
+      <div class="icons">
+        <a href="https://twitter.com/spacekookie"><h1 id="twitter"><i class="fa fa-twitter"></i> Twitter</h1></a>
+        <a href="https://github.com/spacekookie"><h1 id="github"><i class="fa fa-github"></i> Github</h1></a>
+        <a href="https://spacekookie.de/kookie.txt"><h1 id="keys"><i class="fa fa-key"></i> Keys</h1></a>
+      </div>
 
-
+      <p>To get in touch with me, you can also send an e-mail to <a href="mailto:kookie@spacekookie.de" id="email"><b>kookie@spacekookie.de</b></a></p>
 
     </div>