From 99ed8ed959276d2645aaa1890af8c7ec16c73057 Mon Sep 17 00:00:00 2001
From: CodeMyst <codemyst@outlook.com>
Date: Mon, 19 Nov 2018 18:00:57 +0100
Subject: [PATCH] Restyled the paste page * Better highlighted the content *
 Title and navigation combined into one codeblock * Moved id and createdAt at
 the bottom

---
 public/style/index.css         | 22 ++++++++++++++++++++++
 public/style/source/index.scss | 31 +++++++++++++++++++++++++++++++
 views/layout.dt                |  8 +++-----
 views/paste.dt                 |  8 ++++----
 4 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/public/style/index.css b/public/style/index.css
index 4134604d..03dcdb1f 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -41,6 +41,21 @@ select {
   font-weight: bold;
   letter-spacing: 0.2rem; }
 
+.page-title {
+  background-color: #222222;
+  display: block;
+  border-radius: 0.3rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin: 0 .2rem;
+  padding-left: 3.2rem;
+  padding-top: 1rem;
+  text-decoration: underline; }
+
+.page-nav {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
 code.hljs {
   background-color: #222222;
   font-family: "Ubuntu Mono", monospace; }
@@ -109,6 +124,13 @@ table.http-body {
     padding-left: 1rem;
     border: none; }
 
+.pastemyst-content {
+  margin-top: 6rem;
+  margin-bottom: 6rem; }
+  .pastemyst-content code {
+    border: 2px solid #ee720d;
+    box-sizing: border-box; }
+
 footer {
   margin: 3rem 0; }
   footer p {
diff --git a/public/style/source/index.scss b/public/style/source/index.scss
index 2b020054..dce1c6e5 100644
--- a/public/style/source/index.scss
+++ b/public/style/source/index.scss
@@ -82,6 +82,25 @@ select
     }
 }
 
+.page-title
+{
+    background-color: #222222;
+    display: block;
+    border-radius: 0.3rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0 .2rem;
+    padding-left: 3.2rem;
+    padding-top: 1rem;
+    text-decoration: underline;
+}
+
+.page-nav
+{
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
 code.hljs
 {
     background-color: $color-nanolight;
@@ -186,6 +205,18 @@ table.http-body
     }
 }
 
+.pastemyst-content
+{
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+
+    code
+    {
+        border: 2px solid $color-range;
+        box-sizing: border-box;
+    }
+}
+
 footer
 {
     margin: 3rem 0;
diff --git a/views/layout.dt b/views/layout.dt
index b72435f8..849f0e2b 100644
--- a/views/layout.dt
+++ b/views/layout.dt
@@ -29,11 +29,9 @@ html(lang="en")
     body
         div.container
             pre.codeblock-text
-                code.hljs.plaintext
-                    h1 #[a(href="/") PasteMyst]
-
-            pre.codeblock-text
-                code.hljs.d.
+                a(href="/", class="page-title") #[h1 PasteMyst]
+                
+                code.hljs.d.page-nav.
                     string #[a(href="/") home] => "/";
                     string #[a(href="https://github.com/codemyst/pastemyst", target="_blank") github] => "github.com/codemyst/pastemyst";
                     string #[a(href="/api-docs") api-docs] => "/api-docs";
diff --git a/views/paste.dt b/views/paste.dt
index 2ae3f3c6..8ce4557f 100644
--- a/views/paste.dt
+++ b/views/paste.dt
@@ -1,11 +1,11 @@
 extends layout
 
 block body
+    pre.pastemyst-content
+        code
+            |= code
+
     pre.codeblock-text
         code.hljs.d.
             string #[a id] => "#[b= id]";
             DateTime #[a createdAt] => new DateTime ("#[b= createdAt] UTC");
-    
-    pre
-        code
-            |= code
\ No newline at end of file