Prototyping secondary blog community page

Signed-off-by: Pedro de Lyra <pedrodelyra@gmail.com> Signed-off-by: Simião Carvalho <simiaosimis@gmail.com>

Prototyping secondary blog community page
Signed-off-by: Pedro de Lyra <pedrodelyra@gmail.com> Signed-off-by: Simião Carvalho <simiaosimis@gmail.com>
Fabio Teixeira
1 parent 24ef678d
Showing 3 changed files with 201 additions and 6 deletions Show diff stats
html-cms/blog.html
images/blog-teste.png
pagina_comunidade.css
@@ -0,0 +1,65 @@
+<!-- MAIN AREA -->
+<div id="community-blog">
+<div id="blog-header">
+  <h1>Blog</h1>
+  <p>Desenvolvimento CACIC</p>
+  <div id="community-action-button">
+    <a href=""><span>Entrar na comunidade</span></a>
+    <a href=""><span>Contactar administradores</span></a>
+  </div>
+</div>
+<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="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>
+<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>
+<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>
+</div>
+</div>
+
+<!-- LEFT SIDE BAR -->
+<div class="side-box">
+<div class="box box-2" id="box-2"><div class="blocks">
+
+    <div class="block-outer"><div class="block link-list-block" help="Este bloco pode ser usado para criar um menu de links. Você pode incluir, remove e atualizar links como quiser." id="block-1906"><div class="block-inner-1"><div class="block-inner-2"><h3 class="block-title empty"><span></span></h3><ul><li><a href="/search/software_infos" class="icon-no-icon" target="_self">Catálogo de Software</a></li></ul></div></div></div></div>
+
+    <div class="block-outer"><div class="block link-list-block" help="Este bloco pode ser usado para criar um menu de links. Você pode incluir, remove e atualizar links como quiser." id="block-1481"><div class="block-inner-1"><div class="block-inner-2"><h3 class="block-title"><span>Software Público</span></h3><ul><li><a href="/admin/environment_design" class="icon-no-icon" target="_self">Entenda o que é</a></li>
+<li><a href="/admin/environment_design" class="icon-no-icon" target="_self">Publique seu software</a></li>
+
+<li><a href="/admin/environment_design" class="icon-no-icon" target="_self">Desenvolvimento colaborativo</a></li>
+
+<li><a href="/profile/e-sic" class="icon-no-icon" target="_self">Sobre o Portal</a></li><li><a href="/software-publico-brasileiro/publique-seu-software" class="icon-no-icon" target="_self">Prêmio Ação Coletiva</a></li></ul></div></div></div></div>
+
+    <div class="block-outer"><div class="block link-list-block" help="Este bloco pode ser usado para criar um menu de links. Você pode incluir, remove e atualizar links como quiser." id="block-44"><div class="block-inner-1"><div class="block-inner-2"><h3 class="block-title"><span>Colaboração</span></h3><ul><li><a href="/software-publico-brasileiro/sobre-o-portal" class="icon-no-icon" target="_self">Comunidades</a></li><li><a href="/noticias/" class="icon-no-icon" target="_self">Projetos de software</a></li><li><a href="/software-publico-brasileiro/contato" class="icon-no-icon" target="_self">Usuários</a></li></ul></div></div></div></div>
+</div></div></div>
+
+<!-- RIGHT SIDE BOX -->
+<div id="temp">
+<div class="community-side-box">
+  <div class="community-logo">
+    
+  </div>
+  <div class="community-name">
+    <p>CACIC - Configurador Automático e Coletor de Informações Computacionais</p>
+  </div>
+</div>
+</div>
 \ No newline at end of file
@@ -613,11 +613,15 @@ ul#itens-legend-grafic{
 }
  
 .event-link {
-  background: url('images/calendar-icon.png') no-repeat left center;
+  background: url('images/globe-icon.png') no-repeat left center;
   margin-top: 18px;
   letter-spacing: 0.48px;
 }
  
+.event-link a {
+  text-decoration: underline;
+}
+
 .event-address {
   background: url('images/icone_pin.png') no-repeat left top;
 }
@@ -658,7 +662,7 @@ ul#itens-legend-grafic{
   content: url('images/logo-participa.png'); /* LOGOTIPO DA COMUNIDADE */
   /*content: url('images/bg-bloco-de-trilhas.png');*/
   width: 100%;
-  border-bottom: 3px solid #3E67B1;
+  border-bottom: 4px solid #3E67B1;
 }
  
 .community-name {
@@ -672,6 +676,7 @@ ul#itens-legend-grafic{
 }
  
 .community-name p {
+  font-size: 16px;
   line-height: 17px;
   letter-spacing: 0px;
 }
