Skip to content

Instantly share code, notes, and snippets.

@jorgeguberte

jorgeguberte/CSS for review (style.css)

Created October 4, 2012 18:05
Show Gist options
  • Save jorgeguberte/3835335 to your computer and use it in GitHub Desktop.
Save jorgeguberte/3835335 to your computer and use it in GitHub Desktop.
Download ZIP
HTML for review
Raw
CSS for review (style.css)
/*
* Theme name: SpressoSP Mobile
* Theme URI: http://www.spressosp.com.br
* Description: Tema versão mobile do SPressoSP
* Author: Publisher Brasil
* Author URI: http://publisherbrasil.com.br
*/
img{
max-width: 440px;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: black;
}
a:visited{
color: black;
}
#mainHeader{
width: 100%;
}
#logo{
display: block;
margin: auto;
width: 160px;
height: 70px;
}
#navigation ul{
margin-top: 0px;
padding-left: 0px;
color: white;
}
#mainNav{
margin-bottom: 0px;
width: 100%;
height: 4ex;
background-color:#333;
text-align: center;
}
#mainNav ul{
margin-left: 5%;
padding-top: 0.5em;
padding-left: 0px;
}
#mainNav li{
display: inline;
margin-right: 10%;
color: white;
font-size: 1em;
}
#mainNav a{
color: white;
text-decoration: none;
}
#highlights{
margin-top: 1em;
}
#highlights article{
margin-bottom: 0.3em;
}
.highlight img{
float: left;
}
.highlight h1{
position: relative;
float: left;
margin-top: 0px;
margin-left: 2%;
padding-top: 0px;
width: 75%;
font-size: 1em;
}
#subNavColunistas{
position: relative;
background-color: #333;
}
#subNavTematicas{
background-color: #333;
}
.navColumn{
float: left;
margin-right: .5em;
list-style-type: none;
font-size: .8em;
}
#secondaryHighlights{
}
#secondaryHighlights h1{
margin-top: 0px;
margin-bottom: 0px;
font-size: 1.2em;
}
.highlightBox{
border-radius: 3px;
width: 98%;
display: block;
margin: auto;
border: solid 1px #d9d9d9;
padding: 3px;
margin-bottom: .5em;
}
.highlightBoxTitle{
font-size: 1em;
}
.smallHighlight{
margin-bottom: 0px;
padding-left: 15px;
background: url('img/bullet.png') no-repeat;
background-position: 0% 3px;
font-size: 12px;
}
footer{
margin-top: 1em;
padding-left: .5em;
min-height: 8em;
background-color: #333;
}
footer ul{
padding-left: 0px;
color: white;
font-size: 2em;
}
footer ul > .navColumn{
margin-top: .5em;
}
footer{
line-height: 3em;
}
footer ul > .navColumn:last-child{
float: right;
text-align: right;
}
.footerInfo{
color: white;
font-size: .8em;
}
.dateDisplay{
font-size: .8em;
padding-left: .5em;
font-style: italic;
margin-top: 0px;
margin-bottom: 0px;
}
#comments{
display: block;
margin: auto;
padding: .5em;
}
footer a, footer a:visited{
color: white;
}
Raw
htmlreview.html
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<meta http-equiv="cleartype" content="on">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
<!--
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
-->
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->
<link rel="stylesheet" href="http://localhost/spressosp/wp-content/themes/spressospmobile/css/normalize.css">
<link rel="stylesheet" href="http://localhost/spressosp/wp-content/themes/spressospmobile/css/main.css">
<link rel="stylesheet" href="http://localhost/spressosp/wp-content/themes/spressospmobile/style.css">
<script src="http://localhost/spressosp/wp-content/themes/spressospmobile/js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
<header id="mainHeader">
<a href="http://localhost/spressosp"><img src="http://localhost/spressosp/wp-content/themes/spressospmobile/img/logo.png" id="logo"/></a>
</header>
<!-- NAVIGATION -->
<section id="navigation">
<nav id="mainNav">
<ul>
<li><a href="http://localhost/spressosp">Home</a></li>
<li><a href="#tematicas">Temáticas</a></li>
<li><a href="#colunistas">Colunistas</a></li>
</ul>
</nav>
<nav id="subNavTematicas" class="clearfix" style="display:none">
<ul style="list-style-type: none">
<div class="navColumn">
<li>Geral</li>
<li>Ambiente</li>
</div>
<div class='navColumn'>
<li>Cultura</li>
<li>Educação</li>
</div>
<div class='navColumn'>
<li>Esportes</li>
<li>Movimentos</li>
</div>
<div class='navColumn'>
<li>Política</li>
<li>Saúde</li>
</div>
</ul>
</nav>
<nav id="subNavColunistas" class="clearfix" style="display:none">
<ul>
<div class="navColumn">
<li>Renato Rovai</li>
<li>Rodrigo Vianna</li>
</div>
<div class="navColumn">
<li>Raquel Rolnik</li>
<li>Sergio Amadeu</li>
</div>
<div class="navColumn">
<li>Ladislau Dowbor</li>
<li>Tuca Munhoz</li>
</div>
</ul>
</nav>
</section>
<!-- MANCHETES-->
<section id="highlights" class="highlightBox">
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/comprovada-a-catarata-do-paciente-haddad-critica-falta-de-limites-de-serra/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/carta-compromisso2-150x150.jpg" width="60px;"/>
<h1>Comprovada a catarata do paciente, Haddad critica falta de limites de Serraa</h1>
</a>
</header>
</article>
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/populacao-ocupa-predio-na-capela-do-socorro-e-pede-a-construcao-de-hospital/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/FestaInauguração-9-150x150.jpg" width="60px;"/>
<h1>População ocupa prédio na Capela do Socorro e pede a construção de hospital</h1>
</a>
</header>
</article>
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/mp-pede-a-demolicao-de-edificacoes-em-terreno-contaminado-da-sabesp/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/CDP-150x150.png" width="60px;"/>
<h1>MP pede a demolição de edificações em terreno contaminado da Sabesp</h1>
</a>
</header>
</article>
<script type="text/javascript">
// <![CDATA[
var disqus_shortname = 'spressosp';
(function () {
var nodes = document.getElementsByTagName('span');
for (var i = 0, url; i < nodes.length; i++) {
if (nodes[i].className.indexOf('dsq-postid') != -1) {
nodes[i].parentNode.setAttribute('data-disqus-identifier', nodes[i].getAttribute('rel'));
url = nodes[i].parentNode.href.split('#', 1);
if (url.length == 1) { url = url[0]; }
else { url = url[1]; }
nodes[i].parentNode.href = url + '#disqus_thread';
}
}
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http' + '://' + 'disqus.com/forums/' + disqus_shortname + '/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
//]]>
</script>
</section>
<!-- NO GERAL-->
<section id="secondaryHighlights" class="highlightBox">
<header>
<h1>No Geral</h1>
</header>
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/mpf-abre-inquerito-civil-sobre-livro-que-incita-odio-aos-homossexuais/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/valter-campanato-abr-post-150x150.jpg" width=60/>
<h1 class="highlightTitle">MPF abre inquérito civil sobre livro que incita ódio aos homossexuais</h1>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/mesmo-com-o-fim-da-obrigatoriedade-supermercados-vao-continuar-distribuindo-sacolas-plasticas/">
<h4 style="margin-bottom: 0px;">Mesmo com o fim da obrigatoriedade, supermercados vão continuar distribuindo sacolas plásticas</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/sao-paulo-recebe-o-1o-festival-de-cinema-e-video-de-skate-do-brasil/">
<h4 style="margin-bottom: 0px;">São Paulo recebe o 1º Festival de Cinema e Vídeo de Skate do Brasil</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/nove-pessoas-morrem-e-outras-oito-sao-presas-durante-acao-da-rota-em-varzea-paulista/">
<h4 style="margin-bottom: 0px;">Nove pessoas morrem e outras oito são presas durante ação da Rota em Várzea Paulista</h4>
</a>
</header>
</article>
</section>
<!-- NA POLÍTICA-->
<section id="secondaryHighlights" class="highlightBox">
<header>
<h1>Na Política</h1>
</header>
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/reitor-proibe-debate-eleitoral-na-usp/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/Alckmin_-Rodas-304-11-cbr-037-150x150.jpg" width=60/>
<h1 class="highlightTitle">Reitor proíbe debate eleitoral na USP</h1>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/comprovada-a-catarata-do-paciente-haddad-critica-falta-de-limites-de-serra/">
<h4 style="margin-bottom: 0px;">Comprovada a catarata do paciente, Haddad critica falta de limites de Serraa</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/politica-sai-do-armario-155-candidaturas-lgbt-disputam-eleicoes-de-2012/">
<h4 style="margin-bottom: 0px;">Política sai do armário: 155 candidaturas LGBT disputam eleições de 2012</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/guarda-civil-dispersa-viciados-e-moradores-de-rua-no-centro-de-sp/">
<h4 style="margin-bottom: 0px;">Guarda civil dispersa dependentes químicos e moradores de rua no centro</h4>
</a>
</header>
</article>
</section>
<!-- NA EDUCAÇÃO-->
<section id="secondaryHighlights" class="highlightBox">
<header>
<h1>Na Educação</h1>
</header>
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/reitor-proibe-debate-eleitoral-na-usp/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/Alckmin_-Rodas-304-11-cbr-037-150x150.jpg" width=60/>
<h1 class="highlightTitle">Reitor proíbe debate eleitoral na USP</h1>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/estresse-depressao-e-ansiedade-os-inimigos-do-professor-da-rede-publica-de-sp/">
<h4 style="margin-bottom: 0px;">Estresse, depressão e ansiedade: os inimigos do professor da rede pública de SP</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/alunos-do-prouni-superam-dificuldades-para-estudar-na-universidade-de-salamanca/">
<h4 style="margin-bottom: 0px;">Alunos do ProUni superam dificuldades para estudar na Universidade de Salamanca</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/derrubado-recurso-que-emperrava-o-plano-nacional-de-educacao-na-camara/">
<h4 style="margin-bottom: 0px;">Derrubado recurso que emperrava o Plano Nacional de Educação na Câmara</h4>
</a>
</header>
</article>
</section>
<!-- NA POLÍTICA-->
<section id="secondaryHighlights" class="highlightBox">
<header>
<h1>No Esporte</h1>
</header>
<article class="highlight clearfix">
<header>
<a href="http://localhost/spressosp/2012/09/vasco-vira-para-cima-do-palmeiras-e-complica-ainda-mais-a-situacao-do-time-de-felipao/">
<img src="http://localhost/spressosp/wp-content/uploads/2012/09/Juninho-150x150.png" width=60/>
<h1 class="highlightTitle">Vasco vira para cima do Palmeiras e complica ainda mais a situação do time de Felipão</h1>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/em-dois-minutos-santos-bate-o-flamengo-em-noite-de-futebol-fraco/">
<h4 style="margin-bottom: 0px;">Em dois minutos, Santos bate o Flamengo em noite de futebol fraco</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/sao-paulo-perde-para-o-atletico-mineiro/">
<h4 style="margin-bottom: 0px;">São Paulo perde para o Atlético Mineiro</h4>
</a>
</header>
</article>
<article class="highlight clearfix">
<header class="smallHighlight">
<a href="http://localhost/spressosp/2012/09/emerson-salva-o-corinthians-da-terceira-derrota-para-a-ponte-preta-em-2012/">
<h4 style="margin-bottom: 0px;">Emerson salva o Corinthians da terceira derrota para a Ponte Preta em 2012</h4>
</a>
</header>
</article>
</section>
<style type="text/css" media="all">#avatar_footer { display: none; } /* Change this in Users > Avatars. */ </style><div id="avatar_footer">Avatars by <a href="http://www.sterling-adventures.co.uk/blog/">Sterling Adventures</a></div><footer>
<ul>
<div class="navColumn clearfix">
<li><a href="http://localhost/spressosp/expediente">Expediente</a></li>
<li><a href="http://localhost/spressosp/fale-conosco">Fale Conosco</a></li>
</div>
<div class="navColumn clearfix">
<li><a href="http://localhost/spressosp/sobre">Manifesto</a></li>
<li><a href="http://localhost/spressosp/divulgue">Divulgue</a></li>
</div>
</ul>
<p style="clear:left" class="footerInfo">
2011 - 2012 SPressoSP - Alguns direitos reservados
</p>
</footer>
<script src="http://localhost/spressosp/wp-content/themes/spressospmobile/js/vendor/zepto.min.js"></script>
<script src="http://localhost/spressosp/wp-content/themes/spressospmobile/js/helper.js"></script>
<script src="http://localhost/spressosp/wp-content/themes/spressospmobile/js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
Raw
Javascript for review (main.js)
$(document).ready(function(){
/* Navegação*/
$("#mainNav li a").click(function(){
var selectedSubNav = $(this).attr('href').trim();
var subNavID = null;
switch(selectedSubNav){
//#IMPROVEME
case '#home':
subNavID = 'home';
break;
case '#tematicas':
subNavID = 'subNavTematicas';
break;
case '#colunistas':
subNavID = 'subNavColunistas';
break;
}
$("#navigation").find('nav').each(function(){
var theID = $(this).attr('id');
if(theID == subNavID){
$(this).toggle();
}else{
if(theID !== 'mainNav'){
$(this).css('display','none');
}
//$(this).css('display','none');
}
})
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment