Small adjustments in blog community secondary page

Pedro de Lyra Pereira
1 parent d9918355
Showing 3 changed files with 107 additions and 59 deletions Show diff stats
html-cms/blog.html
images/left-arrow.png
pagina_comunidade.css
@@ -11,29 +11,50 @@
 <div class="blog-main-content" >
     <div id="date" >Hoje</div> 
     <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
-    <img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg">
+<div id="image-container">
+   <img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg" />
+</div>
     <div id="description" >Ambiente traz soluções que dispensam pagamentos de licença simples, de fácil utilização e com novas funcionalidades.</div> 
 </div>
 <div class="blog-event-list">
   <div class="blog-event-item">
-  <div id="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
-  <div id="date">Ontem</div>
-  <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
-  <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div> 
+  <div class="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
+  <div class="blog-event-information">
+  <div class="date">Ontem</div>
+  <div class="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
+  <div class="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div> 
+  </div>
   </div>
 <div class="blog-event-item">
-  <div id="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
-  <div id="date">Ontem</div>
-  <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
-  <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div> 
+  <div class="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
+  <div class="blog-event-information">
+  <div class="date">Ontem</div>
+  <div class="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
+  <div class="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div> 
+  </div>
   </div>
 <div class="blog-event-item">
-  <div id="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e53uh3-0fc0d412b324.jpeg"></div>
-  <div id="date">Ontem</div>
-  <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
-  <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div> 
+  <div class="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e53uh3-0fc0d412b324.jpeg"></div>
+  <div class="blog-event-information">
+  <div class="date">Ontem</div>
+  <div class="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
+  <div class="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div> 
+  </div>
   </div>
 </div>
+<div class="community-content-footer">
+  <ul id="indexes">
+    <li id="previous">
+    <span id="left-arrow"></span>
+<a href>Anteriores</a></li>
+    <li id="first-index" class="active-index"><a href>1</a></li>
+    <li id="second-index" class="default-index"><a href>2</a></li>
+    <li id="third-index" class="default-index"><a href>3</a></li>
+    <li id="fourth-index" class="default-index"><a href>4</a></li>
+    <li id="fifth-index" class="default-index"><a href>5</a></li>
+    <li id="next"><a href>Próximos</a><span id="right-arrow"></span></li>
+  </ul>
+</div>
 </div>
 <!-- LEFT SIDE BAR -->
@@ -55,23 +76,11 @@
 <!-- RIGHT SIDE BOX -->
 <div id="temp">
 <div class="community-side-box">
-  <div class="community-logo">
-    
+  <div class="community-logo-container">
+    <img src="https://beta.softwarepublico.gov.br/social/image_uploads/0000/0766/www.softwarepublico.gov_.br47_big_big.gif?1432145671" />
   </div>
   <div class="community-name">
     <p>CACIC - Configurador Automático e Coletor de Informações Computacionais</p>
   </div>
 </div>
-</div>
-
-<div class="community-content-footer">
-  <ul id="indexes">
-    <li id="previous">Anteriores</li>
-    <li class="index">1</li>
-    <li class="index">2</li>
-    <li class="index">3</li>
-    <li class="index">4</li>
-    <li class="index">5</li>
-    <li id="next">Próximos</li>
-  </ul>
 </div>
 \ No newline at end of file
@@ -658,24 +658,33 @@ ul#itens-legend-grafic{
   overflow: hidden;
 }
