GNOME.org
 

[gimp-web/static-html5] relative grid system, allowing to scale down

commit 8cffe1dbed0284da7a0ffa415697bbd1cac09971
Author: Jakub Steiner <jimmac novell com>
Date:   Sun Jun 20 20:05:35 2010 +0200

    relative grid system, allowing to scale down

 css/960.css      |  606 ------------------------------------------------------
 css/gimp.css     |   29 +++-
 css/gimp.sass    |   32 +++-
 css/grid.css     |  497 ++++++++++++++++++++++++++++++++++++++++++++
 inc/_footer.html |    4 +-
 inc/_header.html |    6 +-
 index.html       |   32 ++--
 7 files changed, 575 insertions(+), 631 deletions(-)
---
diff --git a/css/gimp.css b/css/gimp.css
index 2e06ee9..9039c9d 100644
--- a/css/gimp.css
+++ b/css/gimp.css
@@ -1,5 +1,5 @@
 @import url(fonts.css) all;
- import url(960.css) all;
+ import url(grid.css) all;
 body {
   font-family: "Droid Sans", sans-serif;
   background: #374e70 url(/img/frbg.png) repeat-x center top;
@@ -10,6 +10,21 @@ body {
 h1, h2, h3, h4, h5 {
   font-family: "RaveIn Condensed", "Avenir Condensed", Avenir, Prelude, sans-serif; }
 
+h1 {
+  font-size: 150%; }
+
+h2 {
+  font-size: 140%; }
+
+h3 {
+  font-size: 130%; }
+
+h4 {
+  font-size: 120%; }
+
+h5 {
+  font-size: 110%; }
+
 a {
   color: #f57900; }
   a:hover {
@@ -29,6 +44,16 @@ a {
 #mainmenu {
   display: block;
   list-style: none;
-  text-align: right; }
+  text-align: right;
+  margin: 38px 0 0;
+  font-weight: bold; }
   #mainmenu li {
     display: inline-block; }
+    #mainmenu li a {
+      font-family: "RaveIn Condensed", "Avenir Condensed", Avenir, Prelude, sans-serif;
+      text-decoration: none;
+      font-size: 130%;
+      margin-left: 1em; }
+
+#content {
+  min-height: 400px; }
diff --git a/css/gimp.sass b/css/gimp.sass
index 4de462d..b1a1042 100644
--- a/css/gimp.sass
+++ b/css/gimp.sass
@@ -1,11 +1,12 @@
 @import url(fonts.css) all
- import url(960.css) all
+ import url(grid.css) all
 
 
 $bodyfg: #fff
 $bodybg: #374e70
 $select: #f57900
-
+$text: 'Droid Sans', sans-serif  
+$headline: 'RaveIn Condensed', 'Avenir Condensed', Avenir, Prelude, sans-serif
 
 =border-radius($radius)
   border-radius: $radius
@@ -25,14 +26,25 @@ $select: #f57900
   color: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to))
   
 body
-  font-family: 'Droid Sans', sans-serif  
+  font-family: $text
   background: $bodybg url(/img/frbg.png) repeat-x center top
   color: $bodyfg
   margin: 0
   padding: 0
 
 h1,h2,h3,h4,h5
-  font-family: 'RaveIn Condensed', 'Avenir Condensed', Avenir, Prelude, sans-serif
+  font-family: $headline
+
+h1
+  font-size: 150%
+h2
+  font-size: 140%
+h3
+  font-size: 130%
+h4
+  font-size: 120%
+h5
+  font-size: 110%
 
 a
   color: $select
@@ -56,6 +68,16 @@ a
   display: block
   list-style: none
   text-align: right
+  margin: 38px 0 0
+  font-weight: bold
   li
     display: inline-block
