scss

@use the files, because django_libsass uses the C++ version of sass that
does not support modules.

app/e11mail/settings.py

@@ -18,6 +18,7 @@ ALLOWED_HOSTS = []
 # Application definition
 
 INSTALLED_APPS = [
+    'compressor',
     'signup.apps.SignupConfig',
     'django.contrib.admin',
     'django.contrib.auth',
@@ -90,6 +91,15 @@ USE_TZ = True
 
 STATIC_URL = 'static/'
 
-STATICFILES_FINDERS = ["django.contrib.staticfiles.finders.AppDirectoriesFinder"]
+STATICFILES_FINDERS = [
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
+]
+
+STATIC_ROOT = '/tmp/e11mail-static'
+
+COMPRESS_PRECOMPILERS = (
+    ('text/x-scss', 'django_libsass.SassCompiler'),
+)
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

app/signup/static/signup/style.css

@@ -1,13 +0,0 @@
-/************************/
-/** Very Common Things **/
-/************************/
-* {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
-    font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji";
-    line-height: 1.5;
-}

app/signup/static/signup/style.scss

@@ -0,0 +1,293 @@
+/* The line above should remain empty */
+
+/************************/
+/** Very Common Things **/
+/************************/
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
+    font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji";
+    line-height: 1.5;
+}
+
+.pure-button-primary {
+    background-color: #008ed4;
+}
+
+a, a:visited {
+    text-decoration: none;
+    color: #007bff;
+}
+
+a:hover, a:focus {
+    text-decoration: underline;
+}
+
+/* So switching between scrollable and non-scrollable pages
+   does not cause a 10px shift
+*/
+body {
+    overflow-y: scroll;
+}
+
+.clear {
+    clear: both;
+}
+
+.hidden {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+/* Override pure.css; standard headers are too big */
+h1 {
+    font-size: 1.6rem;
+}
+$h2Size: 1.2rem;
+h2 {
+    font-size: $h2Size;
+}
+
+/***************************/
+/** Part of Base template **/
+/***************************/
+
+body > div {
+    padding-top: 2em;
+    padding-left: 1.2rem;
+    padding-right: 1.2rem;
+}
+
+h1.brand-title {
+    text-align: center;
+}
+
+h1.brand-title > a {
+    color: #000;
+    font-variant: small-caps;
+    font-size: 3rem;
+}
+
+h1.brand-title > a:hover, h1.brand-title > a:focus {
+    text-decoration: none;
+}
+
+$grey: #666;
+h2.brand-subtitle {
+    font-size: 1.6rem;
+    text-align: center;
+    color: $grey;
+}
+
+main {
+    margin: 0 auto;
+    max-width: 1000px;
+    margin-top: 33px;
+}
+
+#header {
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #e6e6e6;
+    padding: 1rem 2rem 2rem 2rem;
+    border-radius: 10px;
+    max-width: 1000px;
+}
+
+/*******************************/
+/* Shared by a couple of pages */
+/*******************************/
+
+$featuresGutter: 1rem;
+#page-index .leftright {
+    padding-top: 1em;
+    margin: 0 -$featuresGutter;
+
+    /* Tiles are vertically center-aligned, top margin is unnecessary */
+    h1 {
+        margin-top: 0;
+    }
+
+    article {
+        margin: 15px 0;
+        padding: 0 $featuresGutter;
+    }
+
+}
+
+@function svgarrow($color) {
+    @return url("data:image/svg+xml;utf8,<svg width='19' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M17.5 1.5l-8 7-8-7' stroke='%23" + $color +"' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
+}
+
+#page-index #faq {
+    margin: 4rem 0 8rem 0;
+    border-bottom: 1px solid #a3a3a3;
+
+    > article {
+        border-top: 1px solid #a3a3a3;
+
+        input {
+            display: none;
+        }
+
+        $rotateTransition: transform .2s ease-in-out;
+        $hideTransition: opacity .2s ease-out, max-height 0.2s ease-out;
+        > div {
+            max-height: 1000px;
+            max-width: 768px;
+            transition: $hideTransition;
+
+            > div {
+                padding-bottom: 30px;
+            }
+        }
+
+        $labelMargin: 1.5rem;
+        label {
+            position: relative;
+
+            > h2 {
+                padding: $labelMargin 0;
+                margin: 0;
+
+                // FIXME: hide the pointer in netsurf, since the sections
+                // are always expanded.
+                cursor: pointer;
+            }
+        }
+
+        $arrowHeight: 0.8rem;
+        label::before {
+            content: "";
+            float: right;
+            background-image: svgarrow("000");
+            background-position: 50%;
+            background-repeat: no-repeat;
+            background-size: contain;
+            margin-top: $labelMargin + $h2Size - $arrowHeight;
+            height: $arrowHeight;
+            width: 1rem;
+            transition: $rotateTransition;
+            transform: rotate(0deg);
+        }
+
+        input:checked ~ div {
+            overflow: hidden;
+            max-height: 0;
+            transition: $hideTransition;
+            opacity: 0;
+        }
+
+        input:checked ~ label::before {
+            transition: $rotateTransition;
+            transform: rotate(180deg);
+        }
+
+    } /* > article */
+} /* #faq */
+
+/*******************/
+/** Page-specific **/
+/*******************/
+
+#page-index {
+    #subscribe-section {
+        margin-top: 50px;
+        background-color: #e6e6e6;
+        padding: 1rem 2rem 2rem 2rem;
+        border-radius: 10px;
+        max-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+
+        span.message-success, span.message-error {
+            font-weight: bold;
+            font-size: $h2Size - 0.2;
+        }
+        span.message-success {
+            color: #181;
+        }
+        span.message-error {
+            color: #e33;
+        }
+
+        input#email {
+            width: 100%;
+            text-align: center;
+            margin-top: 1rem;
+            margin-bottom: .5rem;
+            border-radius: 3px;
+        }
+
+        button {
+            width: 100%;
+            text-align: center;
+            border-radius: 3px;
+        }
+
+        > h2 {
+            color: $grey;
+        }
+    }
+} /* #page-index */
+
+/**********************************/
+/** Media Media Responsive Media **/
+/**********************************/
+
+@media (prefers-color-scheme: dark) {
+    // these two should match
+    $textColor: #ccc;
+    $textColorStr: "ccc";
+    $bgGrey: #313131;
+
+    h1, h2, h2.brand-subtitle, h3, body {
+        color: $textColor;
+    }
+    body {
+        background-color: #222;
+    }
+    h1.brand-title > a {
+        color: #ececec;
+    }
+
+    #header {
+        background-color: $bgGrey;
+    }
+
+    #page-index {
+        #subscribe-section {
+            background-color: $bgGrey;
+            > h2 {
+                color: $textColor;
+            }
+
+            span.message-success {
+                color: #9c9;
+            }
+
+            input {
+                color: $textColor;
+                border: 1px solid #555;
+                box-shadow: none;
+                -webkit-box-shadow: none;
+                background-color: #222;
+            }
+        }
+    }
+
+    #page-index #faq > article {
+        label::before {
+            // difference from the default version: the color of the
+            // shape is #ccc.
+            background-image: svgarrow($textColorStr);
+        }
+
+    }
+}

app/signup/templates/signup/index.html

@@ -1,11 +1,15 @@
+{% load compress static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>{% block "title" %}e11mail.com{% endblock %}</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  {% load static %}
+  {% compress css %}
-  <link rel="stylesheet" href="{% static "signup/style.css" %}">
+  <link rel="stylesheet" type="text/x-scss" href="{% static "signup/pure.css" %}">
+  <link rel="stylesheet" type="text/x-scss" href="{% static "signup/grids-responsive.css" %}">
+  <link rel="stylesheet" type="text/x-scss" href="{% static "signup/style.scss" %}">
+  {% endcompress %}
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 </head>
 <body>

flake.nix

@@ -17,7 +17,8 @@
     flake-utils.lib.eachDefaultSystem (system: let
       pkgs = import nixpkgs {inherit system;};
       devDeps = with pkgs; [
-        python3Packages.django_5
+        python3Packages.django_4
+        python3Packages.django-libsass
 
         hugo
         brotli