-.community-logo {
-  content: url('images/logo-participa.png'); /* LOGOTIPO DA COMUNIDADE */
-  /*content: url('images/bg-bloco-de-trilhas.png');*/
-  width: 100%;
+.community-logo-container {
+  height: 150px;
+  width: 200px;
   border-bottom: 4px solid #3E67B1;
+  overflow: hidden;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.community-logo-container img {
+  height: auto;
+  width: 70%;
 }
 .community-name {
   font-family: Arial;
   font-size: 14px;
   font-weight: 700;
-  padding: 13px 15px 0px 15px;
-  text-align: center; 
+  padding: 13px 10px 0px 10px;
+  text-align: center;
   height: 100%;
   background-color: #ECEDF1;
 }
 .community-name p {
+  font-family: open sans;
   font-size: 16px;
   line-height: 17px;
   letter-spacing: 0px;
@@ -720,7 +729,7 @@ ul#itens-legend-grafic{
 #community-blog {
   width: 500px;
   height: 2200px;
-  background-image: url('images/blog-teste.png');
+  /*background-image: url('images/blog-teste.png');*/
   background-repeat: no-repeat; 
 }
@@ -761,29 +770,19 @@ ul#itens-legend-grafic{
   float: left;
   margin-right: 9px;
   padding: 5px 12px 4px 9px;
-  border: 1px solid #ECEDF1;
+  border: 1px solid #D3D6DE;
   border-radius: 4px;
   color: #2C66CE;
 }
 .blog-main-content {
   font-family: Arial;
+  color: #172738;
   margin-top: 46px;
 }
-.blog-main-content img {
-  margin-left: auto;
-  margin-right: auto;
-  max-height: 208px;
-  width: 100%;
-  height: 100%;
-  margin-top: 13px;
-  border-radius: 2px;
-  overflow: hidden;
-}
-
 .blog-main-content #date {
-  font-size: 14px;
+  font-size: 12px;
   text-transform: uppercase;
 }
@@ -795,6 +794,19 @@ ul#itens-legend-grafic{
   letter-spacing: 0.4px;
 }
+.blog-main-content #image-container {
+  border-radius: 6px;
+  margin-top: 13px;
+  overflow: hidden;
+  height: 210px;
+  width: 490px;
+}
+
+.blog-main-content #image-container img {
+  height: auto;
+  width: 490px;
+}
+
 .blog-main-content #description {
   font-size: 15px;
   margin-top: 11px;
@@ -808,32 +820,39 @@ ul#itens-legend-grafic{
 }
 .blog-event-item{
+  position: relative;
+  float: left;
   width: 500px;
-  height: 110px;
   border-top: 1px solid #D3D6DE;
   padding-top: 25px;
+  margin-bottom: 25px;
 }
-.blog-event-item #date {
+.blog-event-item .blog-event-information .date {
   font-size: 12px;
   margin-top: -1px;
   text-transform: uppercase;
 }
-.blog-event-item #title {
-  font-weight: 700;
+.blog-event-item .blog-event-information .title {
+  font-weight: 700 !important;
   font-size: 15px;
   margin-top: 6px;
   letter-spacing: 0.5px;
 }
-.blog-event-item #description {
+.blog-event-item .blog-event-information .description {
   font-size: 14px;
   margin-top: 5px;
   letter-spacing: -0.2px;
 }
-.blog-event-item #item-image {
+.blog-event-item .blog-event-information {
+  float: left;
+  width: 370px;
+}
+
+.blog-event-item .item-image {
   float: left;
   height: 100%;
   margin-right: 20px;
@@ -844,11 +863,11 @@ ul#itens-legend-grafic{
   height: 63px;
   border-radius: 5px;
   padding-left: 4px;
-
 }
 .community-content-footer {
-  margin-top: 783px;
+  position: relative;
+  float: left;
   padding-left: 2px;
   width: 100%;
   border-top: 1px solid #D3D6DE;
@@ -861,7 +880,7 @@ ul#itens-legend-grafic{
   border: 1px solid #D3D6DE;
 }
-.community-content-footer ul .index {
+.community-content-footer ul .default-index {
   padding: 7px 11px 7px 11px;
   border-radius: 4px;
   margin-right: 4px;
@@ -890,10 +909,30 @@ ul#itens-legend-grafic{
   letter-spacing: 0.6px;
 }
-.community-content-footer #indexes li a{
-  color: black;
+.community-content-footer #indexes li a {
+  color: #172738;
 } 
-.community-content-footer li:active .index {
+.community-content-footer #indexes .active-index {
   background-color: #ECEDF1;
+  padding: 7px 11px 7px 11px;
+  border-radius: 4px;
+  margin-right: 4px;
+  font-family: Arial;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.community-content-footer #indexes #previous #left-arrow {
+  position: absolute;
+  content: url('images/left-arrow-black.png');
+  margin-left: -25px;
+  margin-top: 3px;
+}
+
+.community-content-footer #indexes #next #right-arrow {
+  position: absolute;
+  content: url('images/right-arrow-black.png');
+  margin-left: 18px;
+  margin-top: 3px;
 }
 \ No newline at end of file