Use SASS/SCSS for styles

Krystle Salazar · Krystle Salazar · commit e7f19abce8f1 · 2020-06-19T23:55:21.000-04:00
diff --git a/Pipfile b/Pipfile
@@ -9,8 +9,10 @@ flake8 = "*"
 
 [packages]
 django = "~=3.0"
+django_compressor = "*"
 django-countries = "*"
 django-heroku = "*"
+django-libsass = "*"
 gunicorn = "*"
 psycopg2 = "*"
 django-ordered-model = "*"
diff --git a/Pipfile.lock b/Pipfile.lock
diff --git a/caselaw/settings.py b/caselaw/settings.py
@@ -24,14 +24,15 @@
 SECRET_KEY = os.environ.get("DJANGO_SECRET_KEY")
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = os.environ.get("DJANGO_DEBUG_ENABLED", default=False)
+DEBUG = os.environ.get("DJANGO_DEBUG_ENABLED", default=False) in ["True", True]
 
 ALLOWED_HOSTS = ["localhost", "127.0.0.1"]
 
 
 # Application definition
 
 INSTALLED_APPS = [
+    "compressor",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
@@ -122,6 +123,13 @@
 
 STATIC_URL = "/static/"
 
+STATICFILES_FINDERS = [
+    "django.contrib.staticfiles.finders.FileSystemFinder",
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
+]
+
+COMPRESS_PRECOMPILERS = (("text/x-scss", "django_libsass.SassCompiler"),)
 
 # See https://devcenter.heroku.com/articles/deploying-python#python-deployment-flow
 django_heroku.settings(locals())
diff --git a/legal_db/static/style.scss b/legal_db/static/style.scss
@@ -0,0 +1,62 @@
+$color-tomato: rgb(237, 89, 47);
+$color-dark-turquoise: rgb(5, 181, 218);
+$color-dark-slate-blue: rgb(60, 92, 153);
+$color-dark-slate-gray: rgb(51, 51, 51);
+$color-lighter-gray: rgb(245, 245, 245);
+
+body {
+    color: $color-dark-slate-gray;
+}
+
+.breadcrumb {
+  a, a:hover {
+    color: $color-dark-slate-blue;
+  }
+}
+
+.button.tag {
+  &.case {
+    &:hover, &.tag-selected {
+      color: white;
+      background-color: $color-tomato;
+      border-color: $color-tomato;
+    }
+  }
+  &.scholarship {
+    &:hover, &.tag-selected {
+      color: white;
+      background-color: $color-dark-turquoise;
+      border-color: $color-dark-turquoise;
+    }
+  }
+}
+
+.card.entry-post.link a .card-content.has-bottom-link {
+  padding: 0 0 3rem 0;
+}
+
+.hero {
+  background-color: $color-lighter-gray;
+
+  &.case {
+    box-shadow: inset 0px 6px 0px $color-tomato;
+  }
+
+  &.scholarship {
+    box-shadow: inset 0px 6px 0px $color-dark-turquoise;
+  }
+
+  p {
+    max-width: 708px;
+  }
+}
+
+.contribute {
+  float: right;
+  max-width: 380px;
+}
+
+.tags-filter {
+  color: $color-dark-slate-blue;
+  cursor: pointer;
+}
diff --git a/legal_db/templates/legal_db/base.html b/legal_db/templates/legal_db/base.html
@@ -1,3 +1,4 @@
+{% load compress %}
 {% load static %}
 
 <!DOCTYPE html>
@@ -8,7 +9,10 @@
     <meta name="description" content=""/>
     <title>CC Legal Database</title>
     <link rel="icon" href="{% static 'favicon.ico' %}"/>
-    <link rel="stylesheet" href="https://unpkg.com/@creativecommons/vocabulary/css/vocabulary.css">
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@creativecommons/vocabulary/css/vocabulary.css">
+    {% compress css %}
+    <link rel="stylesheet" type="text/x-scss" href="{% static 'style.scss' %}">
+    {% endcompress %}
     {% block styles %}{% endblock %}
   </head>
   <body>
diff --git a/legal_db/templates/legal_db/index.html b/legal_db/templates/legal_db/index.html
@@ -1,7 +1,7 @@
 {% extends 'legal_db/base.html' %}
 
 {% block body_content %}
-  <div class="padding-horizontal-xxl padding-vertical-large" style="background-color: #E5E5E5;">
+  <div class="hero padding-horizontal-xxl padding-vertical-large">
     <h1>Creative Commons Legal Database</h1>
   </div>
 {% endblock %}
