Add a Stylus stylesheet for the layout, which is automatically compiled by Django Compressor

.gitignore

@@ -15,3 +15,5 @@ media
 # <django-project-name>/staticfiles/
 
 # End of https://www.gitignore.io/api/django
+/static
+node_modules

Pipfile

@@ -8,6 +8,7 @@ name = "pypi"
 [packages]
 
 django = "*"
+django-compressor = "*"
 
 
 [dev-packages]

Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "8b5635a4f7b069ae6661115b9eaa15466f7cd96794af5d131735a3638be101fb"
+            "sha256": "272f15a8d8c4e42b7ae75fb4f42ab560a664ce3959da632f58f091df0ba31abe"
         },
         "host-environment-markers": {
             "implementation_name": "cpython",
@@ -34,6 +34,20 @@
             ],
             "version": "==1.11.6"
         },
+        "django-appconf": {
+            "hashes": [
+                "sha256:ddab987d14b26731352c01ee69c090a4ebfc9141ed223bef039d79587f22acd9",
+                "sha256:6a4d9aea683b4c224d97ab8ee11ad2d29a37072c0c6c509896dd9857466fb261"
+            ],
+            "version": "==1.0.2"
+        },
+        "django-compressor": {
+            "hashes": [
+                "sha256:7732676cfb9d58498dfb522b036f75f3f253f72ea1345ac036434fdc418c2e57",
+                "sha256:9616570e5b08e92fa9eadc7a1b1b49639cce07ef392fc27c74230ab08075b30f"
+            ],
+            "version": "==2.2"
+        },
         "pytz": {
             "hashes": [
                 "sha256:c883c2d6670042c7bc1688645cac73dd2b03193d1f7a6847b6154e96890be06d",
@@ -47,6 +61,18 @@
                 "sha256:f5c056e8f62d45ba8215e5cb8f50dfccb198b4b9fbea8500674f3443e4689589"
             ],
             "version": "==2017.2"
+        },
+        "rcssmin": {
+            "hashes": [
+                "sha256:ca87b695d3d7864157773a61263e5abb96006e9ff0e021eff90cbe0e1ba18270"
+            ],
+            "version": "==1.0.6"
+        },
+        "rjsmin": {
+            "hashes": [
+                "sha256:dd9591aa73500b08b7db24367f8d32c6470021f39d5ab4e50c7c02e4401386f1"
+            ],
+            "version": "==1.0.12"
         }
     },
     "develop": {}

home/templates/home/index.html

@@ -2,9 +2,19 @@
 {% block main %}
 <aside class="author">
 	<article class="h-card card p-author">
+		<div class="card-body">
 			<h4 class="card-title p-name">
 				<span class="p-given-name">{{ user.first_name }}</span> <span class="p-family-name">{{ user.last_name }}</span>
 			</h4>
+		</div>
+
+		<div class="card-footer">
+			<ul class="profiles">
+				<li>
+					<a class="u-email" rel="me" href="mailto:{{ user.email }}"><i class="fa fa-envelope"></i> {{ user.email }}</a>
+				</li>
+			</ul>
+		</div>
 	</article>
 </aside>
 {% endblock %}

lemoncurry/settings/base.py

@@ -38,6 +38,8 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
 
+    'compressor',
+
     'lemoncurry',
     'home',
     'users',
@@ -124,6 +126,16 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/1.11/howto/static-files/
 
 STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'compressor.finders.CompressorFinder',
+)
+
+COMPRESS_PRECOMPILERS = (
+    ('text/stylus', os.path.join(BASE_DIR, 'node_modules', '.bin', 'stylus') + ' {infile} -o {outfile}'),
+)
 
 
 # Settings specific to lemoncurry

lemoncurry/static/lemoncurry/css/base16-material-darker.styl

@@ -0,0 +1,17 @@
+// Source: https://github.com/ntpeters/base16-materialtheme-scheme/blob/cbbc474/material-darker.yaml
+$base00 = #212121
+$base01 = #303030
+$base02 = #353535
+$base03 = #4A4A4A
+$base04 = #B2CCD6
+$base05 = #EEFFFF
+$base06 = #EEFFFF
+$base07 = #FFFFFF
+$base08 = #F07178
+$base09 = #F78C6C
+$base0A = #FFCB6B
+$base0B = #C3E88D
+$base0C = #89DDFF
+$base0D = #82AAFF
+$base0E = #C792EA
+$base0F = #FF5370

lemoncurry/static/lemoncurry/css/layout.styl

@@ -0,0 +1,60 @@
+@import 'base16-material-darker'
+
+$sm =  576px
+$md =  768px
+$lg =  992px
+$xl = 1200px
+
+html
+	background-color $base01
+
+a
+	color $base0D
+	&:hover
+		color $base0C
+
+body
+	display flex
+	flex-direction column
+	min-height 100vh
+	background-color $base00
+	color $base07
+	> header
+		background-color $base01
+		#navbar
+			justify-content space-between
+
+	> main
+		margin 2rem
+		flex 1
+		display flex
+		flex-direction column
+		align-items center
+		@media (min-width $sm)
+			flex-direction row-reverse
+			align-items unset
+
+	> footer
+		display flex
+		justify-content space-evenly
+		margin auto 1rem
+		text-align center
+
+.card
+	background-color $base02
+	&.h-card
+		max-width 25rem
+		position sticky
+		top 1rem
+
+		.p-note
+			color $base04
+
+		.profiles
+			list-style none
+			text-align center
+			margin 0
+			padding 0
+			> li
+				display inline-block
+				margin-right 5px

lemoncurry/templates/lemoncurry/layout.html

@@ -1,4 +1,4 @@
-{% load lemoncurry_tags static %}<!doctype html>
+{% load compress lemoncurry_tags static %}<!doctype html>
 <html lang="en" class="{% block html_class %}{% endblock %}">
 	<head>
 		<title class="p-name">{% site_name %}</title>
@@ -7,6 +7,9 @@
 
 		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
 					integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
+		{% compress css %}
+		<link rel="stylesheet" type="text/stylus" href="/static/lemoncurry/css/layout.styl" />
+		{% endcompress %}
 	</head>
 	<body>
 		<header>

package.json

@@ -0,0 +1,9 @@
+{
+	"name": "lemoncurry",
+	"version": "0.0.0",
+	"repository": "https://gitlab.com/00dani/lemoncurry",
+	"license": "MIT",
+	"devDependencies": {
+		"stylus": "^0.54.5"
+	}
+}

yarn.lock

@@ -0,0 +1,113 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+css-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+
+debug@*:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+minimatch@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+mkdirp@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+
+source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"