test

8 files changed, 154 insertions, 173 deletions

diff --git a/crumbs/static/css/cr_gay_override.css b/crumbs/static/css/cr_gay_override.css
index a8c8733..5f83302 100644
--- a/crumbs/static/css/cr_gay_override.css
+++ b/crumbs/static/css/cr_gay_override.css
@@ -1,17 +1,5 @@
-/* This is the block container */
-.gay {
-    width: 0 auto;
-    height: 12px;
-    margin: 0 auto;
-    display: flex;
-    align-self: center;
-    padding-bottom: 25px;
-}
 
 /* This is a block */
 .colour {
-    display: flex;
-    flex-direction: column;
     height: 12px;
-    width: 78px;
 }
diff --git a/crumbs/static/css/cr_title.css b/crumbs/static/css/cr_title.css
index cced3b4..c8344c9 100644
--- a/crumbs/static/css/cr_title.css
+++ b/crumbs/static/css/cr_title.css
@@ -4,19 +4,24 @@ This file contains all definitions are are EXCLUSIVE for the title
 
 */
 
-div.navigation {
+/* div.navigation {
     padding-top: 12px;
     padding-bottom: 75px;
     padding-right: 32px;
     height: 75px;
     line-height: 75px;
-  }
+  } */
   
 
-.title {
+.title h1 {
     padding-top: 20px;
     padding-bottom: 50px;
-    font-size: 58px;
+    font-size: 36px;
+    font-weight: 500;
+}
+
+.navigation {
+    border-bottom: 1px solid white;
 }
 
 /* For the title page we want other paragraph styles */
@@ -30,31 +35,15 @@ p {
   }
 
 
-/* This is the block container */
-.gay {
-    width: 0 auto;
-    height: 50px;
-    margin: 0 auto;
-    display: flex;
-    padding-bottom: 150px;
-}
-
-/* This is a block */
-.colour {
-    display: flex;
-    flex-direction: column;
-    height: 75px;
-    width: 75px;
-}
-
+/* 
 .span {
     display: inline-block;
-}
+} */
 
-a, a:visited, a:hover, a:active, a:link{
+/* a:hover, a:active, a:link{
     color: #BEBEBE;
     text-decoration: none;
-}
+} */
 
 #twitter:hover {
     color: #6997c8;
diff --git a/crumbs/static/css/crumbs.css b/crumbs/static/css/crumbs.css
index e5e102e..15c1c94 100644
--- a/crumbs/static/css/crumbs.css
+++ b/crumbs/static/css/crumbs.css
@@ -25,15 +25,6 @@ a:hover {
   text-decoration: none;
 }
 
-p {
-  font-size: 22px;
-  font-weight: 300;
-  padding-bottom: 15px;
-  padding-left: 35px;
-  padding-right: 50px;
-  text-indent: 25px;
-}
-
 li {
   font-size: 22px;
   font-weight: 300;
@@ -52,28 +43,43 @@ h1, h2, h3, h4 {
   padding-bottom: 15px;
 }
 
-.card h2, h3, h4 {
-  padding-left: 15px;
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 
-div.navigation {
+/* .card h2, h3, h4 {
+  padding-left: 15px;
+} */
+
+.navigation {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  height: 50px;
+  line-height: 50px;
+  font-weight: 500;
+  font-size: 22px;
   padding-top: 12px;
   padding-bottom: 25px;
+  /* 
   padding-right: 32px;
   height: 50px;
-  line-height: 50px;
+  line-height: 50px; */
+
+  padding-right: 32px;
 }
 
-div.navigation a {
-  font-weight: 500;
-  font-size: 22px;
+.navigation a {
+  
   color:#FFF;
   
   text-decoration: none;
   padding-left: 48px;
-  /* margin-left: 20px; */
   text-transform: lowercase;
-  /* transition: all 0.2s ease-out; */
 }
 
 .title {
@@ -82,6 +88,22 @@ div.navigation a {
   margin-left: 25px;
 }
 
+.page-title {
+  flex-grow: 1;
+}
+
+.gay {
+  display: flex;
+  flex-direction: row;
+}
+
+/* This is a block */
+.colour {
+  max-height: calc(1100px / 15);
+  height: calc((100vw - 2rem) / 15);
+  flex-grow: 1;
+}
+
 pre, code {
   background: #222222;
   padding: 15px;
@@ -150,42 +172,41 @@ code { padding: 3px 3px; }
 
 */
 
-div.card {
-  padding: 25px;
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 50px;
   background-color: #CECECE;
   color: #222222;
-  width: 100%;
   margin-bottom: 25px;
 }
 
-div.card h1 {
-  font-weight: 500;
-}
-
-div.card hr {
-  background-color: #222222;
-  height: 1px;
-  border: 1px;
-  margin-top: 45px;
-  margin-bottom: 45px;
-  margin-left: 25px;
-  margin-right: 25px;
+.card-header {
+  border-bottom: 1px solid #222222;
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
-
-div.article-title {
-  padding-bottom: 50px;
-  margin-bottom: 15px;
+.card-header-url {
+  padding: 0;
+  margin: 0;
+  flex-grow: 1;
 }
 
-.text-right {
-  text-align: right;
+.card-content p {
+  font-size: 22px;
+  font-weight: 300;
+  padding-bottom: 15px;
+  padding-left: 35px;
+  padding-right: 50px;
+  text-indent: 25px;
 }
 
-div.article-title p {
+.article-meta p {
   font-style: italic;
   font-size: 16px;
   line-height: 16px;
-  padding-bottom: 0px;
-  /* padding-bottom: 15px; */
+  text-align: right;
 }
diff --git a/crumbs/templates/article.html b/crumbs/templates/article.html
index 0161fdf..3406502 100755
--- a/crumbs/templates/article.html
+++ b/crumbs/templates/article.html
@@ -6,24 +6,20 @@
 
 {% block content %}
 
-<dl class="dl-horizontal">
+<h1>{{ article.title }}</h1>
 
-    <h1>{{ article.title }}</h1>
-    <br />
-
-    <div class="card">
+<div class="card">
 
+    <div class="card-header">
         {% set in_article = true %}
         {% include "article_header.html" %}
-        <!-- <h1>{{ article.title }}</h1>
+    </div>
 
-        <div class="pull-right">
-            <p class="timer">This article takes {{article.read_time_string}} to read.</p>
-        </div> -->
-        {{ article.content }}
+    <div class="card-content">
+            {{ article.content }}
     </div>
-</dl>
- 
+</div>
+
     <!-- <div class="col-lg-9 content">
         {{ article.content }}
 
diff --git a/crumbs/templates/article_header.html b/crumbs/templates/article_header.html
index a4412e5..4f265b7 100644
--- a/crumbs/templates/article_header.html
+++ b/crumbs/templates/article_header.html
@@ -2,26 +2,19 @@
     <p>< Back</p>
 </div> -->
 
-<div class="article-title text-right">
+{% if in_article == true %}
+<h3 class="card-header-url"><a href="{{ SITEURL }}/{{ article.category|lower }}"> ⇠ Back</a></h3>
+{% endif %}
 
-    {% if in_article == true %}
-    <div class="pull-left">
-        <h3><a href="{{ SITEURL }}/{{ article.category|lower }}"> ⇠ Back</a></h3>
-    </div>
-    {% endif %}
-
-    <div class="pull-right">
-        <p>
-            {% if article.tags|length > 0 %}
-                {% for tag in article.tags|sort %}
-                <strong>{{ tag }} |</strong>
-                {% endfor %}
-                Tags
-            {% endif %}
-        </p>
-        <p>Published <span class="tc-brown"><strong>{{ article.locale_date }}</strong></span></p>
-        <p>This article takes <span class="tc-brown"><strong>{{article.read_time_string}}</strong></span> to read.</p>
-    </div>
-
-</div>
-<hr />
\ No newline at end of file
+<div class="article-meta">
+    <p>
+        {% if article.tags|length > 0 %}
+            {% for tag in article.tags|sort %}
+            <strong>{{ tag }} |</strong>
+            {% endfor %}
+            Tags
+        {% endif %}
+    </p>
+    <p>Published <span class="tc-brown"><strong>{{ article.locale_date }}</strong></span></p>
+    <p>This article takes <span class="tc-brown"><strong>{{article.read_time_string}}</strong></span> to read.</p>
+</div>
\ No newline at end of file
diff --git a/crumbs/templates/base.html b/crumbs/templates/base.html
index 6836a7f..8f6ef31 100755
--- a/crumbs/templates/base.html
+++ b/crumbs/templates/base.html
@@ -4,52 +4,48 @@
         <meta charset="utf-8">
         <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
 
-        <!-- Load Montserrat, Inconsolata and font-awesome -->
-        <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"> 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
         <!-- Load bootstrap, then my own CSS -->
-        <link href="{{ SITEURL }}/theme/css/bootstrap.min.css" rel="stylesheet">
+        <!-- <link href="{{ SITEURL }}/theme/css/bootstrap.min.css" rel="stylesheet"> -->
         <link href="{{ SITEURL }}/theme/css/pygment.css" rel="stylesheet">
         <link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
         <link href="{{ SITEURL }}/theme/css/cr_gay_override.css" rel="stylesheet">
+
+        <!-- Load Montserrat, Inconsolata and font-awesome -->
+        <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"> 
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        
     </head>
 
-    <body>
+    <body class="not-home">
         <div class="container">
 
             <!-- HEADER FOR EVERY PAGE -->
-            <div>
-                <div class="navigation">
-                    <div class="nav pull-left">
-    
-                        <!-- The page title -->
-                        <div class="title" title="Inconsolata is my favourite monospace font, after all...">
-                                <span id="t-color-red"><b># ~ </b></span>
-                                <span id="t-color-org">Fun</span>
-                                <span id="t-color-ylw">Memory</span>
-                                <span id="t-color-grn">Violations</span>
-                                <span class="cursor" id="cursor">&nbsp;▁</span>
-                        </div>
-                    </div>
-
-                    <div class="nav pull-right">
-                        {% for title, link in MENUITEMS %}
-                            {% 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 class="navigation">
+
+                <div class="page-title" title="Inconsolata is my favourite monospace font, after all...">
+                    <span id="t-color-red"><b># ~ </b></span>
+                    <span id="t-color-org">Fun</span>
+                    <span id="t-color-ylw">Memory</span>
+                    <span id="t-color-grn">Violations</span>
+                    <span class="cursor" id="cursor">&nbsp;▁</span>
                 </div>
 
-                <br/>
-
-                <!-- We draw a flattened version of the colour bar navigation -->
-                {% include "super_gay.html" %}
+                <!-- Loop through all pages -->
+                {% for title, link in MENUITEMS %}
+                    <!-- Do magic with http/https -->
+                    {% if 'http://' in link or 'https://' in link %}
+                        <a class="nav-item" href="{{ link }}">{{ title }} </a>
+                    {% else %}
+                        <a class="nav-item" href="{{ SITEURL }}{{ link }}">{{ title }} </a>
+                    {% endif %}
+                {% endfor %}
             </div>
+
+            {% include "super_gay.html" %}
+     <!--        <div class="gay-bar-container">
+                
+            </div> -->
             <!-- END HEADER FOR EVERY PAGE -->
 
             {% block content %}
diff --git a/crumbs/templates/category.html b/crumbs/templates/category.html
index d88ab8c..916ea92 100755
--- a/crumbs/templates/category.html
+++ b/crumbs/templates/category.html
@@ -7,19 +7,19 @@
 
 <h1>{{ category }}</h1>
 
-<br/>
-
-<dl class="dl-horizontal">
-    {% for article in articles %}
-    <div class="card">
-        <h2><b><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></b></h2>
+{% for article in articles %}
+<div class="card">
+    <div class="card-header">
+        <h2 class="card-header-url"><b><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></b></h2>
         {% set in_article = false %}
         {% include "article_header.html" %}
+    </div>
 
-        <p>{{ article.summary }}</p>
+    <div class="card-content">
+        {{ article.summary }}
     </div>
-    {% endfor %}
-</dl>
+</div>
+{% endfor %}
 
 
 
diff --git a/crumbs/templates/home.html b/crumbs/templates/home.html
index b464aa3..d9dd0e9 100755
--- a/crumbs/templates/home.html
+++ b/crumbs/templates/home.html
@@ -2,43 +2,41 @@
 <html lang="{{ DEFAULT_LANG }}">
     <head>
         <meta charset="utf-8">
-        <title{{ SITENAME }}</title>
+        <title>{{ SITENAME }}</title>
 
         <!-- Load bootstrap, then my own CSS -->
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
         <!-- <link href="{{ SITEURL }}/theme/css/bootstrap.min.css" rel="stylesheet"> -->
         <link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
-        <link href="{{ SITEURL }}/theme/css/cr_title.css" rel="stylesheet">
+       <link href="{{ SITEURL }}/theme/css/cr_title.css" rel="stylesheet">
 
         <!-- Fonts -->
-        <!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,500" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,500" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     </head>
 
-    <body>
+    <body class="home">
 
         <!-- Outer bootstrap container -->
         <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>
+                <!-- Loop through all pages -->
+                {% for title, link in MENUITEMS %}
+                    <!-- Do magic with http/https -->
+                    {% if 'http://' in link or 'https://' in link %}
+                        <a class="nav-item" href="{{ link }}">{{ title }} </a>
+                    {% else %}
+                        <a class="nav-item" href="{{ SITEURL }}{{ link }}">{{ title }} </a>
+                    {% endif %}
+                {% endfor %}
             </div>
             <!-- /Static navbar -->
 
-            <hr/>
+            <!-- <hr/> -->
 
             <!-- The page title -->
             <div class="title" title="Inconsolata is my favourite monospace font, after all...">