[gimp-web] Put back splashes into the document flow

[Michael Schumacher <schumaml src gnome org>]

commit 96e1cbff86bd825d6396d4d5f3f5428809bcc66c
Author: Quentin Pradet <quentin pradet gmail com>
Date:   Fri Jan 24 17:52:14 2014 +0100

    Put back splashes into the document flow
    
    Previsouly, the splashes (front page, download page, and a few releases pages)
    were positioned using 'position: absolute', which meant that other elements on
    the page could overlap with those splashes. For this reason, the first element
    after the front spash page had a 20em top margin. This was fragile and caused
    this elements to be hidden by the splash on small devices.
    
    This commit puts back the splashes into the document flow. Splashes backgrounds
    have a right margin of the size of the menu, and are now Block Formatting
    Contexts, which allows overlays to be placed in absolute position but still
    staying inside the splash.
    
    This is a first step towards a more responsive www.gimp.org website. On
    desktops, this results in the same website: this is on purpose!
    
    Signed-off-by: Michael Schumacher <schumaml gmx de>

 about/splash/index.htrw            |    4 +--
 downloads/index.htrw               |    5 +--
 index.htrw                         |    8 ++---
 release-notes/gimp-2.4-cm.htrw     |    3 +-
 release-notes/gimp-2.4-videos.htrw |    3 +-
 release-notes/gimp-2.4.htrw        |    4 +--
 release-notes/gimp-2.6.htrw        |    4 +--
 style/wgo.css                      |   70 +++++++++++++++++-------------------
 8 files changed, 42 insertions(+), 59 deletions(-)
---
diff --git a/about/splash/index.htrw b/about/splash/index.htrw
index c43702b..ad5efb0 100644
--- a/about/splash/index.htrw
+++ b/about/splash/index.htrw
@@ -3,9 +3,7 @@
 <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img alt="#" class="splashbg"
-src="splashsplash.png" width="640" height="200" />
+<div class="splash aboutsplash">
 </div>
 
 <h1>GIMP Splash Archive</h1>
