[library-web/responsive: 2/2] Make the site responsive
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [library-web/responsive: 2/2] Make the site responsive
- Date: Thu, 31 Jan 2013 14:52:06 +0000 (UTC)
commit 7231a890c6b1b36a5dcbe66cc1189b80311c4efc
Author: Jakub Steiner <jimmac gmail com>
Date: Thu Jan 31 15:49:49 2013 +0100
Make the site responsive
- uses the foldy960 6 column grid
- top navigation specialcased with custom media queries
data/skin/foldy960.css | 16 -----
data/skin/lgo2010.css | 10 ---
data/skin/lgo2013.css | 164 +++++++++++++++++++++++++++++++++++++++++++++
data/xslt/dev_indexes.xsl | 28 ++++----
data/xslt/heading.xsl | 27 ++++---
5 files changed, 193 insertions(+), 52 deletions(-)
---
diff --git a/data/skin/foldy960.css b/data/skin/foldy960.css
index 5e7f7dc..1b44a7d 100644
--- a/data/skin/foldy960.css
+++ b/data/skin/foldy960.css
@@ -180,20 +180,4 @@ code {
text-align: center;
}
-/* Unset hardcoded sizes */
-#container {
- width: inherit;
-}
-#container .content, #container .page_title {
- width: inherit;
-}
-#container.two_columns .content {
- width: inherit;
-}
-#container.two_columns .content.without_sidebar {
- width: inherit;
-}
-#container.two_columns .sidebar {
- width: inherit;
-}
diff --git a/data/skin/lgo2010.css b/data/skin/lgo2010.css
index 9789626..7dc5942 100644
--- a/data/skin/lgo2010.css
+++ b/data/skin/lgo2010.css
@@ -324,16 +324,6 @@ span.citem {
font-size: 10px;
}
-#api-doc-box {
- float: right;
- width: 205px;
- margin: 0;
-}
-
-#api-doc-box input {
- width: 190px;
-}
-
#api-doc-box h2 {
font-size: 20px;
}
diff --git a/data/skin/lgo2013.css b/data/skin/lgo2013.css
new file mode 100644
index 0000000..c2bbe48
--- /dev/null
+++ b/data/skin/lgo2013.css
@@ -0,0 +1,164 @@
+/* Unset hardcoded sizes */
+#container {
+ width: 98%;
+}
+
+#container .content, #container .page_title {
+ width: 100%;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+#container.two_columns .content {
+ width: inherit;
+}
+#container.two_columns .content.without_sidebar {
+ width: inherit;
+}
+#container.two_columns .sidebar {
+ width: inherit;
+}
+.maxwidth {
+ width: 100%;
+}
+ #global_domain_bar .tab {
+ right: 20px;
+ }
+#container .page_title, #container .content, #container .sidebar {
+ margin: 0 1.515151515152% 1em !important;
+}
+
+#api-doc-box input {
+ width: 100%;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+/* Other overrides */
+
+h1.subindex {
+ line-height: 120%;
+}
+
+.subtle_box {
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+ .subtle_box h2 {
+ margin: 0 0 1em 0;
+ }
+
+#header #logo img {
+ height: auto;
+}
+
+#platform-overview a {
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ width: 90%;
+}
+
+#top_bar {
+ margin-top: 60px;
+ margin-left: 1.515151515152%;
+ margin-right: 1.515151515152%;
+}
+
+ media screen and (max-width: 900px) {
+ .right {
+ float: none;
+ }
+ #top_bar input,
+ #top_bar form {
+ margin: 0;
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ }
+ #top_bar form {
+ margin-top: 24px;
+ }
+}
+
+ media screen and (max-width: 640px) {
+ #footer div.links > div > ul > li {
+ width: 100%;
+ margin: 0 1.515151515152% 1em;
+ }
+ .left, .right {
+ float: none;
+ }
+ #top_bar {
+ overflow: hidden; /* recalculate */
+ margin-top: 10px;
+ }
+ #top_bar .menu-globalnav-container,
+ #top_bar ul li,
+ #top_bar ul li a {
+ display: block;
+ width: 100%;
+ }
+ #top_bar input,
+ #top_bar ul li a,
+ #top_bar form {
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ }
+ #top_bar ul li a {
+ padding: 1em 0.5em;
+ }
+ #top_bar form {
+ margin: 10px 0;
+ }
+ #top_bar input {
+ margin: 0;
+ }
+ #footer .menu a {
+ width: 100%;
+ margin: 0 0 1em 0;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ font-size: 130%;
+ line-height: 150%;
+ padding: .5em;
+ border: 1px solid #a0a997;
+ border-radius: 0.5em;
+ -moz-border-radius: 0.5em;
+ -webkit-border-radius: 0.5em;
+ background-color: #c6cbc1;
+ background-image: -moz-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -webkit-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -o-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -ms-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: linear-gradient(top, #e0e3dd, #bfc4b9);
+ }
+ #footer .menu a:hover,
+ #footer .menu a:focus {
+ margin: 0 0 1em 0;
+ padding: .5em;
+ background-image: -moz-linear-gradient(top, #f0f3ed, #cfd4c9);
+ background-image: -webkit-linear-gradient(top, #f0f3ed, #cfd4c9);
+ background-image: -o-linear-gradient(top, #f0f3ed, #cfd4c9);
+ background-image: -ms-linear-gradient(top, #f0f3ed, #cfd4c9);
+ background-image: linear-gradient(top, #f0f3ed, #cfd4c9);
+ }
+ #footer .menu a:active {
+ margin: 0 0 1em 0;
+ padding: .5em;
+ background-image: -moz-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -webkit-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -o-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -ms-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: linear-gradient(top, #b9c0b3, #c6cbc1);
+ }
+}
diff --git a/data/xslt/dev_indexes.xsl b/data/xslt/dev_indexes.xsl
index fce43bd..d186b5a 100644
--- a/data/xslt/dev_indexes.xsl
+++ b/data/xslt/dev_indexes.xsl
@@ -295,13 +295,13 @@ doctype-system="http://www.w3.org/TR/html4/loose.dtd";>
<xsl:with-param name="channel">devel</xsl:with-param>
<xsl:with-param name="lang" select="$lang"/>
</xsl:call-template>
- <div id="container" class="two_columns">
- <div class="container_12">
- <div class="page_title">
+ <div id="container" class="">
+ <div class="container">
+ <div class="page_title grid-full">
<h1 class="article title"><a href="{ path}"
lang="{ lang}"><xsl:value-of select="title"/></a></h1>
</div>
- <div class="content">
+ <div class="content grid-4">
<xsl:if test="abstract">
<p>
<xsl:value-of select="abstract" />
@@ -378,7 +378,7 @@ doctype-system="http://www.w3.org/TR/html4/loose.dtd";>
</xsl:if>
</div>
- <div class="sidebar">
+ <div class="sidebar grid-2">
<xsl:if test="tarballs">
<div class="downloads subtle_box">
<h4>
@@ -615,8 +615,8 @@ doctype-system="http://www.w3.org/TR/html4/loose.dtd";>
<xsl:with-param name="channel">devel</xsl:with-param>
<xsl:with-param name="lang" select="@lang"/>
</xsl:call-template>
- <div id="container" class="two_columns">
- <div class="container_12">
+ <div id="container" class="container">
+ <div class="grid-4">
<xsl:if test="title">
<div class="page_title"><h1 class="subindex" id="subindex-{ id}"><xsl:value-of select="title"/></h1></div>
</xsl:if>
@@ -634,7 +634,7 @@ doctype-system="http://www.w3.org/TR/html4/loose.dtd";>
</div>
<div>
<xsl:attribute name="class">
- sidebar
+ sidebar grid-2
<xsl:if test="not(title)"> notitle</xsl:if>
</xsl:attribute>
<xsl:if test="@channel = 'users'">
@@ -729,7 +729,7 @@ div.body-sidebar { width: 100%; }
<xsl:with-param name="channel">devel</xsl:with-param>
<xsl:with-param name="lang" select="@lang"/>
</xsl:call-template>
-<div id="container" class="body"><div class="content"><script type="text/javascript">
+<div id="container" class="body"><div><script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#tutorials').jcarousel({
wrap: 'circular'
@@ -748,8 +748,8 @@ div.body-sidebar { width: 100%; }
<li><a href="gnome-devel-demos/unstable/" title="Message Board"><img src="images/tutorial/message-board.png"></img></a></li>
<li><a href="gnome-devel-demos/unstable/" title="Message Board"><img src="images/tutorial/magic-mirror.png"/></a></li>
</ul>
- </div><div class="container_16">
-<div class="grid_12">
+ </div><div class="container">
+<div class="grid-4">
<h2><xsl:call-template name="gettext"><xsl:with-param name="lang" select="@lang"/><xsl:with-param name="msgid" select="'getting-started'"/></xsl:call-template></h2>
@@ -837,7 +837,7 @@ div.body-sidebar { width: 100%; }
</div>
</div>
-<div id="api-doc-box" class="grid_4 subtle_box">
+<div id="api-doc-box" class="grid-2 subtle_box">
<h2><xsl:call-template name="gettext"><xsl:with-param name="lang" select="@lang"/><xsl:with-param name="msgid" select="'api-documentation'"/></xsl:call-template></h2>
<form role="search" method="get" id="searchform" action="/symbols/"><div>
<label class="hidden" for="q">Search:
@@ -898,7 +898,7 @@ GStreamer <a href="http://www.gstreamer.net/documentation/";>C</a>, <a href="gstr
<xsl:with-param name="channel">devel</xsl:with-param>
</xsl:call-template>
<div id="container" class="two_columns">
- <div class="container_12">
+ <div class="container">
<div class="page_title"><h1 class="title">
<xsl:call-template name="gettext"><xsl:with-param name="lang"
select="$lang"/><xsl:with-param name="msgid"
@@ -1015,7 +1015,7 @@ GStreamer <a href="http://www.gstreamer.net/documentation/";>C</a>, <a href="gstr
<xsl:with-param name="channel">devel</xsl:with-param>
</xsl:call-template>
<div id="container" class="two_columns">
- <div class="container_12">
+ <div class="container">
<div class="page_title"><h1 class="title">Deprecated API References</h1></div>
<ul>
<xsl:for-each select="index[ lang=$lang]//document">
diff --git a/data/xslt/heading.xsl b/data/xslt/heading.xsl
index 6c80790..8e69050 100644
--- a/data/xslt/heading.xsl
+++ b/data/xslt/heading.xsl
@@ -34,8 +34,8 @@
<!-- header -->
- <div id="header" class="container_12">
- <div id="logo" class="grid_3">
+ <div class="container">
+ <div id="logo" class="grid-2">
<h1><a title="Go to home page" href="/"><img alt="GNOME: The Free Software Desktop Project">
<xsl:attribute name="src">
<xsl:choose>
@@ -44,7 +44,7 @@
</xsl:choose>
</xsl:attribute></img></a></h1>
</div>
- <div id="top_bar" class="grid_9">
+ <div id="top_bar" class="grid-4">
<div class="left">
<div class="menu-globalnav-container"><ul id="menu-globalnav" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-6">
@@ -116,6 +116,8 @@ $('#s').autocomplete('/symbols/lookup/',
<link rel="stylesheet" type="text/css" media="all"
href="http://www.gnome.org/wp-content/themes/gnome-grass/style.css"; />
<link rel="stylesheet" type="text/css" media="all" href="/skin/lgo2010.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="/skin/foldy960.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="/skin/lgo2013.css"/>
<!-- XXX <link media="print" rel="stylesheet" type="text/css" href="/skin/print.css"/> -->
<link rel="icon" type="image/png" href="/skin/gnome-16.png"/>
<link rel="SHORTCUT ICON" type="image/png" href="/skin/gnome-16.png"/>
@@ -132,9 +134,9 @@ $('#s').autocomplete('/symbols/lookup/',
<div class="clearfix"></div>
<div id="footer_grass"> Â </div>
<div id="footer">
- <div class="container_12">
- <div class="links grid_9">
- <div class="menu-footer-1-container"><ul id="menu-footer-1" class="menu"><li id="menu-item-88" class="menu-item menu-item-type-custom menu-item-home menu-item-88"><a href="http://www.gnome.org/";>The GNOME Project</a>
+ <div class="container">
+ <div class="links grid-4">
+ <div class=""><ul id="menu-footer-1" class="menu"><li id="menu-item-88" class="menu-item menu-item-type-custom menu-item-home menu-item-88"><a href="http://www.gnome.org/";>The GNOME Project</a>
<ul class="sub-menu">
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-89"><a href="http://www.gnome.org/about/";>About Us</a></li>
<li id="menu-item-90" class="menu-item menu-item-type-custom menu-item-90"><a href="http://www.gnome.org/get-involved/";>Get Involved</a></li>
@@ -145,7 +147,7 @@ $('#s').autocomplete('/symbols/lookup/',
</ul>
</li>
</ul></div>
-<div class="menu-footer-2-container"><ul id="menu-footer-2" class="menu"><li id="menu-item-99" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-20 current_page_item menu-item-99"><a href="#">Resources</a>
+<div class=""><ul id="menu-footer-2" class="menu"><li id="menu-item-99" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-20 current_page_item menu-item-99"><a href="#">Resources</a>
<ul class="sub-menu">
<li><a href="http://library.gnome.org";>Documentation</a></li>
<li><a href="http://live.gnome.org";>Wiki</a></li>
@@ -156,7 +158,7 @@ $('#s').autocomplete('/symbols/lookup/',
<li><a href="http://live.gnome.org/Jhbuild";>Build Tool</a></li>
</ul>
</li>
-</ul></div><div class="menu-footer-4-container"><ul id="menu-footer-4" class="menu"><li id="menu-item-104" class="menu-item menu-item-type-custom menu-item-104"><a href="http://www.gnome.org/news/";>News</a>
+</ul></div><div class=""><ul id="menu-footer-4" class="menu"><li id="menu-item-104" class="menu-item menu-item-type-custom menu-item-104"><a href="http://www.gnome.org/news/";>News</a>
<ul class="sub-menu">
<li><a href="http://www.gnome.org/start/stable";>Latest Release</a></li>
<li><a href="http://planet.gnome.org";>Planet GNOME</a></li>
@@ -167,15 +169,16 @@ $('#s').autocomplete('/symbols/lookup/',
</ul>
</li>
</ul></div></div>
- <div class="links grid_3 right">
+ <div class="links grid-2">
<div><ul class="menu available_languages"><li><strong>This website is available in many languages</strong><ul class="sub-menu"><li><a href="/languages" title="Switching Language">Switch Language</a></li></ul></li></ul>
<script type="text/javascript" src="/js/language.js" />
- </div> </div>
-
+ </div>
+ </div>
+ <div class="clear"></div>
<!-- footnotes -->
- <div id="footnotes" class="grid_9">
+ <div id="footnotes" class="grid-full">
Copyright  2005â2012 <strong class="gnome_logo">The GNOME Project</strong><br />
<small>Optimised for standards. Hosted by <a href="http://redhat.com";>Red Hat</a>.</small>
</div>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
