Merge lp:~fitojb/ubuntu-font-family-website/little-css-tweaks into lp:ubuntu-font-family-website

[Adolfo Jayme Barrientos]

Drop prefixed -webkit and -moz border-radius. The prefixes are no longer needed since Firefox 12, Safari 5 and Chrome 5. Tweak action buttons again to match ubuntu.com and drop the evil MSIE code I added earlier.

Drop prefixed -webkit and -moz border-radius. The prefixes are no longer needed since Firefox 12 (latest version is 20), Safari 5 (out for more than a year, latest version is 6), and Chrome 5 (latest version is 26, or something like that).

Tweak action buttons again to match ubuntu.com and drop the evil MSIE code I added earlier; it’s too clumsy. Just fallback to solid color.

Unmerged revisions

72. By Adolfo Jayme Barrientos on 2013-04-18

Drop prefixed -webkit and -moz border-radius. The prefixes are no longer needed since Firefox 12, Safari 5 and Chrome 5. Tweak action buttons again to match ubuntu.com and drop the evil MSIE code I added earlier.

71. By Adolfo Jayme Barrientos on 2013-04-18

Update ‘Web’ page: add styling, add Typekit links, drop GWF instructions as they may get out of date. Also, link to that page from home.

=== modified file 'assets/css/base.css'
--- assets/css/base.css	2012-03-11 19:08:31 +0000
+++ assets/css/base.css	2013-04-18 21:18:30 +0000
@@ -69,15 +69,11 @@
 		-moz-box-shadow: 0 2px 3px #c9c9c9;
 		-webkit-box-shadow: 0 2px 3px #c9c9c9;
 	box-shadow: 0 2px 3px #c9c9c9;
-		-moz-border-radius: 0 0 4px 4px;
-		-webkit-border-radius: 0 0 4px 4px;
 	border-radius: 0 0 4px 4px;
 }
 #header {
 	height: 64px;
 	background: url('../img/background-header.png') 0 0 repeat-x #dd4814;
-		-moz-border-radius: 0 0 4px 4px;
-		-webkit-border-radius: 0 0 4px 4px;
 	border-radius: 0 0 4px 4px;
 }
 #header a,
@@ -126,8 +122,6 @@
 	position: relative;
 	z-index: 0;
 	background-color: #f7f7f7;
-		-moz-border-radius: 0 0 4px 4px;
-		-webkit-border-radius: 0 0 4px 4px;
 	border-radius: 0 0 4px 4px;
 	font-size: 12px;
 	min-height: 100px;
@@ -173,10 +167,6 @@
 }
 #nav-secondary ul {
 	background-color: #efefef;
-		-webkit-border-bottom-right-radius: 4px;
-		-webkit-border-bottom-left-radius: 4px;
-		-moz-border-radius-bottomright: 4px;
-		-moz-border-radius-bottomleft: 4px;
 	border-bottom-right-radius: 4px;
 	border-bottom-left-radius: 4px;	
 }
