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

Proposed by Adolfo Jayme on 2013-04-18
Status: Needs review
Proposed branch: lp:~fitojb/ubuntu-font-family-website/little-css-tweaks
Merge into: lp:ubuntu-font-family-website
Diff against target: 309 lines (+90/-127)
3 files modified
assets/css/base.css (+8/-39)
index.html (+1/-1)
web/index.html (+81/-87)
To merge this branch: bzr merge lp:~fitojb/ubuntu-font-family-website/little-css-tweaks
Reviewer Review Type Date Requested Status
Ubuntu Font Family Website contributors 2013-04-18 Pending
Review via email: mp+159728@code.launchpad.net

Commit message

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.

Description of the change

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.

To post a comment you must log in.

Unmerged revisions

72. By Adolfo Jayme 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 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.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'assets/css/base.css'
2--- assets/css/base.css 2012-03-11 19:08:31 +0000
3+++ assets/css/base.css 2013-04-18 21:18:30 +0000
4@@ -69,15 +69,11 @@
5 -moz-box-shadow: 0 2px 3px #c9c9c9;
6 -webkit-box-shadow: 0 2px 3px #c9c9c9;
7 box-shadow: 0 2px 3px #c9c9c9;
8- -moz-border-radius: 0 0 4px 4px;
9- -webkit-border-radius: 0 0 4px 4px;
10 border-radius: 0 0 4px 4px;
11 }
12 #header {
13 height: 64px;
14 background: url('../img/background-header.png') 0 0 repeat-x #dd4814;
15- -moz-border-radius: 0 0 4px 4px;
16- -webkit-border-radius: 0 0 4px 4px;
17 border-radius: 0 0 4px 4px;
18 }
19 #header a,
20@@ -126,8 +122,6 @@
21 position: relative;
22 z-index: 0;
23 background-color: #f7f7f7;
24- -moz-border-radius: 0 0 4px 4px;
25- -webkit-border-radius: 0 0 4px 4px;
26 border-radius: 0 0 4px 4px;
27 font-size: 12px;
28 min-height: 100px;
29@@ -173,10 +167,6 @@
30 }
31 #nav-secondary ul {
32 background-color: #efefef;
33- -webkit-border-bottom-right-radius: 4px;
34- -webkit-border-bottom-left-radius: 4px;
35- -moz-border-radius-bottomright: 4px;
36- -moz-border-radius-bottomleft: 4px;
37 border-bottom-right-radius: 4px;
38 border-bottom-left-radius: 4px;
39 }
40@@ -242,8 +232,6 @@
41 padding: 20px;
42 width: 900px;
43 background-color: #f7f7f7;
44- -moz-border-radius: 4px;
45- -webkit-border-radius: 4px;
46 border-radius: 4px;
47 }
48 input[type='text'] {
49@@ -255,28 +243,17 @@
50 margin-bottom: 20px;
51 padding: 8px 12px;
52 display: block;
53- background-color: #dd4814;
54+ background-color: #c03f11;
55 color: #fff;
56- -moz-border-radius: 4px;
57- -webkit-border-radius: 4px;
58 border-radius: 4px;
59+ background-image: -moz-linear-gradient(#dd4814, #c03f11);
60+ background-image: -webkit-linear-gradient(#dd4814, #c03f11);
61+ background-image: -o-linear-gradient(#dd4814, #c03f11);
62+ font-size: 16px;
63+ line-height: 1.3;
64+}
65+.link-action:hover {
66 background: #dd4814;
67- background: -moz-linear-gradient(top, #dd4814 0%, #c13f11 100%);
68- background: -webkit-linear-gradient(top, #dd4814 0%, #c13f11 100%);
69- background: -o-linear-gradient(top, #dd4814 0%, #c13f11 100%);
70- background: -ms-linear-gradient(top, #dd4814 0%, #c13f11 100%);
71- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4814', endColorstr='#c13f11', GradientType=0 );
72- background: linear-gradient(top, #dd4814 0%, #c13f11 100%);
73- font-size: 16px;
74- line-height: 1.3;
75-}
76-.link-action:hover {
77- background: -moz-linear-gradient(top, #c84312 0%, #af3a0f 100%);
78- background: -webkit-linear-gradient(top, #c84312 0%, #af3a0f 100%);
79- background: -o-linear-gradient(top, #c84312 0%, #af3a0f 100%);
80- background: -ms-linear-gradient(top, #c84312 0%, #af3a0f 100%);
81- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c84312', endColorstr='#af3a0f', GradientType=0 );
82- background: linear-gradient(top, #c84312 0%, #af3a0f 100%);
83 }
84 .disabled {
85 color: #aea79f;
86@@ -327,8 +304,6 @@
87 #tester-controls {
88 padding: 20px;
89 background-color: #f7f7f7;
90- -moz-border-radius: 4px;
91- -webkit-border-radius: 4px;
92 border-radius: 4px;
93 }
94 #tester-controls input[type='text'] {
95@@ -342,8 +317,6 @@
96 .charset {
97 padding: 20px 20px 0 20px;
98 background-color: #f7f7f7;
99- -moz-border-radius: 4px;
100- -webkit-border-radius: 4px;
101 border-radius: 4px;
102 }
103 .charset a {
104@@ -396,8 +369,6 @@
105 #gallery {
106 padding: 20px 20px 0 20px;
107 background-color: #f7f7f7;
108- -moz-border-radius: 4px;
109- -webkit-border-radius: 4px;
110 border-radius: 4px;
111 }
112 #gallery li {
113@@ -422,8 +393,6 @@
114 #resources {
115 padding: 20px;
116 background-color: #f7f7f7;
117- -moz-border-radius: 4px;
118- -webkit-border-radius: 4px;
119 border-radius: 4px;
120 }
121 #resources li {
122
123=== modified file 'index.html'
124--- index.html 2013-03-26 10:32:42 +0000
125+++ index.html 2013-04-18 21:18:30 +0000
126@@ -83,7 +83,7 @@
127
128 <div class="grid-4 border-right" itemprop="significantLinks">
129 <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" />
130- <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>
131+ <p><a href="./web">Want to use the Ubuntu Font Family on the web? &rsaquo;</a></p>
132 </div>
133
134 <div class="grid-4">
135
136=== modified file 'web/index.html'
137--- web/index.html 2013-03-26 10:32:42 +0000
138+++ web/index.html 2013-04-18 21:18:30 +0000
139@@ -1,89 +1,83 @@
140+<!DOCTYPE html>
141 <html>
142- <head>
143- <title>Ubuntu Webfonts - Ubuntu Font Family</title>
144- <link rel="stylesheet" type="text/css" href="../assets/styles.css" />
145- </head>
146- <body>
147- <div id="wrapper">
148- <div id="header">
149- <a href="http://www.ubuntu.com"></a>
150- </div>
151- <div id="main">
152- <h1>Ubuntu Font Family <span>on the web</span></h1>
153- <div id="content">
154-
155- <p>You can now use the <a href="../">Ubuntu Font
156- Family</a> <strong>as a webfont</strong> via the
157- CSS <code>@font-face</code> mechanism, this
158- has <a href="https://launchpad.net/bugs/655305">been
159- supported</a> since 21 December 2010 via the Google Font
160- API. The Google Font API is a cross-browser system that
161- allows visitors to see the clarity and beauty of the Ubuntu
162- Font Family your websites, without having to worry about
163- what fonts they have installed locally.</p>
164-
165- <p>A compressed and optimised version of the requested font
166- is automatically downloaded via the web, and encoded into
167- the right format for each specific browser. This means
168- takes the worry out of needing to provide and update all the
169- versions (TTF, EOT, WOFF, SVG) needed by today's browsers.</p>
170-
171- <p>To use the Ubuntu Font Family on the websites you
172- maintain, select the "<strong>Ubuntu</strong>" in the Google
173- Font Directory and copy the few lines of code shown.</p>
174-
175- <ul>
176- <li>Visit the <a href="http://www.google.com/webfonts/">Google Font Directory</a></li>
177- </ul>
178-
179- <p>Enabling the site can be as simple as adding two lines to
180- the <code>&lt;head&gt;</code> section of the HTML pages or
181- templates (or one line if you are already requesting
182- '<code>Ubuntu</code>' as the font-family!). First choose the
183- font just as you would do normally:</p>
184-
185- <ul>
186- <li><code>&lt;style&gt;body { font-family: Ubuntu, sans-serif; }&lt;/style&gt;</code></li>
187- </ul>
188-
189- <p>Then use the Google Font API magic to enable the styles
190- that you need to be fetched. If you have a Latin-based
191- website and only use regular and bold on a particular page,
192- use the following addition in your pages and then reload the page to test:</p>
193-
194- <ul>
195- <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>
196- </ul>
197-
198- <h2>Greater control</h2>
199-
200- <p>If you need more control and better background loading
201- then you may want to use the
202- <a href="http://developers.google.com/webfonts/docs/webfont_loader">Google
203- WebFont Javascript loader</a>, if you're looking for
204- an example,
205- visit <a href="http://www.ubuntu.com/">www.ubuntu.com</a>
206- and choose "View&nbsp;Source" in your browser!</p>
207-
208- <p>You can also combine multiple subsets, for example, combining Latin and Greek, or Latin and Cyrillic in the following example:</p>
209-
210- <ul>
211- <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>
212- </ul>
213-
214- <h2>Further reading</h2>
215-
216- <ul>
217- <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>
218- </ul>
219-
220- </div>
221- </div>
222- <div id="footer">
223- &copy; 2010 Canonical Ltd. Ubuntu and Canonical are
224- registered trademarks of Canonical Ltd.
225- </div>
226- </div>
227- </body>
228+<head>
229+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
230+
231+<title>Web | Ubuntu Font Family</title>
232+
233+<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700">
234+<link rel="stylesheet" type="text/css" media="screen" href="../assets/css/reset.css" />
235+<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/960.css" />
236+<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/base.css" />
237+
238+</head>
239+
240+<body class="licence">
241+
242+<div id="header-and-content" class="container-12">
243+
244+<div id="header" class="clearfix">
245+ <div class="grid-12">
246+ <ul>
247+ <li><a href="../">Home</a></li>
248+ <li><a href="../about">About</a></li>
249+ <li><a href="../gallery">Gallery</a></li>
250+ <li><a href="../licence">Licence</a></li>
251+ <li><a href="../resources">Resources</a></li>
252+ </ul>
253+ <a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-header.png" width="118" height="27" alt="Ubuntu logo" /></a>
254+ <h2><a href="../">Font Family</a></h2>
255+ </div>
256+</div><!-- /#header -->
257+
258+<div id="content" class="clearfix">
259+
260+ <div class="grid-12">
261+ <div class="content-heading">
262+ <a class="link-action" href="../download/ubuntu-font-family-0.80.zip">Download for free &rsaquo;</a>
263+ <h1>Ubuntu Font Family on the web</h1>
264+ </div>
265+ </div>
266+
267+ <div class="grid-12">
268+ <div class="content-intro">
269+ <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>
270+
271+ <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>
272+ </div>
273+
274+ <div id="resources">
275+ <ul>
276+ <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>
277+ <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>
278+ </ul>
279+ </div>
280+
281+ <div class="grid-12">
282+ <div class="content-intro">
283+ <h2>Greater control</h2>
284+ <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>
285+
286+ <h2>See also</h2>
287+ <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>
288+ </div>
289+ </div>
290+ </div>
291+
292+</div><!-- /#content -->
293+
294+</div><!-- /#header-and-content -->
295+
296+<div id="footer" class="container-12">
297+ <div class="grid-12">
298+ <p>&copy; 2011 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
299+ <a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-footer.png" width="118" height="27" alt="Ubuntu logo" /></a>
300+ </div>
301+</div><!-- /#footer -->
302+
303+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
304+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
305+<script type="text/javascript" src="../assets/js/base.js"></script>
306+
307+</body>
308 </html>
309-

Subscribers

People subscribed via source and target branches

to all changes: