diff --git a/src/c3nav/settings.py b/src/c3nav/settings.py
index 38467290..3d3cb630 100644
--- a/src/c3nav/settings.py
+++ b/src/c3nav/settings.py
@@ -301,6 +301,10 @@ STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'c3nav/static'),
)
+COMPRESS_PRECOMPILERS = (
+ ('text/x-scss', 'django_libsass.SassCompiler'),
+)
+
COMPRESS_ENABLED = COMPRESS_OFFLINE = not debug_fallback
COMPRESS_CSS_FILTERS = (
diff --git a/src/c3nav/site/templates/site/base.html b/src/c3nav/site/templates/site/base.html
index bee01400..cae95407 100644
--- a/src/c3nav/site/templates/site/base.html
+++ b/src/c3nav/site/templates/site/base.html
@@ -10,7 +10,7 @@
{% compress css %}
-
+
diff --git a/src/c3nav/static/milligram/_Base.sass b/src/c3nav/static/milligram/_Base.sass
new file mode 100644
index 00000000..ab1880f9
--- /dev/null
+++ b/src/c3nav/static/milligram/_Base.sass
@@ -0,0 +1,24 @@
+
+// Base
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+// Set box-sizing globally to handle padding and border widths
+*,
+*:after,
+*:before
+ box-sizing: inherit
+
+// The base font-size is set at 62.5% for having the convenience
+// of sizing rems in a way that is similar to using px: 1.6rem = 16px
+html
+ box-sizing: border-box
+ font-size: 62.5%
+
+// Default body styles
+body
+ color: $color-secondary
+ font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
+ font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
+ font-weight: 300
+ letter-spacing: .01em
+ line-height: 1.6
diff --git a/src/c3nav/static/milligram/_Blockquote.sass b/src/c3nav/static/milligram/_Blockquote.sass
new file mode 100644
index 00000000..dff5ecad
--- /dev/null
+++ b/src/c3nav/static/milligram/_Blockquote.sass
@@ -0,0 +1,12 @@
+
+// Blockquote
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+blockquote
+ border-left: .3rem solid $color-quaternary
+ margin-left: 0
+ margin-right: 0
+ padding: 1rem 1.5rem
+
+ *:last-child
+ margin-bottom: 0
diff --git a/src/c3nav/static/milligram/_Button.sass b/src/c3nav/static/milligram/_Button.sass
new file mode 100644
index 00000000..9c422b71
--- /dev/null
+++ b/src/c3nav/static/milligram/_Button.sass
@@ -0,0 +1,75 @@
+
+// Button
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit']
+ background-color: $color-primary
+ border: .1rem solid $color-primary
+ border-radius: .4rem
+ color: $color-initial
+ cursor: pointer
+ display: inline-block
+ font-size: 1.1rem
+ font-weight: 700
+ height: 3.8rem
+ letter-spacing: .1rem
+ line-height: 3.8rem
+ padding: 0 3.0rem
+ text-align: center
+ text-decoration: none
+ text-transform: uppercase
+ white-space: nowrap
+
+ &:focus,
+ &:hover
+ background-color: $color-secondary
+ border-color: $color-secondary
+ color: $color-initial
+ outline: 0
+
+ &[disabled]
+ cursor: default
+ opacity: .5
+
+ &:focus,
+ &:hover
+ background-color: $color-primary
+ border-color: $color-primary
+
+ &.button-outline
+ background-color: transparent
+ color: $color-primary
+
+ &:focus,
+ &:hover
+ background-color: transparent
+ border-color: $color-secondary
+ color: $color-secondary
+
+ &[disabled]
+
+ &:focus,
+ &:hover
+ border-color: inherit
+ color: $color-primary
+
+ &.button-clear
+ background-color: transparent
+ border-color: transparent
+ color: $color-primary
+
+ &:focus,
+ &:hover
+ background-color: transparent
+ border-color: transparent
+ color: $color-secondary
+
+ &[disabled]
+
+ &:focus,
+ &:hover
+ color: $color-primary
diff --git a/src/c3nav/static/milligram/_Code.sass b/src/c3nav/static/milligram/_Code.sass
new file mode 100644
index 00000000..fd0d8df3
--- /dev/null
+++ b/src/c3nav/static/milligram/_Code.sass
@@ -0,0 +1,22 @@
+
+// Code
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+code
+ background: $color-tertiary
+ border-radius: .4rem
+ font-size: 86%
+ margin: 0 .2rem
+ padding: .2rem .5rem
+ white-space: nowrap
+
+pre
+ background: $color-tertiary
+ border-left: .3rem solid $color-primary
+ overflow-y: hidden
+
+ & > code
+ border-radius: 0
+ display: block
+ padding: 1rem 1.5rem
+ white-space: pre
diff --git a/src/c3nav/static/milligram/_Color.sass b/src/c3nav/static/milligram/_Color.sass
new file mode 100644
index 00000000..a0279e90
--- /dev/null
+++ b/src/c3nav/static/milligram/_Color.sass
@@ -0,0 +1,10 @@
+
+// Color
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+$color-initial: #fff !default
+$color-primary: #9b4dca !default
+$color-secondary: #606c76 !default
+$color-tertiary: #f4f5f6 !default
+$color-quaternary: #d1d1d1 !default
+$color-quinary: #e1e1e1 !default
diff --git a/src/c3nav/static/milligram/_Divider.sass b/src/c3nav/static/milligram/_Divider.sass
new file mode 100644
index 00000000..1583766f
--- /dev/null
+++ b/src/c3nav/static/milligram/_Divider.sass
@@ -0,0 +1,8 @@
+
+// Divider
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+hr
+ border: 0
+ border-top: .1rem solid $color-tertiary
+ margin: 3.0rem 0
diff --git a/src/c3nav/static/milligram/_Form.sass b/src/c3nav/static/milligram/_Form.sass
new file mode 100644
index 00000000..3191237f
--- /dev/null
+++ b/src/c3nav/static/milligram/_Form.sass
@@ -0,0 +1,56 @@
+
+// Form
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+textarea,
+select
+ appearance: none // Removes awkward default styles on some inputs for iOS
+ background-color: transparent
+ border: .1rem solid $color-quaternary
+ border-radius: .4rem
+ box-shadow: none
+ box-sizing: inherit // Forced to replace inherit values of the normalize.css
+ height: 3.8rem
+ padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
+ width: 100%
+
+ &:focus
+ border-color: $color-primary
+ outline: 0
+
+select
+ background: url('data:image/svg+xml;utf8,') center right no-repeat
+ padding-right: 3.0rem
+
+ &:focus
+ background-image: url('data:image/svg+xml;utf8,')
+
+textarea
+ min-height: 6.5rem
+
+label,
+legend
+ display: block
+ font-size: 1.6rem
+ font-weight: 700
+ margin-bottom: .5rem
+
+fieldset
+ border-width: 0
+ padding: 0
+
+input[type='checkbox'],
+input[type='radio']
+ display: inline
+
+.label-inline
+ display: inline-block
+ font-weight: normal
+ margin-left: .5rem
diff --git a/src/c3nav/static/milligram/_Grid.sass b/src/c3nav/static/milligram/_Grid.sass
new file mode 100644
index 00000000..67bff4be
--- /dev/null
+++ b/src/c3nav/static/milligram/_Grid.sass
@@ -0,0 +1,158 @@
+
+// Grid
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+// .container is main centered wrapper with a max width of 112.0rem (1120px)
+.container
+ margin: 0 auto
+ max-width: 112.0rem
+ padding: 0 2.0rem
+ position: relative
+ width: 100%
+
+// Using flexbox for the grid, inspired by Philip Walton:
+// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
+// By default each .column within a .row will evenly take up
+// available width, and the height of each .column with take
+// up the height of the tallest .column in the same .row
+.row
+ display: flex
+ flex-direction: column
+ padding: 0
+ width: 100%
+
+ &.row-no-padding
+ padding: 0
+
+ &> .column
+ padding: 0
+
+ &.row-wrap
+ flex-wrap: wrap
+
+ // Vertically Align Columns
+ // .row-* vertically aligns every .col in the .row
+ &.row-top
+ align-items: flex-start
+
+ &.row-bottom
+ align-items: flex-end
+
+ &.row-center
+ align-items: center
+
+ &.row-stretch
+ align-items: stretch
+
+ &.row-baseline
+ align-items: baseline
+
+ .column
+ display: block
+ // IE 11 required specifying the flex-basis otherwise it breaks mobile
+ flex: 1 1 auto
+ margin-left: 0
+ max-width: 100%
+ width: 100%
+
+ // Column Offsets
+ &.column-offset-10
+ margin-left: 10%
+
+ &.column-offset-20
+ margin-left: 20%
+
+ &.column-offset-25
+ margin-left: 25%
+
+ &.column-offset-33,
+ &.column-offset-34
+ margin-left: 33.3333%
+
+ &.column-offset-50
+ margin-left: 50%
+
+ &.column-offset-66,
+ &.column-offset-67
+ margin-left: 66.6666%
+
+ &.column-offset-75
+ margin-left: 75%
+
+ &.column-offset-80
+ margin-left: 80%
+
+ &.column-offset-90
+ margin-left: 90%
+
+ // Explicit Column Percent Sizes
+ // By default each grid column will evenly distribute
+ // across the grid. However, you can specify individual
+ // columns to take up a certain size of the available area
+ &.column-10
+ flex: 0 0 10%
+ max-width: 10%
+
+ &.column-20
+ flex: 0 0 20%
+ max-width: 20%
+
+ &.column-25
+ flex: 0 0 25%
+ max-width: 25%
+
+ &.column-33,
+ &.column-34
+ flex: 0 0 33.3333%
+ max-width: 33.3333%
+
+ &.column-40
+ flex: 0 0 40%
+ max-width: 40%
+
+ &.column-50
+ flex: 0 0 50%
+ max-width: 50%
+
+ &.column-60
+ flex: 0 0 60%
+ max-width: 60%
+
+ &.column-66,
+ &.column-67
+ flex: 0 0 66.6666%
+ max-width: 66.6666%
+
+ &.column-75
+ flex: 0 0 75%
+ max-width: 75%
+
+ &.column-80
+ flex: 0 0 80%
+ max-width: 80%
+
+ &.column-90
+ flex: 0 0 90%
+ max-width: 90%
+
+ // .column-* vertically aligns an individual .column
+ .column-top
+ align-self: flex-start
+
+ .column-bottom
+ align-self: flex-end
+
+ .column-center
+ align-self: center
+
+// Larger than mobile screen
+@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
+
+ .row
+ flex-direction: row
+ margin-left: -1.0rem
+ width: calc(100% + 2.0rem)
+
+ .column
+ margin-bottom: inherit
+ padding: 0 1.0rem
diff --git a/src/c3nav/static/milligram/_Image.sass b/src/c3nav/static/milligram/_Image.sass
new file mode 100644
index 00000000..9d460e23
--- /dev/null
+++ b/src/c3nav/static/milligram/_Image.sass
@@ -0,0 +1,6 @@
+
+// Image
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+img
+ max-width: 100%
diff --git a/src/c3nav/static/milligram/_Link.sass b/src/c3nav/static/milligram/_Link.sass
new file mode 100644
index 00000000..e0885afd
--- /dev/null
+++ b/src/c3nav/static/milligram/_Link.sass
@@ -0,0 +1,11 @@
+
+// Link
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+a
+ color: $color-primary
+ text-decoration: none
+
+ &:focus,
+ &:hover
+ color: $color-secondary
diff --git a/src/c3nav/static/milligram/_List.sass b/src/c3nav/static/milligram/_List.sass
new file mode 100644
index 00000000..d3086839
--- /dev/null
+++ b/src/c3nav/static/milligram/_List.sass
@@ -0,0 +1,22 @@
+
+// List
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+dl,
+ol,
+ul
+ list-style: none
+ margin-top: 0
+ padding-left: 0
+
+ dl,
+ ol,
+ ul
+ font-size: 90%
+ margin: 1.5rem 0 1.5rem 3.0rem
+
+ol
+ list-style: decimal inside
+
+ul
+ list-style: circle inside
diff --git a/src/c3nav/static/milligram/_Spacing.sass b/src/c3nav/static/milligram/_Spacing.sass
new file mode 100644
index 00000000..7df55bcb
--- /dev/null
+++ b/src/c3nav/static/milligram/_Spacing.sass
@@ -0,0 +1,27 @@
+
+// Spacing
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+.button,
+button,
+dd,
+dt,
+li
+ margin-bottom: 1.0rem
+
+fieldset,
+input,
+select,
+textarea
+ margin-bottom: 1.5rem
+
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul
+ margin-bottom: 2.5rem
diff --git a/src/c3nav/static/milligram/_Table.sass b/src/c3nav/static/milligram/_Table.sass
new file mode 100644
index 00000000..c27ec399
--- /dev/null
+++ b/src/c3nav/static/milligram/_Table.sass
@@ -0,0 +1,19 @@
+
+// Table
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+table
+ border-spacing: 0
+ width: 100%
+
+td,
+th
+ border-bottom: .1rem solid $color-quinary
+ padding: 1.2rem 1.5rem
+ text-align: left
+
+ &:first-child
+ padding-left: 0
+
+ &:last-child
+ padding-right: 0
diff --git a/src/c3nav/static/milligram/_Typography.sass b/src/c3nav/static/milligram/_Typography.sass
new file mode 100644
index 00000000..a4b9a5bb
--- /dev/null
+++ b/src/c3nav/static/milligram/_Typography.sass
@@ -0,0 +1,48 @@
+
+// Typography
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+b,
+strong
+ font-weight: bold
+
+p
+ margin-top: 0
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ font-weight: 300
+ letter-spacing: -.1rem
+ margin-bottom: 2.0rem
+ margin-top: 0
+
+h1
+ font-size: 4.6rem
+ line-height: 1.2
+
+h2
+ font-size: 3.6rem
+ line-height: 1.25
+
+h3
+ font-size: 2.8rem
+ line-height: 1.3
+
+h4
+ font-size: 2.2rem
+ letter-spacing: -.08rem
+ line-height: 1.35
+
+h5
+ font-size: 1.8rem
+ letter-spacing: -.05rem
+ line-height: 1.5
+
+h6
+ font-size: 1.6rem
+ letter-spacing: 0
+ line-height: 1.4
diff --git a/src/c3nav/static/milligram/_Utility.sass b/src/c3nav/static/milligram/_Utility.sass
new file mode 100644
index 00000000..ae0dd973
--- /dev/null
+++ b/src/c3nav/static/milligram/_Utility.sass
@@ -0,0 +1,18 @@
+
+// Utility
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+// Clear a float with .clearfix
+.clearfix
+
+ &:after
+ clear: both
+ content: ' ' // The space content is one way to avoid an Opera bug.
+ display: table
+
+// Float either direction
+.float-left
+ float: left
+
+.float-right
+ float: right
diff --git a/src/c3nav/static/milligram/milligram.css b/src/c3nav/static/milligram/milligram.css
deleted file mode 100644
index 89c04e45..00000000
--- a/src/c3nav/static/milligram/milligram.css
+++ /dev/null
@@ -1,602 +0,0 @@
-/*!
- * Milligram v1.3.0
- * https://milligram.github.io
- *
- * Copyright (c) 2017 CJ Patoilo
- * Licensed under the MIT license
- */
-
-*,
-*:after,
-*:before {
- box-sizing: inherit;
-}
-
-html {
- box-sizing: border-box;
- font-size: 62.5%;
-}
-
-body {
- color: #606c76;
- font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
- font-size: 1.6em;
- font-weight: 300;
- letter-spacing: .01em;
- line-height: 1.6;
-}
-
-blockquote {
- border-left: 0.3rem solid #d1d1d1;
- margin-left: 0;
- margin-right: 0;
- padding: 1rem 1.5rem;
-}
-
-blockquote *:last-child {
- margin-bottom: 0;
-}
-
-.button,
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'] {
- background-color: #9b4dca;
- border: 0.1rem solid #9b4dca;
- border-radius: .4rem;
- color: #fff;
- cursor: pointer;
- display: inline-block;
- font-size: 1.1rem;
- font-weight: 700;
- height: 3.8rem;
- letter-spacing: .1rem;
- line-height: 3.8rem;
- padding: 0 3.0rem;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- white-space: nowrap;
-}
-
-.button:focus, .button:hover,
-button:focus,
-button:hover,
-input[type='button']:focus,
-input[type='button']:hover,
-input[type='reset']:focus,
-input[type='reset']:hover,
-input[type='submit']:focus,
-input[type='submit']:hover {
- background-color: #606c76;
- border-color: #606c76;
- color: #fff;
- outline: 0;
-}
-
-.button[disabled],
-button[disabled],
-input[type='button'][disabled],
-input[type='reset'][disabled],
-input[type='submit'][disabled] {
- cursor: default;
- opacity: .5;
-}
-
-.button[disabled]:focus, .button[disabled]:hover,
-button[disabled]:focus,
-button[disabled]:hover,
-input[type='button'][disabled]:focus,
-input[type='button'][disabled]:hover,
-input[type='reset'][disabled]:focus,
-input[type='reset'][disabled]:hover,
-input[type='submit'][disabled]:focus,
-input[type='submit'][disabled]:hover {
- background-color: #9b4dca;
- border-color: #9b4dca;
-}
-
-.button.button-outline,
-button.button-outline,
-input[type='button'].button-outline,
-input[type='reset'].button-outline,
-input[type='submit'].button-outline {
- background-color: transparent;
- color: #9b4dca;
-}
-
-.button.button-outline:focus, .button.button-outline:hover,
-button.button-outline:focus,
-button.button-outline:hover,
-input[type='button'].button-outline:focus,
-input[type='button'].button-outline:hover,
-input[type='reset'].button-outline:focus,
-input[type='reset'].button-outline:hover,
-input[type='submit'].button-outline:focus,
-input[type='submit'].button-outline:hover {
- background-color: transparent;
- border-color: #606c76;
- color: #606c76;
-}
-
-.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
-button.button-outline[disabled]:focus,
-button.button-outline[disabled]:hover,
-input[type='button'].button-outline[disabled]:focus,
-input[type='button'].button-outline[disabled]:hover,
-input[type='reset'].button-outline[disabled]:focus,
-input[type='reset'].button-outline[disabled]:hover,
-input[type='submit'].button-outline[disabled]:focus,
-input[type='submit'].button-outline[disabled]:hover {
- border-color: inherit;
- color: #9b4dca;
-}
-
-.button.button-clear,
-button.button-clear,
-input[type='button'].button-clear,
-input[type='reset'].button-clear,
-input[type='submit'].button-clear {
- background-color: transparent;
- border-color: transparent;
- color: #9b4dca;
-}
-
-.button.button-clear:focus, .button.button-clear:hover,
-button.button-clear:focus,
-button.button-clear:hover,
-input[type='button'].button-clear:focus,
-input[type='button'].button-clear:hover,
-input[type='reset'].button-clear:focus,
-input[type='reset'].button-clear:hover,
-input[type='submit'].button-clear:focus,
-input[type='submit'].button-clear:hover {
- background-color: transparent;
- border-color: transparent;
- color: #606c76;
-}
-
-.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
-button.button-clear[disabled]:focus,
-button.button-clear[disabled]:hover,
-input[type='button'].button-clear[disabled]:focus,
-input[type='button'].button-clear[disabled]:hover,
-input[type='reset'].button-clear[disabled]:focus,
-input[type='reset'].button-clear[disabled]:hover,
-input[type='submit'].button-clear[disabled]:focus,
-input[type='submit'].button-clear[disabled]:hover {
- color: #9b4dca;
-}
-
-code {
- background: #f4f5f6;
- border-radius: .4rem;
- font-size: 86%;
- margin: 0 .2rem;
- padding: .2rem .5rem;
- white-space: nowrap;
-}
-
-pre {
- background: #f4f5f6;
- border-left: 0.3rem solid #9b4dca;
- overflow-y: hidden;
-}
-
-pre > code {
- border-radius: 0;
- display: block;
- padding: 1rem 1.5rem;
- white-space: pre;
-}
-
-hr {
- border: 0;
- border-top: 0.1rem solid #f4f5f6;
- margin: 3.0rem 0;
-}
-
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='text'],
-input[type='url'],
-textarea,
-select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-color: transparent;
- border: 0.1rem solid #d1d1d1;
- border-radius: .4rem;
- box-shadow: none;
- box-sizing: inherit;
- height: 3.8rem;
- padding: .6rem 1.0rem;
- width: 100%;
-}
-
-input[type='email']:focus,
-input[type='number']:focus,
-input[type='password']:focus,
-input[type='search']:focus,
-input[type='tel']:focus,
-input[type='text']:focus,
-input[type='url']:focus,
-textarea:focus,
-select:focus {
- border-color: #9b4dca;
- outline: 0;
-}
-
-select {
- background: url('data:image/svg+xml;utf8,') center right no-repeat;
- padding-right: 3.0rem;
-}
-
-select:focus {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-textarea {
- min-height: 6.5rem;
-}
-
-label,
-legend {
- display: block;
- font-size: 1.6rem;
- font-weight: 700;
- margin-bottom: .5rem;
-}
-
-fieldset {
- border-width: 0;
- padding: 0;
-}
-
-input[type='checkbox'],
-input[type='radio'] {
- display: inline;
-}
-
-.label-inline {
- display: inline-block;
- font-weight: normal;
- margin-left: .5rem;
-}
-
-.container {
- margin: 0 auto;
- max-width: 112.0rem;
- padding: 0 2.0rem;
- position: relative;
- width: 100%;
-}
-
-.row {
- display: flex;
- flex-direction: column;
- padding: 0;
- width: 100%;
-}
-
-.row.row-no-padding {
- padding: 0;
-}
-
-.row.row-no-padding > .column {
- padding: 0;
-}
-
-.row.row-wrap {
- flex-wrap: wrap;
-}
-
-.row.row-top {
- align-items: flex-start;
-}
-
-.row.row-bottom {
- align-items: flex-end;
-}
-
-.row.row-center {
- align-items: center;
-}
-
-.row.row-stretch {
- align-items: stretch;
-}
-
-.row.row-baseline {
- align-items: baseline;
-}
-
-.row .column {
- display: block;
- flex: 1 1 auto;
- margin-left: 0;
- max-width: 100%;
- width: 100%;
-}
-
-.row .column.column-offset-10 {
- margin-left: 10%;
-}
-
-.row .column.column-offset-20 {
- margin-left: 20%;
-}
-
-.row .column.column-offset-25 {
- margin-left: 25%;
-}
-
-.row .column.column-offset-33, .row .column.column-offset-34 {
- margin-left: 33.3333%;
-}
-
-.row .column.column-offset-50 {
- margin-left: 50%;
-}
-
-.row .column.column-offset-66, .row .column.column-offset-67 {
- margin-left: 66.6666%;
-}
-
-.row .column.column-offset-75 {
- margin-left: 75%;
-}
-
-.row .column.column-offset-80 {
- margin-left: 80%;
-}
-
-.row .column.column-offset-90 {
- margin-left: 90%;
-}
-
-.row .column.column-10 {
- flex: 0 0 10%;
- max-width: 10%;
-}
-
-.row .column.column-20 {
- flex: 0 0 20%;
- max-width: 20%;
-}
-
-.row .column.column-25 {
- flex: 0 0 25%;
- max-width: 25%;
-}
-
-.row .column.column-33, .row .column.column-34 {
- flex: 0 0 33.3333%;
- max-width: 33.3333%;
-}
-
-.row .column.column-40 {
- flex: 0 0 40%;
- max-width: 40%;
-}
-
-.row .column.column-50 {
- flex: 0 0 50%;
- max-width: 50%;
-}
-
-.row .column.column-60 {
- flex: 0 0 60%;
- max-width: 60%;
-}
-
-.row .column.column-66, .row .column.column-67 {
- flex: 0 0 66.6666%;
- max-width: 66.6666%;
-}
-
-.row .column.column-75 {
- flex: 0 0 75%;
- max-width: 75%;
-}
-
-.row .column.column-80 {
- flex: 0 0 80%;
- max-width: 80%;
-}
-
-.row .column.column-90 {
- flex: 0 0 90%;
- max-width: 90%;
-}
-
-.row .column .column-top {
- align-self: flex-start;
-}
-
-.row .column .column-bottom {
- align-self: flex-end;
-}
-
-.row .column .column-center {
- -ms-grid-row-align: center;
- align-self: center;
-}
-
-@media (min-width: 40rem) {
- .row {
- flex-direction: row;
- margin-left: -1.0rem;
- width: calc(100% + 2.0rem);
- }
- .row .column {
- margin-bottom: inherit;
- padding: 0 1.0rem;
- }
-}
-
-a {
- color: #9b4dca;
- text-decoration: none;
-}
-
-a:focus, a:hover {
- color: #606c76;
-}
-
-dl,
-ol,
-ul {
- list-style: none;
- margin-top: 0;
- padding-left: 0;
-}
-
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ol ol,
-ol ul,
-ul dl,
-ul ol,
-ul ul {
- font-size: 90%;
- margin: 1.5rem 0 1.5rem 3.0rem;
-}
-
-ol {
- list-style: decimal inside;
-}
-
-ul {
- list-style: circle inside;
-}
-
-.button,
-button,
-dd,
-dt,
-li {
- margin-bottom: 1.0rem;
-}
-
-fieldset,
-input,
-select,
-textarea {
- margin-bottom: 1.5rem;
-}
-
-blockquote,
-dl,
-figure,
-form,
-ol,
-p,
-pre,
-table,
-ul {
- margin-bottom: 2.5rem;
-}
-
-table {
- border-spacing: 0;
- width: 100%;
-}
-
-td,
-th {
- border-bottom: 0.1rem solid #e1e1e1;
- padding: 1.2rem 1.5rem;
- text-align: left;
-}
-
-td:first-child,
-th:first-child {
- padding-left: 0;
-}
-
-td:last-child,
-th:last-child {
- padding-right: 0;
-}
-
-b,
-strong {
- font-weight: bold;
-}
-
-p {
- margin-top: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-weight: 300;
- letter-spacing: -.1rem;
- margin-bottom: 2.0rem;
- margin-top: 0;
-}
-
-h1 {
- font-size: 4.6rem;
- line-height: 1.2;
-}
-
-h2 {
- font-size: 3.6rem;
- line-height: 1.25;
-}
-
-h3 {
- font-size: 2.8rem;
- line-height: 1.3;
-}
-
-h4 {
- font-size: 2.2rem;
- letter-spacing: -.08rem;
- line-height: 1.35;
-}
-
-h5 {
- font-size: 1.8rem;
- letter-spacing: -.05rem;
- line-height: 1.5;
-}
-
-h6 {
- font-size: 1.6rem;
- letter-spacing: 0;
- line-height: 1.4;
-}
-
-img {
- max-width: 100%;
-}
-
-.clearfix:after {
- clear: both;
- content: ' ';
- display: table;
-}
-
-.float-left {
- float: left;
-}
-
-.float-right {
- float: right;
-}
-
-/*# sourceMappingURL=milligram.css.map */
diff --git a/src/c3nav/static/milligram/milligram.sass b/src/c3nav/static/milligram/milligram.sass
new file mode 100644
index 00000000..5872c998
--- /dev/null
+++ b/src/c3nav/static/milligram/milligram.sass
@@ -0,0 +1,26 @@
+/*!
+ * Milligram v1.3.0
+ * https://milligram.github.io
+ *
+ * Copyright (c) 2017 CJ Patoilo
+ * Licensed under the MIT license
+ */
+
+// Sass Modules
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+@import Color
+@import Base
+@import Blockquote
+@import Button
+@import Code
+@import Divider
+@import Form
+@import Grid
+@import Link
+@import List
+@import Spacing
+@import Table
+@import Typography
+@import Image
+@import Utility
diff --git a/src/requirements/production.txt b/src/requirements/production.txt
index 9772b53e..a96555d8 100644
--- a/src/requirements/production.txt
+++ b/src/requirements/production.txt
@@ -13,3 +13,4 @@ Pillow>=4.1,<4.2
qrcode>=5.3,<5.4
matplotlib>=2.0,<2.1
scipy>=0.19,<0.20
+django_libsass>=0.7,<0.8