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

[Raoul Snyman]

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.

[Daniel Holbach (dholbach)]

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

[Daniel Holbach (dholbach)]

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

[Stefano Rivera (stefanor)]

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.

[Ronnie (ronnie.vd.c)]

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

[Raoul Snyman (raoul-snyman)]

@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.

[Daniel Holbach (dholbach)]

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?

[Ronnie (ronnie.vd.c)]

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

[Ronnie (ronnie.vd.c)]

review: Needs Fixing

[Raoul Snyman (raoul-snyman)]

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

[Jurmir Canal Neto (jcneto)]

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

Thanks!!

[Daniel Holbach (dholbach)]

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">

=== modified file 'conf.py'
--- conf.py	2010-11-19 12:07:36 +0000
+++ conf.py	2011-04-01 21:44:05 +0000
@@ -101,7 +101,7 @@
 
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
-html_theme = 'default'
+html_theme = 'ubuntu'
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
@@ -109,7 +109,7 @@
 #html_theme_options = {}
 
 # Add any paths that contain custom themes here, relative to this directory.
-#html_theme_path = []
+html_theme_path = ['themes']
 
 # The name for this set of Sphinx documents.  If None, it defaults to
 # "<project> v<release> documentation".
 
=== added directory 'themes'
=== added directory 'themes/ubuntu'
=== added file 'themes/ubuntu/layout.html'
--- themes/ubuntu/layout.html	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/layout.html	2011-04-01 21:44:05 +0000
@@ -0,0 +1,14 @@
+{#
+    ubuntu/layout.html
+    ~~~~~~~~~~~~~~~~~~
+
+    Sphinx layout template for the Ubuntu theme.
+
+    :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
+    :license: BSD, see LICENSE for details.
+#}
+{% extends "basic/layout.html" %}
+
+{% if theme_collapsiblesidebar|tobool %}
+{% set script_files = script_files + ['_static/sidebar.js'] %}
+{% endif %}
 
=== added directory 'themes/ubuntu/static'
=== added file 'themes/ubuntu/static/default.css_t'
--- themes/ubuntu/static/default.css_t	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/default.css_t	2011-04-01 21:44:05 +0000
@@ -0,0 +1,304 @@
+/*
+ * default.css_t
+ * ~~~~~~~~~~~~~
+ *
+ * Sphinx stylesheet -- Ubuntu theme, adapted from the default Sphinx theme.
+ *
+ * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
+ * :license: BSD, see LICENSE for details.
+ *
+ */
+
+@import url("basic.css");
+
+/* -- page layout ----------------------------------------------------------- */
+
+body {
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 100%;
+    background-color: #ee5925;
+    color: #000;
+    margin: 0;
+    padding: 0;
+}
+
+div.document {
+    background-color: #f7f6f5;
+}
+
+div.documentwrapper {
+    float: left;
+    width: 100%;
+}
+
+div.bodywrapper {
+    margin: 0 0 0 230px;
+}
+
+div.body {
+    background: #fff;
+    color: #000;
+    padding: 0 20px 30px 20px;
+}
+
+{%- if theme_rightsidebar|tobool %}
+div.bodywrapper {
+    margin: 0 230px 0 0;
+}
+{%- endif %}
+
+div.footer {
+    color: #fff;
+    width: 100%;
+    padding: 9px 0 9px 0;
+    text-align: center;
+    font-size: 75%;
+}
+
+div.footer a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+div.related {
+    background: #dd4814 url(header.png) bottom left repeat-x;
+    line-height: 45px;
+    color: #fff;
+}
+
+div.related a {
+    color: #fff;
+    text-shadow: 0 1px #000;
+}
+
+div.sphinxsidebar {
+    {%- if theme_stickysidebar|tobool %}
+    top: 30px;
+    bottom: 0;
+    margin: 0;
+    position: fixed;
+    overflow: auto;
+    height: auto;
+    {%- endif %}
+    {%- if theme_rightsidebar|tobool %}
+    float: right;
+    {%- if theme_stickysidebar|tobool %}
+    right: 0;
+    {%- endif %}
+    {%- endif %}
+}
+
+{%- if theme_stickysidebar|tobool %}
+/* this is nice, but it it leads to hidden headings when jumping
+   to an anchor */
+/*
+div.related {
+    position: fixed;
+}
+
+div.documentwrapper {
+    margin-top: 30px;
+}
+*/
+{%- endif %}
+
+div.sphinxsidebar h3 {
+    font-family: 'Ubuntu', sans-serif;
+    color: #000;
+    font-size: 1.4em;
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+}
+
+div.sphinxsidebar h3 a {
+    color: #000;
+}
+
+div.sphinxsidebar h4 {
+    font-family: 'Ubuntu', sans-serif;
+    color: #000;
+    font-size: 1.3em;
+    font-weight: normal;
+    margin: 5px 0 0 0;
+    padding: 0;
+}
+
+div.sphinxsidebar p {
+    color: #000;
+}
+
+div.sphinxsidebar p.topless {
+    margin: 5px 10px 10px 10px;
+}
+
+div.sphinxsidebar ul {
+    margin: 10px;
+    padding: 0;
+    color: #000;
+}
+
+div.sphinxsidebar a {
+    color: #ee5925;
+}
+
+div.sphinxsidebar input {
+    background-color: #fff;
+    border: 1px solid #ee5925;
+    color: #000;
+    font-family: sans-serif;
+    font-size: 1em;
+}
+
+/* -- hyperlink styles ------------------------------------------------------ */
+
+a {
+    color: #dd4814;
+    text-decoration: none;
+}
+
+a:visited {
+    color: #ee5925;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+{% if theme_externalrefs|tobool %}
+a.external {
+   text-decoration: none;
+   border-bottom: 1px dashed #dd4814;
+}
+
+a.external:hover {
+   text-decoration: none;
+   border-bottom: none;
+}
+
+a.external:visited {
+    text-decoration: none;
+    border-bottom: 1px dashed #ee5925;
+}
+{% endif %}
+
+/* -- body styles ----------------------------------------------------------- */
+
+div.body h1,
+div.body h2,
+div.body h3,
+div.body h4,
+div.body h5,
+div.body h6 {
+    font-family: 'Ubuntu', sans-serif;
+    background-color: #dd4814;
+    font-weight: normal;
+    color: #fff;
+    border-top: 1px solid #fff;
+    margin: 20px -20px 10px -20px;
+    padding: 3px 0 3px 10px;
+}
+
+div.body h1 { margin-top: 0; font-size: 200%; }
+div.body h2 { font-size: 160%; }
+div.body h3 { font-size: 140%; }
+div.body h4 { font-size: 120%; }
+div.body h5 { font-size: 110%; }
+div.body h6 { font-size: 100%; }
+
+a.headerlink {
+    color: #f7f6f5;
+    font-size: 0.8em;
+    padding: 0 4px 0 4px;
+    text-decoration: none;
+}
+
+a.headerlink:hover {
+    background-color: #f7f6f5;
+    color: #dd4814;
+}
+
+div.body p, div.body dd, div.body li {
+    text-align: justify;
+    line-height: 130%;
+}
+
+div.admonition p.admonition-title + p {
+    display: inline;
+}
+
+div.admonition p {
+    margin-bottom: 5px;
+}
+
+div.admonition pre {
+    margin-bottom: 5px;
+}
+
+div.admonition ul, div.admonition ol {
+    margin-bottom: 5px;
+}
+
+div.note {
+    background-color: #eee;
+    border: 1px solid #ccc;
+}
+
+div.seealso {
+    background-color: #ffc;
+    border: 1px solid #ff6;
+}
+
+div.topic {
+    background-color: #eee;
+}
+
+div.warning {
+    background-color: #ffe4e4;
+    border: 1px solid #f66;
+}
+
+p.admonition-title {
+    display: inline;
+}
+
+p.admonition-title:after {
+    content: ":";
+}
+
+pre {
+    padding: 5px;
+    background-color: #f0f0f0;
+    color: #333333;
+    line-height: 120%;
+    border: 1px solid #ccc;
+}
+
+tt {
+    background-color: #ecf0f3;
+    padding: 0 1px 0 1px;
+    font-size: 0.95em;
+}
+
+th {
+    background-color: #ede;
+}
+
+.warning tt {
+    background: #efc2c2;
+}
+
+.note tt {
+    background: #d6d6d6;
+}
+
+.viewcode-back {
+    font-family: 'Ubuntu', sans-serif;
+}
+
+div.viewcode-block:target {
+    background-color: #f4debf;
+    border-top: 1px solid #ac9;
+    border-bottom: 1px solid #ac9;
+}
 
=== added file 'themes/ubuntu/static/favicon.ico'
 Binary 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
=== added file 'themes/ubuntu/static/header.png'
 Binary 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
=== added file 'themes/ubuntu/static/sidebar.js'
--- themes/ubuntu/static/sidebar.js	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/sidebar.js	2011-04-01 21:44:05 +0000
@@ -0,0 +1,148 @@
+/*
+ * sidebar.js
+ * ~~~~~~~~~~
+ *
+ * This script makes the Sphinx sidebar collapsible.
+ *
+ * .sphinxsidebar contains .sphinxsidebarwrapper.  This script adds
+ * in .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
+ * used to collapse and expand the sidebar.
+ *
+ * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
+ * and the width of the sidebar and the margin-left of the document
+ * are decreased. When the sidebar is expanded the opposite happens.
+ * This script saves a per-browser/per-session cookie used to
+ * remember the position of the sidebar among the pages.
+ * Once the browser is closed the cookie is deleted and the position
+ * reset to the default (expanded).
+ *
+ * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
+ * :license: BSD, see LICENSE for details.
+ *
+ */
+
+$(function() {
+  // global elements used by the functions.
+  // the 'sidebarbutton' element is defined as global after its
+  // creation, in the add_sidebar_button function
+  var bodywrapper = $('.bodywrapper');
+  var sidebar = $('.sphinxsidebar');
+  var sidebarwrapper = $('.sphinxsidebarwrapper');
+
+  // original margin-left of the bodywrapper and width of the sidebar
+  // with the sidebar expanded
+  var bw_margin_expanded = bodywrapper.css('margin-left');
+  var ssb_width_expanded = sidebar.width();
+
+  // margin-left of the bodywrapper and width of the sidebar
+  // with the sidebar collapsed
+  var bw_margin_collapsed = '.8em';
+  var ssb_width_collapsed = '.8em';
+
+  // colors used by the current theme
+  var dark_color = $('.related').css('background-color');
+  var light_color = $('.document').css('background-color');
+
+  function sidebar_is_collapsed() {
+    return sidebarwrapper.is(':not(:visible)');
+  }
+
+  function toggle_sidebar() {
+    if (sidebar_is_collapsed())
+      expand_sidebar();
+    else
+      collapse_sidebar();
+  }
+
+  function collapse_sidebar() {
+    sidebarwrapper.hide();
+    sidebar.css('width', ssb_width_collapsed);
+    bodywrapper.css('margin-left', bw_margin_collapsed);
+    sidebarbutton.css({
+        'margin-left': '0',
+        'height': bodywrapper.height()
+    });
+    sidebarbutton.find('span').text('»');
+    sidebarbutton.attr('title', _('Expand sidebar'));
+    document.cookie = 'sidebar=collapsed';
+  }
+
+  function expand_sidebar() {
+    bodywrapper.css('margin-left', bw_margin_expanded);
+    sidebar.css('width', ssb_width_expanded);
+    sidebarwrapper.show();
+    sidebarbutton.css({
+        'margin-left': ssb_width_expanded-12,
+        'height': bodywrapper.height()
+    });
+    sidebarbutton.find('span').text('«');
+    sidebarbutton.attr('title', _('Collapse sidebar'));
+    document.cookie = 'sidebar=expanded';
+  }
+
+  function add_sidebar_button() {
+    sidebarwrapper.css({
+        'float': 'left',
+        'margin-right': '0',
+        'width': ssb_width_expanded - 28
+    });
+    // create the button
+    sidebar.append(
+        '<div id="sidebarbutton"><span>&laquo;</span></div>'
+    );
+    var sidebarbutton = $('#sidebarbutton');
+    light_color = sidebarbutton.css('background-color');
+    // find the height of the viewport to center the '<<' in the page
+    var viewport_height;
+    if (window.innerHeight)
+ 	  viewport_height = window.innerHeight;
+    else
+	  viewport_height = $(window).height();
+    sidebarbutton.find('span').css({
+        'display': 'block',
+        'margin-top': (viewport_height - sidebar.position().top - 20) / 2
+    });
+
+    sidebarbutton.click(toggle_sidebar);
+    sidebarbutton.attr('title', _('Collapse sidebar'));
+    sidebarbutton.css({
+        'color': '#FFFFFF',
+        'border-left': '1px solid ' + dark_color,
+        'font-size': '1.2em',
+        'cursor': 'pointer',
+        'height': bodywrapper.height(),
+        'padding-top': '1px',
+        'margin-left': ssb_width_expanded - 12
+    });
+
+    sidebarbutton.hover(
+      function () {
+          $(this).css('background-color', dark_color);
+      },
+      function () {
+          $(this).css('background-color', light_color);
+      }
+    );
+  }
+
+  function set_position_from_cookie() {
+    if (!document.cookie)
+      return;
+    var items = document.cookie.split(';');
+    for(var k=0; k<items.length; k++) {
+      var key_val = items[k].split('=');
+      var key = key_val[0];
+      if (key == 'sidebar') {
+        var value = key_val[1];
+        if ((value == 'collapsed') && (!sidebar_is_collapsed()))
+          collapse_sidebar();
+        else if ((value == 'expanded') && (sidebar_is_collapsed()))
+          expand_sidebar();
+      }
+    }
+  }
+
+  add_sidebar_button();
+  var sidebarbutton = $('#sidebarbutton');
+  set_position_from_cookie();
+});
 
=== added file 'themes/ubuntu/theme.conf'
--- themes/ubuntu/theme.conf	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/theme.conf	2011-04-01 21:44:05 +0000
@@ -0,0 +1,9 @@
+[theme]
+inherit = basic
+stylesheet = default.css
+pygments_style = sphinx
+
+[options]
+rightsidebar = false
+stickysidebar = false
+externalrefs = false