Removed bootstrap.

docs/settings.rst

@@ -34,10 +34,6 @@ behavior without touching the code:
         String. The full qualified hostname and path to the dpaste instance.
         This is used to generate a link in the API response. Default: ``https://dpaste.de``
 
-    ``DPASTE_SITE_NAME``
-        String. Site name to display in page titles. Default:
-        ``dpaste.de``
-
     ``DPASTE_LEXER_LIST``
         Choices. A tuple of choices of Pygments lexers used in the lexer
         dropdown. Here is the full `lexer list`_ which is currently used.

dpaste/forms.py

@@ -10,12 +10,13 @@ from .highlight import LEXER_DEFAULT, LEXER_KEYS, LEXER_LIST
 from .models import Snippet
 
 EXPIRE_CHOICES = getattr(settings, 'DPASTE_EXPIRE_CHOICES', (
-    ('onetime', _(u'One-Time snippet')),
-    (3600, _(u'In one hour')),
-    (3600 * 24 * 7, _(u'In one week')),
-    (3600 * 24 * 30, _(u'In one month')),
-    ('never', _(u'Never')),
+    ('onetime', _('One-Time snippet')),
+    (3600, _('In one hour')),
+    (3600 * 24 * 7, _('In one week')),
+    (3600 * 24 * 30, _('In one month')),
+    ('never', _('Never')),
 ))
+
 EXPIRE_DEFAULT = getattr(settings, 'DPASTE_EXPIRE_DEFAULT', 3600)
 MAX_CONTENT_LENGTH = getattr(settings, 'DPASTE_MAX_CONTENT_LENGTH', 250*1024*1024)
 
@@ -36,27 +37,25 @@ def get_expire_values(expires):
 class SnippetForm(forms.ModelForm):
     content = forms.CharField(
         label=_('Content'),
-        widget=forms.Textarea(attrs={'placeholder': _('Awesome code goes here...'), 'class': 'form-control'}),
+        widget=forms.Textarea(attrs={'placeholder': _('Awesome code goes here...')}),
         max_length=MAX_CONTENT_LENGTH,
     )
 
     lexer = forms.ChoiceField(
-        label=_(u'Lexer'),
+        label=_('Lexer'),
         initial=LEXER_DEFAULT,
         choices=LEXER_LIST,
-        widget=forms.Select(attrs={'class': 'form-control'}),
     )
 
     expires = forms.ChoiceField(
-        label=_(u'Expires'),
+        label=_('Expires'),
         choices=EXPIRE_CHOICES,
         initial=EXPIRE_DEFAULT,
-        widget=forms.Select(attrs={'class': 'form-control'}),
     )
 
     # Honeypot field
     title = forms.CharField(
-        label=_(u'Title'),
+        label=_('Title'),
         required=False,
         widget=forms.TextInput(attrs={'autocomplete': 'off'}),
     )

dpaste/models.py

@@ -5,7 +5,9 @@ from random import SystemRandom
 from django.conf import settings
 from django.core.urlresolvers import reverse
 from django.db import models
+from django.utils.functional import cached_property
 from django.utils.translation import ugettext_lazy as _
+from six import python_2_unicode_compatible
 
 from .highlight import LEXER_DEFAULT
 
@@ -30,6 +32,7 @@ def generate_secret_id(length=None, alphabet=None, tries=0):
     return generate_secret_id(length=length+1, tries=tries)
 
 
+@python_2_unicode_compatible
 class Snippet(models.Model):
     EXPIRE_TIME = 1
     EXPIRE_KEEP = 2
@@ -56,11 +59,8 @@ class Snippet(models.Model):
         ordering = ('-published',)
         db_table = 'dpaste_snippet'
 
-    @property
-    def remaining_views(self):
-        if self.expire_type == self.EXPIRE_ONETIME:
-            remaining = ONETIME_LIMIT - self.view_count
-            return remaining > 0 and remaining or 0
+    def __str__(self):
+        return self.secret_id
         return None
 
     def save(self, *args, **kwargs):
@@ -71,5 +71,12 @@ class Snippet(models.Model):
     def get_absolute_url(self):
         return reverse('snippet_details', kwargs={'snippet_id': self.secret_id})
 
-    def __unicode__(self):
-        return self.secret_id
+    @property
+    def remaining_views(self):
+        if self.expire_type == self.EXPIRE_ONETIME:
+            remaining = ONETIME_LIMIT - self.view_count
+            return remaining > 0 and remaining or 0
+
+    @cached_property
+    def excerpt(self):
+        return self.content.replace('\n', '')[:200]

dpaste/static/dpaste/_about.scss

@@ -0,0 +1,13 @@
+// -----------------------------------------------------------------------------
+// About Page
+
+.page {
+  padding: $desktopBoxPadding;
+  background-color: white;
+
+  color: #444;
+
+  table th {
+    text-align: left;
+  }
+}

dpaste/static/dpaste/_details.scss