-      
+    a
+      font-family: $headline
+      text-decoration: none
+      font-size: 130%
+      margin-left: 1em
+
+#content
+  min-height: 400px
+
diff --git a/css/grid.css b/css/grid.css
new file mode 100644
index 0000000..5d51003
--- /dev/null
+++ b/css/grid.css
@@ -0,0 +1,497 @@
+/*
+	960 Grid System ~ Core CSS.
+	Learn more ~ http://960.gs/
+
+	Licensed under GPL and MIT.
+*/
+
+/* =Containers
+--------------------------------------------------------------------------------*/
+
+.container-12,
+.container-16
+{
+	width: 92%;
+	margin: 0 auto;
+	max-width: 800px;
+}
+.container-12.wide,
+.container-16.wide {
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* =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: 1%;
+	margin-right: 1%;
+}
+
+.container-12 .grid-3,
+.container-16 .grid-4
+{
+	width: 23%;
+}
+
+.container-12 .grid-6,
+.container-16 .grid-8
+{
+	width: 48%;
+}
+
+.container-12 .grid-9,
+.container-16 .grid-12
+{
+	width: 73%;
+}
+
+.container-12 .grid-12,
+.container-16 .grid-16
+{
+	width: 98%;
+}
+
+/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
+--------------------------------------------------------------------------------*/
+
+.alpha
+{
+	margin-left: 0;
+}
+
+.omega
+{
+	margin-right: 0;
+}
+
+/* =Grid >> 12 Columns
+--------------------------------------------------------------------------------*/
+
+.container-12 .grid-1
+{
+	width: 6.333%;
+}
+
+.container-12 .grid-2
+{
+	width: 14.666%;
+}
+
+.container-12 .grid-4
+{
+	width: 31.333%;
+}
+
+.container-12 .grid-5
+{
+	width: 39.666%;
+}
+
+.container-12 .grid-7
+{
+	width: 56.333%;
+}
+
+.container-12 .grid-8
+{
+	width: 64.666%;
+}
+
+.container-12 .grid-10
+{
+	width: 81.333%;
+}
+
+.container-12 .grid-11
+{
+	width: 89.666%;
+}
+
+/* =Grid >> 16 Columns
+--------------------------------------------------------------------------------*/
+
+.container-16 .grid-1
+{
+	width: 4.25%;
+}
+
+.container-16 .grid-2
+{
+	width: 10.5%;
+}
+
+.container-16 .grid-3
+{
+	width: 16.75%;
+}
+
+.container-16 .grid-5
+{
+	width: 29.25%;
+}
+
+.container-16 .grid-6
+{
+	width: 35.5%;
+}
+
+.container-16 .grid-7
+{
+	width: 41.75%;
+}
+
+.container-16 .grid-9
+{
+	width: 54.25%;
+}
+
+.container-16 .grid-10
+{
+	width: 60.5%;
+}
+
+.container-16 .grid-11
+{
+	width: 66.75%;
+}
+
+.container-16 .grid-13
+{
+	width: 79.25%;
+}
+
+.container-16 .grid-14
+{
+	width: 85.5%;
+}
+
+.container-16 .grid-15
+{
+	width: 91.75%;
+}
+
+/* =Prefix Extra Space >> Global
+--------------------------------------------------------------------------------*/
+
+.container-12 .prefix-3,
+.container-16 .prefix-4
+{
+	padding-left: 25%;
+}
+
+.container-12 .prefix-6,
+.container-16 .prefix-8
+{
+	padding-left: 50%;
+}
+
+.container-12 .prefix-9,
+.container-16 .prefix-12
+{
+	padding-left: 75%;
+}
+
+/* =Prefix Extra Space >> 12 Columns
+--------------------------------------------------------------------------------*/
+
+.container-12 .prefix-1
+{
+	padding-left: 8.333%;
+}
+
+.container-12 .prefix-2
+{
+	padding-left: 16.666%;
+}
+
+.container-12 .prefix-4
+{
+	padding-left: 33.333%;
+}
+
+.container-12 .prefix-5
+{
+	padding-left: 41.666%;
+}
+
+.container-12 .prefix-7
+{
+	padding-left: 58.333%;
+}
+
+.container-12 .prefix-8
+{
+	padding-left: 66.666%;
+}
+
+.container-12 .prefix-10
+{
+	padding-left: 83.333%;
+}
+
+.container-12 .prefix-11
+{
+	padding-left: 91.666%;
+}
+
+/* =Prefix Extra Space >> 16 Columns
+--------------------------------------------------------------------------------*/
+
+.container-16 .prefix-1
+{
+	padding-left: 6.25%;
+}
+
+.container-16 .prefix-2
+{
+	padding-left: 12.5%;
+}
+
+.container-16 .prefix-3
+{
+	padding-left: 18.75%;
+}
+
+.container-16 .prefix-5
+{
+	padding-left: 31.25%;
+}
+
+.container-16 .prefix-6
+{
+	padding-left: 37.5%;
+}
+
+.container-16 .prefix-7
+{
+	padding-left: 43.75%;
+}
+
+.container-16 .prefix-9
+{
+	padding-left: 56.25%;
+}
+
+.container-16 .prefix-10
+{
+	padding-left: 62.5%;
+}
+
+.container-16 .prefix-11
+{
+	padding-left: 68.75%;
+}
+
+.container-16 .prefix-13
+{
+	padding-left: 81.25%;
+}
+
+.container-16 .prefix-14
+{
+	padding-left: 87.5%;
+}
+
+.container-16 .prefix-15
+{
+	padding-left: 93.75%;
+}
+
+/* =Suffix Extra Space >> Global
+--------------------------------------------------------------------------------*/
+
+.container-12 .suffix-3,
+.container-16 .suffix-4
+{
+	padding-right: 25%;
+}
+
+.container-12 .suffix-6,
+.container-16 .suffix-8
+{
+	padding-right: 50%;
+}
+
+.container-12 .suffix-9,
+.container-16 .suffix-12
+{
+	padding-right: 75%;
+}
+
+/* =Suffix Extra Space >> 12 Columns
+--------------------------------------------------------------------------------*/
+
+.container-12 .suffix-1
+{
+	padding-right: 8.333%;
+}
+
+.container-12 .suffix-2
+{
+	padding-right: 16.666%;
+}
+
+.container-12 .suffix-4
+{
+	padding-right: 33.333%;
+}
+
+.container-12 .suffix-5
+{
+	padding-right: 41.666%;
+}
+
+.container-12 .suffix-7
+{
+	padding-right: 58.333%;
+}
+
+.container-12 .suffix-8
+{
+	padding-right: 66.666%;
+}
+
+.container-12 .suffix-10
+{
+	padding-right: 83.333%;
+}
+
+.container-12 .suffix-11
+{
+	padding-right: 91.666%;
+}
+
+/* =Suffix Extra Space >> 16 Columns
+--------------------------------------------------------------------------------*/
+
+.container-16 .suffix-1
+{
+	padding-right: 6.25%;
+}
+
+.container-16 .suffix-2
+{
+	padding-right: 16.5%;
+}
+
+.container-16 .suffix-3
+{
+	padding-right: 18.75%;
+}
+
+.container-16 .suffix-5
+{
+	padding-right: 31.25%;
+}
+
+.container-16 .suffix-6
+{
+	padding-right: 37.5%;
+}
+
+.container-16 .suffix-7
+{
+	padding-right: 43.75%;
+}
+
+.container-16 .suffix-9
+{
+	padding-right: 56.25%;
+}
+
+.container-16 .suffix-10
+{
+	padding-right: 62.5%;
+}
+
+.container-16 .suffix-11
+{
+	padding-right: 68.75%;
+}
+
+.container-16 .suffix-13
+{
+	padding-right: 81.25%;
+}
+
+.container-16 .suffix-14
+{
+	padding-right: 87.5%;
+}
+
+.container-16 .suffix-15
+{
+	padding-right: 93.75%;
+}
+
+/* =Clear Floated Elements
+--------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+html body * span.clear,
+html body * div.clear,
+html body * li.clear,
+html body * dd.clear
+{
+	background: none;
+	border: 0;
+	clear: both;
+	display: block;
+	float: none;
+	font-size: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+/* http://www.positioniseverything.net/easyclearing.html */
+
+.clearfix:after
+{
+	clear: both;
+	content: '.';
+	display: block;
+	visibility: hidden;
+	height: 0;
+}
+
+.clearfix
+{
+	display: inline-block;
+}
+
+* html .clearfix
+{
+	height: 1%;
+}
+
+.clearfix
+{
+	display: block;
+}
diff --git a/inc/_footer.html b/inc/_footer.html
index 9270d4c..c11354d 100644
--- a/inc/_footer.html
+++ b/inc/_footer.html
@@ -1,6 +1,6 @@
 <div id="footer">
