From bc7f12f3776774195ac9e9d71b8e2984c35941c2 Mon Sep 17 00:00:00 2001
From: Martin Mahner <martin@mahner.org>
Date: Fri, 13 Apr 2018 17:07:26 +0200
Subject: [PATCH] Fixed white background on overflowing code snippets.

---
 client/scss/_globals.scss                   | 14 ++++++++++++--
 client/scss/components/_code.scss           |  4 ++++
 client/scss/components/_text.scss           | 15 ++++++---------
 dpaste/templates/dpaste/404.html            |  7 ++++---
 dpaste/templates/dpaste/500.html            |  6 ++++--
 dpaste/templates/dpaste/about.html          |  8 +++++---
 dpaste/templates/dpaste/details.html        |  3 ++-
 dpaste/templates/dpaste/highlight/text.html |  8 +++++---
 dpaste/templates/dpaste/new.html            |  2 ++
 9 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/client/scss/_globals.scss b/client/scss/_globals.scss
index 1723291..013a1f9 100644
--- a/client/scss/_globals.scss
+++ b/client/scss/_globals.scss
@@ -1,11 +1,21 @@
 body {
   min-width: 800px;           // FIXME: MOBILE
-
-  background-color: $bgColor;
   font-family: $baseFont;
   font-weight: $baseFontRegular;
+
+  // By default, all pages have a dark background. Since
+  // most pages have 'code' snippets, that allows the code 
+  // that is out of canvas to be visible (scroll right).
+  background-color: $codeBgColor;
 }
 
+// But pure text/content pages have a white background.
+// With that, pages which are shorter than the browser
+// window, won't have a dark stripe at the bottom.
+body[code-page] { background-color: $bgColor; }
+body[text-page] { background-color: $bgColor; }
+
+// Platform is set by Javascript.
 body[data-platform=win] .platform-mac { display: none; }
 body[data-platform=mac] .platform-win { display: none; }
 
