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;
	@@ -4,3 +4,32 @@		@@ -4,3 +4,32 @@
4	color: #000;	4	color: #000;
5	text-decoration: none;	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	\ No newline at end of file	36	\ No newline at end of file