[extensions-web/theme/gnome-grass/2016: 1/3] theme: synchronized with latest gnome-grass wp theme.
- From: Yuri Konotopov <ykonotopov src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [extensions-web/theme/gnome-grass/2016: 1/3] theme: synchronized with latest gnome-grass wp theme.
- Date: Sat, 5 Nov 2016 16:15:12 +0000 (UTC)
commit 8655964ed1dfd360993eb2748ef3990eb68f730d
Author: Yuri Konotopov <ykonotopov gnome org>
Date: Sat Nov 5 19:08:33 2016 +0300
theme: synchronized with latest gnome-grass wp theme.
Added new logo based on official GNOME logo.
Added dynamic menu generation via custom context processor. Will help with
site localization later.
Fixed some formatting issues.
Removed "beta" status - it's in beta for years already.
Fixes: https://bugzilla.gnome.org/show_bug.cgi?id=665447
sweettooth/context_processors.py | 21 +
sweettooth/settings.py | 1 +
sweettooth/static/css/960.css | 405 ++++++++
sweettooth/static/css/fonts.css | 13 +-
sweettooth/static/css/reset.css | 2 +-
sweettooth/static/css/review.css | 14 +-
sweettooth/static/css/style.css | 994 ++++++++++++++++++++
sweettooth/static/css/sweettooth.css | 444 +---------
sweettooth/static/css/text.css | 111 +++
sweettooth/static/fonts/Cantarell-Bold.otf | Bin 0 -> 51840 bytes
sweettooth/static/fonts/Cantarell-Regular.otf | Bin 0 -> 47828 bytes
.../{footer_art => footer_arts}/applications.png | Bin 29764 -> 29764 bytes
sweettooth/static/images/gnome-logo-extensions.png | Bin 0 -> 15257 bytes
sweettooth/static/images/top_bar-bg.png | Bin 0 -> 185 bytes
sweettooth/static/images/top_bar-item-bg.png | Bin 0 -> 190 bytes
sweettooth/static/images/top_bar-item-hover-bg.png | Bin 0 -> 187 bytes
sweettooth/templates/base.html | 110 ++-
17 files changed, 1635 insertions(+), 480 deletions(-)
---
diff --git a/sweettooth/context_processors.py b/sweettooth/context_processors.py
new file mode 100644
index 0000000..34d94ff
--- /dev/null
+++ b/sweettooth/context_processors.py
@@ -0,0 +1,21 @@
+def navigation(request):
+ return {
+ 'global_menu': [
+ {
+ 'id': 'extensions-index',
+ 'name': 'Extensions'
+ },
+ {
+ 'id': 'extensions-upload-file',
+ 'name': 'Add yours'
+ },
+ {
+ 'id': 'extensions-local',
+ 'name': 'Installed extensions'
+ },
+ {
+ 'id': 'extensions-about',
+ 'name': 'About'
+ }
+ ]
+ }
diff --git a/sweettooth/settings.py b/sweettooth/settings.py
index 4aa779c..ade561d 100644
--- a/sweettooth/settings.py
+++ b/sweettooth/settings.py
@@ -93,6 +93,7 @@ TEMPLATES = [
"django.contrib.messages.context_processors.messages",
"sweettooth.review.context_processors.n_unreviewed_extensions",
"sweettooth.auth.context_processors.login_form",
+ "sweettooth.context_processors.navigation",
],
'debug': DEBUG,
},
diff --git a/sweettooth/static/css/960.css b/sweettooth/static/css/960.css
new file mode 100644
index 0000000..8b5101c
--- /dev/null
+++ b/sweettooth/static/css/960.css
@@ -0,0 +1,405 @@
+/*
+ 960 Grid System ~ Core CSS.
+ Learn more ~ http://960.gs/
+
+ Licensed under GPL and MIT.
+*/
+
+/* `Containers
+----------------------------------------------------------------------------------------------------*/
+
+.container_12,
+.container_16 {
+ margin-left: auto;
+ margin-right: auto;
+ width: 960px;
+}
+
+/* `Grid >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12,
+.grid_13,
+.grid_14,
+.grid_15,
+.grid_16 {
+ display: inline;
+ float: left;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.container_12 .grid_3,
+.container_16 .grid_4 {
+ width: 220px;
+}
+
+.container_12 .grid_6,
+.container_16 .grid_8 {
+ width: 460px;
+}
+
+.container_12 .grid_9,
+.container_16 .grid_12 {
+ width: 700px;
+}
+
+.container_12 .grid_12,
+.container_16 .grid_16 {
+ width: 940px;
+}
+
+/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+ margin-left: 0;
+}
+
+.omega {
+ margin-right: 0;
+}
+
+/* `Grid >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .grid_1 {
+ width: 60px;
+}
+
+.container_12 .grid_2 {
+ width: 140px;
+}
+
+.container_12 .grid_4 {
+ width: 300px;
+}
+
+.container_12 .grid_5 {
+ width: 380px;
+}
+
+.container_12 .grid_7 {
+ width: 540px;
+}
+
+.container_12 .grid_8 {
+ width: 620px;
+}
+
+.container_12 .grid_10 {
+ width: 780px;
+}
+
+.container_12 .grid_11 {
+ width: 860px;
+}
+
+/* `Grid >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .grid_1 {
+ width: 40px;
+}
+
+.container_16 .grid_2 {
+ width: 100px;
+}
+
+.container_16 .grid_3 {
+ width: 160px;
+}
+
+.container_16 .grid_5 {
+ width: 280px;
+}
+
+.container_16 .grid_6 {
+ width: 340px;
+}
+
+.container_16 .grid_7 {
+ width: 400px;
+}
+
+.container_16 .grid_9 {
+ width: 520px;
+}
+
+.container_16 .grid_10 {
+ width: 580px;
+}
+
+.container_16 .grid_11 {
+ width: 640px;
+}
+
+.container_16 .grid_13 {
+ width: 760px;
+}
+
+.container_16 .grid_14 {
+ width: 820px;
+}
+
+.container_16 .grid_15 {
+ width: 880px;
+}
+
+/* `Prefix Extra Space >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .prefix_3,
+.container_16 .prefix_4 {
+ padding-left: 240px;
+}
+
+.container_12 .prefix_6,
+.container_16 .prefix_8 {
+ padding-left: 480px;
+}
+
+.container_12 .prefix_9,
+.container_16 .prefix_12 {
+ padding-left: 720px;
+}
+
+/* `Prefix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .prefix_1 {
+ padding-left: 80px;
+}
+
+.container_12 .prefix_2 {
+ padding-left: 160px;
+}
+
+.container_12 .prefix_4 {
+ padding-left: 320px;
+}
+
+.container_12 .prefix_5 {
+ padding-left: 400px;
+}
+
+.container_12 .prefix_7 {
+ padding-left: 560px;
+}
+
+.container_12 .prefix_8 {
+ padding-left: 640px;
+}
+
+.container_12 .prefix_10 {
+ padding-left: 800px;
+}
+
+.container_12 .prefix_11 {
+ padding-left: 880px;
+}
+
+/* `Prefix Extra Space >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .prefix_1 {
+ padding-left: 60px;
+}
+
+.container_16 .prefix_2 {
+ padding-left: 120px;
+}
+
+.container_16 .prefix_3 {
+ padding-left: 180px;
+}
+
+.container_16 .prefix_5 {
+ padding-left: 300px;
+}
+
+.container_16 .prefix_6 {
+ padding-left: 360px;
+}
+
+.container_16 .prefix_7 {
+ padding-left: 420px;
+}
+
+.container_16 .prefix_9 {
+ padding-left: 540px;
+}
+
+.container_16 .prefix_10 {
+ padding-left: 600px;
+}
+
+.container_16 .prefix_11 {
+ padding-left: 660px;
+}
+
+.container_16 .prefix_13 {
+ padding-left: 780px;
+}
+
+.container_16 .prefix_14 {
+ padding-left: 840px;
+}
+
+.container_16 .prefix_15 {
+ padding-left: 900px;
+}
+
+/* `Suffix Extra Space >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .suffix_3,
+.container_16 .suffix_4 {
+ padding-right: 240px;
+}
+
+.container_12 .suffix_6,
+.container_16 .suffix_8 {
+ padding-right: 480px;
+}
+
+.container_12 .suffix_9,
+.container_16 .suffix_12 {
+ padding-right: 720px;
+}
+
+/* `Suffix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .suffix_1 {
+ padding-right: 80px;
+}
+
+.container_12 .suffix_2 {
+ padding-right: 160px;
+}
+
+.container_12 .suffix_4 {
+ padding-right: 320px;
+}
+
+.container_12 .suffix_5 {
+ padding-right: 400px;
+}
+
+.container_12 .suffix_7 {
+ padding-right: 560px;
+}
+
+.container_12 .suffix_8 {
+ padding-right: 640px;
+}
+
+.container_12 .suffix_10 {
+ padding-right: 800px;
+}
+
+.container_12 .suffix_11 {
+ padding-right: 880px;
+}
+
+/* `Suffix Extra Space >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .suffix_1 {
+ padding-right: 60px;
+}
+
+.container_16 .suffix_2 {
+ padding-right: 120px;
+}
+
+.container_16 .suffix_3 {
+ padding-right: 180px;
+}
+
+.container_16 .suffix_5 {
+ padding-right: 300px;
+}
+
+.container_16 .suffix_6 {
+ padding-right: 360px;
+}
+
+.container_16 .suffix_7 {
+ padding-right: 420px;
+}
+
+.container_16 .suffix_9 {
+ padding-right: 540px;
+}
+
+.container_16 .suffix_10 {
+ padding-right: 600px;
+}
+
+.container_16 .suffix_11 {
+ padding-right: 660px;
+}
+
+.container_16 .suffix_13 {
+ padding-right: 780px;
+}
+
+.container_16 .suffix_14 {
+ padding-right: 840px;
+}
+
+.container_16 .suffix_15 {
+ padding-right: 900px;
+}
+
+/* `Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+
+/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
+
+.clearfix:after {
+ clear: both;
+ content: ' ';
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+
+.clearfix {
+ display: inline-block;
+}
+
+* html .clearfix {
+ height: 1%;
+}
+
+.clearfix {
+ display: block;
+}
\ No newline at end of file
diff --git a/sweettooth/static/css/fonts.css b/sweettooth/static/css/fonts.css
index 661bfbb..e0349cf 100644
--- a/sweettooth/static/css/fonts.css
+++ b/sweettooth/static/css/fonts.css
@@ -1,3 +1,12 @@
+@font-face {
+ font-family: 'Cantarell';
+ src: local('Cantarell'), local('Cantarell Regular'),
+ url(../fonts/Cantarell-Regular.otf);
+}
-@import url("https://fonts.googleapis.com/css?family=Copse";);
-@import url("https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700,700italic";);
+@font-face {
+ font-family: 'Cantarell';
+ font-weight: bold;
+ src: local('Cantarell'), local('Cantarell Bold'), local('Cantarell-Bold'),
+ url(../fonts/Cantarell-Bold.otf);
+}
diff --git a/sweettooth/static/css/reset.css b/sweettooth/static/css/reset.css
index fc13208..11a1387 100644
--- a/sweettooth/static/css/reset.css
+++ b/sweettooth/static/css/reset.css
@@ -1 +1 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,textarea{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
diff --git a/sweettooth/static/css/review.css b/sweettooth/static/css/review.css
index 131e3cd..4956cda 100644
--- a/sweettooth/static/css/review.css
+++ b/sweettooth/static/css/review.css
@@ -1,13 +1,21 @@
@import url("pygments.css");
-.maxwidth {
+#container, .container_12, .maxwidth {
width: auto !important;
margin: 0 1em;
}
-#gnome_header .maxwidth {
- margin-left: 150px;
+#header {
+ margin: 20px 1em 0;
+}
+
+#top_bar {
+ float: right;
+}
+
+.extension {
+ margin-left: 0;
}
#files table {
diff --git a/sweettooth/static/css/style.css b/sweettooth/static/css/style.css
new file mode 100644
index 0000000..c4dd847
--- /dev/null
+++ b/sweettooth/static/css/style.css
@@ -0,0 +1,994 @@
+/*
+Theme Name: GNOME Grass
+Theme URI: http://gnome.org/
+Author: Vinicius Depizzol <vdepizzol gmail com>
+Description: The original theme for the GNOME Project website.
+
+*/
+
+
+@import url("reset.css");
+@import url("text.css");
+@import url("960.css");
+@import url("sweettooth.css");
+
+
+
+
+
+/* Base information */
+/* ========================================================================== */
+
+html {
+ background: #fff url(../images/html-bg.png) 0 10px repeat-x;
+}
+body {
+
+}
+a {
+ color: #204a87;
+}
+a:hover {
+ color: #3465a4;
+}
+a:visited {
+ color: #5d396e;
+}
+.left {
+ float: left;
+}
+.right {
+ float: right;
+}
+.hidden {
+ display: none;
+}
+.maxwidth {
+ width: 940px;
+ margin: 0 auto;
+}
+.sanewidth {
+ width: 780px;
+ margin: 0 auto;
+}
+
+
+
+/* Accessibility access */
+/* ========================================================================== */
+
+
+
+#accessibility_access {
+ position: absolute;
+ left: 0;
+ /* Not visible by default? */
+ top: -200px;
+}
+
+
+
+/* Global Domain Bar */
+/* ========================================================================== */
+
+
+
+#global_domain_bar {
+ background: #fff;
+ height: 10px;
+}
+#global_domain_bar .maxwidth {
+ position: relative;
+}
+
+/* Tab */
+
+#global_domain_bar .tab {
+ background: #fff;
+ position: absolute;
+ right: 0;
+ float: right;
+ padding: 6px 8px;
+ font-size: 12px;
+ line-height: 16px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ -moz-box-shadow: 0 4px 2px -2px #8fb3d9;
+ -webkit-box-shadow: 0 4px 2px -2px #8fb3d9;
+ box-shadow: 0 4px 2px -2px #8fb3d9;
+ white-space: nowrap;
+}
+#global_domain_bar .tab a.root {
+ color: #555753 !important;
+ font-weight: bold;
+ text-decoration: none;
+ background: #fff url(../images/favicon.png) 0 0 no-repeat;
+ padding-left: 18px;
+ border-right: 1px solid #ccc;
+ padding-right: 6px;
+ margin-right: 3px;
+}
+#global_domain_bar .tab a.root:last-child {
+ border-right: 0;
+ padding-right: 0;
+ margin-right: 0;
+ padding-bottom: 3px;
+}
+#global_domain_bar .tab a.root:hover {
+ text-decoration: underline;
+}
+
+
+/* Header */
+/* ========================================================================== */
+
+
+
+#header {
+ margin: 20px auto 0;
+}
+#header img {
+ vertical-align: middle;
+ float: left;
+ margin-right: 10px;
+}
+#header #logo {
+ float: left;
+}
+#header #logo h1 {
+ margin: 0;
+}
+#header #logo img {
+ -webkit-transition: opacity 200ms ease-out;
+ -moz-transition: opacity 200ms ease-out;
+ transition: opacity 200ms ease-out;
+ opacity: 1;
+ margin-left: -3px;
+ height: 76px;
+ width: 199px;
+}
+#header #logo img:hover {
+ opacity: 0.85;
+}
+
+
+
+/* Top bar */
+/* ========================================================================== */
+
+
+
+#top_bar {
+ background: #2e3436 url("../images/top_bar-bg.png") top repeat-x;
+ padding: 8px 0;
+ margin-top: 23px;
+ font-size: 13px;
+ line-height: normal;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+#top_bar ul {
+ list-style: none;
+ margin: 0;
+ padding: 0 5px;
+}
+#top_bar ul li {
+ display: inline;
+ margin: 0 5px 0 0;
+}
+#top_bar a {
+ color: #fff;
+ text-decoration: none;
+ padding: 4px 8px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ outline: 0;
+ -webkit-transition: background 100ms linear;
+ -moz-transition: background 100ms linear;
+ transition: background 100ms linear;
+ text-shadow: 0 1px 0 #000;
+}
+#top_bar a:hover {
+ background: #64696d;
+ background: rgba(100%, 100%, 100%, 0.2);
+}
+#top_bar a:focus {
+ background: rgba(100%, 100%, 100%, 0.15);
+}
+#top_bar a:active, #top_bar li.current-menu-item a, #top_bar li.current-page-ancestor a {
+ background: #1c2021 url("../images/top_bar-item-bg.png") top repeat-x;
+ -moz-box-shadow: inset 0 -1px 0 rgba(100%,100%,100%, 0.4), inset 0 1px 3px rgba(0,0,0,0.4);
+ -webkit-box-shadow: inset 0 -1px 0 rgba(100%,100%,100%, 0.4), inset 0 1px 3px rgba(0,0,0,0.4);
+ box-shadow: inset 0 -1px 0 rgba(100%,100%,100%, 0.4), inset 0 1px 3px rgba(0,0,0,0.4);
+}
+#top_bar li.selected a {
+ font-weight: bold;
+}
+#top_bar li a span.home {
+ background: url("../images/top_bar-item-home.png") no-repeat;
+ padding-left: 18px;
+}
+#top_bar #main_search {
+ text-align: right;
+}
+#top_bar input {
+ margin: -8px 0 -8px -8px;
+ line-height: 22px;
+ width: 150px;
+ border: 0;
+ font: inherit;
+ color: inherit;
+ padding: 8px 8px 8px 28px;
+ background: transparent url(../images/search-icon.png) 8px center no-repeat;
+ color: #fff;
+ border-left: 1px solid rgba(100%,100%,100%,0.3);
+ outline: none;
+}
+#top_bar input.placeholder {
+ color: #CCC;
+}
+#top_bar input:focus {
+ background-color: rgba(100%,100%,100%,0.1);
+ -moz-border-radius-topright: 5px;
+ -moz-border-radius-bottomright: 5px;
+ -webkit-border-top-right-radius: 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ border-top-right-radius: 6px;
+ border-bottom-right-radius: 6px;
+}
+
+
+/* ========================================================================== */
+/* Page Title */
+/* ========================================================================== */
+
+
+
+.page_title {
+ margin: 10px 10px 20px;
+ border-bottom: 1px solid #d3d7cf;
+}
+.page_title .breadcrumb {
+ color: #888a85;
+}
+.page_title .breadcrumb a {
+ color: inherit;
+ text-decoration: none;
+}
+.page_title .breadcrumb a:hover {
+ text-decoration: underline;
+}
+.page_title h1 {
+ margin: 0 0 6px;
+ font-size: 37px;
+ text-shadow: 0 1px 0 #fff;
+ line-height: normal;
+ letter-spacing: -0.05em;
+}
+.page_title h1 a {
+ text-decoration: none;
+ color: inherit;
+}
+.page_title h1 a:hover {
+ text-decoration: underline;
+}
+.page_title.with_subpages_list {
+ display: table-row;
+}
+.page_title.with_subpages_list h1 {
+ display: table-cell;
+ width: 100%;
+}
+
+/* -> subpages list */
+
+/*
+ * This is not used right now, but allows to put links by the side of
+ * the title of the page.
+ */
+
+.page_title .subpages_list {
+ list-style: none;
+ clear: left;
+ margin: 0;
+ padding-bottom: 4px;
+ display: table-cell;
+ text-align: right;
+ white-space: nowrap;
+ vertical-align: bottom;
+}
+.page_title .subpages_list li {
+ display: inline;
+ padding: 0;
+ margin: 0 0 0 0.5em;
+}
+.page_title .subpages_list li a {
+ color: inherit;
+ text-decoration: none;
+ padding: 3px 6px;
+}
+.page_title .subpages_list li a:hover {
+ outline: 0;
+ background: red;
+ background: #dde5ef url(../images/focus-bg.png) top repeat-x;
+ border: 1px solid #bbc5d5;
+ padding: 2px 5px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+.page_title .subpages_list li a:active {
+ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+}
+.page_title .subpages_list li.current_page_item a {
+ font-weight: bold;
+}
+
+
+
+/* News Title */
+/* ========================================================================== */
+
+
+
+.news_title h1 {
+ margin-top: 0;
+ color: #333;
+ font-weight: normal;
+ font-size: 32px;
+ line-height: 100%;
+ letter-spacing: -0.04em;
+}
+.news_title .date {
+ margin: 0;
+ color: #3465a4;
+}
+
+
+
+
+
+/* Container */
+/* ========================================================================== */
+
+
+
+#container {
+ padding-top: 20px;
+ color: #555;
+ width: 960px;
+ margin: auto;
+ min-height: 240px;
+}
+
+/*
+ * this is basically used to force specific elements not to use
+ * grid_* classes
+ */
+#container .page_title, #container .content, #container .sidebar {
+ display: inline;
+ float: left;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#container .content, #container .page_title {
+ width: 940px;
+}
+#container.two_columns .content {
+ width: 700px;
+}
+#container.two_columns .content.without_sidebar {
+ width: 940px;
+}
+#container.two_columns .sidebar {
+ width: 220px;
+}
+
+
+
+/* Content specs */
+/* ========================================================================== */
+
+
+
+/*
+ * -> Call to Action boxes
+ *
+ *
+ */
+
+.action_box {
+ background: #fffae5 url(../images/action_box-bg.png) repeat-x bottom;
+ -moz-box-shadow: 0 1px 2px #e5d693, inset 0 1px rgba(100%, 100%, 100%, 0.4);
+ -webkit-box-shadow: 0 1px 2px #e5d693, inset 0 1px rgba(100%, 100%, 100%, 0.4);
+ box-shadow: 0 1px 2px #e5d693, inset 0 1px rgba(100%, 100%, 100%, 0.4);
+ padding: 10px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ border: 1px solid #e7d172;
+}
+
+
+/*
+ * -> Subtle boxes
+ *
+ * .subtle_box can be used inside grid classes to make simple box delimiters
+ * (without grids inside of it) or as a child of container class to allow columns on it
+ *
+ * Examples:
+ *
+ * <div class="grid_3">
+ * <div class="subtle_box">Lorem ipsum dolor sit amet</div>
+ * </div>
+ *
+ * <div class="container_12">
+ * <div class="subtle_box">
+ * <div class="grid_3 alpha">(...)</div>
+ * <div class="grid_9 omega">(...)</div>
+ * </div>
+ * </div>
+ *
+ */
+
+.subtle_box {
+ margin: 0 0 20px;
+ padding: 9px;
+ background: #fff;
+ border: 1px solid #d3d7cf;
+ border-color: rgba(0,0,0,0.15);
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+ -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.subtle_box h4 {
+ margin: 0 0 10px;
+}
+
+/*
+ * --> Navigation list
+ *
+ * Navigation lists are used to generate a list of links which are in the same
+ * hierarchical level of the current page. Use it preferably in a grid_3 element.
+ *
+ * Don't forget to highlight with <li class="current_page_item"> the current page.
+ *
+ */
+
+.navigation_list {
+ background: #fff;
+ margin: 0 0 20px;
+ padding: 0;
+ border: 1px solid #d3d7cf;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ list-style: none;
+ font-size: small;
+ -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 2px #fff;
+ -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 2px #fff;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 2px #fff;
+}
+.navigation_list > li {
+ margin: 0;
+ background: #f5f5f4;
+ border: 1px solid #fff;
+ border-bottom-color: #d3d7cf;
+}
+.navigation_list > li.current_page_item,
+.navigation_list > li a.navTreeCurrentItem {
+ background: #dde5ef url(../images/focus-bg.png) top repeat-x;
+}
+.navigation_list li:first-child {
+ -moz-border-radius-topleft: 5px;
+ -moz-border-radius-topright: 5px;
+ -webkit-border-top-left-radius: 5px;
+ -webkit-border-top-right-radius: 5px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+.navigation_list li:last-child {
+ border-bottom: 0;
+}
+.navigation_list li:last-child {
+ -moz-border-radius-bottomleft: 5px;
+ -moz-border-radius-bottomright: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+.navigation_list a {
+ padding: 6px 9px;
+ color: inherit;
+ text-decoration: none;
+ font-weight: bold;
+ display: block;
+ text-shadow: white 0 1px 0;
+}
+.navigation_list a.without_icon {
+ padding-left: 37px;
+}
+.navigation_list a:hover {
+ color: #3465a4;
+ background: rgba(100%,100%,100%,0.5);
+ /*-webkit-transition: all 200ms linear;*/
+}
+.navigation_list a:focus {
+ background: #dde5ef url(../images/focus-bg.png) top repeat-x;
+ outline: 0;
+ padding: 2px 5px;
+ margin: 3px;
+ border: 1px solid #bbc5d5;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+.navigation_list a.without_icon:focus {
+ padding-left: 33px;
+}
+.navigation_list a img {
+ vertical-align: middle;
+ margin-right: 6px;
+}
+.navigation_list > li ul {
+ background: #fff;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.navigation_list > li ul li {
+ border-top: 1px solid #ececec;
+ margin: 0;
+ padding: 0;
+}
+.navigation_list > li ul li:first-child {
+ border-top: 0;
+}
+.navigation_list > li ul li a {
+ font-weight: normal;
+ padding: 4px 9px;
+ color: #555753;
+}
+.navigation_list > li ul li.current_page_item a {
+ font-weight: bold;
+}
+.navigation_list > li ul li a:focus {
+ padding: 0 5px;
+}
+.navigation_list > li ul {
+ padding-top: 1px;
+}
+
+/* -> Simple List */
+
+.simple_list {
+ margin: 0 0 20px;
+ padding: 0;
+ list-style: none;
+}
+.simple_list li {
+ border: 1px solid #eeeeec;
+ border-left: 0;
+ border-right: 0;
+ padding: 0;
+ margin: 0;
+}
+.simple_list li a {
+ padding: 3px 8px;
+ text-decoration: none;
+ display: block;
+ color: #888a85;
+}
+
+/* -> Iconified Menu */
+
+ul.iconified_menu {
+ list-style: none;
+ margin: 0 0 20px;
+ font-size: small;
+}
+ul.iconified_menu li {
+ margin: 0 0 5px;
+}
+ul.iconified_menu li a {
+ padding: 5px;
+ display: block;
+ text-decoration: none;
+ border: 1px solid transparent;
+ overflow: hidden;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+ul.iconified_menu li a:hover, ul.iconified_menu li a:focus {
+ background: #dde5ef url(../images/focus-bg.png) top repeat-x;
+ outline: 0;
+ border: 1px solid #bbc5d5;
+}
+ul.iconified_menu li a img {
+ float: left;
+ margin-right: 5px;
+}
+
+/* -> Definition Lists */
+
+dl dt {
+ font-weight: 700;
+}
+dl dt a {
+ color: inherit;
+}
+dl dt a:visited {
+ color: #ef8e4f;
+}
+
+/* -> Definition Lists with icons */
+
+/* Icons are defined as 48x48 pixels by default */
+
+dl.icon_list dt, dl.icon_list dd {
+ margin-left: 58px;
+}
+dl.icon_list dt img {
+ float: left;
+ width: 48px;
+ height: 48px;
+ margin: 0 10px 0 -58px;
+}
+
+
+/* -> Action Button */
+
+
+.action_button {
+ display: inline-block;
+ padding: 0 14px;
+ border: 1px solid #ccc;
+ margin-left:20px;
+ margin-right:20px;
+ background: #ececec url(../images/action_button-bg.png) center repeat-x;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ color: #2e3436;
+ text-shadow: 0 1px 0 #fff;
+ text-decoration: none;
+ line-height: 1.8;
+ -webkit-transition: background-position 100ms linear;
+ -moz-transition: background-position 100ms linear;
+ transition: background-position 100ms linear;
+ -moz-box-shadow: inset 0 1px 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 #fff;
+ box-shadow: inset 0 1px 0 #fff;
+ outline: none;
+}
+.action_button:hover {
+ background-position: top;
+ color: #000;
+}
+.action_button:visited {
+ color: inherit;
+}
+.action_button:active {
+ -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
+ -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
+ box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
+ background-position: bottom;
+}
+
+
+
+
+/*
+ * --> News list
+ *
+ * This is initially used in the home page for displaying the news
+ *
+ */
+
+.news_list {
+}
+
+.grid_4.news:first-child {
+ margin-left: 0;
+}
+
+.news_list .news strong {
+ display: block;
+ min-height: 54px;
+}
+
+.news_list .news {
+ margin-bottom: 20px;
+}
+.news_list .news .date {
+ font-family: 'Droid Serif', 'DejaVu Serif', Cambria, Georgia, serif;
+ color: #888a85;
+}
+.news_list .news a {
+ color: #555753;
+ display: block;
+ text-decoration: none;
+}
+.news_list .news a strong {
+ font-size: 18px;
+ color: #000;
+ line-height: 1.5;
+}
+.news_list .news a:hover strong {
+ text-decoration: underline;
+}
+
+.news_list .action_button {
+ float: right;
+ margin-bottom: 0.8em;
+}
+
+/* Page Navigation */
+/* ========================================================================== */
+
+
+
+.page_navigation {
+ margin: 30px auto 0;
+}
+.page_navigation .prev, .page_navigation .next {
+ height: 32px;
+ line-height: 32px;
+}
+.page_navigation a {
+ text-decoration: none;
+ color: inherit;
+}
+.page_navigation a:hover {
+ text-decoration: underline;
+}
+.page_navigation .prev a {
+ float: left;
+ background: url(../images/go-previous.png) top left no-repeat;
+ padding-left: 40px;
+}
+.page_navigation .next a {
+ float: right;
+ background: url(../images/go-next.png) top right no-repeat;
+ padding-right: 40px;
+}
+
+
+
+/* Footer Artwork */
+/* ========================================================================== */
+
+
+
+#footer_art {
+ background: transparent no-repeat;
+ height: 180px;
+ margin-top: 0;
+ clear: left;
+}
+#footer_art.none {
+ height: 30px;
+ margin-top: 0;
+}
+#footer_art.default {
+ background-image: url(../images/footer_arts/default.png);
+}
+
+
+/* Footer Grass */
+/* ========================================================================== */
+
+#footer_grass {
+ background: url(../images/grass.png) top center repeat-x;
+ height: 39px;
+ margin-top: -33px;
+}
+
+
+/* Footer */
+/* ========================================================================== */
+
+
+
+#footer {
+ clear: left;
+ /*background: #d3d7cf url(images/grass.png) top center repeat-x;*/
+ background: #d3d7cf;
+ color: #555753;
+ padding: 20px 0;
+}
+#footer div.links > div > ul > li {
+ float: left;
+ margin: 0 40px 10px 0;
+}
+#footer div.links div a, #footer div.links div strong {
+ display: block;
+ text-decoration: none;
+}
+#footer div.links div a:hover, #footer div.links div a:focus {
+ text-decoration: underline;
+}
+#footer div.language {
+ float: right;
+}
+#footer div.language a {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ width: 220px;
+ height: 110px;
+ background: url(../images/footer-map.png) center center no-repeat;
+ outline: none;
+ text-decoration: none;
+}
+#footer div.language a span {
+ background: #f4f4f4;
+ background: -moz-linear-gradient(bottom, #ececec, #fff);
+ background: -webkit-linear-gradient(bottom, #ececec, #fff);
+ background: linear-gradient(bottom, #ececec, #fff);
+ padding: 4px 12px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+ box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+ color: #333;
+}
+
+#footer div.language a span.loading {
+ display: none;
+}
+#footer div.language a.loading {
+ cursor: wait !important;
+}
+#footer div.language a.loading span.switch {
+ display: none;
+}
+#footer div.language a.loading span.loading {
+ display: inline-block;
+}
+#footer div.language a:hover span.switch {
+ background: #fff;
+ background: -moz-linear-gradient(bottom, #fff, #fff);
+}
+
+#footer div.icons {
+ float: right;
+}
+#footer div.icons a {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ width: 220px;
+ height: 110px;
+ outline: none;
+ text-decoration: none;
+}
+
+#footer ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+#footer ul li {
+ margin: 0;
+ padding: 0;
+}
+#footer ul.menu > li > a {
+ font-weight: bold;
+}
+#footer .links a {
+ color: inherit;
+ -webkit-transition: background-color 100ms ease-in;
+ -moz-transition: background-color 100ms ease-in;
+ transition: background-color 100ms ease-in;
+}
+#footer .links a:focus {
+ background: #ececec;
+ padding: 1px 3px;
+ margin: -1px -3px;
+ text-decoration: none !important;
+ outline: 0;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+#footer #footnotes {
+ margin-top: 20px;
+}
+#footer #footnotes small {
+ font-size: 88%;
+}
+#footer #footnotes a {
+ color: inherit;
+}
+
+
+/* Language Selector */
+/* ========================================================================== */
+
+
+#language_selector {
+ display: none;
+ /* poor wanda the fish */
+ background: #555753 url(../images/language-selector-bg.png) top center repeat-x;
+ clear: left;
+ overflow: hidden;
+}
+#language_selector .container_12 {
+ background: url(../images/language-selector-wanda-bg.png) right 60px no-repeat;
+ overflow: hidden;
+}
+#language_selector h3 {
+ color: #f57900;
+ margin: 60px 0 35px;
+}
+#language_selector ul {
+ list-style: none;
+ -moz-column-count: 4;
+ -webkit-column-count: 4;
+ column-count: 4;
+ margin: 10px 0 40px;
+ color: #fff;
+}
+#language_selector ul li {
+ margin: 0;
+ padding: 0;
+ margin: 0 0 7px;
+}
+#language_selector ul li.active {
+ font-weight: bold;
+}
+#language_selector ul a {
+ color: #fff;
+ text-decoration: none;
+}
+#language_selector ul a:hover {
+ text-decoration: underline;
+}
+#language_selector .help_us_translating {
+ color: #d3d7cf;
+ margin: 129px 0 30px;
+}
+#language_selector .help_us_translating a {
+ color: #fff;
+}
+
+/* Separators */
+/* ========================================================================== */
+
+hr {
+ border: 0 #ccc solid;
+ border-top-width: 1px;
+ clear: both;
+ height: 0;
+ margin: 40px 0;
+}
+
+hr.top_shadow,
+hr.bottom_shadow {
+ height: 25px;
+ background: url(../images/hr-shadow.png) no-repeat bottom;
+ background-size: contain;
+ border: 0;
+}
+hr.bottom_shadow {
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 504f54a..42541e7 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -1,155 +1,23 @@
-
-@import url("reset.css");
-@import url("fonts.css");
@import url("switch.css");
@import url("jquery.rating.css");
-
-/* Base text and layout structure */
+/* Footer Artwork */
/* ========================================================================== */
-body {
- font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif;
- font-size: 14px;
- line-height: 1.6;
- color: #2e3436;
-}
-h1, h2, h3, h4, h5, h6, dt {
- color: #0489b7;
-}
-h1 {
- font-size: 42px;
-}
-h2 {
- font-size: 25px;
-}
-h3, dt {
- font-size: 21px;
- margin: 0.4em 0 0.5em;
- color: #2e3436;
-}
-dt {
- color: #e36615;
-}
-dt a:hover {
- color: #fa7721;
-}
-h4 {
- font-size: 16px;
- color: #ce5c00;
-}
-h5 {
- font-size: 14px;
-}
-h6 {
- font-size: 12px;
-}
-ol {
- list-style:decimal;
-}
-ul {
- list-style:square;
-}
-li {
- margin-left:30px;
-}
-dl,dt,h1,h2,h3,h4,h5,h6,pre,table,address,fieldset {
- margin: 0.8em 0 0.4em;
-}
-p, dd, .action_box, ul, ol {
- margin: 0.4em 0 1em;
-}
-code {
- background: #ececec;
- background: rgba(0,0,0,0.1);
- padding: 1px;
-}
-
-
-/* Base information */
-/* ========================================================================== */
-html {
- background: #fff url(../images/html-bg.png) 0 10px repeat-x;
-}
-a {
- color: #204a87;
-}
-a:hover {
- color: #3465a4;
-}
-a:visited {
- color: #5d396e;
-}
-.left {
- float: left;
-}
-.right {
- float: right;
-}
-.hidden {
- display: none;
-}
-.maxwidth {
- width: 940px;
- margin: 0 auto;
-}
-.clear {
- clear: both;
+#footer_art.applications {
+ background-image: url(../images/footer_arts/applications.png);
}
-/* Fancy hack for off-screen switch widgets
- * on small screen sizes. No math to these numbers,
- * just guesses and trial and error. */
-@media screen and (max-width: 1308px) {
- .maxwidth {
- margin-left: 176px;
- }
-}
/* Global Domain Bar */
/* ========================================================================== */
-
-#global_domain_bar {
- background: #fff;
- height: 10px;
-}
-#global_domain_bar .maxwidth {
- position: relative;
-}
-
-/* Tab */
-
-#global_domain_bar .tab {
- background: #fff;
- position: absolute;
- right: 0;
- float: right;
- padding: 6px 8px;
- font-size: 12px;
- line-height: 16px;
- border-radius: 5px;
- box-shadow: 0 4px 2px -2px #8fb3d9;
- white-space: nowrap;
-}
#global_domain_bar .tab a.root {
- color: #555753 !important;
- font-weight: bold;
- text-decoration: none;
- background: #fff url(../images/favicon.png) 0 0 no-repeat;
- padding-left: 18px;
- border-right: 1px solid #ccc;
- padding-right: 6px;
-}
-#global_domain_bar .tab a.root:last-child {
- border-right: 0;
- padding-right: 0;
-}
-#global_domain_bar .tab a.root:hover {
- text-decoration: underline;
+ margin-right: 0 !important;
}
+
#global_domain_bar .tab a.user {
padding: 2px 14px 2px 4px;
margin: -2px -4px -2px 2px;
@@ -168,10 +36,6 @@ a:visited {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
-#global_domain_bar .tab a:visited {
- color: #204a87;
-}
-
/* User settings */
#global_domain_bar .user_popup:before {
@@ -226,209 +90,6 @@ a:visited {
border: 2px solid #bbbbbb;
}
-
-/* GNOME Header */
-/* ========================================================================== */
-
-#gnome_header {
- margin: 0;
- padding: 6px 0;
-}
-
-#gnome_header h1 {
- margin: 0;
- padding: 20px 0;
- font-size: 25pt;
- line-height: 54px;
- color: #2e3436;
- font-family: "Copse";
- font-weight: normal;
- text-shadow: 0 1px 0 #fff;
- float: left;
-}
-#gnome_header h1 a {
- color: inherit;
- text-decoration: none;
-}
-#gnome_header h1 a img {
- vertical-align: bottom;
-}
-
-#gnome_header .right {
- margin-top: 38px;
-}
-#gnome_header #search_input {
- border: 1px solid #999;
- padding: 4px 28px 4px 9px;
- background: #fff url(../images/search-icon.png) 172px 5px no-repeat;
- width: 160px;
- border-radius: 25px;
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
-}
-#gnome_header #search_input:focus {
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 0 3px #0489b7;
- outline: none;
-}
-
-
-/* Global Navigation */
-/* ========================================================================== */
-
-#globalnav {
- list-style: none;
- display: block;
- float: left;
- margin: 34px 0 16px 20px;
- vertical-align: middle;
-}
-#globalnav li {
- float: left;
- margin: 0;
- padding: 0;
-}
-#globalnav li a {
- text-decoration: none;
- color: inherit;
- display: block;
- padding: 5px 15px;
- font-weight: bold;
- text-shadow: 0 1px 0 #fff;
- outline: none;
- line-height: 22px;
-}
-#globalnav li a:hover {
- color: #000;
-}
-#globalnav li a:active {
- position: relative;
- top: 1px;
-}
-
-#globalnav.main li.main a,
-#globalnav.upload li.upload a,
-#globalnav.local li.local a,
-#globalnav.about li.about a,
-#globalnav li.active a {
- background: #7fa7d4;
- padding: 5px 15px;
- color: #000;
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
- color: #fff;
- border-radius: 5px;
- box-shadow: inset 0 2px 3px -1px #396da9, 0 1px 0 #fff;
- position: relative;
-}
-
-#globalnav.main li.main a:after,
-#globalnav.upload li.upload a:after,
-#globalnav.local li.local a:after,
-#globalnav.about li.about a:after,
-#globalnav li.active a:after {
- content: url(../images/globalnav-arrow.png);
- position: absolute;
- bottom: 0;
- margin-bottom: -11px;
- left: 50%;
- margin-left: -8px;
-}
-
-
-
-
-/* GNOME Container */
-/* ========================================================================== */
-
-
-#gnome_container {
- min-height: 400px;
-}
-
-
-
-/* Footer */
-/* ========================================================================== */
-
-
-/* Footer Artwork */
-
-#footer_art {
- background: transparent no-repeat bottom center;
- height: 180px;
- margin-top: 0;
- clear: left;
-}
-#footer_art.none {
- height: 30px;
- margin-top: 0;
-}
-#footer_art.default {
- background-image: url(../images/footer_art/applications.png);
-}
-
-/* Footer Grass */
-
-#footer_grass {
- background: url(../images/grass.png) top center repeat-x;
- height: 39px;
- margin-top: -33px;
-}
-
-/* Footer */
-
-#footer {
- font-size: 11px;
- line-height: 1.5em;
- clear: left;
- background: #d3d7cf;
- color: #555753;
- padding: 20px 0;
-}
-#footer .links {
- overflow: hidden;
-}
-#footer .links > div > ul > li {
- float: left;
- margin: 0 40px 10px 0;
-}
-#footer .links a,
-#footer .links strong {
- display: block;
- text-decoration: none;
-}
-#footer .links a:hover,
-#footer .links a:focus {
- text-decoration: underline;
-}
-
-#footer ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-#footer ul li {
- margin: 0;
- padding: 0;
-}
-#footer .links > div > ul > li > a {
- font-weight: bold;
-}
-#footer .links a {
- color: inherit;
- -webkit-transition: background-color 100ms ease-in;
- -moz-transition: background-color 100ms ease-in;
- transition: background-color 100ms ease-in;
-}
-
-#footnotes {
- margin-top: 20px;
-}
-#footnotes small {
- font-size: 88%;
-}
-#footnotes a {
- color: inherit;
-}
-
/* Unreviewed Extension Counter */
/* ==================================================================== */
@@ -499,74 +160,6 @@ a:visited {
}
-/* Beta Banner */
-/* ==================================================================== */
-
-.beta-banner {
- -webkit-transform: rotate(-35deg);
- -moz-transform: rotate(-35deg);
- -ms-transform: rotate(-35deg);
- -o-transform: rotate(-35deg);
- transform: rotate(-35deg);
- z-index: -1;
- display: block;
- text-align: center;
- text-transform: uppercase;
- font-family: serif;
- font-size: 1.4em;
- position: absolute;
- width: 200px;
- top: 36px;
- left: -45px;
- border: 1px solid #4e9a06;
- box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
-}
-
-.beta-banner span {
- display: block;
- background-image: linear-gradient(#4e9a06, #73d216);
- background-image: -o-linear-gradient(#4e9a06, #73d216);
- background-image: -ms-linear-gradient(#4e9a06, #73d216);
- background-image: -moz-linear-gradient(#4e9a06, #73d216);
- background-image: -webkit-linear-gradient(#4e9a06, #73d216);
- background-color: #73d216;
- color: white;
- text-shadow: 0px 2px 0 rgba(0, 0, 0, 0.4);
- border-top: 1px solid #73d216;
- border-bottom: 1px solid #a9ef65;
-}
-
-.beta-disclaimer {
- font-size: larger;
- font-weight: bold;
- text-align: center;
-}
-
-
-/* Separators */
-/* ==================================================================== */
-
-hr {
- border: 0;
- height: 1px;
- background: #ccc;
- background: rgba(0, 0, 0, 0.2);
- margin: 20px 0;
-}
-hr.top_shadow,
-hr.bottom_shadow {
- height: 25px;
- background: url(../images/hr-shadow.png) no-repeat bottom;
- background-size: contain;
- border: 0;
-}
-hr.bottom_shadow {
- -moz-transform: rotate(180deg);
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-
/* Paginator, Filtering and Sorting UI */
/* ==================================================================== */
@@ -715,6 +308,7 @@ li.extension:last-child {
padding: 0;
margin-top: 10px;
position: relative;
+ margin-left: 172px;
}
.extension.out-of-date > * {
@@ -821,7 +415,7 @@ li.extension:last-child {
}
.extension .description {
- margin: 0.5em;
+ margin: 0.5em 32px 0.5em 0.5em;
font-size: 1.2em;
overflow: auto;
white-space: pre-line;
@@ -1124,7 +718,6 @@ p.message.warning {
background-color: rgba(255, 255, 200, 0.8);
}
-
/* Forms */
/* ==================================================================== */
@@ -1263,51 +856,32 @@ input[type=submit], button {
}
-/* Super fancy expandy headers that need to die */
+/* Super fancy expandy headers that no longer need to die */
/* ==================================================================== */
.expandy_header {
cursor: pointer;
- background-color: #336C84;
- color: white;
- line-height: 1.5em;
padding-left: 0.5em;
margin-bottom: 0;
margin-top: 10px;
clear: both;
}
-.expandy_header:hover {
- background-color: #447D95;
-}
-
.expandy_header:before {
content: "";
display: block;
float: left;
border-color: transparent;
- border-left-color: white;
+ border-left-color: #0489B7;
border-style: solid;
border-width: .4em;
margin-top: .4em;
width: 0;
- -webkit-transition: -webkit-transform 0.4s ease-in-out;
- -webkit-transform-origin: 25% 50%;
-
- -moz-transition: -moz-transform 0.4s ease-in-out;
- -moz-transform-origin: 25% 50%;
-
- -o-transition: -o-transform 0.4s ease-in-out;
- -o-transform-origin: 25% 50%;
-
transition: transform 0.4s ease-in-out;
transform-origin: 25% 50%;
}
.expandy_header.expanded:before {
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
transform: rotate(90deg);
}
diff --git a/sweettooth/static/css/text.css b/sweettooth/static/css/text.css
new file mode 100644
index 0000000..7c616e0
--- /dev/null
+++ b/sweettooth/static/css/text.css
@@ -0,0 +1,111 @@
+@import url("fonts.css");
+
+/* Main Elements */
+/* ========================================================================== */
+
+
+body {
+ font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.6;
+ color: #2e3436;
+}
+
+body.win {
+ font-family: Verdana, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.6;
+ color: #2e3436;
+}
+
+body.win h1, body.win h2, body.win h3, body.win h4, body.win h5, body.win h6 {
+ font-family: "Trebuchet MS";
+}
+
+h1, h2, h3, h4, h5, h6, dt {
+ color: #0489B7;
+}
+h1 {
+ font-size: 42px;
+}
+h2 {
+ font-size: 25px;
+}
+h3, dt {
+ font-size: 21px;
+ margin: 0.4em 0 0.5em;
+ color: #2E3436;
+}
+dt {
+ color: #E36615;
+}
+dt a:hover {
+ color: #fa7721;
+}
+h4 {
+ font-size: 16px;
+ color: #ce5c00;
+}
+h5 {
+ font-size: 14px;
+}
+h6 {
+ font-size: 12px;
+}
+ol {
+ list-style:decimal;
+}
+ul {
+ list-style:square;
+}
+li {
+ margin-left:30px;
+}
+dl,dt,h1,h2,h3,h4,h5,h6,pre,table,address,fieldset {
+ margin: 0.8em 0 0.4em;
+}
+p, dd, .action_box, ul, ol {
+ margin: 0.4em 0 1em;
+}
+code {
+ background: #ececec;
+ background: rgba(0,0,0,0.1);
+ padding: 1px;
+}
+
+
+/* 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: 12px;
+ line-height: 1.4em;
+}
diff --git a/sweettooth/static/fonts/Cantarell-Bold.otf b/sweettooth/static/fonts/Cantarell-Bold.otf
new file mode 100644
index 0000000..3fb64a8
Binary files /dev/null and b/sweettooth/static/fonts/Cantarell-Bold.otf differ
diff --git a/sweettooth/static/fonts/Cantarell-Regular.otf b/sweettooth/static/fonts/Cantarell-Regular.otf
new file mode 100644
index 0000000..b28baa1
Binary files /dev/null and b/sweettooth/static/fonts/Cantarell-Regular.otf differ
diff --git a/sweettooth/static/images/gnome-logo-extensions.png
b/sweettooth/static/images/gnome-logo-extensions.png
new file mode 100644
index 0000000..581ed31
Binary files /dev/null and b/sweettooth/static/images/gnome-logo-extensions.png differ
diff --git a/sweettooth/static/images/top_bar-bg.png b/sweettooth/static/images/top_bar-bg.png
new file mode 100644
index 0000000..567188c
Binary files /dev/null and b/sweettooth/static/images/top_bar-bg.png differ
diff --git a/sweettooth/static/images/top_bar-item-bg.png b/sweettooth/static/images/top_bar-item-bg.png
new file mode 100644
index 0000000..fbd50fe
Binary files /dev/null and b/sweettooth/static/images/top_bar-item-bg.png differ
diff --git a/sweettooth/static/images/top_bar-item-hover-bg.png
b/sweettooth/static/images/top_bar-item-hover-bg.png
new file mode 100644
index 0000000..bcfe84d
Binary files /dev/null and b/sweettooth/static/images/top_bar-item-hover-bg.png differ
diff --git a/sweettooth/templates/base.html b/sweettooth/templates/base.html
index 31c375c..393b615 100644
--- a/sweettooth/templates/base.html
+++ b/sweettooth/templates/base.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
- <link rel="stylesheet" href="/static/css/sweettooth.css" />
+ <link rel="stylesheet" href="/static/css/style.css" />
<link rel="shortcut icon" href="/static/images/favicon.png" />
<link rel="alternate" type="application/rss+xml"
href="{% url 'extensions-rss-feed' %}" title="Latest extensions in GNOME Shell Extensions" />
@@ -18,6 +18,7 @@
{% block head %} {% endblock %}
</head>
<body>
+ <!-- global gnome.org domain bar -->
<div id="global_domain_bar">
<div class="maxwidth">
<div class="tab">
@@ -40,60 +41,91 @@
</div>
<!-- header -->
- <div id="gnome_header">
- <div class="beta-banner"><span>Beta</span></div>
- <div class="maxwidth">
- <h1><a href="/"><img src="/static/images/foot.png" alt="GNOME" />Extensions</a></h1>
-
- <ul id="globalnav" class="{% block navclass %}{% endblock %}">
- <li class="main"><a href="{% url 'extensions-index' %}">Extensions</a></li>
- <li class="upload"><a href="{% url 'extensions-upload-file' %}">Add yours</a></li>
- <li class="local"><a href="{% url 'extensions-local' %}">Installed extensions</a></li>
- <li class="about"><a href="{% url 'extensions-about' %}">About</a></li>
- </ul>
-
- {% block search-bar %}
- {% endblock %}
-
- <div class="clear"></div>
- </div>
+ <div id="header" class="container_12">
+ <div id="logo" class="grid_3">
+ <h1><a title="GNOME Shell Extensions" href="/"><img
src="/static/images/gnome-logo-extensions.png" alt="GNOME Shell Extensions" /></a></h1>
+ </div>
+ <div id="top_bar" class="grid_9">
+ <div class="left">
+ <ul id="globalnav" class="{% block navclass %}{% endblock %}">
+ {% with request.resolver_match.url_name as url_name %}
+ {% for page in global_menu %}
+ <li class="{% if url_name == page.id %}current_page_item current-menu-item{% endif
%}"><a href="{% url page.id %}">{{page.name}}</a></li>
+ {% endfor %}
+ {% endwith %}
+ </ul>
+ </div>
+ <div class="right">
+ {% block search-bar %}
+ {% endblock %}
+ </div>
+ </div>
</div>
- <div id="gnome_container">
- <div class="maxwidth">
- <div id="content">
- <div id="message_container">
- {% for message in messages %}
- <p class="message {{ message.tags }}">{{ message }}</p>
- {% endfor %}
+ <div class="clearfix"></div>
+
+ <div id="container" class="two_columns">
+ <div class="container_12">
+ <div id="content" class="without_sidebar">
+ <div id="message_container">
+ {% for message in messages %}
+ <p class="message {{ message.tags }}">{{ message }}</p>
+ {% endfor %}
- {% block extra-messages %}
- {% endblock %}
- </div>
- {% block body %}
- {% endblock %}
+ {% block extra-messages %}
+ {% endblock %}
+ </div>
+ {% block body %}
+ {% endblock %}
+ </div>
+
+ <!-- footer artwork -->
+ <div id="footer_art" class="grid_12 applications">
+
+ </div>
</div>
- </div>
</div>
- <div id="footer_art" class="default">
- </div>
-
+ <div class="clearfix"></div>
+
+ <!-- footer grass -->
<div id="footer_grass">
+
</div>
<div id="footer">
- <div class="maxwidth">
- <div class="grid_9 links">
+ <div class="container_12">
+ <div class="links grid_9">
{% include "footer_links.html" %}
</div>
- <div class="grid_9" id="footnotes">
+
+ <div class="icons grid_3">
+ <div class="social_network_icons">
+ <ul>
+ <a href="//identi.ca/gnome">
+ <img
src="https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/identica.png"; alt=" ">
+ </a>
+ <a href="//twitter.com/gnome">
+ <img
src="https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/twitter.png"; alt=" ">
+ </a>
+ <a href="//www.facebook.com/GNOMEDesktop">
+ <img
src="https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/facebook.png"; alt=" ">
+ </a>
+ <a href="//plus.google.com/108054458791366257368/posts">
+ <img
src="https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/gplus.png"; alt="GNOME on
Google+" rel="publisher">
+ </a>
+ </ul>
+ </div>
+ </div>
+
+ <!-- footnotes -->
+ <div id="footnotes" class="grid_9">
Copyright © 2005‒{% now "Y" %} <strong class="gnome_logo">The GNOME Project</strong><br>
- <small>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="https://www.redhat.com/";>Red Hat</a>. Powered
by <a href="http://www.djangoproject.com";>Django</a> and <a
href="http://git.gnome.org/browse/extensions-web";>SweetTooth</a></small>
+ <small>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="https://www.redhat.com/";>Red Hat</a>. Powered
by <a href="//www.djangoproject.com">Django</a> and <a
href="//git.gnome.org/browse/extensions-web">SweetTooth</a></small>
</div>
- <p class="beta-disclaimer">GNOME Shell Extensions is beta software. Help us out by <a
href="https://bugzilla.gnome.org/enter_bug.cgi?product=website&component=extensions.gnome.org";>reporting bugs
and letting know what you think!</a></p>
<div class="clear"></div>
+ </div>
</div>
</body>
</html>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/identica.png"](https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/identica.png"){kind=link}
![https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/twitter.png"](https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/twitter.png"){kind=link}
![https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/facebook.png"](https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/facebook.png"){kind=link}
![https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/gplus.png"](https://www.gnome.org/wp-content/themes/gnome-grass/images/social_networks/gplus.png"){kind=link}