[PATCH 1/9] Split front page into About, Current and Next

Al Thomas astavale at yahoo.co.uk
Sat Apr 24 21:43:00 UTC 2010


Split "content"	div into three sections: About,	Current	Release	and Next
 Release.

Notes on changes to CSS:
 - "content" given negative top margin to make room for rest of content
 - h3 given negative top margin to achieve close proximity to h2
 - Current Release div is float within wide margin of Next Release div
 - "float_blocker_bar" stops Current Release div disappearing under
   footer when columns are very narrow
 - "screenshot" banner changed to overflow:hidden to stop "content" div
   dropping down in IE for narrower windows
---
 index.html            |   30 +++++++++++++++++-------------
 static/css/fedora.css |   46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index cbb99c7..6fdb5cc 100644
--- a/index.html
+++ b/index.html
@@ -106,19 +106,23 @@
     </div>
   </div>
 
-      <div id="content">
-        <h2>Fedora 12: Unite.</h2><div id="screenshot-banner">
-        <a href="https://fedoraproject.org/wiki/Fedora_12_tour"><img src="static/images/f12launch.png" alt="Fedora 12"></a>
-    </div><p>
-    <a href="http://docs.fedoraproject.org/release-notes/f12/">What's new in Fedora 12?  Read the release notes. &gt;&gt;</a>
-    </p><p>
-    Fedora is a Linux-based operating system that showcases the latest in free and open source software. Fedora is <strong>always free for anyone to use, modify, and distribute.</strong>  It is built by people across the globe who work together as a community: the Fedora Project. The Fedora Project is open and anyone is welcome to join.
-    </p><p>
-    The Fedora Project is out front for you, <strong>leading the advancement of free, open software and content</strong>.
-    </p><p>
-    <a href="http://fedoraproject.org/wiki/Overview">Learn more. &gt;&gt;</a>
-    </p>
-      </div>
+<div id="content">
+<h2>About the Fedora Project</h2>
+<p>Fedora is a Linux-based operating system that showcases the latest in free and open source software. Fedora is <strong>always free for anyone to use, modify, and distribute.</strong>  It is built by people across the globe who work together as a community: the Fedora Project. The Fedora Project is open and anyone is welcome to join.</p>
+<p>The Fedora Project is out front for you, <strong>leading the advancement of free, open software and content</strong>.</p>
+<p><a href="http://fedoraproject.org/wiki/Overview">Learn more. &gt;&gt;</a></p>
+ 
+<div id="screenshot-banner"><a href="https://fedoraproject.org/wiki/Fedora_12_tour"><img src="static/images/f12launch.png" alt="Fedora 12"></a></div>
+
+<div id="current_release">
+<h2 class="off_left">Current Release</h2>
+</div>
+
+<div id="next_release">
+<h2 class="off_left">Next Release</h2>
+</div>
+<div class="float_blocker_bar"></div>
+ </div>
     </div>
     
   <div id="bottom">
diff --git a/static/css/fedora.css b/static/css/fedora.css
index 0ff9ac7..4888ed5 100644
--- a/static/css/fedora.css
+++ b/static/css/fedora.css
@@ -114,11 +114,55 @@ pre
   display: block;
 }
 
+/* Customisations for Home Page */
 .home #nav-home a, .get #nav-get a, .join #nav-join a, .help #nav-help a
 {
   color: #777777;
   text-decoration: none;
 }
+.home #sidebar { padding-bottom: 0;
+	margin-bottom: 1em;
+	}
+.home #content {
+	margin-top: -7em;
+	position: relative;
+	text-align: justify;
+	}
+.home #current_release {
+	float: left;
+	width: 45%;
+	padding-right: 0.4em;
+	border-right: 1px dotted #AAAAAA;
+	}
+.home #next_release {
+	margin-left: 47%;
+	padding-left: 0.6em;
+	}
+.home #content h2 {
+	line-height: 1em;
+	color: #ccc;
+	font-style: italic;
+	}
+.home .off_left {
+	margin-left: -0.75em;
+	/* Make IE display content in negative margin */
+	position: relative;
+	width: 100%;
+	}
+.home #content h3 { margin: -0.25em 0 0 0;
+	position: relative;
+	width: 100%;
+	color: #0548a0;
+	font-size: 1.7em;
+	}
+.home #content p { margin: 0 1em 1.2em 0;	}
+/* Keeps footer from covering a floated div when narrow page width */
+.home .float_blocker_bar {
+	width: 100%;
+	clear: left;
+	height: 1px;
+	}
+/* End Home Page customisations */
 
 #content
 {
@@ -293,6 +337,8 @@ pre
 
 #screenshot-banner {
   text-align: left;
+  width: 100%;
+  overflow: hidden;
 }
 
 input, textarea, select
-- 
1.6.6.1




More information about the websites mailing list