Merge pull request #36 from CodeMyst/improvement/paste-page

Restyled the paste page
CodeMyst · Nov 19, 2018 · eb149c5 · eb149c5
2 parents 08116f2 + 99ed8ed
commit eb149c5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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