@@ -242,8 +232,6 @@
 	padding: 20px;
 	width: 900px;
 	background-color: #f7f7f7;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
 	border-radius: 4px;
 }
 input[type='text'] {
@@ -255,28 +243,17 @@
 	margin-bottom: 20px;
 	padding: 8px 12px;
 	display: block;
-	background-color: #dd4814;
+	background-color: #c03f11;
 	color: #fff;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
 	border-radius: 4px;
+		background-image: -moz-linear-gradient(#dd4814, #c03f11);
+		background-image: -webkit-linear-gradient(#dd4814, #c03f11);
+		background-image: -o-linear-gradient(#dd4814, #c03f11);
+	font-size: 16px;
+	line-height: 1.3;
+}
+.link-action:hover {
 	background: #dd4814;
-	background: -moz-linear-gradient(top, #dd4814 0%, #c13f11 100%);
-	background: -webkit-linear-gradient(top, #dd4814 0%, #c13f11 100%);
-	background: -o-linear-gradient(top, #dd4814 0%, #c13f11 100%);
-	background: -ms-linear-gradient(top, #dd4814 0%, #c13f11 100%);
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4814', endColorstr='#c13f11', GradientType=0 );
-	background: linear-gradient(top, #dd4814 0%, #c13f11 100%);
-	font-size: 16px;
-	line-height: 1.3;
-}
-.link-action:hover {
-	background: -moz-linear-gradient(top, #c84312 0%, #af3a0f 100%);
-	background: -webkit-linear-gradient(top, #c84312 0%, #af3a0f 100%);
-	background: -o-linear-gradient(top, #c84312 0%, #af3a0f 100%);
-	background: -ms-linear-gradient(top, #c84312 0%, #af3a0f 100%);
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c84312', endColorstr='#af3a0f', GradientType=0 );
-	background: linear-gradient(top, #c84312 0%, #af3a0f 100%);
 }
 .disabled {
 	color: #aea79f;
@@ -327,8 +304,6 @@
 #tester-controls {
 	padding: 20px;
 	background-color: #f7f7f7;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
 	border-radius: 4px;
 }
 #tester-controls input[type='text'] {
@@ -342,8 +317,6 @@
 .charset {
 	padding: 20px 20px 0 20px;
 	background-color: #f7f7f7;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
 	border-radius: 4px;
 }
 .charset a {
@@ -396,8 +369,6 @@
 #gallery {
 	padding: 20px 20px 0 20px;
 	background-color: #f7f7f7;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
 	border-radius: 4px;
 }
 #gallery li {
@@ -422,8 +393,6 @@
 #resources {
 	padding: 20px;
 	background-color: #f7f7f7;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
 	border-radius: 4px;
 }
 #resources li {

=== modified file 'index.html'
--- index.html	2013-03-26 10:32:42 +0000
+++ index.html	2013-04-18 21:18:30 +0000
@@ -83,7 +83,7 @@
 	
 	<div class="grid-4 border-right" itemprop="significantLinks">
 		<span itemscope itemtype="http://schema.org/Offer"><a class="link-action" href="../download/ubuntu-font-family-0.80.zip" type="application/zip">Download for <span itemprop="price">free</span> &rsaquo;</a><span itemprop="itemOffered"><span itemscope itemtype="http://schema.org/Product"><meta itemprop="name" content="Ubuntu Font Family"/><meta itemprop="brand" content="Ubuntu"/><meta itemprop="manufacturer" content="Canonical Ltd"/><meta itemprop="model" content="0.80"/></span></span></span><br class="clear" />
-		<p>Want to use the Ubuntu Font Family on the web? Visit <a href="http://www.google.com/webfonts/specimen/Ubuntu">Ubuntu on Google Web Fonts &rsaquo;</a></p>
+		<p><a href="./web">Want to use the Ubuntu Font Family on the web? &rsaquo;</a></p>
 	</div>
 
 	<div class="grid-4">

=== modified file 'web/index.html'
--- web/index.html	2013-03-26 10:32:42 +0000
+++ web/index.html	2013-04-18 21:18:30 +0000
@@ -1,89 +1,83 @@
+<!DOCTYPE html>
 <html>
-  <head>
-    <title>Ubuntu Webfonts - Ubuntu Font Family</title>
-    <link rel="stylesheet" type="text/css" href="../assets/styles.css" />
-  </head>
-  <body>
-    <div id="wrapper">
-      <div id="header">
-        <a href="http://www.ubuntu.com"></a>
-      </div>
-      <div id="main">
-        <h1>Ubuntu Font Family <span>on the web</span></h1>
-        <div id="content">
-
-          <p>You can now use the <a href="../">Ubuntu Font
-          Family</a> <strong>as a webfont</strong> via the
-          CSS <code>@font-face</code> mechanism, this
-          has <a href="https://launchpad.net/bugs/655305">been
-          supported</a> since 21 December 2010 via the Google Font
-          API.  The Google Font API is a cross-browser system that
-          allows visitors to see the clarity and beauty of the Ubuntu
-          Font Family your websites, without having to worry about
-          what fonts they have installed locally.</p>
-
-	  <p>A compressed and optimised version of the requested font
-	  is automatically downloaded via the web, and encoded into
-	  the right format for each specific browser.  This means
-	  takes the worry out of needing to provide and update all the
-	  versions (TTF, EOT, WOFF, SVG) needed by today's browsers.</p>
-
-	  <p>To use the Ubuntu Font Family on the websites you
-	  maintain, select the "<strong>Ubuntu</strong>" in the Google
-	  Font Directory and copy the few lines of code shown.</p>
-
-	  <ul>
-	    <li>Visit the <a href="http://www.google.com/webfonts/">Google Font Directory</a></li>
-	  </ul>
-
-	  <p>Enabling the site can be as simple as adding two lines to
-	  the <code>&lt;head&gt;</code> section of the HTML pages or
-	  templates (or one line if you are already requesting
-	  '<code>Ubuntu</code>' as the font-family!).  First choose the
-	  font just as you would do normally:</p>
-
-	  <ul>
-	    <li><code>&lt;style&gt;body { font-family: Ubuntu, sans-serif; }&lt;/style&gt;</code></li>
-	  </ul>
-
-	  <p>Then use the Google Font API magic to enable the styles
-	  that you need to be fetched.  If you have a Latin-based
-	  website and only use regular and bold on a particular page,
-	  use the following addition in your pages and then reload the page to test:</p>
-
-	  <ul>
-	    <li><code>&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?<strong>family=Ubuntu:regular,bold</strong>&amp;subset=Latin"&gt;</code></li>
-	  </ul>
-
-	  <h2>Greater control</h2>
-
-	  <p>If you need more control and better background loading
-	  then you may want to use the
-	  <a href="http://developers.google.com/webfonts/docs/webfont_loader">Google
-	  WebFont Javascript loader</a>, if you're looking for
-	  an example,
-	  visit <a href="http://www.ubuntu.com/">www.ubuntu.com</a>
-	  and choose "View&nbsp;Source" in your browser!</p>
-
-	  <p>You can also combine multiple subsets, for example, combining Latin and Greek, or Latin and Cyrillic in the following example:</p>
-
-	  <ul>
-	    <li><code>&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular&amp;<strong>subset=Latin,Cyrillic</strong>"&gt;</code></li>
-	  </ul>
-
-	  <h2>Further reading</h2>
-
-	  <ul>
-	    <li><em><a href="http://googlewebfonts.blogspot.com/2010/12/introducing-ubuntu-font-family-to-web.html">Introducing the Ubuntu Font Family to the web</a></em>. Web Font Blog (Google).  Published 2010-12-20.</li>
-	  </ul>
-
-        </div>
-      </div>
-      <div id="footer">
-        &copy; 2010 Canonical Ltd. Ubuntu and Canonical are
-        registered trademarks of Canonical Ltd.
-      </div>
-    </div>
-  </body>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<title>Web | Ubuntu Font Family</title>
+
+<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700">
+<link rel="stylesheet" type="text/css" media="screen" href="../assets/css/reset.css" />
+<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/960.css" />
+<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/base.css" />
+
+</head>
+
+<body class="licence">
+
+<div id="header-and-content" class="container-12">
+
+<div id="header" class="clearfix">
+	<div class="grid-12">
+		<ul>
+			<li><a href="../">Home</a></li>
+			<li><a href="../about">About</a></li>
+			<li><a href="../gallery">Gallery</a></li>
+			<li><a href="../licence">Licence</a></li>
+			<li><a href="../resources">Resources</a></li>
+		</ul>
+		<a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-header.png" width="118" height="27" alt="Ubuntu logo" /></a>
+		<h2><a href="../">Font Family</a></h2>
+	</div>
+</div><!-- /#header -->
+
+<div id="content" class="clearfix">
+
+	<div class="grid-12">
+		<div class="content-heading">
+			<a class="link-action" href="../download/ubuntu-font-family-0.80.zip">Download for free &rsaquo;</a>
+			<h1>Ubuntu Font Family on the web</h1>
+		</div>
+	</div>
+	
+	<div class="grid-12">
+		<div class="content-intro">
+			<p>You can use the Ubuntu Font Family as a webfont through the <a href="http://www.google.com/fonts">Google Fonts</a> and <a href="https://typekit.com">Typekit</a> services. Google Fonts and Typekit are cross-browser systems that allows visitors to see the clarity and beauty of the Ubuntu Font Family in your websites, without having to worry about what fonts they have installed locally.</p>
+
+			<p>A compressed and optimised version of the requested font is automatically downloaded via the web, and encoded into the right format for each specific browser. This means takes the worry out of needing to provide and update all the versions (TTF, EOT, WOFF, SVG) needed by today’s browsers.</p>
+		</div>
+		
+		<div id="resources">			
+			<ul>
+				<li><strong>Google Fonts:</strong> &ensp; <a href="http://www.google.com/fonts/specimen/Ubuntu">Normal &rsaquo;</a> &ensp; <a href="http://www.google.com/fonts/specimen/Ubuntu+Condensed">Condensed &rsaquo;</a> &ensp; <a href="http://www.google.com/fonts/specimen/Ubuntu+Mono">Monospace &rsaquo;</a></li>
+				<li><strong>Typekit:</strong> &ensp; <a href="https://typekit.com/fonts/ubuntu">Normal &rsaquo;</a> &ensp; <a href="https://typekit.com/fonts/ubuntu-condensed">Condensed &rsaquo;</a> &ensp; <a href="https://typekit.com/fonts/ubuntu-mono">Monospace &rsaquo;</a></li>
+			</ul>
+		</div>
+		
+		<div class="grid-12">
+		<div class="content-intro">
+			<h2>Greater control</h2>
+			<p>If you need more control and better background loading then you may want to use the <a href="https://developers.google.com/fonts/docs/webfont_loader">Google WebFont Javascript loader</a>, if you’re looking for an example, visit <a href="http://www.ubuntu.com">www.ubuntu.com</a> and choose “View Source” in your browser!</p>
+			
+			<h2>See also</h2>
+			<p><em><a href="http://googlewebfonts.blogspot.com/2010/12/introducing-ubuntu-font-family-to-web.html">Introducing the Ubuntu Font Family to the web</a></em>. Web Font Blog (Google). Published <time datetime="2010-12-20">20 December 2010 (2010-12-20)</time>.</p>
+		</div>
+		</div>
+	</div>
+	
+</div><!-- /#content -->
+
+</div><!-- /#header-and-content -->
+
+<div id="footer" class="container-12">
+	<div class="grid-12">
+		<p>&copy; 2011 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
+		<a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-footer.png" width="118" height="27" alt="Ubuntu logo" /></a>
+	</div>
+</div><!-- /#footer -->
+
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
+<script type="text/javascript" src="../assets/js/base.js"></script>
+
+</body>
 </html>
-