3 files changed, 76 insertions, 78 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;
 }