diff --git a/downloads/index.htrw b/downloads/index.htrw
index 082a1b1..ae27336 100644
--- a/downloads/index.htrw
+++ b/downloads/index.htrw
@@ -8,10 +8,7 @@ $(document).ready(function() {
 </script>
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img alt="#" id="splashbg"
-src="downloadsplash.jpg" />
-<img alt="#" id="fadesplash" src="/images/fade.png" />
+<div class="splash download">
 </div>
 
 <h1>Downloads</h1>
diff --git a/index.htrw b/index.htrw
index 6e00615..b03e625 100644
--- a/index.htrw
+++ b/index.htrw
@@ -6,11 +6,9 @@
 <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img id="splashbg" alt="GIMP 2.8 Released!" title="GIMP 2.8 Released!" 
-src="/images/frontsplash.jpg" />
-<img id="fadesplash" alt="-" src="/images/fade.png" />
-<img id="splashoverlay" alt="-" src="/images/frontsplash28.png" usemap="#splashmap" />
+<div class="splash front">
+    <img id="splashoverlay" alt="GIMP 2.8 Released!" title="GIMP 2.8 Released!"
+    src="/images/frontsplash28.png" usemap="#splashmap" />
 </div>
 
 <map name="splashmap" id="splashmap">
diff --git a/release-notes/gimp-2.4-cm.htrw b/release-notes/gimp-2.4-cm.htrw
index 0be909f..0917206 100755
--- a/release-notes/gimp-2.4-cm.htrw
+++ b/release-notes/gimp-2.4-cm.htrw
@@ -3,8 +3,7 @@
 <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img alt="#" src="images/2.4-releasesplash.jpg" width="640" height="200" />
+<div class="splash release24">
 </div>
 
 <h1>GIMP 2.4 Color Management</h1>
diff --git a/release-notes/gimp-2.4-videos.htrw b/release-notes/gimp-2.4-videos.htrw
index 76b680a..a320063 100644
--- a/release-notes/gimp-2.4-videos.htrw
+++ b/release-notes/gimp-2.4-videos.htrw
@@ -3,8 +3,7 @@
 <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img alt="#" src="images/2.4-releasesplash.jpg" width="640" height="200" />
+<div class="splash release24">
 </div>
 
 <h1>GIMP 2.4 Release Notes - Videos</h1>
diff --git a/release-notes/gimp-2.4.htrw b/release-notes/gimp-2.4.htrw
index 3a02d88..2ea5ee5 100644
--- a/release-notes/gimp-2.4.htrw
+++ b/release-notes/gimp-2.4.htrw
@@ -3,9 +3,7 @@
 <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img class="splashbg" alt="#" 
-src="images/2.4-releasesplash.jpg" width="640" height="200" />
+<div class="splash release24">
 </div>
 
 <h1>GIMP 2.4 Release Notes</h1>
diff --git a/release-notes/gimp-2.6.htrw b/release-notes/gimp-2.6.htrw
index 98a1ae9..3a20d23 100644
--- a/release-notes/gimp-2.6.htrw
+++ b/release-notes/gimp-2.6.htrw
@@ -3,9 +3,7 @@
 <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
 <!--#include virtual="/includes/wgo-page-init.xhtml" -->
 
-<div class="splash">
-<img class="splashbg" alt="#" 
-src="images/2.4-releasesplash.jpg" width="640" height="200" />
+<div class="splash release26">
 </div>
 
 
diff --git a/style/wgo.css b/style/wgo.css
index a06c64b..d767be9 100644
--- a/style/wgo.css
+++ b/style/wgo.css
@@ -472,7 +472,6 @@ div.plain-screenshots img:hover {
   padding: 20px;
   font-weight: bold;
   white-space: nowrap;
-  left: 0px;
   margin: 0 0 1em 20px;
   background-color: #0e2426;
   position:relative;
@@ -531,11 +530,11 @@ div.plain-screenshots img:hover {
   }
 
 #main {
-  max-width: 60em;
   margin: 0;
-  padding: 20px;
+  padding: 0 20px 20px 20px;
   position: relative;
   /* border: 1px solid blue; */
+
 }
 
 
@@ -624,55 +623,52 @@ div.bottomlinks li {
 
 div.splash {
   margin: 0;
+  margin-left: -20px;
+  /* #menu width (160) + #menu padding (20) */
+  margin-right: 180px;
   background-color: transparent;
+  position: relative;
   height: 180px;
-  overflow: hidden;
-  position: absolute;
-  top: 0; left: 0; right: 200px;
 }
 
-  .splash+h1 {
-    margin-top: 180px;
-   }
+ .splash img#splashoverlay {
+   position: absolute;
+   right: 0px;
+   bottom: 8px;
+   width: 300px;
+   height: 140px;
+ }
 
-  .splash img#splashbg, .splash>img:first-child {
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-  }
 
-  .splash img#splashoverlay {
-    display: block;
-    position: absolute;
-    right: 0px;
-    top: 32px;
-    width: 300px;
-    height: 140px;
-  }
+div.splash.front {
+  background-image: url("../images/frontsplash.jpg");
+}
 
-  .splash img#fadesplash {
-    position: absolute;
-    display: block;
-    left: 900px;
-    width: 135px;
-    height: 200px;
-  }
+div.splash.aboutsplash {
+  background-image: url("../about/splash/splashsplash.png");
+}
+
+div.splash.download {
+  background-image: url("../downloads/downloadsplash.jpg");
+}
+
+div.splash.release24 {
+  background-image: url("../release-notes/images/2.4-releasesplash.jpg");
+}
+
+div.splash.release26 {
+  background-image: url("../release-notes/images/2.4-releasesplash.jpg");
+}
 
 .intropara {
-  position: absolute !important;
-  top: 180px; left: 0; right: 200px;
   background-color: #444;
   padding: 8px 16px 16px 58px;
   line-height: 1.5em;
-  overflow: hidden;
   font-style: italic;
   font-size: 90%;
   margin: 0;
-}
-
-#downloadgimp {
-  margin-top: 20em;
+  margin-left: -20px;
+  margin-right: 180px;
 }
 
 /* some elements do not need to be printed */