Commit 923ec89eac2c9f8c6424ff838bc44114ced7939b

Authored by Leandro Santos
1 parent 654a0546

adding sass support

images/icons/desenvolvimento-social.png 0 → 100644

2.3 KB

images/icons/desenvolvimento.png

2.3 KB

index.html
... ... @@ -2,11 +2,13 @@
2 2 <head>
3 3 <meta charset="utf-8" />
4 4 <title>Participa Brasil</title>
5   - <link rel="stylesheet" type="text/css" href="css/style.css" />
  5 + <link rel="stylesheet" type="text/css" href="style.css" />
6 6 <script src='js/jquery-2.1.3.min.js'></script>
7 7 <script src='js/handlebars-v3.0.1.js'></script>
8 8 <script src='js/handlebars-helpers.js'></script>
  9 +<!--
9 10 <script src='js/layout.js'></script>
  11 +-->
10 12 </head>
11 13 <body>
12 14  
... ...
sass/_footer.scss 0 → 100644
... ... @@ -0,0 +1,3 @@
  1 +footer {
  2 + display: none;
  3 +}
... ...
sass/_header.scss 0 → 100644
... ... @@ -0,0 +1,7 @@
  1 +header {
  2 + height: 100px;
  3 + background: #fff;
  4 + margin: 0;
  5 + padding: 0;
  6 + position: relative;
  7 +}
... ...
sass/_login.scss 0 → 100644
... ... @@ -0,0 +1,6 @@
  1 +#login a {
  2 + margin: 10px;
  3 + font-size: 12px;
  4 + color: #333;
  5 + text-decoration: none;
  6 +}
... ...
sass/_nav.scss 0 → 100644
... ... @@ -0,0 +1,40 @@
  1 +nav {
  2 + width: 100%;
  3 + padding: 0;
  4 + margin: 0;
  5 +}
  6 +
  7 +nav ul {
  8 + padding: 0;
  9 + margin: 0;
  10 +}
  11 +
  12 +nav li {
  13 + display: inline;
  14 + list-style: none;
  15 + padding: 0;
  16 + margin: 0;
  17 +}
  18 +
  19 +nav li a {
  20 + display: block;
  21 + width: 48%;
  22 + float: left;
  23 + text-align: center;
  24 + text-decoration: none;
  25 + font-size: 16px;
  26 + font-weight: bold;
  27 + color: #fff;
  28 + background: #03316f;
  29 + margin: 0;
  30 + padding: 20px 1%;
  31 + text-transform: uppercase;
  32 + border-bottom: 3px solid #001129;
  33 +}
  34 +
  35 +nav li a.active {
  36 + position: relative;
  37 + background: #fff;
  38 + color: #03316f;
  39 + border-bottom: 3px solid #fff;
  40 +}
... ...
sass/_proposal_categories.scss 0 → 100644
... ... @@ -0,0 +1,112 @@
  1 +#proposal-categories{
  2 + background: #fff;
  3 + clear: both;
  4 + margin: 0;
  5 + width: 100%;
  6 + padding: 10px;
  7 + text-align: center;
  8 + li {
  9 + list-style: none;
  10 + display: inline-block;
  11 + }
  12 + a {
  13 + text-decoration: none;
  14 + color: #fff;
  15 + margin: 10px;
  16 + -webkit-border-radius: 6px;
  17 + -moz-border-radius: 6px;
  18 + border-radius: 6px;
  19 + background-position: center 30px;
  20 + background-repeat: no-repeat;
  21 + width: 140px;
  22 + height: 40px;
  23 + display: inline-block;
  24 + font-size: 14px;
  25 + font-family: asap_bold, sans;
  26 + font-weight: bolder;
  27 + text-align: center;
  28 + padding-top: 100px;
  29 + overflow: hidden;
  30 + border-width: 2px;
  31 + border-style: solid;
  32 + hover: {
  33 + border-color: #fff !important;
  34 + }
  35 + }
  36 +}
  37 +
  38 +$categories: (saude: #00cbd7, seguranca: #e34748, educacao: #ffb400, desenvolvimento-social: #51d0b3);
  39 +
  40 +@each $category, $color in $categories {
  41 + .proposal-category-items-#{$category} {
  42 + background-color: $color;
  43 + }
  44 + #proposal-category-#{$category} a {
  45 + background-image: url(./images/icons/#{$category}.png);
  46 + background-color: $color;
  47 + border-color: $color;
  48 + }
  49 +}
  50 +
  51 +#proposal-categories-container {
  52 + display: inline;
  53 + width: auto;
  54 +}
  55 +
  56 +.proposal-category-items {
  57 + margin: 0 auto;
  58 + padding: 0;
  59 + -webkit-border-radius: 6px;
  60 + -moz-border-radius: 6px;
  61 + border-radius: 6px;
  62 +}
  63 +
  64 +ul.category {
  65 + display: block;
  66 + text-align: left;
  67 + padding: 0;
  68 +}
  69 +
  70 +.category > li {
  71 + color: #FFFFFF;
  72 + text-align: left;
  73 + font-family: asap_bold;
  74 + font-size: 16px;
  75 + padding: 10px 10px 5px 10px;
  76 + margin-bottom: 10px;
  77 + background-color: gray;
  78 +}
  79 +
  80 +.proposal-item p {
  81 + font-size: 14px;
  82 + color: #172938;
  83 + margin: 0;
  84 + padding-top: 5px;
  85 + background: #fff;
  86 + margin-bottom: 10px;
  87 + text-align: left;
  88 +}
  89 +
  90 +.proposal-item > a {
  91 + border-top: 1px dotted #03316f;
  92 + padding-top: 10px;
  93 + display: block;
  94 + margin: 0;
  95 + color: #03316f;
  96 + text-align: left;
  97 + font-family: asap_bold;
  98 + font-size: 16px;
  99 + text-decoration: none;
  100 + background: #fff;
  101 +}
  102 +
  103 +.proposal-category-items .proposal-item {
  104 + width: 290px;
  105 + min-height: 134px;
  106 + margin: 10px;
  107 + background: #fff;
  108 + border-radius: 7px;
  109 + padding: 15px;
  110 + vertical-align: top;
  111 +}
  112 +
