[gnome-devel-docs/gnome3-hig] footer navigation in both versions.
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/gnome3-hig] footer navigation in both versions.
- Date: Wed, 18 Jan 2012 20:20:50 +0000 (UTC)
commit 3d6f94a78de90546307c19b74cf5ccde3896db67
Author: Jakub Steiner <jimmac gmail com>
Date: Wed Jan 18 21:20:33 2012 +0100
footer navigation in both versions.
hig3/config/environment.rb | 1 -
hig3/config/site.rb | 5 +
hig3/site/images/footer-art.png | Bin 0 -> 12358 bytes
hig3/site/index.html | 181 ++++++++++---------------
hig3/site/javascripts/hig.js | 19 +++
hig3/{src => site}/javascripts/jquery.js | 0
hig3/site/principles.html | 217 ++++++++++++++++--------------
hig3/site/stylesheets/hig.css | 152 +++++++++++++++++-----
hig3/site/stylesheets/text.css | 35 -----
hig3/src/layouts/default.haml | 20 ++-
hig3/src/layouts/landing.haml | 16 ++-
hig3/src/pages/_footer.haml | 1 -
hig3/src/pages/_menu.haml | 31 +++--
hig3/src/stylesheets/hig.scss | 144 +++++++++++++++++++-
14 files changed, 519 insertions(+), 303 deletions(-)
---
diff --git a/hig3/config/site.rb b/hig3/config/site.rb
index 972482d..19adbda 100644
--- a/hig3/config/site.rb
+++ b/hig3/config/site.rb
@@ -15,3 +15,8 @@ configuration.preview_server_host = "localhost"
# Default is an empty hash
# http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html#options
# configuration.haml_options = {}
+ configuration.haml_options = {
+ :format => :html5,
+# :encoding => :utf8,
+ :attr_wrapper => '"'
+ }
diff --git a/hig3/site/images/footer-art.png b/hig3/site/images/footer-art.png
new file mode 100644
index 0000000..6b0c213
Binary files /dev/null and b/hig3/site/images/footer-art.png differ
diff --git a/hig3/site/index.html b/hig3/site/index.html
index 4c10178..28ce032 100644
--- a/hig3/site/index.html
+++ b/hig3/site/index.html
@@ -1,133 +1,102 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<!DOCTYPE html>
<html>
<head>
<title>GNOME Human Interface Guidelines</title>
- <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css"/>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
<script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
- <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
</head>
<body>
- <div class='gnomelink'>
+ <div class="gnomelink">
<div>
- <a href='http://www.gnome.org'>GNOME.org</a>
+ <a href="http://www.gnome.org";>GNOME.org</a>
</div>
</div>
- <div class='logo'>
- <img alt="Gnome logo" class="foot" src="images/gnome-logo.png"/>
- <div class='punchline'>Human Interface Guidelines</div>
+ <div class="logo">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
</div>
- <div class='contain'>
- <aside class='sidebar'>
- <div class='menu'>
- <h3>
- Design Guidelines
- </h3>
- <ul>
- <li class="first"><a href="principles.html">Principles</a></li>
- <li><a href="design_strategies.html">Design Strategies</a></li>
- <li><a href="system_shell.html">System Shell</a></li>
- <li><a href="visual_layout.html">Visual Layout</a></li>
- <li><a href="writing_style.html">Writing Style</a></li>
- <li><a href="color.html">Color</a></li>
- <li><a href="keyboard_input.html">Keyboard Input</a></li>
- <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
- </ul>
- <h3>
- Design Patterns
- </h3>
- <ul class='collapsed'>
- <li>
- <a class='expand'>
- Application Basics
- </a>
- <ul>
- <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
- <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
- <li><a href="basics-primary-windows.html">Primary Windows</a></li>
- <li><a href="basics-notifications.html">Notifications</a></li>
- <li><a href="basics-content-area.html">Content Area</a></li>
- <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
- </ul>
- </li>
- <li>
- <a class='expand'>
- Presenting Content
- </a>
- <ul>
- <li class="first"><a href="presenting-content-view.html">Content View</a></li>
- <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
- <li><a href="presenting-zooming.html">Zooming</a></li>
- <li class="last"><a href="presenting-panning.html">Panning</a></li>
- </ul>
- </li>
- </ul>
+ <div class="contain">
+ <aside class="sidebar">
+ <div class="menu">
+ <div class="navmenu">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</aside>
- <article class='main'>
- <img alt="Devices" src="images/devices.png"/>
- <div class='blurb'>
+ <article class="main">
+ <img alt="Devices" src="images/devices.png">
+ <div class="blurb">
<h2>
Design Guidelines
</h2>
A small set of pages containing essential design
- <a href='principles.html'>advice and rules.</a>
+ <a href="principles.html">advice and rules.</a>
</div>
- <div class='blurb'>
+ <div class="blurb">
<h2>
Design Patterns
</h2>
A larger collection of building blocks that you can use to design your
- <a href='basics-appmenu.html'>application.</a>
+ <a href="basics-appmenu.html">application.</a>
The design patterns include a variety of different design elements that you can utilise. Some patterns describe individual user interface components, such as check boxes or lists. Others describe more complex arrangements of components.
</div>
</article>
</div>
- <section class='menumobile'>
- <h3>
- Design Guidelines
- </h3>
- <ul>
- <li class="first"><a href="principles.html">Principles</a></li>
- <li><a href="design_strategies.html">Design Strategies</a></li>
- <li><a href="system_shell.html">System Shell</a></li>
- <li><a href="visual_layout.html">Visual Layout</a></li>
- <li><a href="writing_style.html">Writing Style</a></li>
- <li><a href="color.html">Color</a></li>
- <li><a href="keyboard_input.html">Keyboard Input</a></li>
- <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
- </ul>
- <h3>
- Design Patterns
- </h3>
- <ul class='collapsed'>
- <li>
- <a class='expand'>
- Application Basics
- </a>
- <ul>
- <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
- <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
- <li><a href="basics-primary-windows.html">Primary Windows</a></li>
- <li><a href="basics-notifications.html">Notifications</a></li>
- <li><a href="basics-content-area.html">Content Area</a></li>
- <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
- </ul>
- </li>
- <li>
- <a class='expand'>
- Presenting Content
- </a>
- <ul>
- <li class="first"><a href="presenting-content-view.html">Content View</a></li>
- <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
- <li><a href="presenting-zooming.html">Zooming</a></li>
- <li class="last"><a href="presenting-panning.html">Panning</a></li>
- </ul>
- </li>
- </ul>
- </section>
- <section class='footer'>
- <h1>Footer</h1>
- </section>
+ <div id="footer">
+ <div class="contain copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://canonical.com";>Canonical</a>
+ Powered by WordPress.
+ </p>
+ </div>
+ </div>
</body>
</html>
diff --git a/hig3/site/javascripts/hig.js b/hig3/site/javascripts/hig.js
new file mode 100644
index 0000000..888d383
--- /dev/null
+++ b/hig3/site/javascripts/hig.js
@@ -0,0 +1,19 @@
+function positionFooter() {
+ var $footer = $('#footer');
+ $footer.removeClass('fixedfooter');
+ if ($(document.body).height() < $(window).height()) {
+ $footer.addClass('fixedfooter');
+ } else {
+ $footer.removeClass('fixedfooter');
+ }
+}
+
+$(document).ready(function () {
+ $(window).resize(positionFooter).resize();
+ console.log('yay');
+ //preventFOUT();
+});
+$(window).ready(function () {
+ //run _after_ images have been loaded as well.
+ $(window).resize(positionFooter).resize();
+});
diff --git a/hig3/src/javascripts/jquery.js b/hig3/site/javascripts/jquery.js
similarity index 100%
rename from hig3/src/javascripts/jquery.js
rename to hig3/site/javascripts/jquery.js
diff --git a/hig3/site/principles.html b/hig3/site/principles.html
index 3778724..d912674 100644
--- a/hig3/site/principles.html
+++ b/hig3/site/principles.html
@@ -1,73 +1,75 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<!DOCTYPE html>
<html>
<head>
<title>GNOME Human Interface Guidelines</title>
- <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css"/>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
<script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
- <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
</head>
<body>
- <div class='gnomelink'>
+ <div class="gnomelink">
<div>
- <a href='http://www.gnome.org'>GNOME.org</a>
+ <a href="http://www.gnome.org";>GNOME.org</a>
</div>
</div>
- <div class='contain'>
- <aside class='sidebar'>
- <a class='smalllogo' href='/'>
- <img alt="Gnome logo" class="foot" src="images/gnome-logo.png"/>
- <div class='punchline'>Human Interface Guidelines</div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
</a>
- <div class='menu'>
- <h3>
- Design Guidelines
- </h3>
- <ul>
- <li class="first current"><a href="principles.html">Principles</a></li>
- <li><a href="design_strategies.html">Design Strategies</a></li>
- <li><a href="system_shell.html">System Shell</a></li>
- <li><a href="visual_layout.html">Visual Layout</a></li>
- <li><a href="writing_style.html">Writing Style</a></li>
- <li><a href="color.html">Color</a></li>
- <li><a href="keyboard_input.html">Keyboard Input</a></li>
- <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
- </ul>
- <h3>
- Design Patterns
- </h3>
- <ul class='collapsed'>
- <li>
- <a class='expand'>
- Application Basics
- </a>
- <ul>
- <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
- <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
- <li><a href="basics-primary-windows.html">Primary Windows</a></li>
- <li><a href="basics-notifications.html">Notifications</a></li>
- <li><a href="basics-content-area.html">Content Area</a></li>
- <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
- </ul>
- </li>
- <li>
- <a class='expand'>
- Presenting Content
- </a>
- <ul>
- <li class="first"><a href="presenting-content-view.html">Content View</a></li>
- <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
- <li><a href="presenting-zooming.html">Zooming</a></li>
- <li class="last"><a href="presenting-panning.html">Panning</a></li>
- </ul>
- </li>
- </ul>
+ <div class="menu">
+ <div class="navmenu">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first current"><a href="principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</aside>
- <article class='main'>
+ <article class="main">
<h1>
GNOME 3 Design Principles
</h1>
- <div class='note'>
+ <div class="note">
This is draft content for the next version of GNOME Design.
</div>
<p>
@@ -95,8 +97,8 @@
<h2>
Prioritise and elevate content
</h2>
- <div class='columns'>
- <img alt="Test image" class="rimage" src="images/test-image.png"/>
+ <div class="columns">
+ <img alt="Test image" class="rimage" src="images/test-image.png">
<p>
Content can take many forms, including text, video, images and sound. People care about content and it is what they are interested in, so take care to present content in the best possible way, so that it can be experienced and enjoyed with ease.
</p>
@@ -106,7 +108,7 @@
<p>
It is easy to overload a view with too much content, so be selective about how much you present at any one time. Resist the temptation to include information just because you have access to it (this is particularly important when presenting text and metadata): instead, think about what is useful and important to users.
</p>
- <img alt="Test image" class="rimage" src="images/test-image.png"/>
+ <img alt="Test image" class="rimage" src="images/test-image.png">
<p>
You might want to provide a dedicated view for displaying or working with individual items of content.
</p>
@@ -193,52 +195,63 @@
</ul>
</article>
</div>
- <section class='menumobile'>
- <h3>
- Design Guidelines
- </h3>
- <ul>
- <li class="first current"><a href="principles.html">Principles</a></li>
- <li><a href="design_strategies.html">Design Strategies</a></li>
- <li><a href="system_shell.html">System Shell</a></li>
- <li><a href="visual_layout.html">Visual Layout</a></li>
- <li><a href="writing_style.html">Writing Style</a></li>
- <li><a href="color.html">Color</a></li>
- <li><a href="keyboard_input.html">Keyboard Input</a></li>
- <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
- </ul>
- <h3>
- Design Patterns
- </h3>
- <ul class='collapsed'>
- <li>
- <a class='expand'>
- Application Basics
- </a>
+ <div id="footer">
+ <div class="contain copy">
+ <div class="navmenu">
+ <h3>
+ Design Guidelines
+ </h3>
<ul>
- <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
- <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
- <li><a href="basics-primary-windows.html">Primary Windows</a></li>
- <li><a href="basics-notifications.html">Notifications</a></li>
- <li><a href="basics-content-area.html">Content Area</a></li>
- <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ <li class="first current"><a href="principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
</ul>
- </li>
- <li>
- <a class='expand'>
- Presenting Content
- </a>
- <ul>
- <li class="first"><a href="presenting-content-view.html">Content View</a></li>
- <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
- <li><a href="presenting-zooming.html">Zooming</a></li>
- <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
</ul>
- </li>
- </ul>
- </section>
- <section class='footer'>
- <h1>Footer</h1>
- </section>
+ </div>
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://canonical.com";>Canonical</a>
+ Powered by WordPress.
+ </p>
+ </div>
+ </div>
</body>
</html>
diff --git a/hig3/site/stylesheets/hig.css b/hig3/site/stylesheets/hig.css
index 496caea..debb650 100644
--- a/hig3/site/stylesheets/hig.css
+++ b/hig3/site/stylesheets/hig.css
@@ -41,6 +41,7 @@ body {
margin: 0;
padding: 0;
background: white url(../images/html-bg.png) 0 10px repeat-x;
+ background: white url(../images/grid.png) top center repeat-y;
}
/* line 36 */
@@ -287,23 +288,120 @@ h1 {
}
/* line 202 */
-.menumobile {
- display: none;
+#footer {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ width: 100%;
+ overflow: hidden;
+ position: inline;
}
-
-/* line 203 */
-.footer {
- display: none;
+/* line 211 */
+#footer.fixedfooter {
+ position: absolute;
+ bottom: 0;
+}
+/* line 216 */
+#footer .copy {
+ margin-bottom: 2em;
+}
+/* line 219 */
+#footer .copy p {
+ display: inline;
+ float: left;
+ width: 940px;
+ margin: 0 10px;
+}
+/* line 224 */
+#footer .navmenu {
+ display: block;
+ width: 960px;
+ margin: 0 -10px;
+ *zoom: 1;
+ margin: 0;
+}
+/* line 27, /home/jimmac/src/cvs/gnome/gnome-devel-docs/hig3/src/stylesheets/grid.scss */
+#footer .navmenu:before, #footer .navmenu:after {
+ content: "";
+ display: table;
+}
+/* line 31, /home/jimmac/src/cvs/gnome/gnome-devel-docs/hig3/src/stylesheets/grid.scss */
+#footer .navmenu:after {
+ clear: both;
+}
+/* line 227 */
+#footer .navmenu ul {
+ display: inline;
+ float: left;
+ width: 220px;
+ margin: 0 10px;
+ background-color: rgba(0, 0, 0, 0.05);
+}
+/* line 231 */
+#footer .navmenu h3 {
+ display: inline;
+ float: left;
+ width: 220px;
+ margin: 0 10px;
+}
+/* line 234 */
+#footer .navmenu ul.collapsed {
+ background-color: rgba(255, 0, 0, 0.4);
+ display: block;
+ width: 720px;
+ margin: 0 -10px;
+ *zoom: 1;
+ margin: 0;
+}
+/* line 27, /home/jimmac/src/cvs/gnome/gnome-devel-docs/hig3/src/stylesheets/grid.scss */
+#footer .navmenu ul.collapsed:before, #footer .navmenu ul.collapsed:after {
+ content: "";
+ display: table;
+}
+/* line 31, /home/jimmac/src/cvs/gnome/gnome-devel-docs/hig3/src/stylesheets/grid.scss */
+#footer .navmenu ul.collapsed:after {
+ clear: both;
+}
+/* line 238 */
+#footer .navmenu ul.collapsed ul {
+ display: block;
+ width: 240px;
+ margin: 0 -10px;
+ *zoom: 1;
+ background-color: blue;
+}
+/* line 27, /home/jimmac/src/cvs/gnome/gnome-devel-docs/hig3/src/stylesheets/grid.scss */
+#footer .navmenu ul.collapsed ul:before, #footer .navmenu ul.collapsed ul:after {
+ content: "";
+ display: table;
+}
+/* line 31, /home/jimmac/src/cvs/gnome/gnome-devel-docs/hig3/src/stylesheets/grid.scss */
+#footer .navmenu ul.collapsed ul:after {
+ clear: both;
+}
+/* line 241 */
+#footer .navmenu ul.collapsed ul li {
+ display: inline;
+ float: left;
+ width: 220px;
+ margin: 0 10px;
+}
+/* line 245 */
+#footer .navmenu ul.collapsed > li {
+ display: inline;
+ float: left;
+ width: 220px;
+ margin: 0 10px;
}
/* MOBILE VERSION BELOW */
@media screen and (max-width: 960px) {
- /* line 209 */
+ /* line 256 */
.gnomelink {
display: none;
}
- /* line 212 */
+ /* line 259 */
.blurb {
display: block;
width: 100%;
@@ -320,25 +418,25 @@ h1 {
clear: both;
}
- /* line 215 */
+ /* line 262 */
.logo {
position: static;
margin: 20px auto;
width: 94%;
overflow: hidden;
}
- /* line 220 */
+ /* line 267 */
.logo img {
width: 100px;
height: auto;
}
- /* line 224 */
+ /* line 271 */
.logo div {
margin: .5em 0 0;
font-size: 120%;
}
- /* line 230 */
+ /* line 277 */
.columns {
display: block;
width: 100%;
@@ -354,7 +452,7 @@ h1 {
.columns:after {
clear: both;
}
- /* line 233 */
+ /* line 280 */
.columns img {
display: inline;
float: left;
@@ -362,7 +460,7 @@ h1 {
margin: 0 1.042%;
margin-bottom: 1em;
}
- /* line 238 */
+ /* line 285 */
.columns p {
display: inline;
float: left;
@@ -371,27 +469,27 @@ h1 {
margin-bottom: 1em;
}
- /* line 244 */
+ /* line 291 */
.contain {
width: 97.917%;
margin: 0 auto;
}
- /* line 247 */
+ /* line 294 */
.contain .menu {
display: none;
}
- /* line 248 */
+ /* line 295 */
.contain .main {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
}
- /* line 249 */
+ /* line 296 */
.contain .sidebar {
margin: 0;
}
- /* line 251 */
+ /* line 298 */
.contain .sidebar .smalllogo {
position: static;
display: block;
@@ -399,27 +497,19 @@ h1 {
width: 94%;
overflow: hidden;
}
- /* line 257 */
+ /* line 304 */
.contain .sidebar .smalllogo img {
width: 100px;
height: auto;
}
- /* line 261 */
+ /* line 308 */
.contain .sidebar .smalllogo div {
margin: .5em 0 0;
font-size: 120%;
}
- /* line 268 */
- .menumobile {
- display: inline;
- float: left;
- width: 97.917%;
- margin: 0 1.042%;
- }
-
- /* line 270 */
- .footer {
+ /* line 316 */
+ #footer {
@inlude column(16);
}
}
diff --git a/hig3/site/stylesheets/text.css b/hig3/site/stylesheets/text.css
index 04791eb..6c7214b 100644
--- a/hig3/site/stylesheets/text.css
+++ b/hig3/site/stylesheets/text.css
@@ -62,38 +62,3 @@ code {
}
-/* Text classes */
-/* ========================================================================== */
-
-.highlight {
- background: yellow;
-}
-
-.main_feature {
- font-size: 16pt;
- line-height: 130%;
-}
-
-.footnotes {
- font-size: 11px;
- color: #888a85;
-}
-.footnotes a {
- color: #888a85;
-}
-
-.more {
- background: url(../images/more-arrow.png) right 6px no-repeat;
- cursor: pointer;
- white-space: nowrap;
- padding-right: 10px;
- text-decoration: none;
-}
-.more {
- text-decoration: underline;
-}
-
-#footer {
- font-size: 11px;
- line-height: 1.5em;
-}
diff --git a/hig3/src/layouts/default.haml b/hig3/src/layouts/default.haml
index 0e34125..d6d63d8 100644
--- a/hig3/src/layouts/default.haml
+++ b/hig3/src/layouts/default.haml
@@ -1,10 +1,11 @@
-!!!
+!!! 5
%html
%head
%title GNOME Human Interface Guidelines
= stylesheets :hig, :media => "screen"
= javascripts('jquery', 'hig')
%meta{:name=>"viewport", :content=> "width=device-width, initial-scale=1, maximum-scale=1"}
+ %meta{:charset=>"UTF-8"}
%body
.gnomelink
%div
@@ -18,7 +19,16 @@
= partial('menu')
%article.main
= yield
- %section.menumobile
- = partial('menu')
- %section.footer
- = partial('footer')
+ %hr.footerart
+ #footer
+ .contain
+ = partial('menu')
+ .copy
+ %p
+ Copyright © 2005—2012 The GNOME Project
+ %p
+ Free to share and remix:
+ %a{:href => "http://creativecommons.org/licenses/by/3.0/"} Creative Commons CC-BY.
+ Optimised for standards. Hosted by
+ %a{:href => "http://canonical.com"} Canonical
+ Powered by WordPress.
diff --git a/hig3/src/layouts/landing.haml b/hig3/src/layouts/landing.haml
index d1fb5bb..3109b3b 100644
--- a/hig3/src/layouts/landing.haml
+++ b/hig3/src/layouts/landing.haml
@@ -18,7 +18,15 @@
= partial('menu')
%article.main
= yield
- %section.menumobile
- = partial('menu')
- %section.footer
- = partial('footer')
+ %hr.footerart
+ #footer
+ .contain
+ .copy
+ %p
+ Copyright © 2005—2012 The GNOME Project
+ %p
+ Free to share and remix:
+ %a{:href => "http://creativecommons.org/licenses/by/3.0/"} Creative Commons CC-BY.
+ Optimised for standards. Hosted by
+ %a{:href => "http://canonical.com"} Canonical
+ Powered by WordPress.
diff --git a/hig3/src/pages/_menu.haml b/hig3/src/pages/_menu.haml
index 2fd71c4..6720f73 100644
--- a/hig3/src/pages/_menu.haml
+++ b/hig3/src/pages/_menu.haml
@@ -1,15 +1,18 @@
-%h3
- Design Guidelines
-= menubar 'Principles', 'Design Strategies', 'System Shell', 'Visual Layout', 'Writing Style', 'Color', 'Keyboard Input', 'Pointer and Touch Input'
+.navmenu
+ %span.direct
+ %h3
+ Design Guidelines
+ = menubar 'Principles', 'Design Strategies', 'System Shell', 'Visual Layout', 'Writing Style', 'Color', 'Keyboard Input', 'Pointer and Touch Input', :all => {:class => 'direct'}
-%h3
- Design Patterns
-%ul.collapsed
- %li
- %a.expand
- Application Basics
- = menubar ['Application Menu', 'basics-appmenu.html'], ['Primary Toolbar','basics-primary-toolbar.html'], ['Primary Windows','basics-primary-windows.html'], ['Notifications','basics-notifications.html'], ['Content Area', 'basics-content-area.html'], ['Sidebar List','basics-sidebar-list.html']
- %li
- %a.expand
- Presenting Content
- = menubar ['Content View', 'presenting-content-view.html'], ['Fullscreen','presenting-fullscreen.html'], ['Zooming','presenting-zooming.html'], ['Panning','presenting-panning.html']
+ %span.nested
+ %h3
+ Design Patterns
+ %ul.collapsed
+ %li
+ %a.expand
+ Application Basics
+ = menubar ['Application Menu', 'basics-appmenu.html'], ['Primary Toolbar','basics-primary-toolbar.html'], ['Primary Windows','basics-primary-windows.html'], ['Notifications','basics-notifications.html'], ['Content Area', 'basics-content-area.html'], ['Sidebar List','basics-sidebar-list.html']
+ %li
+ %a.expand
+ Presenting Content
+ = menubar ['Content View', 'presenting-content-view.html'], ['Fullscreen','presenting-fullscreen.html'], ['Zooming','presenting-zooming.html'], ['Panning','presenting-panning.html']
diff --git a/hig3/src/stylesheets/hig.scss b/hig3/src/stylesheets/hig.scss
index c734d25..a174ea0 100644
--- a/hig3/src/stylesheets/hig.scss
+++ b/hig3/src/stylesheets/hig.scss
@@ -199,8 +199,97 @@ h1 { font-size: 200%; }
@include column(5);
}
-.menumobile { display: none; }
-.footer { display: none; }
+hr.footerart {
+ display: block;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ width: 100%;
+ width: 925;
+ height: 116px;
+ background: url(../images/footer-art.png) no-repeat bottom center;
+}
+
+#footer {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ width: 100%;
+ background-color: #d3d7cf;
+ overflow: hidden;
+ position: inline;
+
+ &.fixedfooter {
+ position: absolute;
+ bottom: 0;
+ }
+
+ .copy {
+ @include column(16);
+ margin-top: 2em;
+ margin-bottom: 2em;
+ font-size: 80%;
+ }
+
+ .navmenu {
+ @include row(16);
+ margin: 0; //not included in a grid column, thus no need for negative margins
+ line-height: 200%;
+ h3 {
+ font-size: 110%;
+ }
+ a {
+ color: #fff;
+ text-decoration: none;
+ &:hover {
+ color: #444;
+ text-decoration: underline;
+ }
+ }
+ .direct {
+ @include column(4,16);
+ ul {
+ display: block;
+ margin-bottom: 2em;
+ padding: 0;
+
+ li {
+ display: block;
+ padding: 0;
+ margin: 0;
+ }
+ }
+ }
+ .nested {
+ @include column(12,16);
+ ul.collapsed {
+ @include row(12);
+ margin-bottom: 0;
+ a {
+ color: $c-header;
+ font-size: 105%;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ li {
+ @include column(4,12);
+ ul li {
+ margin: 0;
+ a {
+ color: #fff;
+ text-decoration: none;
+ &:hover {
+ color: #444;
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
/* MOBILE VERSION BELOW */
@media screen and (max-width: 960px) {
@@ -265,7 +354,54 @@ h1 { font-size: 200%; }
}
}
}
- .menumobile { @include column(16); }
- .footer { @inlude column(16); }
+ hr.footerart {
+ width: 96%;
+ margin: 0 auto;
+ background-size: contain;
+ }
+
+ #footer {
+ @inlude column(16);
+
+ .navmenu {
+ font-size: 130%;
+ line-height: 300%;
+ h3 {
+ margin: 2em 0 1em;
+ }
+ @include column(16);
+ li {
+ @include column(16);
+ }
+ .direct {
+ @include column(16);
+ margin: 0;
+ }
+ .nested {
+ @include column(16);
+ margin: 0;
+ ul.collapsed {
+ @include column(16);
+ margin: 0;
+ li {
+ @include column(16);
+ margin: 0;
+ ul li {
+ display: block;
+ float: none;
+ width: 100%;
+ margin: 0;
+ }
+ }
+ }
+ }
+ }
+
+ .copy {
+ @include column(16);
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ }
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
