[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. >></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. >></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. >></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