[gnomeweb-wp] several changes in stylesheet and initial layout of the home page

[Vinicius Scopel Depizzol <vdepizzol src gnome org>]

commit 25deabdd3a57783336c5998dd2b5958c8d0936d9
Author: Vinicius Depizzol <vdepizzol gmail com>
Date:   Sat Apr 2 19:02:25 2011 -0300

    several changes in stylesheet and initial layout of the home page

 wp-content/themes/gnome-grass/css/home.css         |   18 +++
 wp-content/themes/gnome-grass/css/text.css         |   14 +---
 wp-content/themes/gnome-grass/home.php             |   74 +++++++++++---
 .../gnome-grass/images/home/banner-shadow.png      |  Bin 0 -> 4513 bytes
 .../gnome-grass/images/home/introduction-bg.png    |  Bin 109980 -> 0 bytes
 wp-content/themes/gnome-grass/images/hr-shadow.png |  Bin 0 -> 1189 bytes
 .../gnome-grass/images/selected-language.png       |  Bin 173 -> 0 bytes
 .../gnome-grass/images/waterbrush-body-bg.jpg      |  Bin 30633 -> 0 bytes
 wp-content/themes/gnome-grass/news.php             |    5 +-
 wp-content/themes/gnome-grass/style.css            |  111 ++++++++++++++++----
 10 files changed, 172 insertions(+), 50 deletions(-)
---
diff --git a/wp-content/themes/gnome-grass/css/home.css b/wp-content/themes/gnome-grass/css/home.css
new file mode 100644
index 0000000..1075202
--- /dev/null
+++ b/wp-content/themes/gnome-grass/css/home.css
@@ -0,0 +1,18 @@
+#home_banner {
+    background: url(../images/home/banner-shadow.png) bottom center no-repeat;
+    margin: 20px auto 0;
+    padding-bottom: 59px;
+}
+#home_banner img {
+    background: #254b87;
+    width: 940px;
+    height: 380px;
+    display: block;
+    margin: 0 auto;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: inset 0 -1px rgba(100%, 100%, 100%, 0.6);
+    -webkit-box-shadow: inset 0 -1px rgba(100%, 100%, 100%, 0.6);
+    box-shadow: inset 0 -1px rgba(100%, 100%, 100%, 0.6);
+}
diff --git a/wp-content/themes/gnome-grass/css/text.css b/wp-content/themes/gnome-grass/css/text.css
index 098a952..4e2b516 100644
--- a/wp-content/themes/gnome-grass/css/text.css
+++ b/wp-content/themes/gnome-grass/css/text.css
@@ -10,13 +10,6 @@ body {
     line-height: 1.7em;
     color: #2e3436;
 }
-hr {
-    border: 0 #ccc solid;
-    border-top-width: 1px;
-    clear: both;
-    height: 0;
-    margin: 20px 0;
-}
 h1, h2, h3, h4, h5, h6, dt {
     color: #0489B7;
 }
@@ -84,11 +77,6 @@ p, dd, .action_box, ul, ol {
 }
 
 #footer {
-    font-size: 51px;
+    font-size: 11px;
     line-height: 1.5em;
 }
-
-
-.gimp {
-  background: red;
-}
diff --git a/wp-content/themes/gnome-grass/home.php b/wp-content/themes/gnome-grass/home.php
index 3748ac6..ecbb362 100644
--- a/wp-content/themes/gnome-grass/home.php
+++ b/wp-content/themes/gnome-grass/home.php
@@ -1,29 +1,74 @@
 <?php
 
 
+add_action('wp_head', function() {
+    echo '<link rel="stylesheet" type="text/css" media="all" href="'.get_bloginfo('template_url').'/css/home.css" />';
+});
+
 require_once("header.php"); ?>
 
-    <!-- introduction home -->
-    <div style="background: url(<?php bloginfo('stylesheet_directory'); ?>/images/home/introduction-bg.png) bottom center no-repeat; overflow: hidden;">
-        <div class="container_12">
-                
-                <div class="grid_12" style="border-bottom: 1px solid #ccc; padding-bottom: 70px;">
-                    <div class="grid_7 alpha">
-                        <h1 style="margin-bottom: 0;">Lorem ipsum dolor sit</h1>
-                        <p class="main_feature" style="margin-top: 0;">Amet conseguer domulus sit lorem ipsum dolor sit amet avec consequer.</p>
-                        <p><a href="#" class="action_button">Lorem ipsum GNOME</a></p>
-                    </div>
-                    
-                    <div class="clear"></div>
-                </div>
-        </div>
+
+    <!-- home banner -->
+    <div id="home_banner">
+        <img src="#" alt="" />
     </div>
     
+
     <!-- container -->
     <div id="container" class="two_columns">
 
         <div class="container_12">
