Merge lp:~raoul-snyman/ubuntu-packaging-guide/new-colours into lp:ubuntu-packaging-guide

Proposed by Raoul Snyman
Status: Merged
Merged at revision: 47
Proposed branch: lp:~raoul-snyman/ubuntu-packaging-guide/new-colours
Merge into: lp:ubuntu-packaging-guide
Diff against target: 523 lines (+477/-2)
5 files modified
conf.py (+2/-2)
themes/ubuntu/layout.html (+14/-0)
themes/ubuntu/static/default.css_t (+304/-0)
themes/ubuntu/static/sidebar.js (+148/-0)
themes/ubuntu/theme.conf (+9/-0)
To merge this branch: bzr merge lp:~raoul-snyman/ubuntu-packaging-guide/new-colours
Reviewer Review Type Date Requested Status
Ronnie (community) Needs Fixing
Daniel Holbach Needs Fixing
Review via email: mp+56010@code.launchpad.net

Description of the change

Hi,

tumbleweed poked me the other day and asked me if I didn't want to have a go at making an Ubuntu theme for the Ubuntu Packaging Guide.

So this is a rough go at said Ubuntu theme, and it's probably not quite ideal, but have a play with it anyway.

To post a comment you must log in.
Revision history for this message
Daniel Holbach (dholbach) wrote :

Wow, thanks for your work on this!

Can you please add some information to your branch including whose javascript code this is and where you got it from? We need to properly identify this if we want to distribute the guide in any form.

review: Needs Fixing
Revision history for this message
Daniel Holbach (dholbach) wrote :

Can somebody web-technology savvy can comment on this as well?

Revision history for this message
Stefano Rivera (stefanor) wrote :

sidebar.js looks like it came from Sphinx's "default" theme, and is therefore under the same licencing as any sauce Sphinx adds to ones documentation.

I don't see any copyright / licencing declarations in ubuntu-packaging-guide beyond the values in conf.py. Maybe this branch should add a file with the copyright / licencing statements for the image files?

Maybe add "collapsiblesidebar = true" (or false) to ubuntu/theme.conf, as this adds support for it.

ubuntu/layout.html and ubuntu/default.css_t probably have incomplete copyright statements.

Revision history for this message
Ronnie (ronnie.vd.c) wrote :

I created a mockup of how sphinx clould look like, using the web guidelines:
http://ubuntuone.com/p/kvg/

GIMP xcf file:
http://ubuntuone.com/p/kvi/

I dont know whats possible within sphinx theming, but it would be really cool if it looks like all the other ubuntu websites

Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

@Daniel, @Stefano, yes, this is a modified copy of Sphinx's default theme, as I just threw it together one evening - I'm just using it as a starting point. I'm quite aware that we'd need to make sure licensing details are correct, so I'll have a look at that when I get a chance to work on this again. As for sidebar.js in particular, I removed the setting for a collapsible sidebar (I didn't think it necessary), so I can most likely remove the JS as well.

@Ronnie, thanks for that mockup, it looks great! I'll see if I can make the Sphinx theme look like that. It should mostly be possible - I've done something similar before.

Revision history for this message
Daniel Holbach (dholbach) wrote :

Raoul, Ronnie: thanks so much for your work on this. Is there anything we can reuse from https://launchpad.net/ubuntu-website/light-django-theme to make it easier?

Revision history for this message
Ronnie (ronnie.vd.c) wrote :

I think the whole CSS, and a part of the html can be reused. Raoul do you want to try that?

Revision history for this message
Ronnie (ronnie.vd.c) :
review: Needs Fixing
Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

Ronnie, I'll try to have a look in the next few weeks. Unfortunately my free time is rather scarce at the moment.

Revision history for this message
Jurmir Canal Neto (jcneto) wrote :

Hi everybody, I think I might be useful here.
Someone can tell me how this is going and how I can help?

Thanks!!

Revision history for this message
Daniel Holbach (dholbach) wrote :

