Fixed white background on overflowing code snippets.

This commit is contained in:
Martin Mahner 2018-04-13 17:07:26 +02:00
parent d5cdffc2f2
commit bc7f12f377
9 changed files with 44 additions and 23 deletions

View file

@ -1,11 +1,21 @@
body { body {
min-width: 800px; // FIXME: MOBILE min-width: 800px; // FIXME: MOBILE
background-color: $bgColor;
font-family: $baseFont; font-family: $baseFont;
font-weight: $baseFontRegular; 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=win] .platform-mac { display: none; }
body[data-platform=mac] .platform-win { display: none; } body[data-platform=mac] .platform-win { display: none; }

View file

@ -1,3 +1,7 @@
.snippet-text {
background-color: $bgColor;
}
.snippet-diff { .snippet-diff {
color: $codeTextColor; color: $codeTextColor;
background-color: $codeBgColor; background-color: $codeBgColor;

View file

@ -3,18 +3,21 @@
// and base styles for text based lexer. // and base styles for text based lexer.
article { article {
padding: 0 $boxPadding 40px $boxPadding; padding: 0 $boxPadding 40px $boxPadding;
margin-top: 30px; padding-top: 30px;
font-size: 16px; font-size: 16px;
font-weight: $baseFontRegular; font-weight: $baseFontRegular;
line-height: 24px; line-height: 24px;
color: $textColor;
max-width: 600px; max-width: 600px;
color: $textColor;
@include colored-links; @include colored-links;
.first-item {
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: $baseFontRegular; font-weight: $baseFontRegular;
line-height: 1.3em; line-height: 1.3em;
@ -97,9 +100,3 @@ article.snippet-text {
} }
} }
// Content pages (About page)
article.content-page {
h2 { margin-top: 0; }
}

View file

@ -2,10 +2,11 @@
{% block title %}404 Snippet not found{% endblock %} {% block title %}404 Snippet not found{% endblock %}
{% block page %} {% block body_type %}text-page{%endblock %}
<article class="content-page">
<h2>404 Snippet not found</h2>
{% block page %}
<article>
<h2 class="first-item">404 Snippet not found</h2>
<p> <p>
This snippet no longer exists. Snippets are automatically This snippet no longer exists. Snippets are automatically
deleted when they reach their expiration date. deleted when they reach their expiration date.

View file

@ -2,9 +2,11 @@
{% block title %}500 Internal Server Error{% endblock %} {% block title %}500 Internal Server Error{% endblock %}
{% block body_type %}text-page{%endblock %}
{% block page %} {% block page %}
<article class="content-page"> <article>
<h2>500 Internal Server Error</h2> <h2 class="first-item">500 Internal Server Error</h2>
<p>There was an issue with your request.</p> <p>There was an issue with your request.</p>
</article> </article>
{% endblock %} {% endblock %}

View file

@ -4,10 +4,12 @@
{% block title %}{% trans "About" %}{% endblock %} {% block title %}{% trans "About" %}{% endblock %}
{% block page %} {% block body_type %}text-page{%endblock %}
<article class="content-page">
<h2>{% trans "About dpaste" %}</h2> {% block page %}
<article>
<h2 class="first-item">{% trans "About dpaste" %}</h2>
<p> <p>
This site is powered by dpaste, an <strong>open source</strong> This site is powered by dpaste, an <strong>open source</strong>

View file

@ -4,6 +4,8 @@
{% block title %}dpaste/{{ snippet.secret_id }} ({{ snippet.lexer_name }}){% endblock %} {% block title %}dpaste/{{ snippet.secret_id }} ({{ snippet.lexer_name }}){% endblock %}
{% block body_type %}{%endblock %}
{% block headline %} {% block headline %}
<a href="{{ request.build_absolute_uri }}">{{ request.build_absolute_uri }}</a> <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"/> <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> </svg>
</a> </a>
<input type="text" id="copyToClipboardField" value="{{ request.build_absolute_uri }}"/> <input type="text" id="copyToClipboardField" value="{{ request.build_absolute_uri }}"/>
{% endblock %} {% endblock %}

View file

@ -1,3 +1,5 @@
<article class="snippet-text"> <div class="snippet-text">
{{ highlighted }} <article>
<div>{{ highlighted }}</div>
</article> </article>
</div>

View file

@ -7,6 +7,8 @@
{% block title %}{% trans "dpaste" %}{% endblock %} {% block title %}{% trans "dpaste" %}{% endblock %}
{% block body_type %}text-page{%endblock %}
{% block page %} {% block page %}
{% include "dpaste/includes/form.html" %} {% include "dpaste/includes/form.html" %}
{% endblock %} {% endblock %}