Add screenshots and additional info to the frontpage.

css/inuit.css

@@ -158,7 +158,6 @@ Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-
 #logo,
 #logo img{
 	display:block;
-	margin:0 auto;
 	width:520px; /* Width of your logo in pixels (ideally a round grid-number) */
 	height:512px; /* Height of your logo in pixels */
 }
@@ -274,7 +273,11 @@ a:focus{
 /*--- LISTS ---*/
 ul,
 ol{
-	margin:0 0 1.5em 60px;
+	margin:0 0 0.75em 60px;
+}
+ul.unindented,
+ol.unindented{
+	margin-left:20px;
 }
 ul ul,
 ol ol,
@@ -718,6 +721,7 @@ body{
 }
 #logo,
 #logo img{
+	margin:0 auto;
 	width:128px; /* Width of your logo in pixels (ideally a round grid-number) */
 	height:128px; /* Height of your logo in pixels */
 }

css/style.css

@@ -89,13 +89,15 @@ nav:before {
 	top:34px;
 	background:white;
 	background:rgba(255,255,255,0.5);
-	background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255, 255, 255, 0.5)), to(rgba(255,255,255,0))) fixed;
-	background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
+	background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255, 255, 255, 0.5)), to(rgba(255,255,255,0)));
+	background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
+	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
+	box-shadow:0 1px 3px rgba(0,0,0,0.25);
 }
 nav:after {
 	content:"";
@@ -125,13 +127,15 @@ footer:after {
 	margin:-53px auto 0;
 	background:white;
 	background:rgba(255,255,255,0.5);
-	background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255, 255, 255, 0.5)), to(rgba(255,255,255,0))) fixed;
-	background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
-	background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))) transparent;
+	background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255, 255, 255, 0.5)), to(rgba(255,255,255,0)));
+	background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
+	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
+	box-shadow:0 1px 3px rgba(0,0,0,0.25);
 }
 
 /*------------------------------------*\
@@ -169,6 +173,8 @@ footer:after {
 	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.5);
 }
 #buttons a:focus {
+	background-color:#111;
+	color:#fff;
 	-moz-box-shadow: 0 0 10px rgba(255,255,255,0.5);
 	-webkit-box-shadow: 0 0 10px rgba(255,255,255,0.5);
 	box-shadow: 0 0 10px rgba(255,255,255,0.5);
@@ -259,7 +265,24 @@ a{
 a:hover {
 	color:white;
 }
-
+hr{
+	display:block;
+	margin:20px auto;
+	height:1px;
+	width:200px;
+	border:0;
+	background:white;
+	background:rgba(255,255,255,0.5);
+	background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255, 255, 255, 0.5)), to(rgba(255,255,255,0)));
+	background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
+	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
+	box-shadow:0 1px 3px rgba(0,0,0,0.25);
+}
 ::-moz-selection {
 	background:white;
 	color:black;
@@ -276,7 +299,6 @@ a:hover {
 \*------------------------------------*/
 #logo{
 	position:relative;
-	margin-bottom:0.5em;
 	font-size:4em;
 }
 #shimmer {
@@ -298,6 +320,50 @@ a:hover {
 #shimmer:focus{
 	top:0px;
 }
+#main a{
+	color: #E0DB34;
+}
+#screenshots ul{
+	overflow:visible;
+}
+#screenshots li{
+	overflow:visible;
+	margin-bottom:20px;
+}
+#screenshots a:active,
+#screenshots a:focus{
+	top:0;
+}
+#screenshots img{
+	border:solid 6px #87a;
+	border:solid 6px rgba(255,255,255,0.2);
+	border-radius:6px;
+	height:98px;
+	width:208px;
+	-moz-background-clip:padding;
+	-webkit-background-clip:padding-box;
+	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
+	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
+	box-shadow:0 1px 3px rgba(0,0,0,0.5);
+	-moz-transition:all 0.1s ease-out;
+	-o-transition:all 0.1s ease-out;  
+	-webkit-transition:all 0.1s ease-out;  
+	-ms-transition:all 0.1s ease-out;  
+	transition:all 0.1s ease-out;  
+}
+#screenshots a:hover img{
+	border:solid 6px #87a;
+	border:solid 6px rgba(255,255,255,0.5);
+	-moz-transform: scale(1.05);  
+	-o-transform: scale(1.05);  
+	-webkit-transform: scale(1.05);  
+	-ms-transform: scale(1.05);  
+	transform: scale(1.05);  
+}
+#screenshots a:active img,
+#screenshots a:focus img{
+	top:1px;
+}
 
 /*------------------------------------*\
 	NARROW
@@ -307,10 +373,6 @@ CSS for tablets and narrower devices
 */
 
 @media (min-width: 721px) and (max-width: 960px){
-	#logo img{
-		width:256px;
-		height:256px;
-	}
 	#logo{
 		margin-top:70px;
 		font-size:2em;