@@ -0,0 +1,94 @@
+// -----------------------------------------------------------------------------
+// Snippet Details
+
+// -----------------------------------------------------------------------------
+// Options
+.snippet-options {
+  padding: $desktopBoxPadding;
+  font-size: .9rem;
+
+  a:link,
+  a:visited {
+    margin: 0 .2em;
+  }
+  a:hover,
+  a:active {
+    text-decoration: underline;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Reply Form
+
+.snippet-reply {
+  h2 {
+    background-color: white;
+    padding: $desktopBoxPadding;
+    padding-bottom: 0;
+    margin: 0;
+
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+}
+
+.snippet-reply[data-hidden=yes] {
+  opacity: 0.3;
+  cursor: pointer;
+
+  * {
+    cursor: pointer;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Text lexer
+
+.snippet-text {
+  color: #666;
+  font-size: 16px;
+  line-height: 24px;
+  max-width: 620px;
+  font-family: Helvetica, FreeSerif, serif;
+  font-weight: 300;
+}
+
+// -----------------------------------------------------------------------------
+// Code Lexer
+
+$codeColor: #f8f8f2;
+$codeLineColor: #aaa;
+$codeBackgroundColor: #232829;
+$markerColor: #f4e009;
+
+.snippet-code {
+
+  background: $codeBackgroundColor;
+  color: $codeColor;
+  font-family: $codeFont;
+  font-size: 0.8rem;
+  font-weight: 300;
+  line-height: 1.1rem;
+  padding: 1rem 0;
+
+  .wordwrap {
+    overflow: auto;
+    white-space: nowrap;
+  }
+
+  ol {
+    margin: 0 0 0 2rem;
+
+    li {
+      color: $codeLineColor;
+      cursor: pointer;
+
+      &.marked {
+        color: $markerColor;
+        background-color: $markerColor;
+      }
+
+    }
+  }
+
+}

dpaste/static/dpaste/_form.scss

@@ -0,0 +1,74 @@
+// -----------------------------------------------------------------------------
+// Snippet Form
+
+.snippet-form {
+}
+
+// -----------------------------------------------------------------------------
+// The main form textarea
+
+.form-content {
+  background-color: white;
+  padding: 1rem 1rem;
+
+  textarea {
+    box-sizing: border-box;
+    width: 100%;
+    height: 25rem;
+    font-family: $codeFont;
+    font-size: .8rem;
+    border: 1px solid #bbb;
+    padding: 1rem;
+    transition: border .5s linear;
+
+    &:focus {
+      outline: none;
+      border-color: #3fca6e;
+
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Additional options; lexer and expiration
+
+.form-options {
+  padding: $desktopBoxPadding;
+  display: flex;
+  justify-content: space-between;
+  font-size: .9rem;
+
+  .form-options-lexer {
+  }
+  .form-options-expire {
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Submit line
+
+.form-actions {
+  padding: $desktopBoxPadding;
+  background-color: white;
+
+  .shortcut {
+    font-size: .9rem;
+    color: #888;
+    letter-spacing: 1px;
+  }
+
+  input[type=submit] {
+    color: white;
+    background-color: rgb(109, 163, 217);
+    border: none;
+    padding: .6em 1em;
+    font-weight: 500;
+    font-family: "SF Mono", "Fira Mono", monospace;
+    border-radius: 2px;
+    cursor: pointer;
+
+    &:hover {
+      background: rgb(96, 139, 192);
+    }
+  }
+}

dpaste/static/dpaste/_header.scss

@@ -0,0 +1,60 @@
+// -----------------------------------------------------------------------------
+// Header
+
+header {
+  background: $headerColor2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: $desktopBoxPadding;
+}
+
+header h1 {
+  color: white;
+  font-size: 1em;
+  font-weight: 500;
+  margin: 0;
+}
+
+header h1 input {
+  font-size: 1em;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: white;
+  min-width: 15em;
+  outline: none;
+}
+
+header nav {
+  font-size: .9rem;
+}
+
+header nav a:link,
+header nav a:visited {
+  color: white;
+  font-weight: 500;
+  text-decoration: none;
+  margin: 0 .2em;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+header nav a:last-child {
+  border: 1px solid white;
+  border-radius: 5px;
+  padding: .3em .5em;
+
+  &:hover {
+    text-decoration: none;
+    background-color: lighten($headerColor1, 10%);
+  }
+}
+
+
+

dpaste/static/dpaste/_history.scss

@@ -0,0 +1,18 @@
+// -----------------------------------------------------------------------------
+// Snippet History List
+
+.snippet-list {
+  padding: $desktopBoxPadding;
+
+  dt:not(:first-child) {
+    margin-top: 1rem;
+  }
+  dt:last-child {
+    margin-top: 2rem;
+  }
+
+  dd {
+    font-family: $codeFont;
+    font-size: .9rem;
+  }
+}

dpaste/static/dpaste/_pygments.scss

@@ -0,0 +1,69 @@
+// -----------------------------------------------------------------------------
+// Pygments Theme
+
+.snippet-code {
+
+  .gd { background-color: rgba(226, 12, 19, .3); color: #fff; display: block; }
+  .gi { background-color: rgba(23, 189, 10, .2); color: #fff; display: block; }
+
+  .hll { background-color: #49483e }
+  .c { color: #75715e } /* Comment */
+  .err { color: #960050; background-color: #1e0010 } /* Error */
+  .k { color: #66d9ef } /* Keyword */
+  .l { color: #ae81ff } /* Literal */
+  .n { color: #f8f8f2 } /* Name */
+  .o { color: #f92672 } /* Operator */
+  .p { color: #f8f8f2 } /* Punctuation */
+  .cm { color: #75715e } /* Comment.Multiline */
+  .cp { color: #75715e } /* Comment..codeproc */
+  .c1 { color: #75715e } /* Comment.Single */
+  .cs { color: #75715e } /* Comment.Special */
+  .ge { font-style: italic } /* Generic.Emph */
+  .gs { font-weight: bold } /* Generic.Strong */
+  .kc { color: #66d9ef } /* Keyword.Constant */
+  .kd { color: #66d9ef } /* Keyword.Declaration */
+  .kn { color: #f92672 } /* Keyword.Namespace */
+  .kp { color: #66d9ef } /* Keyword.Pseudo */
+  .kr { color: #66d9ef } /* Keyword.Reserved */
+  .kt { color: #66d9ef } /* Keyword.Type */
+  .ld { color: #e6db74 } /* Literal.Date */
+  .m { color: #ae81ff } /* Literal.Number */
+  .s { color: #e6db74 } /* Literal.String */
+  .na { color: #a6e22e } /* Name.Attribute */
+  .nb { color: #f8f8f2 } /* Name.Builtin */
+  .nc { color: #a6e22e } /* Name.Class */
+  .no { color: #66d9ef } /* Name.Constant */
+  .nd { color: #a6e22e } /* Name.Decorator */
+  .ni { color: #f8f8f2 } /* Name.Entity */
+  .ne { color: #a6e22e } /* Name.Exception */
+  .nf { color: #a6e22e } /* Name.Function */
+  .nl { color: #f8f8f2 } /* Name.Label */
+  .nn { color: #f8f8f2 } /* Name.Namespace */
+  .nx { color: #a6e22e } /* Name.Other */
+  .py { color: #f8f8f2 } /* Name.Property */
+  .nt { color: #f92672 } /* Name.Tag */
+  .nv { color: #f8f8f2 } /* Name.Variable */
+  .ow { color: #f92672 } /* Operator.Word */
+  .w { color: #f8f8f2 } /* Text.Whitespace */
+  .mf { color: #ae81ff } /* Literal.Number.Float */
+  .mh { color: #ae81ff } /* Literal.Number.Hex */
+  .mi { color: #ae81ff } /* Literal.Number.Integer */
+  .mo { color: #ae81ff } /* Literal.Number.Oct */
+  .sb { color: #e6db74 } /* Literal.String.Backtick */
+  .sc { color: #e6db74 } /* Literal.String.Char */
+  .sd { color: #e6db74 } /* Literal.String.Doc */
+  .s2 { color: #e6db74 } /* Literal.String.Double */
+  .se { color: #ae81ff } /* Literal.String.Escape */
+  .sh { color: #e6db74 } /* Literal.String.Heredoc */
+  .si { color: #e6db74 } /* Literal.String.Interpol */
+  .sx { color: #e6db74 } /* Literal.String.Other */
+  .sr { color: #e6db74 } /* Literal.String.Regex */
+  .s1 { color: #e6db74 } /* Literal.String.Single */
+  .ss { color: #e6db74 } /* Literal.String.Symbol */
+  .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+  .vc { color: #f8f8f2 } /* Name.Variable.Class */
+  .vg { color: #f8f8f2 } /* Name.Variable.Global */
+  .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+  .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+}

dpaste/static/dpaste/dpaste.scss

@@ -0,0 +1,67 @@
+// -----------------------------------------------------------------------------
+//
+// dpaste example stylesheet
+//
+// -----------------------------------------------------------------------------
+
+// Color Palette
+$backgroundColor: #F7F8F9;
+$headerColor1: #394c78;
+$headerColor2: #426ca1;
+$headerTextColor: #fff;
+$textColor: #888;
+
+$linkColor: rgb(109, 163, 217);
+$hoverColor: rgb(109, 163, 217);
+
+// The general font for the website
+$siteFont: "SF Mono", "Fira Mono", monospace;
+
+// Font used for "Text" lexer
+$textFont: Helvetica;
+
+// Font used for the code snippet display
+$codeFont: "SF Mono", "Fira Mono", Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$desktopBoxPadding: 1rem 2rem;
+$mobileBoxPadding: 1rem;
+
+// -----------------------------------------------------------------------------
+
+body {
+  color: $textColor;
+  background: $backgroundColor;
+  font-family: $siteFont;
+  font-size: 1em;
+  font-weight: 300;
+  margin: 0;
+  padding: 0;
+}
+
+a:link,
+a:visited {
+  color: $linkColor;
+  font-family: $siteFont;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+a:hover,
+a:visited {
+  color: $hoverColor;
+  text-decoration: underline;
+}
+
+select, input {
+  font-size: medium;
+}
+
+// -----------------------------------------------------------------------------
+// Imports
+
+@import 'header';
+@import 'form';
+@import 'details';
+@import 'history';
+@import 'about';
+@import 'pygments';

dpaste/static/dpaste/theme.css

@@ -1,327 +0,0 @@
-
-/* ----------------------------------------------------------------------------
-   Basics
----------------------------------------------------------------------------- */
-
-body {
-    padding: 10px 0 40px 0;
-}
-
-tt strong {
-    background-color: #ffe699;
-    outline: 3px solid #ffe699;
-}
-
-.news {
-    max-width: 400px;
-    color: #999;
-    font-size: 12px;
-    line-height: 18px;
-}
-
-.news h2 {
-    font-size: 12px;
-    font-weight: bold;
-    margin: 0;
-}
-
-.news p {
-    margin: 5px 0 10px;
-}
-
-.message {
-    margin: 0;
-    padding: 10px 30px;
-    background-color: gold;
-    text-shadow: 0 1px 0 #ffea90;
-}
-
-/* Custom container */
-.container-fluid {
-    margin: 0 auto;
-    padding: 0;
-}
-
-.container-fluid > div,
-.container-fluid > header,
-.container-fluid > form,
-.container-fluid > h2,
-.container-fluid > h3,
-.container-fluid > h4 {
-    padding: 0 30px;
-}
-
-.row-fluid {
-    width: auto;
-}
-
-.container > hr {
-    margin: 20px 0;
-}
-
-.headline{
-    color: #5393b4;
-}
-
-input.headline-url {
-    font-size: 20px;
-    height: 40px;
-    width: 210px;
-    color: #5393b4;
-    border: none;
-    box-shadow: none;
-}
-
-button.btn.headline-url-copy {
-    margin-top: -4px;
-    padding: 5px 10px 3px 10px;
-}
-
-h1, h2, h3, h4 {
-    font-weight: 300;
-}
-
-/* ----------------------------------------------------------------------------
-   Snippet form
----------------------------------------------------------------------------- */
-#id_content{
-    box-sizing: border-box;
-    width: 100%;
-    height: 300px;
-    font-family: monospace;
-    font-size: 12px;
-    line-height: 16px;
-    border-radius: 0;
-}
-
-.form-options-lexer {
-    float: left;
-}
-
-.form-options-expire {
-    float: right;
-}
-
-.form-options-expire .add-on{
-    border-radius: 4px !important;
-    margin-right: 3px;
-}
-
-.form-horizontal .form-actions {
-    padding-left: 20px;
-}
-
-.twitter-follow-button-container {
-    float:right;
-    opacity: 0.5
-}
-.twitter-follow-button-container:hover{
-    opacity: 1;
-}
-
-.shortcut {
-    color: #AAA;
-    font-size: 13px;
-    font-weight: 300;
-    margin-left: 15px;
-}
-
-/* ----------------------------------------------------------------------------
-   Snippet Details
----------------------------------------------------------------------------- */
-.snippet-options{
-    margin-bottom: 20px;
-}
-
-.snippet-reply {
-    margin-top: 30px;
-}
-
-.snippet-reply[data-hidden=yes] {
-    opacity: 0.3;
-}
-
-.snippet-reply[data-hidden=yes],
-.snippet-reply[data-hidden=yes] *{
-    cursor: pointer;
-}
-
-.snippet-diff {
-    background: #f3f3f3;
-    margin-bottom: 30px;
-    padding: 1em 1em 0 1em;
-    border-radius: 4px;
-
-    display: none;
-}
-
-.snippet-rendered {
-    color: #666;
-    font-size: 16px;
-    line-height: 24px;
-    max-width: 620px;
-    font-family: Helvetica, FreeSerif, serif;
-    font-weight: 300;
-}
-
-div.tree{
-    margin: 0 0 15px 0;
-    line-height: 1.8em;
-}
-
-div.tree ul,
-div.tree ul li{
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-div.tree ul li{
-    clear: both;
-}
-
-div.tree ul li div{
-    border-bottom: 1px solid #EEE;
-}
-
-div.tree span.diff{
-    float: right;
-}
-
-div.tree strong{
-    color: #111;
-    font-weight: normal;
-}
-
-div.tree ul li li{
-    padding-left: 0;
-    margin-left: 15px;
-    color: #ccc;
-    list-style: circle;
-}
-
-div.tree div.submit{
-    margin: 8px 0 0 0;
-    text-align: right;
-}
-
-div.tree div.submit input{
-    font-size: 0.8em;
-}
-
-/* ----------------------------------------------------------------------------
-   .code
----------------------------------------------------------------------------- */
-
-.code {
-    background: #232829;
-    color: #f8f8f2;
-    padding: 20px 30px !important;
-    border-radius: 0;
-    padding: 20px 30px;
-    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
-}
-
-.code.wordwrap {
-    overflow: auto;
-    white-space: nowrap;
-}
-
-.code ol {
-    margin: 0 0 0 45px;
-}
-
-.code ol li {
-    color: #aaa;
-    font-size: 12px;
-    line-height: 21px;
-    cursor: pointer;
-    padding-left: 5px;
-}
-
-.code ol li.marked {
-    color: #f4e009;
-    background-color: #4f4800;
-    margin-right: -30px;
-    padding-right: 30px;
-}
-
-/* ----------------------------------------------------------------------------
-   Pygments
----------------------------------------------------------------------------- */
-
-.code .gd { background-color: rgba(226, 12, 19, .3); color: #fff; display: block; }
-.code .gi { background-color: rgba(23, 189, 10, .2); color: #fff; display: block; }
-
-.code .hll { background-color: #49483e }
-.code .c { color: #75715e } /* Comment */
-.code .err { color: #960050; background-color: #1e0010 } /* Error */
-.code .k { color: #66d9ef } /* Keyword */
-.code .l { color: #ae81ff } /* Literal */
-.code .n { color: #f8f8f2 } /* Name */
-.code .o { color: #f92672 } /* Operator */
-.code .p { color: #f8f8f2 } /* Punctuation */
-.code .cm { color: #75715e } /* Comment.Multiline */
-.code .cp { color: #75715e } /* Comment..codeproc */
-.code .c1 { color: #75715e } /* Comment.Single */
-.code .cs { color: #75715e } /* Comment.Special */
-.code .ge { font-style: italic } /* Generic.Emph */
-.code .gs { font-weight: bold } /* Generic.Strong */
-.code .kc { color: #66d9ef } /* Keyword.Constant */
-.code .kd { color: #66d9ef } /* Keyword.Declaration */
-.code .kn { color: #f92672 } /* Keyword.Namespace */
-.code .kp { color: #66d9ef } /* Keyword.Pseudo */
-.code .kr { color: #66d9ef } /* Keyword.Reserved */
-.code .kt { color: #66d9ef } /* Keyword.Type */
-.code .ld { color: #e6db74 } /* Literal.Date */
-.code .m { color: #ae81ff } /* Literal.Number */
-.code .s { color: #e6db74 } /* Literal.String */
-.code .na { color: #a6e22e } /* Name.Attribute */
-.code .nb { color: #f8f8f2 } /* Name.Builtin */
-.code .nc { color: #a6e22e } /* Name.Class */
-.code .no { color: #66d9ef } /* Name.Constant */
-.code .nd { color: #a6e22e } /* Name.Decorator */
-.code .ni { color: #f8f8f2 } /* Name.Entity */
-.code .ne { color: #a6e22e } /* Name.Exception */
-.code .nf { color: #a6e22e } /* Name.Function */
-.code .nl { color: #f8f8f2 } /* Name.Label */
-.code .nn { color: #f8f8f2 } /* Name.Namespace */
-.code .nx { color: #a6e22e } /* Name.Other */
-.code .py { color: #f8f8f2 } /* Name.Property */
-.code .nt { color: #f92672 } /* Name.Tag */
-.code .nv { color: #f8f8f2 } /* Name.Variable */
-.code .ow { color: #f92672 } /* Operator.Word */
-.code .w { color: #f8f8f2 } /* Text.Whitespace */
-.code .mf { color: #ae81ff } /* Literal.Number.Float */
-.code .mh { color: #ae81ff } /* Literal.Number.Hex */
-.code .mi { color: #ae81ff } /* Literal.Number.Integer */
-.code .mo { color: #ae81ff } /* Literal.Number.Oct */
-.code .sb { color: #e6db74 } /* Literal.String.Backtick */
-.code .sc { color: #e6db74 } /* Literal.String.Char */
-.code .sd { color: #e6db74 } /* Literal.String.Doc */
-.code .s2 { color: #e6db74 } /* Literal.String.Double */
-.code .se { color: #ae81ff } /* Literal.String.Escape */
-.code .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.code .si { color: #e6db74 } /* Literal.String.Interpol */
-.code .sx { color: #e6db74 } /* Literal.String.Other */
-.code .sr { color: #e6db74 } /* Literal.String.Regex */
-.code .s1 { color: #e6db74 } /* Literal.String.Single */
-.code .ss { color: #e6db74 } /* Literal.String.Symbol */
-.code .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.code .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.code .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.code .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.code .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-
-
-/* ----------------------------------------------------------------------------
-   Mobile
----------------------------------------------------------------------------- */
-
-@media (max-width: 580px) {
-    .form-options-expire {
-        float: left;
-        clear: left;
-        margin-top: 10px;
-    }
-}

dpaste/templates/dpaste/404.html

@@ -4,7 +4,5 @@
 {% block headline %}404 Not found{% endblock %}
 
 {% block page %}
-<div>
-    <p>Snippet you have searched is not available (anymore).</p>
-</div>
+  <p>Snippet you have searched is not available (anymore).</p>
 {% endblock %}

dpaste/templates/dpaste/500.html

@@ -4,7 +4,5 @@
 {% block headline %}500 Internal Server Error{% endblock %}
 
 {% block page %}
-<div>
-    <p>Sorry, there was an error with your request. The server notified the admin via email.</p>
-</div>
+  <p>Sorry, there was an error with your request. The server notified the admin via email.</p>
 {% endblock %}

dpaste/templates/dpaste/about.html

@@ -2,16 +2,15 @@
 
 {% load i18n %}
 
-{% block title %}About {{ site_name }}{% endblock %}
-{% block headline %}About {{ site_name }}{% endblock %}
-{% block dpaste_nav_about %}active{% endblock %}
+{% block title %}{% trans "About" %}{% endblock %}
+{% block headline %}{% trans "About" %}{% endblock %}
 
 {% block page %}
-<hr>
-<div class="row-fluid">
+
+<div class="page">
 
     <p>
-        {{ site_name }} is powered by dpaste, which is open source. You can
+        This site is powered by dpaste, which is open source. You can
         find the source, contribute to it and leave ideas on Github:
         <a href="https://github.com/bartTC/dpaste">github.com/bartTC/dpaste</a>
     </p>
@@ -63,14 +62,11 @@
         {% for s in stats %}
         <tr>
             <th>{{ s.lexer|upper }}</th>
-            <td>{{ s.count }}</th>
+            <td>{{ s.count }}</td>
         </tr>
         {% endfor %}
     </table>
 
-    <div class="clearfix"></div>
-    <hr class="clearfix">
-
     <h3>Delete a snippet</h3>
 
     <p>
@@ -92,9 +88,6 @@
         <input name="snippet_id"> <input type="Submit" value="Submit"/>
     </form>
 
-    <div class="clearfix"></div>
-    <hr class="clearfix">
-
     {{ DPASTE_ABOUT_EXTRA }}
 </div>
 {% endblock %}

dpaste/templates/dpaste/base.html

@@ -4,52 +4,45 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>{{ site_name }}: {% block title %}{% trans "New snippet" %}{% endblock %}</title>
-    <link rel="stylesheet" href="{% static "dpaste/bootstrap/css/bootstrap.min.css" %}">
-    <link rel="stylesheet" href="{% static "dpaste/theme.css" %}">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	{% block extrahead %}{% endblock %}
+  <title>{% block title %}{% endblock %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="{% static "dpaste/dpaste.css" %}"/>
+  {% block extrahead %}{% endblock %}
 </head>
 <body>
 
-<div class="container-fluid">
-    <header>
-        <ul class="nav nav-pills pull-right">
-            <li class="{% block dpaste_nav_about %}{% endblock %}"><a href="{% url "dpaste_about" %}">{% trans "About" %}</a></li>
-            <li class="{% block dpaste_nav_history %}{% endblock %}"><a href="{% url "snippet_history" %}">{% trans "History" %}</a></li>
-            <li class="{% block dpaste_nav_new %}{% endblock %}"><a href="{% url "snippet_new" %}">{% trans "New snippet" %} &rarr;</a></li>
-        </ul>
-        {% block headline_wrapper %}
-        <h3 class="headline"><a href="{% url "snippet_new" %}">{% block headline %}{% endblock %}</a></h3>
-        {% endblock %}
-    </header>
-    {% block page %}
-        PAGE MISSING
-    {% endblock %}
-</div>
+
+<header class="box">
+  <h1>{% block headline %}{% endblock %}</h1>
+  <nav>
+    <a href="{% url "dpaste_about" %}">{% trans "About" %}</a>
+    <a href="{% url "snippet_history" %}">{% trans "History" %}</a>
+    <a href="{% url "snippet_new" %}">{% trans "New snippet" %} &rarr;</a></li>
+  </nav>
+</header>
+
+{% block page %}
+  PAGE MISSING
+{% endblock %}
 
 {% block script_footer %}
-<script>
-  var af = document.querySelector(".autofocus textarea");
-  if (af !== null)
-    af.focus();
+  <script>
+    let af = document.querySelector(".autofocus textarea");
+    if (af !== null)
+      af.focus();
 
-  var se = document.querySelector(".superenter textarea");
-  if (se !== null) {
-    se.onkeydown = function(e) {
-      var metaKey;
-      if (navigator.appVersion.indexOf("Win") !== -1) {
-        metaKey = e.ctrlKey;
-      } else {
-        metaKey = event.metaKey;
-      }
-      if (e.keyCode == 13 && metaKey) {
-        document.querySelector(".snippet-form").submit();
-        return false;
+    let se = document.querySelector(".superenter textarea");
+    if (se !== null) {
+      se.onkeydown = function (e) {
+        let metaKey = navigator.appVersion.indexOf("Win") !== -1 ? e.ctrlKey
+            : event.metaKey;
+        if (e.keyCode === 13 && metaKey) {
+          document.querySelector(".snippet-form").submit();
+          return false;
+        }
       }
     }
-  }
-</script>
+  </script>
 {% endblock %}
 
 </body>

dpaste/templates/dpaste/highlight/code.html

@@ -1 +1 @@
-<div class="code {{ snippet.lexer }}"><ol>{% for line in highlighted %}<li id="l{{ forloop.counter }}">{{ line|safe|default:"&nbsp;" }}</li>{% endfor %}</ol></div>
+<ol>{% for line in highlighted %}<li id="l{{ forloop.counter }}">{{ line|safe|default:"&nbsp;" }}</li>{% endfor %}</ol>

dpaste/templates/dpaste/snippet_details.html

@@ -2,34 +2,18 @@
 
 {% load i18n %}
 
-{% block title %}{% trans "Snippet" %} #{{ snippet.pk }}{% endblock %}
-{% block headline_wrapper %}
-    <input id="headline-url" class="headline-url" type="text" value="{{ request.build_absolute_uri }}"/>
-    <button class="btn clip-button headline-url-copy" data-clipboard-target="#headline-url">
-        <svg width="18" height="24" viewBox="0 0 1024 896" xmlns="http://www.w3.org/2000/svg">
-          <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
-        </svg>
-    </button>
+{% block title %}{{ request.META.SERVER_NAME }}/{{ snippet.secret_id }}{% endblock %}
+{% block headline %}
+    <input type="text" value="{{ request.build_absolute_uri }}"/>
 {% endblock %}
 
 {% block page %}
 
-    <!-- ======================================================================
-    Snippet Diff View
-    ======================================================================= -->
-    <div id="snippet-diff" class="snippet-diff container-fluid">
-        <div class="row-fluid" style="width: auto; padding: 30px 0">
-            <div class="span12">
-                <div id="diff" style="display:none;"></div>
-            </div>
-        </div>
-    </div>
-
-    <!-- ======================================================================
+      <!-- ======================================================================
     Snippet Options
     ======================================================================= -->
-    <div class="btn-group snippet-options">
-        <span class="btn disabled">
+    <div class="snippet-options">
+        <span>
             {% if snippet.expire_type == 1 %}
                 {% blocktrans with date=snippet.expires|timeuntil %}Expires in: {{ date }}{% endblocktrans %}
             {% elif snippet.expire_type == 2 %}
@@ -38,18 +22,24 @@
                 {% trans "One-Time snippet" %}
             {% endif %}
         </span>
-        <a class="btn" href="{% url "snippet_delete" snippet.secret_id %}" onclick="return confirm('{% trans "Really delete this snippet?" %}');"><i class="icon-trash"></i> {% trans "Delete Now" %}</a>
+
+        <a href="{% url "snippet_delete" snippet.secret_id %}"
+           onclick="return confirm('{% trans "Really delete this snippet?" %}');">{% trans "Delete Now" %}</a>
+
         {% if snippet.parent %}
-        <a class="btn snippet-diff-trigger" href="#snippet-diff"><i class="icon-search"></i> {% trans "Compare this Answer" %}</a>
+        <a href="#snippet-diff">{% trans "Compare with previous Snippet" %}</a>
         {% endif %}
+
         {% if snippet.expire_type != 3 %}
-        <a class="btn" href="{% url "snippet_details_raw" snippet.secret_id %}"><i class="icon-align-left"></i> {% trans "View Raw" %}</a>
+        <a href="{% url "snippet_details_raw" snippet.secret_id %}">{% trans "View Raw" %}</a>
         {% endif %}
+
         {% if snippet.lexer != 'text' %}
-        <a class="btn" href="#" id="toggleWordwrap">Wordwrap</a>
+        <a href="#" id="toggleWordwrap">Wordwrap</a>
         {% endif %}
     </div>
 
+
     {% if snippet.expire_type == 3 %}
     <p class="message">
         {% trans "This is a one-time snippet." %}
@@ -67,18 +57,16 @@
     Snippet
     ======================================================================= -->
     {% if snippet.lexer == 'text' %}
-    <div class="snippet-rendered">
-        {% include "dpaste/highlight/text.html" %}
-    </div>
+      <div class="snippet-text">{% include "dpaste/highlight/text.html" %}</div>
     {% else %}
-        {% include "dpaste/highlight/code.html" %}
+      <div class="snippet-code">{% include "dpaste/highlight/code.html" %}</div>
     {% endif %}
 
     <!-- ======================================================================
     Snippet Reply
     ======================================================================= -->
     <div class="snippet-reply" data-hidden="yes">
-        <h3>{% trans "Reply to this snippet" %} &rarr;</h3>
+        <h2 class="box">{% trans "Reply to this snippet" %} &rarr;</h2>
         {% include "dpaste/snippet_form.html" %}
     </div>
 {% endblock %}
@@ -87,38 +75,35 @@
 {% block script_footer %}
 {{ block.super }}
 <script>
-  var reply = document.querySelector('.snippet-reply');
+  let reply = document.querySelector('.snippet-reply');
   reply.onclick = function(e) {
     this.dataset.hidden = "no";
   };
 
+  document.getElementById('toggleWordwrap').onclick = function(e) {
+    e.preventDefault();
+    document.querySelector('.snippet-code').classList.toggle('wordwrap');
+  };
+
   // Line Highlighting
-  var curLine = document.location.hash;
-  if (curLine.substring(0, 2) === '#L') {
+  let curLine = document.location.hash;
+  if (curLine.startsWith('#L')) {
     hashlist = curLine.substring(2).split(',');
-    window.console.log(hashlist);
     if (hashlist.length > 0 && hashlist[0] !== '') {
       hashlist.forEach(function(el) {
-        var line = document.getElementById('l'+el)
+        let line = document.getElementById(`l${el}`);
         if (line)
           line.classList.add('marked');
       });
     }
   }
 
-  document.getElementById('toggleWordwrap').onclick = function(e) {
-    e.preventDefault();
-    document.querySelector('.code').classList.toggle('wordwrap');
-  }
-
-  var lines = document.querySelectorAll('.code li');
-
+  let lines = document.querySelectorAll('.code li');
   lines.forEach(function(el){
     el.onclick = function(e) {
       el.classList.toggle('marked');
-
-      var hash = 'L';
-      var marked = document.querySelectorAll('.code li.marked');
+      let hash = 'L';
+      let marked = document.querySelectorAll('.code li.marked');
       marked.forEach(function(line){
         if (hash !== 'L')
           hash += ',';

dpaste/templates/dpaste/snippet_form.html

@@ -1,40 +1,29 @@
 {% load i18n %}
 
-<form method="post" action="" class="form-horizontal snippet-form">
-    {% csrf_token %}
-    {{ form.non_field_errors }}
-    <div style="display: none;">{{ form.title }}</div>
+<form method="post" action="" class="snippet-form">
+  {% csrf_token %}
+  {{ form.non_field_errors }}
 
-    <div class="
-        control-group
-        form-content
-        superenter
-        {% if not object %}autofocus{% endif %}
-        {% if form.content.errors %}error{% endif %}
-    ">
-        {{ form.content }}
+  <div style="display: none;">{{ form.title }}</div> {# Honeypot field #}
+
+  <div class="form-content superenter {% if not object %}autofocus{% endif %} {% if form.content.errors %}error{% endif %}">
+    {{ form.content }}
+  </div>
+
+  <div class="form-options">
+    <div class="form-options-lexer">
+      <label for="id_lexer">{% trans "Syntax" %}</label>
+      {{ form.lexer }}
     </div>
 
-    <div class="control-group form-options">
-        <div class="form-options-lexer
-            {% if form.lexer.errors %}control-group error{% endif %}">
-            <div class="input-append">
-                {{ form.lexer }}
-            </div>
-            {% for error in form.lexer.errors %}
-            <span class="help-inline">{{ error }}</span>
-            {% endfor %}
-        </div>
-        <div class="form-options-expire">
-            {{ form.expires.errors }}
-            <div class="input-prepend">
-                <span class="add-on"><i class="icon-trash" title="{% trans "Expire in" %}"></i></span>
-                {{ form.expires }}
-            </div>
-        </div>
-    </div>
-    <div class="form-actions">
-        <input tabindex="0" type="submit"class="btn btn-primary" value="{% trans "Paste it" %}">
-        <span class="shortcut">&#8984;+&#9166; {% trans "or" %} Ctrl+&#9166;</span>
+    <div class="form-options-expire">
+      <label for="id_expires">{% trans "Expires in" %}</label>
+      {{ form.expires }}
     </div>
+  </div>
+
+  <div class="form-actions">
+    <input type="submit" value="{% trans "Paste it" %}">
+    <span class="shortcut">&#8984;+&#9166; {% trans "or" %} Ctrl+&#9166;</span>
+  </div>
 </form>

dpaste/templates/dpaste/snippet_list.html

@@ -2,28 +2,27 @@
 
 {% load i18n %}
 
-{% block title %}Snippet History{% endblock %}
-{% block headline %}Snippet History{% endblock %}
-{% block dpaste_nav_history %}active{% endblock %}
+{% block title %}{% trans "Snippet History" %}{% endblock %}
+{% block headline %}{% trans "Snippet History" %}{% endblock %}
+
 {% block page %}
-
-    <hr>
-
+  <dl class="snippet-list">
     {% for snippet in snippet_list %}
-    <h4 style="{% if not forloop.first %}margin-top: 50px;{% endif %}">
-        <a title="{{ snippet.published|date:_("DATETIME_FORMAT") }}" href="{{ snippet.get_absolute_url }}">
-            {% blocktrans with snippet.published|timesince as since %}{{ since }} ago{% endblocktrans %}
+      <dt>
+        <a title="{{ snippet.published|date:_("DATETIME_FORMAT") }}"
+           href="{{ snippet.get_absolute_url }}">
+          {% blocktrans with snippet.published|timesince as since %}{{ since }}
+            ago{% endblocktrans %}
         </a>
-    </h4>
-    {% include "dpaste/snippet_pre.html" %}
+      </dt>
+      <dd>
+        {{ snippet.excerpt }}
+      </dd>
     {% empty %}
-    <div>
-        <p>{% trans "No snippets saved. Either all your snippets are expired or your cookie has changed." %}</p>
-    </div>
+      <dt>{% trans "No snippets saved. Either all your snippets are expired or your cookie has changed." %}</dt>
     {% endfor %}
+    <dt><a href="?delete-all">{% trans "Delete all your snippets" %}</a>
+    </dt>
+  </dl>
 
-    <hr/>
-    <div>
-        <p><a href="?delete-all">Delete all your snippets.</a></p>
-    </div>
 {% endblock %}

dpaste/templates/dpaste/snippet_new.html

@@ -2,10 +2,11 @@
 
 {% load i18n %}
 
-{% block title %}{% trans "New snippet" %}{% endblock %}
-{% block headline %}{% trans "New snippet" %}{% endblock %}
-{% block dpaste_nav_new %}active{% endblock %}
+{% block title %}{{ SITE_NAME }}{% endblock %}
+{% block headline %}{{ SITE_NAME }}{% endblock %}
 
 {% block page %}
+  <div class="snippet-new">
     {% include "dpaste/snippet_form.html" %}
+  </div>
 {% endblock %}

dpaste/views.py

@@ -23,14 +23,11 @@ from pygments.lexers import get_lexer_for_filename
 from pygments.util import ClassNotFound
 
 from .forms import EXPIRE_CHOICES, SnippetForm, get_expire_values
-from .highlight import (LEXER_DEFAULT, LEXER_KEYS, LEXER_LIST,
-                        LEXER_WORDWRAP, PLAIN_CODE, pygmentize)
+from .highlight import LEXER_DEFAULT, LEXER_KEYS, LEXER_LIST, LEXER_WORDWRAP, \
+    PLAIN_CODE, pygmentize
 from .models import ONETIME_LIMIT, Snippet
 
 template_globals = {
-    'site_name': getattr(settings, 'DPASTE_SITE_NAME', 'dpaste.de'),
-    'jquery_url': getattr(settings, 'DPASTE_JQUERY_URL',
-        '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'),
 }
 
 # -----------------------------------------------------------------------------
@@ -118,6 +115,7 @@ class SnippetDetailView(SnippetView, DetailView):
         h = h.replace(u'\t', '    ')
         return h
 
+
 class SnippetRawView(SnippetDetailView):
     """
     Display the raw content of a snippet

runscss.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+node-sass --output-style compressed --output dpaste/static/dpaste/ dpaste/static/dpaste/dpaste.scss $1