@@ -684,7 +689,7 @@ ul#itens-legend-grafic{
   font-weight: 700;
   text-align: left;
   font-family: Arial;
-  font-size: 14px;
+  font-size: 16px;
   text-transform: uppercase;
   padding-top: 9px;
   padding-left: 13px;
@@ -702,17 +707,142 @@ ul#itens-legend-grafic{
 }
  
 .another-events-date {
-  color: #2C4B6B;
+  color: #4562b1;
   font-weight: 700;
 }
  
 .another-event {
-  color: #172738;
+  color: #2C66CE;
 }
  
 /************************** PÁGINA BLOG **************************/
  
 #community-blog {
+  width: 500px;
+  height: 2200px;
   background-image: url('images/blog-teste.png');
   background-repeat: no-repeat; 
-}
 \ No newline at end of file
+}
+
+#blog-header {
+  width: 100%;
+  height: 129px;
+  border-bottom: 1.5px solid #D3D6DE;
+}
+
+#blog-header > h1 {
+  font-family: Arial;
+  font-weight: 700;
+  font-size: 33px;
+  margin: 0px;
+  text-align: left;
+  padding-left: 2px;
+  letter-spacing: 1px;
+}
+
+#community-blog p {
+  font-family: Arial;
+  font-size: 15px;
+  margin-top: 2px;
+  margin-left: 4px;
+  margin-bottom: 0px;
+  letter-spacing: 0.15px;
+}
+
+#community-blog #community-action-button {
+  margin-left: 3px;
+  margin-top: 7px;
+}
+
+#community-blog #community-action-button a {
+  text-align: center;
+  font-family: Arial;
+  font-size: 13px;
+  float: left;
+  margin-right: 9px;
+  padding: 5px 12px 4px 9px;
+  border: 1px solid #ECEDF1;
+  border-radius: 4px;
+  color: #2C66CE;
+}
+
+.blog-main-content {
+  font-family: Arial;
+  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;
+  text-transform: uppercase;
+}
+
+.blog-main-content #title {
+  font-size: 22px;
+  font-weight: 700;
+  margin-top: 9px;
+  line-height: 25px;
+  letter-spacing: 0.4px;
+}
+
+.blog-main-content #description {
+  font-size: 15px;
+  margin-top: 11px;
+  line-height: 21px;
+  letter-spacing: 0.1px;
+  padding-left: 3px;
+}
+
+.blog-event-list {
+  margin-top: 24px;
+}
+
+.blog-event-item{
+  width: 500px;
+  height: 110px;
+  border-top: solid 1px;
+  padding-top: 25px;
+}
+
+.blog-event-item #date {
+  font-size: 12px;
+  margin-top: -1px;
+  text-transform: uppercase;
+}
+
+.blog-event-item #title {
+  font-weight: 700;
+  font-size: 15px;
+  margin-top: 6px;
+  letter-spacing: 0.5px;
+}
+
+.blog-event-item #description {
+  font-size: 14px;
+  margin-top: 5px;
+  letter-spacing: -0.2px;
+}
+
+.blog-event-item #item-image {
+  float: left;
+  height: 100%;
+  margin-right: 20px;
+}
+
+.blog-event-item img {
+  width: 106px;
+  height: 63px;
+  border-radius: 5px;
+  padding-left: 4px;
+
+}
...	...	@@ -0,0 +1,65 @@
	1	+<!-- MAIN AREA -->
	2	+<div id="community-blog">
	3	+<div id="blog-header">
	4	+ <h1>Blog</h1>
	5	+ <p>Desenvolvimento CACIC</p>
	6	+ <div id="community-action-button">
	7	+ <a href=""><span>Entrar na comunidade</span></a>
	8	+ <a href=""><span>Contactar administradores</span></a>
	9	+ </div>
	10	+</div>
	11	+<div class="blog-main-content" >
	12	+ <div id="date" >Hoje</div>
	13	+ <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
	14	+ <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">
	15	+ <div id="description" >Ambiente traz soluções que dispensam pagamentos de licença simples, de fácil utilização e com novas funcionalidades.</div>
	16	+</div>
	17	+<div class="blog-event-list">
	18	+ <div class="blog-event-item">
	19	+ <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>
	20	+ <div id="date">Ontem</div>
	21	+ <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
	22	+ <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
	23	+ </div>
	24	+<div class="blog-event-item">
	25	+ <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>
	26	+ <div id="date">Ontem</div>
	27	+ <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
	28	+ <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
	29	+ </div>
	30	+<div class="blog-event-item">
	31	+ <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>
	32	+ <div id="date">Ontem</div>
	33	+ <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
	34	+ <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
	35	+ </div>
	36	+</div>
	37	+</div>
	38	+
	39	+<!-- LEFT SIDE BAR -->
	40	+<div class="side-box">
	41	+<div class="box box-2" id="box-2"><div class="blocks">
	42	+
	43	+ <div class="block-outer"><div class="block link-list-block" help="Este bloco pode ser usado para criar um menu de links. Você pode incluir, remove e atualizar links como quiser." id="block-1906"><div class="block-inner-1"><div class="block-inner-2"><h3 class="block-title empty"><span></span></h3><ul><li><a href="/search/software_infos" class="icon-no-icon" target="_self">Catálogo de Software</a></li></ul></div></div></div></div>
	44	+
	45	+ <div class="block-outer"><div class="block link-list-block" help="Este bloco pode ser usado para criar um menu de links. Você pode incluir, remove e atualizar links como quiser." id="block-1481"><div class="block-inner-1"><div class="block-inner-2"><h3 class="block-title"><span>Software Público</span></h3><ul><li><a href="/admin/environment_design" class="icon-no-icon" target="_self">Entenda o que é</a></li>
	46	+<li><a href="/admin/environment_design" class="icon-no-icon" target="_self">Publique seu software</a></li>
	47	+
	48	+<li><a href="/admin/environment_design" class="icon-no-icon" target="_self">Desenvolvimento colaborativo</a></li>
	49	+
	50	+<li><a href="/profile/e-sic" class="icon-no-icon" target="_self">Sobre o Portal</a></li><li><a href="/software-publico-brasileiro/publique-seu-software" class="icon-no-icon" target="_self">Prêmio Ação Coletiva</a></li></ul></div></div></div></div>
	51	+
	52	+ <div class="block-outer"><div class="block link-list-block" help="Este bloco pode ser usado para criar um menu de links. Você pode incluir, remove e atualizar links como quiser." id="block-44"><div class="block-inner-1"><div class="block-inner-2"><h3 class="block-title"><span>Colaboração</span></h3><ul><li><a href="/software-publico-brasileiro/sobre-o-portal" class="icon-no-icon" target="_self">Comunidades</a></li><li><a href="/noticias/" class="icon-no-icon" target="_self">Projetos de software</a></li><li><a href="/software-publico-brasileiro/contato" class="icon-no-icon" target="_self">Usuários</a></li></ul></div></div></div></div>
	53	+</div></div></div>
	54	+
	55	+<!-- RIGHT SIDE BOX -->
	56	+<div id="temp">
	57	+<div class="community-side-box">
	58	+ <div class="community-logo">
	59	+
	60	+ </div>
	61	+ <div class="community-name">
	62	+ <p>CACIC - Configurador Automático e Coletor de Informações Computacionais</p>
	63	+ </div>
	64	+</div>
	65	+</div>