diff --git a/client/scss/components/_code.scss b/client/scss/components/_code.scss
index 79ad4f9..ef9d670 100644
--- a/client/scss/components/_code.scss
+++ b/client/scss/components/_code.scss
@@ -1,3 +1,7 @@
+.snippet-text {
+  background-color: $bgColor;
+}
+
 .snippet-diff {
   color: $codeTextColor;
   background-color: $codeBgColor;
diff --git a/client/scss/components/_text.scss b/client/scss/components/_text.scss
index 114d0dc..34c5764 100644
--- a/client/scss/components/_text.scss
+++ b/client/scss/components/_text.scss
@@ -3,18 +3,21 @@
 // and base styles for text based lexer.
 article {
   padding: 0 $boxPadding 40px $boxPadding;
-  margin-top: 30px;
+  padding-top: 30px;
 
   font-size: 16px;
   font-weight: $baseFontRegular;
   line-height: 24px;
 
-  max-width: 600px;
-
   color: $textColor;
+  max-width: 600px;
 
   @include colored-links;
 
+  .first-item {
+    margin-top: 0;
+  }
+  
   h1, h2, h3, h4, h5, h6 {
     font-weight: $baseFontRegular;
     line-height: 1.3em;
@@ -97,9 +100,3 @@ article.snippet-text {
 
   }
 }
-
-
-// Content pages (About page)
-article.content-page {
-  h2 { margin-top: 0; }
-}
diff --git a/dpaste/templates/dpaste/404.html b/dpaste/templates/dpaste/404.html
index aa63080..4e15337 100644
--- a/dpaste/templates/dpaste/404.html
+++ b/dpaste/templates/dpaste/404.html
@@ -2,10 +2,11 @@
 
 {% block title %}404 Snippet not found{% endblock %}
 
-{% block page %}
-<article class="content-page">
-  <h2>404 Snippet not found</h2>
+{% block body_type %}text-page{%endblock %}
 
+{% block page %}
+<article>
+  <h2 class="first-item">404 Snippet not found</h2>
   <p>
     This snippet no longer exists. Snippets are automatically
     deleted when they reach their expiration date.
diff --git a/dpaste/templates/dpaste/500.html b/dpaste/templates/dpaste/500.html
index 8259076..7a58e24 100644
--- a/dpaste/templates/dpaste/500.html
+++ b/dpaste/templates/dpaste/500.html
@@ -2,9 +2,11 @@
 
 {% block title %}500 Internal Server Error{% endblock %}
 
+{% block body_type %}text-page{%endblock %}
+
 {% block page %}
-<article class="content-page">
-  <h2>500 Internal Server Error</h2>
+<article>
+  <h2 class="first-item">500 Internal Server Error</h2>
   <p>There was an issue with your request.</p>
 </article>
 {% endblock %}
diff --git a/dpaste/templates/dpaste/about.html b/dpaste/templates/dpaste/about.html
index aa273ef..13285bb 100644
--- a/dpaste/templates/dpaste/about.html
+++ b/dpaste/templates/dpaste/about.html
@@ -4,10 +4,12 @@
 
 {% block title %}{% trans "About" %}{% endblock %}
 
-{% block page %}
-  <article class="content-page">
+{% block body_type %}text-page{%endblock %}
 
-    <h2>{% trans "About dpaste" %}</h2>
+{% block page %}
+  <article>
+    
+    <h2 class="first-item">{% trans "About dpaste" %}</h2>
 
     <p>
       This site is powered by dpaste, an <strong>open source</strong>
diff --git a/dpaste/templates/dpaste/details.html b/dpaste/templates/dpaste/details.html
index 19f1724..90df3b7 100644
--- a/dpaste/templates/dpaste/details.html
+++ b/dpaste/templates/dpaste/details.html
@@ -4,6 +4,8 @@
 
 {% block title %}dpaste/{{ snippet.secret_id }} ({{ snippet.lexer_name }}){% endblock %}
 
+{% block body_type %}{%endblock %}
+
 {% block headline %}
   <a href="{{ request.build_absolute_uri }}">{{ request.build_absolute_uri }}</a>
 
@@ -12,7 +14,6 @@
       <path d="M40.965 6c5.137 0 9.273 3.988 9.8 9h1.188c3.14 0 5.809 2.125 6.68 5h2.309c4.39 0 7.988 3.766 7.988 8.188V55h15.98-.004a1.99 1.99 0 0 1 1.574.652c.356.39.543.91.516 1.441A1.995 1.995 0 0 1 84.906 59h-15.98v26.812c0 4.422-3.598 8.188-7.988 8.188h-39.95C16.598 94 13 90.234 13 85.812V28.186C13 23.765 16.598 20 20.99 20h2.308c.871-2.875 3.54-5 6.68-5h1.187c.528-5.012 4.66-9 9.801-9zm0 4a5.968 5.968 0 0 0-5.992 6v1a2 2 0 0 1-2 2h-2.996c-1.696 0-2.996 1.305-2.996 3s1.3 3 2.996 3H51.95c1.695 0 2.996-1.305 2.996-3s-1.301-3-2.996-3h-2.996a1.998 1.998 0 0 1-1.996-2v-1c0-3.336-2.66-6-5.993-6zm19.973 14h-2.309c-.87 2.875-3.539 5-6.68 5H29.978c-3.14 0-5.809-2.125-6.68-5h-2.309c-1.968 0-3.996 2.05-3.996 4.188v57.624c0 2.137 2.024 4.188 3.996 4.188h39.95c1.968 0 3.996-2.05 3.996-4.188v-26.81H46.176l6.117 5.5c.828.742.894 2.015.156 2.843a2.01 2.01 0 0 1-2.84.157l-9.988-9a2 2 0 0 1 0-3l9.988-9a2.005 2.005 0 0 1 1.465-.532 2.002 2.002 0 0 1 1.219 3.532L46.175 55h18.758V28.189c0-2.137-2.027-4.188-3.996-4.188z"/>
     </svg>
   </a>
-
   <input type="text" id="copyToClipboardField" value="{{ request.build_absolute_uri }}"/>
 {% endblock %}
 
diff --git a/dpaste/templates/dpaste/highlight/text.html b/dpaste/templates/dpaste/highlight/text.html
index 014e25f..29fa987 100644
--- a/dpaste/templates/dpaste/highlight/text.html
+++ b/dpaste/templates/dpaste/highlight/text.html
@@ -1,3 +1,5 @@
-<article class="snippet-text">
-  {{ highlighted }}
-</article>
+<div class="snippet-text">
+  <article>
+    <div>{{ highlighted }}</div>
+  </article>
+</div>
\ No newline at end of file
diff --git a/dpaste/templates/dpaste/new.html b/dpaste/templates/dpaste/new.html
index 766b45f..1c932ee 100644
--- a/dpaste/templates/dpaste/new.html
+++ b/dpaste/templates/dpaste/new.html
@@ -7,6 +7,8 @@
 
 {% block title %}{% trans "dpaste" %}{% endblock %}
 
+{% block body_type %}text-page{%endblock %}
+
 {% block page %}
   {% include "dpaste/includes/form.html" %}
 {% endblock %}