Add Open Humans styles

demotemplate/settings.py

@@ -96,12 +96,7 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
-]
-
-MIDDLEWARE_CLASSES = [
-    # Simplified static file serving.
-    # https://warehouse.python.org/project/whitenoise/
-    'whitenoise.middleware.WhiteNoiseMiddleware'
+    'whitenoise.middleware.WhiteNoiseMiddleware',
 ]
 
 ROOT_URLCONF = 'demotemplate.urls'

main/templates/main/base.html

@@ -18,8 +18,12 @@
     <!-- Bootstrap via CDN. -->
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-    <!-- Optional theme -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+    <!-- Open Humans styles -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'css/open-humans-theming.css' %}">
+
+    <link rel="stylesheet" href="{% static 'main.css' %}">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>

static/css/open-humans-theming.css

@@ -0,0 +1,170 @@
+
+  /* Text fonts and styles
+
+  OH brand orange: #ff9161
+  Light orange: #ffceb9
+  OH brand teal: #4ac1c8
+  Light teal: #c9ecef
+-------------------------------------------------- */
+
+body {
+  font-size: 13px;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  color: #4d4d4d;
+  font-weight: 300;
+}
+
+code {
+  background-color: inherit;
+  color: #f7763e;
+}
+
+.nav > li > a, .navbar-form, .btn {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+a,
+.navbar-default .navbar-nav > li > a,
+.navbar-default .navbar-brand {
+  color: #4ac1c8;
+}
+
+.navbar-default {
+  border-radius: 0px;
+  background-color: #fff;
+  border: 0px;
+}
+
+a:hover,
+a:focus,
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus,
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #3c9da3;
+}
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:focus,
+.navbar-default .navbar-nav > .active > a:hover {
+  color: #3c9da3;
+  background-color: #e6f9fa;
+}
+
+.btn-default {
+  background-color: #fff;
+  border: 2px solid #4ac1c8;
+  color: #4ac1c8;
+  padding: 5px 10px;
+}
+
+.btn-default:hover, .btn-default:focus {
+  background-color: #e6f9fa;
+  border: 2px solid #4ac1c8;
+  color: #3c9da3;
+  padding: 5px 10px;
+}
+
+.btn-group-xs>.btn.btn-primary.btn-primary-hollow,
+.btn.btn-primary.btn-primary-hollow.btn-xs,
+.btn-group-xs>.btn.btn-primary.btn-primary-hollow:hover,
+.btn.btn-primary.btn-primary-hollow.btn-xs:hover,
+.btn-group-xs>.btn.btn-primary.btn-primary-hollow:focus,
+.btn.btn-primary.btn-primary-hollow.btn-xs:focus,
+.btn-group-xs>.btn.btn-default, .btn.btn-default.btn-xs,
+.btn-group-xs>.btn.btn-default:hover, .btn.btn-default.btn-xs:hover,
+.btn-group-xs>.btn.btn-default:focus, .btn.btn-default.btn-xs:focus {
+    padding: 0px 4px;
+}
+
+.btn-group-sm>.btn.btn-primary.btn-primary-hollow,
+.btn.btn-primary.btn-primary-hollow.btn-sm,
+.btn-group-sm>.btn.btn-primary.btn-primary-hollow:hover,
+.btn.btn-primary.btn-primary-hollow.btn-sm:hover,
+.btn-group-sm>.btn.btn-primary.btn-primary-hollow:focus,
+.btn.btn-primary.btn-primary-hollow.btn-sm:focus,
+.btn-group-sm>.btn.btn-default, .btn.btn-default.btn-sm,
+.btn-group-sm>.btn.btn-default:hover, .btn.btn-default.btn-sm:hover,
+.btn-group-sm>.btn.btn-default:focus, .btn.btn-default.btn-sm:focus {
+    padding: 4px 9px;
+}
+
+.btn-group-lg>.btn.btn-primary.btn-primary-hollow,
+.btn.btn-primary.btn-primary-hollow.btn-lg,
+.btn-group-lg>.btn.btn-primary.btn-primary-hollow:hover,
+.btn.btn-primary.btn-primary-hollow.btn-lg:hover,
+.btn-group-lg>.btn.btn-primary.btn-primary-hollow:focus,
+.btn.btn-primary.btn-primary-hollow.btn-lg:focus,
+.btn-group-lg>.btn.btn-default, .btn.btn-default.btn-lg,
+.btn-group-lg>.btn.btn-default:hover, .btn.btn-default.btn-lg:hover,
+.btn-group-lg>.btn.btn-default:focus, .btn.btn-lg.btn-default:focus,
+.btn-group-lg>.btn.btn-primary-hollow, .btn.btn-default.btn-lg,
+.btn-group-lg>.btn.btn-default:hover, .btn.btn-default.btn-lg:hover,
+.btn-group-lg>.btn.btn-default:focus, .btn-lg.btn-default.btn-lg:focus {
+    padding: 9px 15px;
+}
+
+.btn-primary.btn-primary-hollow {
+  background-color: #fff;
+  border: 2px solid #ff9161;
+  color: #4ac1c8;
+  padding: 5px 10px;
+}
+
+.btn-primary.btn-primary-hollow:hover, .btn-primary.btn-primary-hollow:focus {
+  background-color: #fff1eb;
+  border: 2px solid #f7763e;
+  color: #3c9da3;
+  padding: 5px 10px;
+}
+
+.btn-primary {
+  background-color: #ff9161;
+  border-color: #ff9161;
+}
+
+.btn-primary:hover, .btn-primary:focus {
+  background-color: #f7763e;
+  border-color: #f7763e;
+}
+
+.btn-info {
+  background-color: #4ac1c8;
+  border-color: #4ac1c8;
+}
+
+.btn-info:hover, .btn-info:focus {
+  background-color: #3c9da3;
+  border-color: #3c9da3;
+}
+
+.form-control {
+  border: 1px solid #4ac1c8;
+}
+
+.form-control:focus {
+  box-shadow: 0px 0px 4px #4ac1c8;
+  border: 1px solid #4ac1c8;
+}
+
+.footer {
+  background-color: #e6f9fa;
+}
+
+.jumbotron {
+  background-color: #e6f9fa;
+}
+
+.panel-default {
+  border-color: #4ac1c8;
+}
+
+.panel-default > .panel-heading {
+    background-color: #e6f9fa;
+    border-color: #4ac1c8;
+}