0	66	\ No newline at end of file
...	...
...	...	@@ -613,11 +613,15 @@ ul#itens-legend-grafic{
613	613	}
614	614
615	615	.event-link {
616		- background: url('images/calendar-icon.png') no-repeat left center;
	616	+ background: url('images/globe-icon.png') no-repeat left center;
617	617	margin-top: 18px;
618	618	letter-spacing: 0.48px;
619	619	}
620	620
	621	+.event-link a {
	622	+ text-decoration: underline;
	623	+}
	624	+
621	625	.event-address {
622	626	background: url('images/icone_pin.png') no-repeat left top;
623	627	}
...	...	@@ -658,7 +662,7 @@ ul#itens-legend-grafic{
658	662	content: url('images/logo-participa.png'); /* LOGOTIPO DA COMUNIDADE */
659	663	/content: url('images/bg-bloco-de-trilhas.png');/
660	664	width: 100%;
661		- border-bottom: 3px solid #3E67B1;
	665	+ border-bottom: 4px solid #3E67B1;
662	666	}
663	667
664	668	.community-name {
...	...	@@ -672,6 +676,7 @@ ul#itens-legend-grafic{
672	676	}
673	677
674	678	.community-name p {
	679	+ font-size: 16px;
675	680	line-height: 17px;
676	681	letter-spacing: 0px;
677	682	}
...	...	@@ -684,7 +689,7 @@ ul#itens-legend-grafic{
684	689	font-weight: 700;
685	690	text-align: left;
686	691	font-family: Arial;
687		- font-size: 14px;
	692	+ font-size: 16px;
