Replace default styles for SASS styles

10 years ago · 1200e76c3b
3 changed files with 1507 additions and 35 deletions
--- a/static/styles/_settings.scss
+++ b/static/styles/_settings.scss
--- a/static/styles/style.css
+++ b/static/styles/style.css
@ -1,5 +1,12 @@
+@import "settings";
+@import "normalize";
+@import "foundation";
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);

+$main-color: #27AE60;
+$sub-color: #34495E;
+
@-webkit-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
@ -21,39 +28,29 @@ margin: 0;
 padding: 0;
 }

-p {
-margin: 0.5em 0;
-}
-
 img {
 border: none;
 }

 a {
 background-color: transparent;
-color: #27ae60;
+color: $main-color;
 text-decoration: none;
+transition: 0.2s;
 }

 h1 {
-max-width: 1000px;
-color: #27ae60;
+color: $main-color;
 font-size: 120%;
 }

 h2 {
-color: #27ae60;
+color: $main-color;
 font-size: 110%;
 }

-h3 {
-color: #444444;
-font-size: 105%;
-line-height: 1.4em;
-}
-
 h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
-color: #27ae60;
+color: $main-color;
 }

 .fadein {
@ -98,7 +95,7 @@ padding: 0;
 width: 100%;
 height: 40px;
 line-height: 40px;
-background-color: #34495e;
+background-color: $sub-color;
 color: #ffffff;
 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
 }
@ -114,7 +111,7 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);

    .masthead > .container {
    padding-top: 60px;
-    border-bottom: 20px solid #27ae60;
+    border-bottom: 20px solid $main-color;
    background-color: #ffffff;
    }

@ -168,15 +165,12 @@ font-size: 100%;

    .content a:hover {
    color: #444444;
-    -webkit-transition: 0.3s ease-in;
-    -moz-transition: 0.3s ease-in;
-    -o-transition: 0.3s ease-in;
    }
 /* Layout */

 .footer {
 width: 100%;
-background-color: #34495e;
+background-color: $sub-color;
 color: #ffffff;
 text-align: center;
 }
@ -247,16 +241,6 @@ text-align: center;
    background-color: white;
    }

-
-
-@media (max-width: 980px) {
-
-}
-
-@media (max-width: 650px) {
-
-}
-
@media (max-width: 480px) {

    .masthead {
--- a/templates/base.html
+++ b/templates/base.html
@ -1,5 +1,6 @@
 {% load i18n %}
 {% load staticfiles %}
+{% load sass_tags %}
 <!DOCTYPE html>
 <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> 
@ -11,15 +12,17 @@
    <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block head_content %}
-      <link rel="stylesheet" href="{% static 'foundation/css/foundation.min.css' %}">
+      
+      {# Styles #}
      <link rel="stylesheet" href="{% static 'foundation-datepicker/css/foundation-datepicker.min.css' %}">
      <link rel="stylesheet" href="{% static 'components-font-awesome/css/font-awesome.css' %}">
      <link rel="stylesheet" href="{% static 'foundation-icon-fonts/foundation-icons.css' %}">
-      <link rel="stylesheet" href="{% static 'styles/style.css' %}">
+      {# Root directory to look for SASS files is set in settings.py with SASS_PROCESSOR_ROOT #}
+      <link rel="stylesheet" href="{% sass_src 'styles/app.scss' %}" type="text/css">
      
+      {# Scripts #}
      {# modernizr must be in head (see http://modernizr.com/docs/#installing) #}
      <script type="text/javascript" src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>
-
      <script type="text/javascript" src="{% static 'foundation/js/vendor/jquery.js' %}"></script>
      <script type="text/javascript" src="{% static 'foundation-datepicker/js/foundation-datepicker.js' %}"></script>
    {% endblock %}