@@ -322,6 +384,10 @@ CSS for tablets and narrower devices
 		border-radius:35px/22px;
 		background-image:-webkit-gradient(radial, center center, 25, center center, 85, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1))), url(../img/static-noise.gif);
 	}
+	#screenshots img{
+		height:110px;
+		width:148px;
+	}
 	#info{
 		margin-top:30px;
 	}
@@ -372,16 +438,15 @@ Linearise it!
 		border-radius:17px/11px;
 		background-image:-webkit-gradient(radial, center center, 15, center center, 50, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1))), url(../img/static-noise.gif);
 	}
-	h1{
-		text-align:center;
-	}
 	#info{
 		margin-top:0;
 	}
 	#ribbon{
 		display:none;
 	}
-	#buttons {
+	h1,
+	#buttons,
+	#screenshots{
 		text-align:center;
 	}
 	nav {

docs/css/docs.css

@@ -1,7 +1,9 @@
 /** Wiki **/
-#logo img{
+#logo{
 	width:220px;
 	height:220px;
+	background:url(../../img/logo-128.png) center right no-repeat;
+	margin-top:14px;
 }
 #info{
 	margin-top:0;
@@ -134,14 +136,14 @@ CSS for tablets and narrower devices
 */
 
 @media (min-width: 721px) and (max-width: 960px){
-	#logo img{
+	#logo{
 		width:160px;
 		height:160px;
+		background:url(../../img/logo-128.png) bottom right no-repeat;
+		margin-top:0px;
 	}
-	#logo{
-		margin-top:40px;
-		font-size:2em;
-		position:relative;
+	#header h1{
+		margin-top:50px;
 	}
 }
 /*--- END NARROW ---*/
@@ -159,16 +161,14 @@ Linearise it!
 		font-size:0.75em;
 	}
 	#logo{
-		width:128px;
-		height:128px;
 		float:right;
-	}
-	#logo img{
 		width:128px;
 		height:128px;
+		background:url(../../img/logo-128.png) center center no-repeat;
+		margin-top:0px;
 	}
 	#info h1{
-		margin-top:50px;
+		margin-top:40px;
 		font-size:1em;
 	}
 	#info h2{

index.html

@@ -56,6 +56,44 @@ <h1 id="big-title">TVShows 2</h1>
     </div>
   </header>
 
+  <hr />
+
+  <div id="main" class="grids">
+    <div id="howto" class="grid grid-4">
+      <h2 id="howto-title">How To Use It?</h2>
+      <ul class="unindented">
+        <li id="howto-list1">Download a torrent application such as <a href="http://www.transmissionbt.com/">Transmission</a>.</li>
+        <li id="howto-list2">Open TVShows.</li>
+        <li id="howto-list3">Subscribe to your shows.</li>
+        <li id="howto-list4">Close and forget TVShows.</li>
+      </ul>
+      <p id="howto-then">Next time a <a href="http://showrss.karmorra.info/">new episode is aired</a>, your torrent application will download the video file automatically.</p>
+    </div>
+    <div id="screenshots" class="grid grid-8">
+      <h2 id="screenshots-title">Screenshots</h2>
+      <ul class="grids">
+        <li class="grid grid-4">
+          <a id="subs-image" href="img/tvshows2-subscriptions.png" title="Click to enlarge"><img src="img/tvshows2-subscriptions-thumb.png" alt="TVShows 2 Subscriptions Tab" width="220" height="110"></a>
+        </li>
+        <li class="grid grid-4">
+          <a id="pref-image" href="img/tvshows2-preferences.png" title="Click to enlarge"><img src="img/tvshows2-preferences-thumb.png" alt="TVShows 2 Preferences Tab" width="220" height="110"></a>
+        </li>
+        <li class="grid grid-4">
+          <a id="addshow-image" href="img/tvshows2-addshow.png" title="Click to enlarge"><img src="img/tvshows2-addshow-thumb.png" alt="TVShows 2 Add Show Dropdown" width="220" height="110"></a>
+        </li>
+        <li class="grid grid-4">
+          <a id="about-image" href="img/tvshows2-about.png" title="Click to enlarge"><img src="img/tvshows2-about-thumb.png" alt="TVShows 2 About Tab" width="220" height="110"></a>
+        </li>
+      </ul>
+    </div>
+    <div id="about" class="grid grid-4">
+      <h2 id="about-title">About</h2>
+      <p id="about-text1">TVShows is an <a href="https://github.com/victorpimentel/TVShows">open source</a> project built for <strong>Mac</strong>, designed to make it easier for you to find new episodes.</p>
+      <p id="about-text2">Its developers hold no commercial interest in the application whatsoever.</p>
+      <p id="about-text3">If you want to keep TVShows alive, please consider to <a href="docs/#Contribute">contribute to the project</a>.</p>
+    </div>
+  </div>
+
   <footer>
     <ul class="nav centred">
       <li><a id="credits-link" title="Personal website" href="http://victorpimentel.com">Víctor Pimentel</a></li>