688	693	text-transform: uppercase;
689	694	padding-top: 9px;
690	695	padding-left: 13px;
...	...	@@ -702,17 +707,142 @@ ul#itens-legend-grafic{
702	707	}
703	708
704	709	.another-events-date {
705		- color: #2C4B6B;
	710	+ color: #4562b1;
706	711	font-weight: 700;
707	712	}
708	713
709	714	.another-event {
710		- color: #172738;
	715	+ color: #2C66CE;
711	716	}
712	717
713	718	/************************ PÁGINA BLOG ************************/
714	719
715	720	#community-blog {
	721	+ width: 500px;
	722	+ height: 2200px;
716	723	background-image: url('images/blog-teste.png');
717	724	background-repeat: no-repeat;
718		-}
719	725	\ No newline at end of file
	726	+}
	727	+
	728	+#blog-header {
	729	+ width: 100%;
	730	+ height: 129px;
	731	+ border-bottom: 1.5px solid #D3D6DE;
	732	+}
	733	+
	734	+#blog-header > h1 {
	735	+ font-family: Arial;
	736	+ font-weight: 700;
	737	+ font-size: 33px;
	738	+ margin: 0px;
	739	+ text-align: left;
	740	+ padding-left: 2px;
	741	+ letter-spacing: 1px;
	742	+}
	743	+
	744	+#community-blog p {
	745	+ font-family: Arial;
	746	+ font-size: 15px;
	747	+ margin-top: 2px;
	748	+ margin-left: 4px;
	749	+ margin-bottom: 0px;
	750	+ letter-spacing: 0.15px;
	751	+}
	752	+
	753	+#community-blog #community-action-button {
	754	+ margin-left: 3px;
	755	+ margin-top: 7px;
	756	+}
	757	+
	758	+#community-blog #community-action-button a {
	759	+ text-align: center;
	760	+ font-family: Arial;
	761	+ font-size: 13px;
	762	+ float: left;
	763	+ margin-right: 9px;
	764	+ padding: 5px 12px 4px 9px;
	765	+ border: 1px solid #ECEDF1;
	766	+ border-radius: 4px;
	767	+ color: #2C66CE;
	768	+}
	769	+
	770	+.blog-main-content {
	771	+ font-family: Arial;
	772	+ margin-top: 46px;
	773	+}
	774	+
	775	+.blog-main-content img {
	776	+ margin-left: auto;
	777	+ margin-right: auto;
	778	+ max-height: 208px;
	779	+ width: 100%;
	780	+ height: 100%;
	781	+ margin-top: 13px;
	782	+ border-radius: 2px;
	783	+ overflow: hidden;
	784	+}
	785	+
	786	+.blog-main-content #date {
	787	+ font-size: 14px;
	788	+ text-transform: uppercase;
	789	+}
	790	+
	791	+.blog-main-content #title {
	792	+ font-size: 22px;
	793	+ font-weight: 700;
	794	+ margin-top: 9px;
	795	+ line-height: 25px;
	796	+ letter-spacing: 0.4px;
	797	+}
	798	+
	799	+.blog-main-content #description {
	800	+ font-size: 15px;
	801	+ margin-top: 11px;
	802	+ line-height: 21px;
	803	+ letter-spacing: 0.1px;
	804	+ padding-left: 3px;
	805	+}
	806	+
	807	+.blog-event-list {
	808	+ margin-top: 24px;
	809	+}
	810	+
	811	+.blog-event-item{
	812	+ width: 500px;
	813	+ height: 110px;
	814	+ border-top: solid 1px;
	815	+ padding-top: 25px;
	816	+}
	817	+
	818	+.blog-event-item #date {
	819	+ font-size: 12px;
	820	+ margin-top: -1px;
	821	+ text-transform: uppercase;
	822	+}
	823	+
	824	+.blog-event-item #title {
	825	+ font-weight: 700;
	826	+ font-size: 15px;
	827	+ margin-top: 6px;
	828	+ letter-spacing: 0.5px;
	829	+}
	830	+
	831	+.blog-event-item #description {
	832	+ font-size: 14px;
	833	+ margin-top: 5px;
	834	+ letter-spacing: -0.2px;
	835	+}
	836	+
	837	+.blog-event-item #item-image {
	838	+ float: left;
	839	+ height: 100%;
	840	+ margin-right: 20px;
	841	+}
	842	+
	843	+.blog-event-item img {
	844	+ width: 106px;
	845	+ height: 63px;
	846	+ border-radius: 5px;
	847	+ padding-left: 4px;
	848	+
	849	+}
...	...