Permalink
Browse files

Getting started based on my own gallery at zenorocha.github.com

  • Loading branch information...
0 parents commit 910246dc4381740c5d1691d5487afd5c0ee9eee4 Zeno Rocha committed Nov 15, 2011
Showing with 1,168 additions and 0 deletions.
  1. +187 −0 css/screen.css
  2. BIN img/github.png
  3. +136 −0 index.html
  4. +779 −0 scripts/css3-mediaqueries.js
  5. +66 −0 scripts/script.js
@@ -0,0 +1,187 @@
+/* CSS Reset (customised) */
+
+html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, small, strong {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ vertical-align: baseline;
+}
+body { display: block; }
+html { overflow-y: scroll; }
+a:hover, a:active { outline: none; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+::-moz-selection{ background: #3b7cbf; color: #fff; text-shadow: none; }
+::selection { background: #3b7cbf; color: #fff; text-shadow: none; }
+a:link { -webkit-tap-highlight-color: #3b7cbf; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+
+/* Primary Styles */
+
+body {
+ padding: 10px;
+ font: 1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
+ color: #515047;
+ background-color: #e5ebf2;
+}
+
+a, a:link, a:visited, a:active, .title, .category {
+ text-decoration: none;
+}
+
+article, section {
+ padding: 1%;
+ float: left;
+ height: auto;
+ z-index: 2;
+ display: block;
+ padding-bottom: 10%;
+ position: relative;
+}
+
+h1, h2, h3 {
+ font-size: 3em;
+}
+
+h1 a {
+ color: #6d7486;
+ line-height: 1.1;
+ letter-spacing: -0.05em;
+}
+
+h2 {
+ color: #afb6ca;
+ line-height: 0.9;
+ letter-spacing: -0.05em;
+ z-index: 2;
+ display: block;
+}
+
+h3 {
+ color: #3b7cbf;
+ line-height: 0.9;
+ letter-spacing: -0.05em;
+}
+
+p {
+ font-size: 1.25em;
+ line-height: 1.15;
+ margin: 0.75em 0;
+ color: #999fb2;
+ z-index: 2;
+}
+
+a {
+ font-size: 1em;
+ color: #4183C4;
+ z-index: 2;
+}
+
+img { max-width: 100%; }
+
+footer {
+ position: fixed;
+ bottom: -5px;
+ right: 20px;
+ z-index: 1;
+ display: block;
+}
+
+/* Media Queries */
+
+/* Column Control Media Queries */
+
+@media screen and (min-width:500px) {
+
+ body {
+ max-width: 1600px;
+ margin: 0 auto;
+ padding: 40px;
+ overflow: hidden;
+ }
+
+ article {
+ -webkit-transition: background-color .3s linear;
+ -moz-transition: -color .3s linear;
+ transition: background-color .3s linear;
+ }
+
+ article:hover {
+ background-color: #eef3f7;
+ }
+
+ article, section {
+ position: relative;
+ top: 0;
+ overflow: hidden;
+ }
+
+ div, h2 {
+ position: absolute;
+ }
+
+}
+
+/* Two Column */
+
+@media screen and (min-width:500px) {
+ article, section {
+ width: 45%;
+ margin: 0 3% 20px 0;
+ padding-bottom: 45%;
+ }
+}
+
+/* Three Column */
+
+@media screen and (min-width:800px) {
+ article, section {
+ width: 29%;
+ margin: 0 2% 20px 0;
+ padding-bottom: 29%;
+ }
+}
+
+/* Four Column */
+
+@media screen and (min-width:1200px) {
+ article, section {
+ width: 21%;
+ margin: 20px 2% 0 0;
+ padding-bottom: 21%;
+ }
+}
+
+/* Font Size Control Media Queries */
+
+@media screen and (min-width:500px) {
+ h1, h2, h3 { font-size: 2em; }
+ p { font-size: 1em; line-height: 1.2; }
+}
+@media screen and (min-width:600px) {
+ h1, h2, h3 { font-size: 2.5em; }
+}
+@media screen and (min-width:700px) {
+ h1, h2, h3 { font-size: 3em; }
+ p { font-size: 1.25em; }
+}
+@media screen and (min-width:800px) {
+ h1, h2, h3 { font-size: 2.5em; }
+ p { font-size: 1em; }
+}
+@media screen and (min-width:1000px) {
+ h1, h2, h3 { font-size: 3.25em; }
+ p { font-size: 1.25em; }
+}
+@media screen and (min-width:1200px) {
+ p { font-size: 1em; }
+}
+@media screen and (min-width:1400px) {
+ p { font-size: 1.25em; }
+}
+@media screen and (min-width:1600px) {
+ h1, h2, h3 { font-size: 4em; }
+}
+
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+
+ <meta charset="utf-8">
+ <meta name = "viewport" content="width=device-width, maximum-scale=1">
+
+ <title>zeno rocha . my open source gallery</title>
+ <link rel="stylesheet" href="css/screen.css">
+
+ <!--[if lt IE 9]>
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+</head>
+<body>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/jquery-boilerplate">jQuery Boilerplate</a></h1>
+ <p>A boilerplate for jump-starting jQuery plugins development</p>
+ <a href="http://jqueryboilerplate.com/">jqueryboilerplate.com</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/diveintohtml5">Dive into HTML5</a></h1>
+ <p>A portuguese translation of Dive Into HTML5 online book </p>
+ <a href="http://diveintohtml5.com.br/">diveintohtml5.com.br</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/peladoCaos">pelado Caos</a></h1>
+ <p>An open source theme to support Wordpress development</p>
+ <a href="http://caosdesign.github.com/peladoCaos/">caosdesign.github.com/peladoCaos</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/wormz">Wormz</a></h1>
+ <p>HTML5 Canvas Experiment</p>
+ <a href="http://html5-pro.com/wormz">html5-pro.com/wormz</a>
+ </div>
+ </article>
+
+ <section>
+ <h2>HTML5 Tutorials</h2>
+ </section>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/HTML5-Script">Async Scripts</a></h1>
+ <p>HTML5 demo testing async atributte on script tag</p>
+ <a href="http://labs.zenorocha.com/html5/script/">labs.zenorocha.com/html5/script</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/HTML5-Local-Storage">To-do List</a></h1>
+ <p>HTML5 tutorial about the Web Storage API</p>
+ <a href="http://labs.zenorocha.com/html5/local-storage">labs.zenorocha.com/html5/local-storage</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/HTML5-Canvas">3D Cube</a></h1>
+ <p>HTML5 tutorial about Canvas + Three.js</p>
+ <a href="http://labs.zenorocha.com/html5/canvas">labs.zenorocha.com/html5/canvas</a>
+ </div>
+ </article>
+
+ <section>
+ <h2>Lectures</h2>
+ </section>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/comousarhtml5semumamaquinadotempo">PHP'n Rio</a></h1>
+ <p>November/2011</p>
+ <p>A talk about can you use HTML5 without a time machine</p>
+ <a href="http://comousarhtml5semumamaquinadotempo.com/">comousarhtml5semumamaquina<br>dotempo.com</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/comousarhtml5semumamaquinadotempo">ETS</a></h1>
+ <p>3º Encontro de Tecnologia Simonsen - November/2011</p>
+ <p>A talk about can you use HTML5 without a time machine</p>
+ <a href="http://comousarhtml5semumamaquinadotempo.com/">comousarhtml5semumamaquina<br>dotempo.com</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="http://slidesha.re/moeody ">Front in Rio</a></h1>
+ <p>June/2011</p>
+ <p>A few tips about the HTML5 Boilerplate project</p>
+ <a href="http://slidesha.re/moeody">slidesha.re/moeody</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="https://github.com/zenorocha/HTML5-Slides">FSLDC</a></h1>
+ <p>3º Fórum de Software Livre de Duque de Caxias - June/2011</p>
+ <p>An HTML5 overview about the new exciting features</p>
+ <a href="http://labs.zenorocha.com/html5/slides">labs.zenorocha.com/html5/slides</a>
+ </div>
+ </article>
+
+ <article>
+ <div>
+ <h1><a href="http://slidesha.re/juKq0d">Locaweb</a></h1>
+ <p>13º Encontro Locaweb de Profissionais de Internet - May/2011</p>
+ <p>A lightning talk about how to build a robust HTML5 application</p>
+ <a href="http://slidesha.re/juKq0d">slidesha.re/juKq0d</a>
+ </div>
+ </article>
+
+ <footer>
+ <img src="img/github.png" alt="Github's Logo" />
+ </footer>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+ <script src="scripts/css3-mediaqueries.js"></script>
+ <script src="scripts/script.js"></script>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 910246d

Please sign in to comment.