@@ -74,13 +112,16 @@ <h1 id="big-title">TVShows 2</h1>
       var t = function(id, text, title) {
         var el = document.getElementById(id);
         if (el) {
-          el.innerHTML = text;
+          if (text) el.innerHTML = text;
           if (title) el.setAttribute('title', title);
         }
       }
 
       // Translate to Spanish
-      if (lang.toLowerCase().indexOf('es') != -1) {
+      if (lang.toLowerCase().indexOf('es') != -1 ||
+          lang.toLowerCase().indexOf('ca') == 0 ||
+          lang.toLowerCase().indexOf('gl') == 0 ||
+          lang.toLowerCase().indexOf('eu') == 0) {
         document.getElementsByTagName('html')[0].setAttribute('lang', 'es');
         t('notes-link', 'Cambios', 'Lee los últimos cambios en TVShows');
         t('twitter-link', 'Twitter', 'Síguenos en Twitter');
@@ -92,6 +133,21 @@ <h1 id="big-title">TVShows 2</h1>
         t('desc-2', 'Cuando se emitan nuevos episodios, tu <strong>aplicación de torrents</strong> los descargará.');
         t('download-button', 'Descargar', 'Descarga la versión más reciente de TVShows');
         t('donate-button', 'Donar', '¡Invítanos a una cerveza!');
+        t('howto-title', '¿Cómo se usa?');
+        t('howto-list1', 'Descarga una aplicación de torrents, ej. <a href="http://www.transmissionbt.com/">Transmission</a>.');
+        t('howto-list2', 'Abre TVShows.');
+        t('howto-list3', 'Suscríbete a tus series.');
+        t('howto-list4', 'Cierra y olvídate de TVShows.');
+        t('howto-then', 'Cuando <a href="http://showrss.karmorra.info/">emitan episodios nuevos</a>, tu aplicación de torrents los descargará automáticamente.');
+        t('screenshots-title', 'Capturas de pantalla');
+        t('subs-image', null, 'Haz click para ampliar');
+        t('pref-image', null, 'Haz click para ampliar');
+        t('addshow-image', null, 'Haz click para ampliar');
+        t('about-image', null, 'Haz click para ampliar');
+        t('about-title', 'Acerca de TVShows');
+        t('about-text1', 'TVShows es un proyecto de <a href="https://github.com/victorpimentel/TVShows">código abierto</a> para <strong>Mac</strong>, que intenta facilitarte la búsqueda de nuevos episodios.');
+        t('about-text2', 'Los desarrolladores de la aplicación no guardan ningún interés comercial.');
+        t('about-text3', 'Si quieres mantener TVShows vivo, por favor considera <a href="docs/#Contribute">contribuir al proyecto</a>.');
         t('credits-link', 'Víctor Pimentel', 'Página personal del autor');
         t('license-link', 'GPL3 2011', 'Licencia de TVShows');
       }
@@ -105,6 +161,15 @@ <h1 id="big-title">TVShows 2</h1>
       });
     }
 
+    // Load Fancy Zoom for non-mobile devices
+    var width = window.outerWidth ||
+                      document.documentElement.clientWidth;
+    if (width > 720) {
+      head.js('js/libs/FancyZoom.js', function() {
+        head.ready(setupZoom);
+      });
+    }
+
     // Google Analytics (if in production)
     if (location.host == 'victorpimentel.com') {
       head.js('http://www.google-analytics.com/ga.js', function() {