-  <div class="container_12">
-    <div class="grid_12">
+  <div class="container-12">
+    <div class="grid-12">
       FIXME: menu
     </div>
   </div>
diff --git a/inc/_header.html b/inc/_header.html
index e5bd899..7b8166f 100644
--- a/inc/_header.html
+++ b/inc/_header.html
@@ -1,6 +1,6 @@
-<div id="header" class="container_12">
-  <div class="grid_3"><h1 id="logo"><a href="/">GIMP</a></h1></div>
-  <div class="grid_9">
+<div id="header" class="container-12">
+  <div class="grid-3"><h1 id="logo"><a href="/">GIMP</a></h1></div>
+  <div class="grid-9">
     <ul id="mainmenu">
       <li><a href="/download">Download</a></li>
       <li><a href="http://docs.gimp.org";>Documentation</a></li>
diff --git a/index.html b/index.html
index bf9f5bc..05f7907 100644
--- a/index.html
+++ b/index.html
@@ -5,30 +5,36 @@
 </head>
 <body>
 <!--#include virtual="/inc/_header.html" -->
-<div id="splash" class="container_12">
-  <div class="grid_12">
-    FIXME: splash
+<div id="splash" class="container-12">
+  <div class="grid-12">
+    <img alt="" src="/img/frontsplash.jpg">
+    <div class="subtitle">
+      <h3>GNU Image Manipulation Program</h3>
+      <p>GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages. (<a href="#">more...</a>)</p> 
+    </div>
   </div>
 </div>
 <!-- triplet -->
-<div class="container_12">
-  <div class="grid_4">
-    <h2>Multi Platform</h2>
+<div class="container-12">
+  <div class="grid-4">
+    <h3>Multi Platform</h3>
   </div>
-  <div class="grid_4">
-    <h2>32bit per Channel</h2>
+  <div class="grid-4">
+    <h3>32bit per Channel</h3>
   </div>
-  <div class="grid_4">
-    <h2>Non-Destructive Editing</h2>
+  <div class="grid-4">
+    <h3>Non-Destructive Editing</h3>
   </div>
 </div>
 
 
 <!-- main -->
-<div class="container_12" id="content">
-  <div class="grid_4">
+<div class="container-12 clearfix" id="content">
+  <div class="grid-4">
+    FIXME: Sidebar
   </div>
-  <div class="grid_8 news">
+  <div class="grid-8 news">
+    FIXME: News
   </div>
 </div>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]