00dani/lemoncurry
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
Danielle McLean 2017-10-23 10:29:12 +11:00
parent 58d446f711
commit fe75a57550
Signed by: 00dani
GPG key ID: 5A5D2D1AFF12EEC5
10 changed files with 258 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
lemoncurry/settings/base.py
View file

@ -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

17
lemoncurry/static/lemoncurry/css/base16-material-darker.styl Normal file
View file

@ -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

60
lemoncurry/static/lemoncurry/css/layout.styl Normal file
View file

@ -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

5
lemoncurry/templates/lemoncurry/layout.html
View file

@ -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>