... ...
sass/_proposal_group.scss 0 → 100644
... ... @@ -0,0 +1,37 @@
  1 +#proposal-group{
  2 + background: #fff;
  3 + clear: both;
  4 + margin: 0;
  5 + width: 100%;
  6 + padding: 10px;
  7 + text-align: center;
  8 + li {
  9 + list-style: none;
  10 + display: inline-block;
  11 + }
  12 + a {
  13 + text-decoration: none;
  14 + color: #fff;
  15 + margin: 10px;
  16 + -webkit-border-radius: 6px;
  17 + -moz-border-radius: 6px;
  18 + border-radius: 6px;
  19 + background-position: center 30px;
  20 + background-repeat: no-repeat;
  21 + width: 140px;
  22 + height: 40px;
  23 + display: inline-block;
  24 + font-size: 14px;
  25 + font-family: asap_bold, sans;
  26 + font-weight: bolder;
  27 + text-align: center;
  28 + padding-top: 100px;
  29 + overflow: hidden;
  30 + border-width: 2px;
  31 + border-style: solid;
  32 + hover: {
  33 + border-color: #fff !important;
  34 + }
  35 + }
  36 +}
  37 +
... ...
sass/style.scss 0 → 100755
... ... @@ -0,0 +1,115 @@
  1 +@font-face {
  2 + font-family: asap_bold_italic;
  3 + src: url(../fonts/Asap-BoldItalic.ttf);
  4 +}
  5 +
  6 +@font-face {
  7 + font-family: asap_bold;
  8 + src: url(../fonts/Asap-Bold.ttf);
  9 +}
  10 +
  11 +@font-face {
  12 + font-family: asap_italic;
  13 + src: url(../fonts/Asap-Italic.ttf);
  14 +}
  15 +
  16 +@font-face {
  17 + font-family: asap;
  18 + src: url(../fonts/Asap-Regular.ttf);
  19 +}
  20 +
  21 +@import 'nav';
  22 +@import 'header';
  23 +@import 'proposal_categories';
  24 +@import 'proposal_group';
  25 +@import 'login';
  26 +@import 'footer';
  27 +
  28 +html, body {
  29 + margin: 0;
  30 + padding: 0;
  31 + height: 100%;
  32 + font-family: asap, sans;
  33 +}
  34 +
  35 +h1 {
  36 + position: absolute;
  37 + bottom: 0;
  38 + left: 0;
  39 + color: #03316f;
  40 + font-size: 28px;
  41 + padding: 20px;
  42 + margin: 0;
  43 + display: block;
  44 + width: 100%;
  45 + text-transform: uppercase;
  46 + border-bottom: 1px solid #d6dcd7;
  47 +}
  48 +
  49 +#content {
  50 + padding-bottom: 150px;
  51 + background: transparent url(../images/header.png) center bottom no-repeat;
  52 + p {
  53 + font{
  54 + weight: lighter;
  55 + size: 14px;
  56 + }
  57 + text-align: justify;
  58 + margin: 20px;
  59 + line-height: 1.5em;
  60 + }
  61 +}
  62 +
  63 +.hide {
  64 + display: none;
  65 +}
  66 +
  67 +.mobile nav {
  68 + position: absolute;
  69 + bottom: 0;
  70 +}
  71 +
  72 +/*
  73 + * Each button
  74 + * FIXME: This selector doesn't look reliable
  75 + */
  76 +
  77 +
  78 +ul.category {
  79 + display: block;
  80 + text-align: left;
  81 + padding: 0;
  82 +}
  83 +
  84 +.category > li {
  85 + color: #03316f;
  86 + text-align: left;
  87 + display: block !important;
  88 + font-family: asap_bold;
  89 + font-size: 16px;
  90 + padding: 10px 0 5px 0;
  91 + border-bottom: 1px solid #03316f;
  92 + margin-bottom: 10px;
  93 +}
  94 +
  95 +.proposal-item p {
  96 + font-size: 14px;
  97 + color: #172938;
  98 + margin: 0;
  99 + padding: 10px;
  100 + padding-top: 5px;
  101 + background: #fff;
  102 + margin-bottom: 10px;
  103 +}
  104 +
  105 +.proposal-item > a {
  106 + display: block;
  107 + margin: 0;
  108 + color: #03316f;
  109 + text-align: left;
  110 + font-family: asap_bold;
  111 + font-size: 16px;
  112 + text-decoration: none;
  113 + padding: 10px;
  114 + background: #fff;
  115 +}
... ...