Updated footer due to SECOM guidelines

Signed-off-by: Carlos Oliveira <carlospecter@gmail.com> Signed-off-by: Peter Lima <peterlima@gmail.com>

Updated footer due to SECOM guidelines
Signed-off-by: Carlos Oliveira <carlospecter@gmail.com> Signed-off-by: Peter Lima <peterlima@gmail.com>
Carlos Coêlho
1 parent 2d878217
Showing 2 changed files with 123 additions and 103 deletions Show diff stats
static/css/footer.css
templates/footer.html
 /*Footer*/
  
-footer {
-  background: none;
+#footer {
+    padding: 4px 0 20px 0;
+    min-height: 50px;
+    width: 100%;
+    background: #EAEDF0;
+    color: #fff;
+    font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
 }
  
-.colab-footer-content{
-  background: rgb(213,213,213);
-  font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
-}
  
-.colab-footer-links a{
-  color:#2c66ce;
-  font-size: 13px;
-  line-height: 1.7em;
+#footer > div {
+    margin: 2em auto;
+    padding-top: 1em;
+    max-width: 960px;
 }
  
-.colab-footer-links a:hover{
-  background: none;
-  text-decoration: underline;
+#doormat-container {
+    float: none;
+    width: 100%;
 }
  
-.colab-footer-links{
-  color:#2c66ce;
-  border-left:1px dotted #2c66ce;
-  margin-top: 50px;
-  margin-bottom: 50px;
+#doormat-container dl {
+    border-left: 1px dotted #9CB5E2;
+    margin: 0 0 18px 0;
+    font-size: 13px;
 }
  
-.colab-footer-links dt{
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 1.3em;
-  margin-bottom: 8px;
-  font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
+#doormat-container dt {
+    color: #2C65CD;
+    font-size: 18px;
+    font-family: "open_sansextrabold", Arial, Helvetica, sans-serif;
 }
  
-.colab-footer-links dd{
-  padding-bottom: 3px
+#doormat-container dt,
+#doormat-container dd {
+    padding-left: 10px;
+    margin-bottom: 4px;
 }
  
-.footer-gov{
-  background: #0042b2;
+#doormat-container dd a {
+    color: #2C65CD;
 }
  
-.footer-gov > .container{
-  padding: 2em 0;
+#doormat-container dd a:hover {
+    text-decoration: none;
 }
  
-.footer-gov .institucionais a{
-  display:table-cell;
-  vertical-align: middle;
-  float: right;
+#doormat-container.columns-4 .doormatColumn {
+    width: 21%;
 }
  
-.footer-gov a:hover{
-  text-decoration: none;
+#doormat-container .doormatColumn {
+    float: left;
+    margin: 0 1em;
+    text-align: left;
 }
  
-.footer-gov span{
-  display: none;
-}
  
-.footer-gov .colab-logo-sgpr img, .logo-acesso img{
-  padding-top: 10px;
-  padding-right: 15%;
-  padding-bottom: 10px;
+#footer .footer-logos {
+    margin: 0 0 -20px;
+    padding: 1.6em 0;
+    max-width: 100%;
+    background: #0041B1;
 }
  
-.colab-logo-sgpr img, .spb-definitions {
-    display: none;
+#extra-footer p {
+    margin: 1em auto;
+    max-width: 960px;
 }
  