+        
+            <div class="grid_12">
+            
+                <div class="main_feature" style="margin-bottom: 60px; text-align: center;">
+                    <p>The GNOME Project has started from scratch and created a completely new,<br />
+                    modern desktop designed for todayâ??s users and technologies.</p>
+                </div>
+                
+                <hr class="top_shadow" />
+                
+                <div class="crafted_content">
+                
+                    <div class="section">
+                        <div class="image right">
+                            <img src="#" alt="" height="200" />
+                        </div>
+                        <div class="text">
+                            <h3>Simply Beautiful</h3>
+                            <p>GNOMEâ??s new desktop takes elegance to a new level. Weâ??ve swept away the clutter and made a simple and easy-to-use desktop, and weâ??ve made this the most beautiful GNOME desktop ever, with a new visual theme, a refined new font and carefully crafted animations.</p>
+                            
+                            <ul class="thumbs">
+                                <li><a href="#"><img src="" alt="" /></a></li>
+                                <li><a href="#"><img src="" alt="" /></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="section image-left">
+                        <div class="image">
+                            <img src="#" alt="" height="240" />
+                        </div>
+                        <div class="text">
+                            <h3>An overview at a glance</h3>
+                            <p>The activities view provides an easy way to access all your windows and applications. It is also a great way to keep track of all your activities. We have provided several fast and convenient ways to access the activities view, including the activities keyboard key (often known as the Windows key) and the activities hot corner.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="section" style="text-align: center;">
+                        
+                        <a class="action_button" href="#">Discover more about GNOME 3</a>
+                        
+                    </div>
+                
+                </div>
+                
+                <hr class="bottom_shadow" />
+                
+                TODO
             
+            </div>
+            <!--
             <div class="news_list grid_9">
             
                 <?php
@@ -62,6 +107,7 @@ require_once("header.php"); ?>
             </div>
             
             <div class="clear"></div>
+            -->
             
         <?php require_once("footer_art.php"); ?>
         </div>
diff --git a/wp-content/themes/gnome-grass/images/home/banner-shadow.png b/wp-content/themes/gnome-grass/images/home/banner-shadow.png
new file mode 100644
index 0000000..eb2fe65
Binary files /dev/null and b/wp-content/themes/gnome-grass/images/home/banner-shadow.png differ
diff --git a/wp-content/themes/gnome-grass/images/hr-shadow.png b/wp-content/themes/gnome-grass/images/hr-shadow.png
new file mode 100644
index 0000000..c5636b9
Binary files /dev/null and b/wp-content/themes/gnome-grass/images/hr-shadow.png differ
diff --git a/wp-content/themes/gnome-grass/news.php b/wp-content/themes/gnome-grass/news.php
index 872deb6..8c7699b 100644
--- a/wp-content/themes/gnome-grass/news.php
+++ b/wp-content/themes/gnome-grass/news.php
@@ -4,11 +4,10 @@
  * @subpackage Grass Theme
  */
  
-add_action('wp_head', 'add_news_stylesheet');
 
-function add_news_stylesheet() {
+add_action('wp_head', function() {
     echo '<link rel="stylesheet" type="text/css" media="all" href="'.get_bloginfo('template_url').'/css/news.css" />';
-}
+});
 
 require_once("header.php"); ?>
 
diff --git a/wp-content/themes/gnome-grass/style.css b/wp-content/themes/gnome-grass/style.css
index b445cca..cfb55dd 100644
--- a/wp-content/themes/gnome-grass/style.css
+++ b/wp-content/themes/gnome-grass/style.css
@@ -303,23 +303,6 @@ a:visited {
 
 
 
-/* Presentation banner */
-/* ========================================================================== */
-
-
-
-#home_banner {
-    width: 940px;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #ececec;
-    display: block;
-}
-#home_banner img {
-    display: block;
-    margin: 0 auto;
-}
-
 
 
 /* Container */
@@ -867,10 +850,98 @@ dl.icon_list dt img {
     color: #fff;
 }
 
+/* Separators */
+/* ========================================================================== */
+
 hr {
-  margin: 40px 0px;
+    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);
+}
+
+/* Crafted Content */
+/* ========================================================================== */
+
+.crafted_content {
+    margin: 40px 0 0;
 }
 
-.gimp {
-  background: red;
+.crafted_content .section {
+    margin-bottom: 40px;
+    overflow: hidden;
+}
+.crafted_content .section h2,
+.crafted_content .section h3 {
+    color: #2e3436;
+    margin-top: 0;
+}
+.crafted_content .section .text {
+    width: 480px;
+}
+.crafted_content .section.image-right .text {
+    float: left;
+}
+.crafted_content .section.image-left .text {
+    float: right;
+}
+.crafted_content .section .image {
+    display: block;
+    width: 420px;
+}
+.crafted_content .section .image img {
+    width: 420px;
+    background: #ccc;
+    display: block;
+}
+.crafted_content .section.image-right .image {
+    margin-left: 40px;
+    float: right;
+}
+.crafted_content .section.image-left .image {
+    margin-right: 40px;
+    float: left;
+}
+.crafted_content .section .thumbs {
+    display: table;
+    padding: 20px 0 0 0;
+    margin: 0;
+    list-style: none;
+}
+.crafted_content .section .thumbs li {
+    display: table-cell;
+    padding: 0 20px 0 0;
+    margin: 0;
+    list-style: none;
+}
+.crafted_content .section .thumbs li:last-child {
+    padding-right: 0;
+}
+.crafted_content .section .thumbs li a {
+    display: block;
+    padding: 4px;
+    border: 1px solid #ccc;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+.crafted_content .section .thumbs img {
+    width: 120px;
+    height: 80px;
+    display: block;
+    background: #ccc;
 }