Basically:
  - sudo apt-get install python-sphinx
  - bzr branch lp:ubuntu-packaging-guide
  - cd ubuntu-packaging-guide
  - <maybe "bzr merge lp:~raoul-snyman/ubuntu-packaging-guide/new-colours" to make use of Raoul's changes>
  - <make changes, figure out how to make use of https://launchpad.net/ubuntu-website/light-django-theme>
  - bzr commit
  - bzr push lp:~<username>/ubuntu-packaging-guide/rebranding
  - bzr lp-open
  - <click on "Propose for merging">

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'conf.py'
2--- conf.py 2010-11-19 12:07:36 +0000
3+++ conf.py 2011-04-01 21:44:05 +0000
4@@ -101,7 +101,7 @@
5
6 # The theme to use for HTML and HTML Help pages. See the documentation for
7 # a list of builtin themes.
8-html_theme = 'default'
9+html_theme = 'ubuntu'
10
11 # Theme options are theme-specific and customize the look and feel of a theme
12 # further. For a list of options available for each theme, see the
13@@ -109,7 +109,7 @@
14 #html_theme_options = {}
15
16 # Add any paths that contain custom themes here, relative to this directory.
17-#html_theme_path = []
18+html_theme_path = ['themes']
19
20 # The name for this set of Sphinx documents. If None, it defaults to
21 # "<project> v<release> documentation".
22
23=== added directory 'themes'
24=== added directory 'themes/ubuntu'
25=== added file 'themes/ubuntu/layout.html'
26--- themes/ubuntu/layout.html 1970-01-01 00:00:00 +0000
27+++ themes/ubuntu/layout.html 2011-04-01 21:44:05 +0000
28@@ -0,0 +1,14 @@
29+{#
30+ ubuntu/layout.html
31+ ~~~~~~~~~~~~~~~~~~
32+
33+ Sphinx layout template for the Ubuntu theme.
34+
35+ :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
36+ :license: BSD, see LICENSE for details.
37+#}
38+{% extends "basic/layout.html" %}
39+
40+{% if theme_collapsiblesidebar|tobool %}
41+{% set script_files = script_files + ['_static/sidebar.js'] %}
42+{% endif %}
43
44=== added directory 'themes/ubuntu/static'
45=== added file 'themes/ubuntu/static/default.css_t'
46--- themes/ubuntu/static/default.css_t 1970-01-01 00:00:00 +0000
47+++ themes/ubuntu/static/default.css_t 2011-04-01 21:44:05 +0000
48@@ -0,0 +1,304 @@
49+/*
50+ * default.css_t
51+ * ~~~~~~~~~~~~~
52+ *
53+ * Sphinx stylesheet -- Ubuntu theme, adapted from the default Sphinx theme.
54+ *
55+ * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
56+ * :license: BSD, see LICENSE for details.
57+ *
58+ */
59+
60+@import url("basic.css");
61+
62+/* -- page layout ----------------------------------------------------------- */
63+
64+body {
65+ font-family: 'Ubuntu', sans-serif;
66+ font-size: 100%;
67+ background-color: #ee5925;
68+ color: #000;
69+ margin: 0;
70+ padding: 0;
71+}
72+
73+div.document {
74+ background-color: #f7f6f5;
75+}
76+
77+div.documentwrapper {
78+ float: left;
79+ width: 100%;
80+}
81+
82+div.bodywrapper {
83+ margin: 0 0 0 230px;
84+}
85+
86+div.body {
87+ background: #fff;
88+ color: #000;
89+ padding: 0 20px 30px 20px;
90+}
91+
92+{%- if theme_rightsidebar|tobool %}
93+div.bodywrapper {
94+ margin: 0 230px 0 0;
95+}
96+{%- endif %}
97+
98+div.footer {
99+ color: #fff;
100+ width: 100%;
101+ padding: 9px 0 9px 0;
102+ text-align: center;
103+ font-size: 75%;
104+}
105+
106+div.footer a {
107+ color: #fff;
108+ text-decoration: underline;
109+}
110+
111+div.related {
112+ background: #dd4814 url(header.png) bottom left repeat-x;
113+ line-height: 45px;
114+ color: #fff;
115+}
116+
117+div.related a {
118+ color: #fff;
119+ text-shadow: 0 1px #000;
120+}
121+
122+div.sphinxsidebar {
123+ {%- if theme_stickysidebar|tobool %}
124+ top: 30px;
125+ bottom: 0;
126+ margin: 0;
127+ position: fixed;
128+ overflow: auto;
129+ height: auto;
130+ {%- endif %}
131+ {%- if theme_rightsidebar|tobool %}
132+ float: right;
133+ {%- if theme_stickysidebar|tobool %}
134+ right: 0;
135+ {%- endif %}
136+ {%- endif %}
137+}
138+
139+{%- if theme_stickysidebar|tobool %}
140+/* this is nice, but it it leads to hidden headings when jumping
141+ to an anchor */
142+/*
143+div.related {
144+ position: fixed;
145+}
146+
147+div.documentwrapper {
148+ margin-top: 30px;
149+}
150+*/
151+{%- endif %}
152+
153+div.sphinxsidebar h3 {
154+ font-family: 'Ubuntu', sans-serif;
155+ color: #000;
156+ font-size: 1.4em;
157+ font-weight: normal;
158+ margin: 0;
159+ padding: 0;
160+}
161+
162+div.sphinxsidebar h3 a {
163+ color: #000;
164+}
165+
166+div.sphinxsidebar h4 {
167+ font-family: 'Ubuntu', sans-serif;
168+ color: #000;
169+ font-size: 1.3em;
170+ font-weight: normal;
171+ margin: 5px 0 0 0;
172+ padding: 0;
173+}
174+
175+div.sphinxsidebar p {
176+ color: #000;
177+}
178+
179+div.sphinxsidebar p.topless {
180+ margin: 5px 10px 10px 10px;
181+}
182+
183+div.sphinxsidebar ul {
184+ margin: 10px;
185+ padding: 0;
186+ color: #000;
187+}
188+
189+div.sphinxsidebar a {
190+ color: #ee5925;
191+}
192+
193+div.sphinxsidebar input {
194+ background-color: #fff;
195+ border: 1px solid #ee5925;
196+ color: #000;
197+ font-family: sans-serif;
198+ font-size: 1em;
199+}
200+
201+/* -- hyperlink styles ------------------------------------------------------ */
202+
203+a {
204+ color: #dd4814;
205+ text-decoration: none;
206+}
207+
208+a:visited {
209+ color: #ee5925;
210+ text-decoration: none;
211+}
212+
213+a:hover {
214+ text-decoration: underline;
215+}
216+
217+{% if theme_externalrefs|tobool %}
218+a.external {
219+ text-decoration: none;
220+ border-bottom: 1px dashed #dd4814;
221+}
222+
223+a.external:hover {
224+ text-decoration: none;
225+ border-bottom: none;
226+}
227+
228+a.external:visited {
229+ text-decoration: none;
230+ border-bottom: 1px dashed #ee5925;
231+}
232+{% endif %}
233+
234+/* -- body styles ----------------------------------------------------------- */
235+
236+div.body h1,
237+div.body h2,
238+div.body h3,
239+div.body h4,
240+div.body h5,
241+div.body h6 {
242+ font-family: 'Ubuntu', sans-serif;
243+ background-color: #dd4814;
244+ font-weight: normal;
245+ color: #fff;
246+ border-top: 1px solid #fff;
247+ margin: 20px -20px 10px -20px;
248+ padding: 3px 0 3px 10px;
249+}
250+
251+div.body h1 { margin-top: 0; font-size: 200%; }
252+div.body h2 { font-size: 160%; }
253+div.body h3 { font-size: 140%; }
254+div.body h4 { font-size: 120%; }
255+div.body h5 { font-size: 110%; }
256+div.body h6 { font-size: 100%; }
257+
258+a.headerlink {
259+ color: #f7f6f5;
260+ font-size: 0.8em;
261+ padding: 0 4px 0 4px;
262+ text-decoration: none;
263+}
264+
265+a.headerlink:hover {
266+ background-color: #f7f6f5;
267+ color: #dd4814;
268+}
269+
270+div.body p, div.body dd, div.body li {
271+ text-align: justify;
272+ line-height: 130%;
273+}
274+
275+div.admonition p.admonition-title + p {
276+ display: inline;
277+}
278+
279+div.admonition p {
280+ margin-bottom: 5px;
281+}
282+
283+div.admonition pre {
284+ margin-bottom: 5px;
285+}
286+
287+div.admonition ul, div.admonition ol {
288+ margin-bottom: 5px;
289+}
290+
291+div.note {
292+ background-color: #eee;
293+ border: 1px solid #ccc;
294+}
295+
296+div.seealso {
297+ background-color: #ffc;
298+ border: 1px solid #ff6;
299+}
300+
301+div.topic {
302+ background-color: #eee;
303+}
304+
305+div.warning {
306+ background-color: #ffe4e4;
307+ border: 1px solid #f66;
308+}
309+
310+p.admonition-title {
311+ display: inline;
312+}
313+
314+p.admonition-title:after {
315+ content: ":";
316+}
317+
318+pre {
319+ padding: 5px;
320+ background-color: #f0f0f0;
321+ color: #333333;
322+ line-height: 120%;
323+ border: 1px solid #ccc;
324+}
325+
326+tt {
327+ background-color: #ecf0f3;
328+ padding: 0 1px 0 1px;
329+ font-size: 0.95em;
330+}
331+
332+th {
333+ background-color: #ede;
334+}
335+
336+.warning tt {
337+ background: #efc2c2;
338+}
339+
340+.note tt {
341+ background: #d6d6d6;
342+}
343+
344+.viewcode-back {
345+ font-family: 'Ubuntu', sans-serif;
346+}
347+
348+div.viewcode-block:target {
349+ background-color: #f4debf;
350+ border-top: 1px solid #ac9;
351+ border-bottom: 1px solid #ac9;
352+}
353
354=== added file 'themes/ubuntu/static/favicon.ico'
355Binary files themes/ubuntu/static/favicon.ico 1970-01-01 00:00:00 +0000 and themes/ubuntu/static/favicon.ico 2011-04-01 21:44:05 +0000 differ
356=== added file 'themes/ubuntu/static/header.png'
357Binary files themes/ubuntu/static/header.png 1970-01-01 00:00:00 +0000 and themes/ubuntu/static/header.png 2011-04-01 21:44:05 +0000 differ
358=== added file 'themes/ubuntu/static/sidebar.js'
359--- themes/ubuntu/static/sidebar.js 1970-01-01 00:00:00 +0000
360+++ themes/ubuntu/static/sidebar.js 2011-04-01 21:44:05 +0000
361@@ -0,0 +1,148 @@
362+/*
363+ * sidebar.js
364+ * ~~~~~~~~~~
365+ *
366+ * This script makes the Sphinx sidebar collapsible.
367+ *
368+ * .sphinxsidebar contains .sphinxsidebarwrapper. This script adds
369+ * in .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
370+ * used to collapse and expand the sidebar.
371+ *
372+ * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
373+ * and the width of the sidebar and the margin-left of the document
374+ * are decreased. When the sidebar is expanded the opposite happens.
375+ * This script saves a per-browser/per-session cookie used to
376+ * remember the position of the sidebar among the pages.
377+ * Once the browser is closed the cookie is deleted and the position
378+ * reset to the default (expanded).
379+ *
380+ * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
381+ * :license: BSD, see LICENSE for details.
382+ *
383+ */
384+
385+$(function() {
386+ // global elements used by the functions.
387+ // the 'sidebarbutton' element is defined as global after its
388+ // creation, in the add_sidebar_button function
389+ var bodywrapper = $('.bodywrapper');
390+ var sidebar = $('.sphinxsidebar');
391+ var sidebarwrapper = $('.sphinxsidebarwrapper');
392+
393+ // original margin-left of the bodywrapper and width of the sidebar
394+ // with the sidebar expanded
395+ var bw_margin_expanded = bodywrapper.css('margin-left');
396+ var ssb_width_expanded = sidebar.width();
397+
398+ // margin-left of the bodywrapper and width of the sidebar
399+ // with the sidebar collapsed
400+ var bw_margin_collapsed = '.8em';
401+ var ssb_width_collapsed = '.8em';
402+
403+ // colors used by the current theme
404+ var dark_color = $('.related').css('background-color');
405+ var light_color = $('.document').css('background-color');
406+
407+ function sidebar_is_collapsed() {
408+ return sidebarwrapper.is(':not(:visible)');
409+ }
410+
411+ function toggle_sidebar() {
412+ if (sidebar_is_collapsed())
413+ expand_sidebar();
414+ else
415+ collapse_sidebar();
416+ }
417+
418+ function collapse_sidebar() {
419+ sidebarwrapper.hide();
420+ sidebar.css('width', ssb_width_collapsed);
421+ bodywrapper.css('margin-left', bw_margin_collapsed);
422+ sidebarbutton.css({
423+ 'margin-left': '0',
424+ 'height': bodywrapper.height()
425+ });
426+ sidebarbutton.find('span').text('»');
427+ sidebarbutton.attr('title', _('Expand sidebar'));
428+ document.cookie = 'sidebar=collapsed';
429+ }
430+
431+ function expand_sidebar() {
432+ bodywrapper.css('margin-left', bw_margin_expanded);
433+ sidebar.css('width', ssb_width_expanded);
434+ sidebarwrapper.show();
435+ sidebarbutton.css({
436+ 'margin-left': ssb_width_expanded-12,
437+ 'height': bodywrapper.height()
438+ });
439+ sidebarbutton.find('span').text('«');
440+ sidebarbutton.attr('title', _('Collapse sidebar'));
441+ document.cookie = 'sidebar=expanded';
442+ }
443+
444+ function add_sidebar_button() {
445+ sidebarwrapper.css({
446+ 'float': 'left',
447+ 'margin-right': '0',
448+ 'width': ssb_width_expanded - 28
449+ });
450+ // create the button
451+ sidebar.append(
452+ '<div id="sidebarbutton"><span>&laquo;</span></div>'
453+ );
454+ var sidebarbutton = $('#sidebarbutton');
455+ light_color = sidebarbutton.css('background-color');
456+ // find the height of the viewport to center the '<<' in the page
457+ var viewport_height;
458+ if (window.innerHeight)
459+ viewport_height = window.innerHeight;
460+ else
461+ viewport_height = $(window).height();
462+ sidebarbutton.find('span').css({
463+ 'display': 'block',
464+ 'margin-top': (viewport_height - sidebar.position().top - 20) / 2
465+ });
466+
467+ sidebarbutton.click(toggle_sidebar);
468+ sidebarbutton.attr('title', _('Collapse sidebar'));
469+ sidebarbutton.css({
470+ 'color': '#FFFFFF',
471+ 'border-left': '1px solid ' + dark_color,
472+ 'font-size': '1.2em',
473+ 'cursor': 'pointer',
474+ 'height': bodywrapper.height(),
475+ 'padding-top': '1px',
476+ 'margin-left': ssb_width_expanded - 12
477+ });
478+
479+ sidebarbutton.hover(
480+ function () {
481+ $(this).css('background-color', dark_color);
482+ },
483+ function () {
484+ $(this).css('background-color', light_color);
485+ }
486+ );
487+ }
488+
489+ function set_position_from_cookie() {
490+ if (!document.cookie)
491+ return;
492+ var items = document.cookie.split(';');
493+ for(var k=0; k<items.length; k++) {
494+ var key_val = items[k].split('=');
495+ var key = key_val[0];
496+ if (key == 'sidebar') {
497+ var value = key_val[1];
498+ if ((value == 'collapsed') && (!sidebar_is_collapsed()))
499+ collapse_sidebar();
500+ else if ((value == 'expanded') && (sidebar_is_collapsed()))
501+ expand_sidebar();
502+ }
503+ }
504+ }
505+
506+ add_sidebar_button();
507+ var sidebarbutton = $('#sidebarbutton');
508+ set_position_from_cookie();
509+});
510
511=== added file 'themes/ubuntu/theme.conf'
512--- themes/ubuntu/theme.conf 1970-01-01 00:00:00 +0000
513+++ themes/ubuntu/theme.conf 2011-04-01 21:44:05 +0000
514@@ -0,0 +1,9 @@
515+[theme]
516+inherit = basic
517+stylesheet = default.css
518+pygments_style = sphinx
519+
520+[options]
521+rightsidebar = false
522+stickysidebar = false
523+externalrefs = false

Subscribers

People subscribed via source and target branches