Cabeçalho inicial

augustoalmeida
1 parent 7f0be9a4
Showing 5 changed files with 46 additions and 14 deletions Show diff stats
images/icons/icon-user.png
index.html
sass/_login.scss
sass/_proposal_categories.scss
sass/style.scss
@@ -98,9 +98,9 @@
     <script id="proposal-template" type="text/x-handlebars-template">
       <header>
         <a id="display-contrast" href="#">Alto Contraste</a>
-        <div class="login">
-          <a href="#" class="button">Participe</a>
-          <a href="#">Entrar</a>
+        <div class="login-block">
+          <a href="#" class="login-register">Participe</a>
+          <a href="#" class="login-in">Entrar</a>
         </div>
         <div class="social top">
           {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
@@ -109,7 +109,9 @@
       </header>
  
       <div id="content">
-        {{{article.abstract}}}
+        <div class="embed-responsive embed-responsive-16by9">
+          {{{article.abstract}}}
+        </div>
       </div>
  
       <nav class="tab" role="tabpanel">
@@ -123,7 +125,7 @@
         </ul>
       </nav>
  
-      <article id="proposal-categories">
+      <aside id="proposal-categories">
         <div id="proposal-categories-container">
           <ul class="themes">
           {{#each article.categories}}
@@ -147,7 +149,7 @@
             </section>
           {{/each}}
         </div>
-      </article>
+      </aside>
  
       <article id="proposal-group" class="hide">
         <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
@@ -4,3 +4,32 @@
   color: #000;
   text-decoration: none;
 }
+
+.login {
+	&-block {
+		text-align: right;
+		margin-bottom: 10px;
+		a:nth-child(2) {
+			border-left: 1px solid #bcbcbc;
+			margin-left: 20px;
+			padding-left: 40px;
+		}
+	}
+	&-register {
+		background-color: #387bfa;
+		border-bottom: 3px solid darken(#387bfa, 15%);
+		border-radius: 3px;
+		color: #fff;
+		display: inline-block;
+		font-weight: 700;
+		font-size: 14px;
+		padding: 2px 20px;
+		text-align: center;
+		&:hover {
+			background-color: darken(#387bfa, 15%);
+		}
+	}
+	&-in {
+		background: url(images/icons/icon-user.png) no-repeat 20px 50%;
+	}
+}
 \ No newline at end of file
@@ -5,14 +5,16 @@
   clear: both;
   margin: 0;
   padding: 10px;
-  text-align: center;
+  text-align: left;
   border-bottom: 1px solid #03316f;
   border-left: 1px solid #03316f;
   border-right: 1px solid #03316f;    
-  
+  ul {
+    padding-left: 0;
+  }
   li {
     list-style: none;
-    display: inline-block;
+    display: block;
   }
  
   .proposal-category {
@@ -56,11 +56,10 @@ h1 {
 #content {
   padding-bottom: 50px;
   p {
-
-    text-align: justify;
-    margin: 20px;
-    line-height: 1.5em;
-    font-size: 1.2em;
+    text-align: inherit;
+    margin: 0;
+    line-height: inherit;
+    font-size: inherit;
  
     font{
       weight: lighter;
...	...	@@ -98,9 +98,9 @@
98	98	<script id="proposal-template" type="text/x-handlebars-template">
99	99	<header>
100	100	<a id="display-contrast" href="#">Alto Contraste</a>
101		- <div class="login">
102		- <a href="#" class="button">Participe</a>
103		- <a href="#">Entrar</a>
	101	+ <div class="login-block">
	102	+ <a href="#" class="login-register">Participe</a>
	103	+ <a href="#" class="login-in">Entrar</a>
104	104	</div>
105	105	<div class="social top">
106	106	{{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
...	...	@@ -109,7 +109,9 @@
109	109	</header>
110	110
111	111	<div id="content">
112		- {{{article.abstract}}}
	112	+ <div class="embed-responsive embed-responsive-16by9">
	113	+ {{{article.abstract}}}
	114	+ </div>
113	115	</div>
114	116
115	117	<nav class="tab" role="tabpanel">
...	...	@@ -123,7 +125,7 @@
123	125	</ul>
124	126	</nav>
125	127
126		- <article id="proposal-categories">
	128	+ <aside id="proposal-categories">
127	129	<div id="proposal-categories-container">
128	130	<ul class="themes">
129	131	{{#each article.categories}}
...	...	@@ -147,7 +149,7 @@
147	149	</section>
148	150	{{/each}}
149	151	</div>
150		- </article>
	152	+ </aside>
151	153
152	154	<article id="proposal-group" class="hide">
153	155	<label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
...	...
...	...	@@ -4,3 +4,32 @@
4	4	color: #000;
5	5	text-decoration: none;
6	6	}
	7	+
	8	+.login {
	9	+ &-block {
	10	+ text-align: right;
	11	+ margin-bottom: 10px;
	12	+ a:nth-child(2) {
	13	+ border-left: 1px solid #bcbcbc;
	14	+ margin-left: 20px;
	15	+ padding-left: 40px;
	16	+ }
	17	+ }
	18	+ &-register {
	19	+ background-color: #387bfa;
	20	+ border-bottom: 3px solid darken(#387bfa, 15%);
	21	+ border-radius: 3px;
	22	+ color: #fff;
	23	+ display: inline-block;
	24	+ font-weight: 700;
	25	+ font-size: 14px;
	26	+ padding: 2px 20px;
	27	+ text-align: center;
	28	+ &:hover {
	29	+ background-color: darken(#387bfa, 15%);
	30	+ }
	31	+ }
	32	+ &-in {
	33	+ background: url(images/icons/icon-user.png) no-repeat 20px 50%;
	34	+ }
	35	+}
7	36	\ No newline at end of file
...	...
...	...	@@ -5,14 +5,16 @@
5	5	clear: both;
6	6	margin: 0;
7	7	padding: 10px;
8		- text-align: center;
	8	+ text-align: left;
9	9	border-bottom: 1px solid #03316f;
10	10	border-left: 1px solid #03316f;
11	11	border-right: 1px solid #03316f;
12		-
	12	+ ul {
	13	+ padding-left: 0;
	14	+ }
13	15	li {
14	16	list-style: none;
15		- display: inline-block;
	17	+ display: block;
16	18	}
17	19
18	20	.proposal-category {
...	...
...	...	@@ -56,11 +56,10 @@ h1 {
56	56	#content {
57	57	padding-bottom: 50px;
58	58	p {
59		-
60		- text-align: justify;
61		- margin: 20px;
62		- line-height: 1.5em;
63		- font-size: 1.2em;
	59	+ text-align: inherit;
	60	+ margin: 0;
	61	+ line-height: inherit;
	62	+ font-size: inherit;
64	63
65	64	font{
66	65	weight: lighter;
...	...