1 files changed, 63 insertions, 42 deletions

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;
 }