-.footer-gov .logo-brasil img{
-  padding-right: 0;
+#footer .clear {
+    clear: both;
 }
  
 .go-top{
@@ -90,8 +89,3 @@ footer {
   text-decoration: none;
   font-size: 12px; 
 }
-
-.spb-definitions{
-  font-size: 10px;
-  padding: 10px 0;
-}
@@ -7,63 +7,89 @@
       <a id="link-top" href="#link-rodape"><i class="fa fa-chevron-up"></i>Voltar ao topo</a>
     </div>
   </div>
-  <div class="container-fluid colab-footer-content">
-    <div class="container">
-      <dl class="col-md-2 col-md-offset-1 colab-footer-links">
-        <dt>Assuntos</dt>
-        <dd><a href="/social/spb/publique-seu-software" title="Publique seu software">Publique seu software</a></dd>
-        <dd><a href="http://www.softwarepublico.gov.br/mpv/" title="Prestadores de serviço">Prestadores de serviço</a></dd>
-        <dd><a href="http://www.softwarepublico.gov.br/4cmbr/xowiki/Principal" title="Espaço dos municípios">Espaço dos municípios</a></dd>
-      </dl>
-      <dl class="col-md-2 colab-footer-links">
-        <dt>Software Público</dt>
-          <dd class="colab-portalspb-item">
-            <a title="Entenda o que é" href="/social/spb/entenda-o-que-e">Entenda o que é</a>
+  <div id="footer" role="contentinfo">
+    <a name="afooter" id="afooter"></a>
+    <div id="doormat-container" class="columns-4">
+      <div class="doormatColumn column-0">
+        <dl class="doormatSection">
+          <dt class="doormatSectionHeader">Assuntos</dt>
+          <dd class="doormatSectionBody">
+            <a href="/cidadao/" class="external-link">Cidadão</a>
           </dd>
-          <dd class="colab-portalspb-item">
-            <a title="Eventos" href="/social/profile/spb/events">Eventos</a>
+          <dd class="doormatSectionBody">
+            <a href="/fornecedor/" class="external-link">Fornecedor</a>
           </dd>
-          <dd class="colab-portalspb-item">
-            <a title="Prêmios" href="/social/spb/premios">Prêmios</a>
+          <dd class="doormatSectionBody">
+            <a href="/governo/" class="external-link">Governo</a>
           </dd>
-          <dd class="colab-portalspb-item">
-            <a title="Publicações" href="/social/spb/publicacoes">Publicações</a>
+        </dl>
+      </div>
+      <div class="doormatColumn column-1">
+        <dl class="doormatSection">
+          <dt class="doormatSectionHeader">Serviços</dt>
+          <dd class="doormatSectionBody">
+            <a href="/paginas/servicos-faq/perguntas-e-respostas-frequentes" class="external-link">Perguntas frequentes</a>
           </dd>
-      </dl>
-      <dl class="col-md-2 colab-footer-links">
-        <dt>Serviços</dt>
-        <dd>
-          <a href="/social/spb/ajuda#faq" title="FAQ">FAQ</a>
-        </dd>
-        <dd>
-          <a href="/social/spb/contato" title="Contato">Contato</a>
-        </dd>
-        <dd>
-          <a href="/archives/thread/spb-usuarios/relatar-erros#msg-1635" title="Relatar erros">Relatar erros</a>
-        </dd>
-      </dl>
-      <dl class="col-md-2 colab-footer-links">
-        <dt>RSS</dt>
-          <dd><a href="/social/spb/rss/o-que-e" title="O que é?">O que é</a></dd>
-          <dd><a href="/rss/colab/latest" title="Assine">Assine</a></dd>
-      </dl>
-      <dl class="col-md-2 colab-footer-links">
-        <dt>Navegação</dt>
-          <dd><a href="/social/spb/acessibilidade">Acessibilidade</a></dd>
-          <dd><a href="/social/spb/mapa-do-site">Mapa do site</a></dd>
-      </dl>
-    </div>
-
-  <div class="footer-gov">
-    <div class="container">
-      <div class="col-md-7">
-          <a class="logo-acesso" href="http://www.acessoainformacao.gov.br/" target="_blank"><img class="img-responsive pull-left" src="{% static 'img/acesso-a-informacao.png' %}" ><span>Acesso a Informação</span></a>
+          <dd class="doormatSectionBody">
+            <a href="/servicos/contato" class="external-link">Contato</a>
+          </dd>
+          <dd class="doormatSectionBody">
+            <a href="https://www.comprasnet.gov.br/seguro/loginPortal.asp" class="external-link">Acesso ao SIASG</a>
+          </dd>
+          <dd class="doormatSectionBody">
+            <a href="https://www3.comprasnet.gov.br/SICAFWeb/public/pages/default.jsf" class="external-link">Acesso ao SICAF</a>
+          </dd>
+        </dl>
       </div>
-      <div class="col-md-5 institucionais">
-        <a class="logo-brasil" href="http://www.brasil.gov.br/" target="_blank"><img class="img-responsive" src="{% static 'img/brasil.png' %}" ><span>Brasil - Governo Federal</span></a>
-        <a class="colab-logo-sgpr" href="http://www.secretariageral.gov.br/" target="_blank"><img class="img-responsive" src="{% static 'img/sgpr.png' %}" ><span>Secretaria-geral da Presidência da República</span></a>
+      <div class="doormatColumn column-2">
+        <dl class="doormatSection">
+          <dt class="doormatSectionHeader">Redes sociais</dt>
+          <dd class="doormatSectionBody">
+            <a href="https://twitter.com/twitter" class="external-link">Twitter</a>
+          </dd>
+          <dd class="doormatSectionBody">
+            <a href="http://youtube.com/youtube" class="external-link">YouTube</a>
+          </dd>
+          <dd class="doormatSectionBody">
+            <a href="http://www.facebook.com/facebook" class="external-link">Facebook</a>
+          </dd>
+          <dd class="doormatSectionBody">
+            <a href="http://flickr.com/flickr" class="external-link">Flickr</a>
+          </dd>
+        </dl>
+      </div>
+      <div class="doormatColumn column-3">
+        <dl class="doormatSection">
+          <dt class="doormatSectionHeader">RSS</dt>
+          <dd class="doormatSectionBody">
+            <a href="http://www.comprasgovernamentais.gov.br/rss/o-que-e" class="external-link">O que é?</a>    
+          </dd>
+        </dl>
+        <dl class="doormatSection">
+          <dt class="doormatSectionHeader">Sobre o site</dt>
+          <dd class="doormatSectionBody">
+            <a href="http://www.comprasgovernamentais.gov.br/acessibilidade" class="external-link">Acessibilidade</a>  
+          </dd>
+          <dd class="doormatSectionBody">
+            <a href="http://www.comprasgovernamentais.gov.br/mapadosite" class="external-link">Mapa do site</a>
+          </dd>
+        </dl>
+      </div>
+    </div>
+    <div class="clear"></div>
+    <div id="footer-brasil" class="footer-logos">
+      <div>
+        <a href="http://www.acessoainformacao.gov.br/" class="logo-acesso">
+          <img src="{% static 'img/acesso-a-informacao.png' %}" alt="Acesso a Informação"></a>
+        <a href="http://www.brasil.gov.br/" class="logo-brasil">
+          <img src="{% static 'img/brasil.png' %}" alt="Brasil - Governo Federal"></a>
       </div>
     </div>
-  </div><!-- end footer-gov -->
+  </div>
+  <div id="extra-footer">
+    <p>
+      Desenvolvido com o CMS de código aberto
+    <a href="#"></a>
+    </p>
   </div>
 </footer>
1	1	/Footer/
2	2
3		-footer {
4		- background: none;
	3	+#footer {
	4	+ padding: 4px 0 20px 0;
	5	+ min-height: 50px;
	6	+ width: 100%;
	7	+ background: #EAEDF0;
	8	+ color: #fff;
	9	+ font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
5	10	}
6	11
7		-.colab-footer-content{
8		- background: rgb(213,213,213);
9		- font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
10		-}
11	12
12		-.colab-footer-links a{
13		- color:#2c66ce;
14		- font-size: 13px;
15		- line-height: 1.7em;
	13	+#footer > div {
	14	+ margin: 2em auto;
	15	+ padding-top: 1em;
	16	+ max-width: 960px;
16	17	}
17	18
18		-.colab-footer-links a:hover{
19		- background: none;
20		- text-decoration: underline;
	19	+#doormat-container {
	20	+ float: none;
	21	+ width: 100%;
21	22	}
22	23
23		-.colab-footer-links{
24		- color:#2c66ce;
25		- border-left:1px dotted #2c66ce;
26		- margin-top: 50px;
27		- margin-bottom: 50px;
	24	+#doormat-container dl {
	25	+ border-left: 1px dotted #9CB5E2;
	26	+ margin: 0 0 18px 0;
	27	+ font-size: 13px;
28	28	}
29	29
30		-.colab-footer-links dt{
31		- font-size: 18px;
32		- font-weight: bold;
33		- line-height: 1.3em;
34		- margin-bottom: 8px;
35		- font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
	30	+#doormat-container dt {
	31	+ color: #2C65CD;
	32	+ font-size: 18px;
	33	+ font-family: "open_sansextrabold", Arial, Helvetica, sans-serif;
36	34	}
37	35
38		-.colab-footer-links dd{
39		- padding-bottom: 3px
	36	+#doormat-container dt,
	37	+#doormat-container dd {
	38	+ padding-left: 10px;
	39	+ margin-bottom: 4px;
40	40	}
41	41
42		-.footer-gov{
43		- background: #0042b2;
	42	+#doormat-container dd a {
	43	+ color: #2C65CD;
44	44	}
45	45
46		-.footer-gov > .container{
47		- padding: 2em 0;
	46	+#doormat-container dd a:hover {
	47	+ text-decoration: none;
48	48	}
49	49
50		-.footer-gov .institucionais a{
51		- display:table-cell;
52		- vertical-align: middle;
53		- float: right;
	50	+#doormat-container.columns-4 .doormatColumn {
	51	+ width: 21%;
54	52	}
55	53
56		-.footer-gov a:hover{
57		- text-decoration: none;
	54	+#doormat-container .doormatColumn {
	55	+ float: left;
	56	+ margin: 0 1em;
	57	+ text-align: left;
58	58	}
59	59
60		-.footer-gov span{
61		- display: none;
62		-}
63	60
64		-.footer-gov .colab-logo-sgpr img, .logo-acesso img{
65		- padding-top: 10px;
66		- padding-right: 15%;
67		- padding-bottom: 10px;
	61	+#footer .footer-logos {
	62	+ margin: 0 0 -20px;
	63	+ padding: 1.6em 0;
	64	+ max-width: 100%;
	65	+ background: #0041B1;
68	66	}
69	67
70		-.colab-logo-sgpr img, .spb-definitions {
71		- display: none;
	68	+#extra-footer p {
	69	+ margin: 1em auto;
	70	+ max-width: 960px;
72	71	}
73	72
74		-.footer-gov .logo-brasil img{
75		- padding-right: 0;
	73	+#footer .clear {
	74	+ clear: both;
76	75	}
77	76
78	77	.go-top{
...	...	@@ -90,8 +89,3 @@ footer {
90	89	text-decoration: none;
91	90	font-size: 12px;
92	91	}
93		-
94		-.spb-definitions{
95		- font-size: 10px;
96		- padding: 10px 0;
97		-}
...	...
...	...	@@ -7,63 +7,89 @@
7	7	<a id="link-top" href="#link-rodape"><i class="fa fa-chevron-up"></i>Voltar ao topo</a>
8	8	</div>
9	9	</div>
10		- <div class="container-fluid colab-footer-content">
11		- <div class="container">
12		- <dl class="col-md-2 col-md-offset-1 colab-footer-links">
13		- <dt>Assuntos</dt>
14		- <dd><a href="/social/spb/publique-seu-software" title="Publique seu software">Publique seu software</a></dd>
15		- <dd><a href="http://www.softwarepublico.gov.br/mpv/" title="Prestadores de serviço">Prestadores de serviço</a></dd>
16		- <dd><a href="http://www.softwarepublico.gov.br/4cmbr/xowiki/Principal" title="Espaço dos municípios">Espaço dos municípios</a></dd>
17		- </dl>
18		- <dl class="col-md-2 colab-footer-links">
19		- <dt>Software Público</dt>
20		- <dd class="colab-portalspb-item">
21		- <a title="Entenda o que é" href="/social/spb/entenda-o-que-e">Entenda o que é</a>
	10	+ <div id="footer" role="contentinfo">
	11	+ <a name="afooter" id="afooter"></a>
	12	+ <div id="doormat-container" class="columns-4">
	13	+ <div class="doormatColumn column-0">
	14	+ <dl class="doormatSection">
	15	+ <dt class="doormatSectionHeader">Assuntos</dt>
	16	+ <dd class="doormatSectionBody">
	17	+ <a href="/cidadao/" class="external-link">Cidadão</a>
22	18	</dd>
23		- <dd class="colab-portalspb-item">
24		- <a title="Eventos" href="/social/profile/spb/events">Eventos</a>
	19	+ <dd class="doormatSectionBody">
	20	+ <a href="/fornecedor/" class="external-link">Fornecedor</a>
25	21	</dd>
26		- <dd class="colab-portalspb-item">
27		- <a title="Prêmios" href="/social/spb/premios">Prêmios</a>
	22	+ <dd class="doormatSectionBody">
	23	+ <a href="/governo/" class="external-link">Governo</a>
28	24	</dd>
29		- <dd class="colab-portalspb-item">
30		- <a title="Publicações" href="/social/spb/publicacoes">Publicações</a>
	25	+ </dl>
	26	+ </div>
	27	+ <div class="doormatColumn column-1">
	28	+ <dl class="doormatSection">
	29	+ <dt class="doormatSectionHeader">Serviços</dt>
	30	+ <dd class="doormatSectionBody">
	31	+ <a href="/paginas/servicos-faq/perguntas-e-respostas-frequentes" class="external-link">Perguntas frequentes</a>
31	32	</dd>
32		- </dl>
33		- <dl class="col-md-2 colab-footer-links">
34		- <dt>Serviços</dt>
35		- <dd>
36		- <a href="/social/spb/ajuda#faq" title="FAQ">FAQ</a>
37		- </dd>
38		- <dd>
39		- <a href="/social/spb/contato" title="Contato">Contato</a>
40		- </dd>
41		- <dd>
42		- <a href="/archives/thread/spb-usuarios/relatar-erros#msg-1635" title="Relatar erros">Relatar erros</a>
43		- </dd>
44		- </dl>
45		- <dl class="col-md-2 colab-footer-links">
46		- <dt>RSS</dt>
47		- <dd><a href="/social/spb/rss/o-que-e" title="O que é?">O que é</a></dd>
48		- <dd><a href="/rss/colab/latest" title="Assine">Assine</a></dd>
49		- </dl>
50		- <dl class="col-md-2 colab-footer-links">
51		- <dt>Navegação</dt>
52		- <dd><a href="/social/spb/acessibilidade">Acessibilidade</a></dd>
53		- <dd><a href="/social/spb/mapa-do-site">Mapa do site</a></dd>
54		- </dl>
55		- </div>
56		-
57		- <div class="footer-gov">
58		- <div class="container">
59		- <div class="col-md-7">
60		- <a class="logo-acesso" href="http://www.acessoainformacao.gov.br/" target="_blank"><img class="img-responsive pull-left" src="{% static 'img/acesso-a-informacao.png' %}" ><span>Acesso a Informação</span></a>
	33	+ <dd class="doormatSectionBody">
	34	+ <a href="/servicos/contato" class="external-link">Contato</a>
	35	+ </dd>
	36	+ <dd class="doormatSectionBody">
	37	+ <a href="https://www.comprasnet.gov.br/seguro/loginPortal.asp" class="external-link">Acesso ao SIASG</a>
	38	+ </dd>
	39	+ <dd class="doormatSectionBody">
	40	+ <a href="https://www3.comprasnet.gov.br/SICAFWeb/public/pages/default.jsf" class="external-link">Acesso ao SICAF</a>
	41	+ </dd>
	42	+ </dl>
61	43	</div>
62		- <div class="col-md-5 institucionais">
63		- <a class="logo-brasil" href="http://www.brasil.gov.br/" target="_blank"><img class="img-responsive" src="{% static 'img/brasil.png' %}" ><span>Brasil - Governo Federal</span></a>
64		- <a class="colab-logo-sgpr" href="http://www.secretariageral.gov.br/" target="_blank"><img class="img-responsive" src="{% static 'img/sgpr.png' %}" ><span>Secretaria-geral da Presidência da República</span></a>
	44	+ <div class="doormatColumn column-2">
	45	+ <dl class="doormatSection">
	46	+ <dt class="doormatSectionHeader">Redes sociais</dt>
	47	+ <dd class="doormatSectionBody">
	48	+ <a href="https://twitter.com/twitter" class="external-link">Twitter</a>
	49	+ </dd>
	50	+ <dd class="doormatSectionBody">
	51	+ <a href="http://youtube.com/youtube" class="external-link">YouTube</a>
	52	+ </dd>
	53	+ <dd class="doormatSectionBody">
	54	+ <a href="http://www.facebook.com/facebook" class="external-link">Facebook</a>
	55	+ </dd>
	56	+ <dd class="doormatSectionBody">
	57	+ <a href="http://flickr.com/flickr" class="external-link">Flickr</a>
	58	+ </dd>
	59	+ </dl>
	60	+ </div>
	61	+ <div class="doormatColumn column-3">
	62	+ <dl class="doormatSection">
	63	+ <dt class="doormatSectionHeader">RSS</dt>
	64	+ <dd class="doormatSectionBody">
	65	+ <a href="http://www.comprasgovernamentais.gov.br/rss/o-que-e" class="external-link">O que é?</a>
	66	+ </dd>
	67	+ </dl>
	68	+ <dl class="doormatSection">
	69	+ <dt class="doormatSectionHeader">Sobre o site</dt>
	70	+ <dd class="doormatSectionBody">
	71	+ <a href="http://www.comprasgovernamentais.gov.br/acessibilidade" class="external-link">Acessibilidade</a>
	72	+ </dd>
	73	+ <dd class="doormatSectionBody">
	74	+ <a href="http://www.comprasgovernamentais.gov.br/mapadosite" class="external-link">Mapa do site</a>
	75	+ </dd>
	76	+ </dl>
	77	+ </div>
	78	+ </div>
	79	+ <div class="clear"></div>
	80	+ <div id="footer-brasil" class="footer-logos">
	81	+ <div>
	82	+ <a href="http://www.acessoainformacao.gov.br/" class="logo-acesso">
	83	+ <img src="{% static 'img/acesso-a-informacao.png' %}" alt="Acesso a Informação"></a>
	84	+ <a href="http://www.brasil.gov.br/" class="logo-brasil">
	85	+ <img src="{% static 'img/brasil.png' %}" alt="Brasil - Governo Federal"></a>
65	86	</div>
66	87	</div>
67		- </div><!-- end footer-gov -->
	88	+ </div>
	89	+ <div id="extra-footer">
	90	+ <p>
	91	+ Desenvolvido com o CMS de código aberto
	92	+ <a href="#"></a>
	93	+ </p>
68	94	</div>
69	95	</footer>
...	...