4:38 p.m.
----- Original Message ----
From: Máirín Duffy <duffy(a)fedoraproject.org>
To: advisory-board(a)lists.fedoraproject.org
Cc: design-team(a)lists.fedoraproject.org; websites(a)lists.fedoraproject.org
Sent: Mon, 12 July, 2010 19:48:04
Subject: Re: Wiki page for country
On Thu, 2010-07-08 at 22:00 -0500, Matt Domsch wrote:
> I built a very minimal top-level fedoracommunity.org and
> www.fedoracommunity.org web page now, linking to the existing
> sub-domains. It's in the fedora-web module on fedorahosted, so anyone
> on that team can update it, and _please_, make it look prettier than
> that hackjob I've done.
So Sijis converted it to the 960.gs grid we've been looking at using for
the upcoming new www.fpo :
http://sijis.fedorapeople.org/mockup/fedoracommunity.org/
I did a mockup today too of how it might be improved:
http://duffy.fedorapeople.org/webdesign/fedoracommunity.org/fedoracommuni...
g
I was very impressed by the design and so had a go and turning it into a web
page:
http://astavale.co.uk/fedoracommunity/
I know the design has changed a bit since then, but the bulk of the work on the
page is done and any amendments should hopefully be fairly quick.
The page is a fluid layout using floats and margins. It is optimized for
1024x768, but will display fine at 800x480. The columns of links reduce from one
to two. The columns also increase as the page size increase - try it with
holding CTRL and pressing minus in Firefox. 930.gs seems to suffer a bit from
divitis (lots of divs in the markup) so not sure it is the best solution. The
code I've generated for this page is inline below for people to comment on and
review.
I've put a lot of work in to the page to make it degrade gracefully, the only
section that needs probably a bit more work is the in page navigation bar. It
doesn't cope with two lines very well. Otherwise it works very well and the
markup is clean. This will help with maintenance. A new link can be added just
by copying a list item and amending the text. The items flow from right to left
and down. Creating a down then on to another column on the right flow is more
complex and less flexible. So it is a compromise.
The first China link is the same as the Bangladesh link, this was in the mockup
too. Can someone please correct this.
The styling and markup are attached inline below for people to make comments:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";;;>
<html>
<head>
<style type="text/css">
body { margin: 1em 1em 1em 130px;
font-family: arial, helvetica, sans-serif;
}
h1 { background: url( 'logo_fedoracommunity.org.png' ) no-repeat top left;
text-indent: -900px;
height: 80px;
width: 220px;
float: left;
}
h2 { color: #6c91c7;
text-transform: uppercase;
font-size: 1em;
float: left;
padding-top: 1em;
}
ul { list-style: none; }
a { text-decoration: none; }
.site_nav { float: right;
border-top: solid 1px #babdb6;
border-bottom: solid 1px #babdb6;
border-left: solid 1px #babdb6;
margin: 1em 1em 0 0;
padding: 0;
}
.site_nav li { float: left;
margin: 0;
padding: 0;
}
.site_nav a { display: block;
width: 7em;
background: #e0e2df;
text-transform: uppercase;
text-align: center;
color: #7f817d;
padding: 0.25em;
border-right: solid 1px #babdb6;
}
.site_nav a:hover, .site_nav a:focus { background: #cccdca;
color: #6a8ec1;
}
/* ~~~~~~ Start of page specific styling. If moved to external site stylesheet
may need to prefix some with #fedoracommunity_home ~~~~~~~~~~ */
/* Introductory paragraphs and image */
#intro { clear: both;
float: left;
width: 98%;
background: url( 'blue_hatching.png' ) repeat;
padding: 0;
margin: 0;
}
#intro img { float: left; }
#intro p { color: white;
font-size: 110%;
margin: 1em 1em 0 450px;
}
/* Layout and styling for in-page navigation */
#page_nav { margin: 0;
padding: 0;
clear: both;
}
#page_nav li { float: left;
line-height: 70px;
margin: 0 0 2em 0;
}
#page_nav a { display: block;
background: url( 'inpage_shade.png') repeat-x;
color: #294172;
font-weight: bold;
padding-left: 65px;
}
#page_nav a:hover, #page_nav a:hover { background: url(
'inpage_shade_active.png') repeat-x;
color: #eeeeec;
}
#aa_inpage { border-top: solid 6px #79db32;
background: url( 'tab_label-asia.png' ) no-repeat 5px 15px;
width: 25%;
}
#ame_inpage { border-top: solid 6px #ad7fa8;
background: url( 'tab_label-africa.png' ) no-repeat 5px 15px;
width: 35%;
}
#a_inpage { border-top: solid 6px #e59728;
background: url( 'tab_label-americas.png' ) no-repeat 5px 15px;
width: 20%;
}
#e_inpage { border-top: solid 6px #db3279;
background: url( 'tab_label-europe.png' ) no-repeat 5px 15px;
width: 18%;
}
/* Layout of regional links list.
Maintenance issue: If a new line of text added causes layout to be jumbled
increase width in '.links li { width: XXem'. Any increase likely to cause list
to be display in one column at 1024x768.
*/
.links { clear: both;
float: left; /* Give height to UL container as only LI floats inside */
margin: 0 0 4em 0;
padding: 0;
/* Fix for IE to make container show two columns */
width: 100%;
}
.links li { width: 25.5em;
float: left;
margin: 0;
padding: 1em 0 1em 1em;
}
.links h4 { margin: 0; }
.links p { margin: 0;
font-size: 90%;
}
.links li a { display: block;
padding: 0.5em;
color: #294172;
margin: 0 1em 0 0;
}
/* Colours for Asia and Australia section */
#aalinks li { background: #fdeedf; }
#aalinks a { border-left: solid #fcdfc3 6em; }
#aalinks a:hover, #aalinks a:focus { background: #fcdfc3; }
/* Colours for Africa and Middle East section */
#amelinks li { background: #f0fbe5; }
#amelinks a { border-left: solid #e0f6cb 6em; }
#amelinks a:hover, #amelinks a:focus { background: #e0f6cb; }
/* Colours for Americas section */
#alinks li { background: #f4eef4; }
#alinks a { border-left: solid #e4dbe4 6em; }
#alinks a:hover, #alinks a:focus { background: #e4dbe4; }
/* Colours for Europe section */
#elinks li { background: #fce4e4; }
#elinks a { border-left: solid #f6c7c7 6em; }
#elinks a:hover, #elinks a:focus { background: #f6c7c7; }
/* Positioning and background images for section headings */
h3 { font-size: 2em;
color: #888a85;
float: left;
height: 170px;
padding: 0 1em 0 120px;
margin: 0 0 -120px -120px;
/* Fix for IE overflow hidden with negative margin */
position: relative;
/* Fix for IE negative margin doubled on float left */
display: inline;
/* Fix for IE to get headings to flow down the page */
clear: left;
}
#asiaaustralia { background: url( 'aaheading.png' ) no-repeat top left; }
#africamiddleeast { background: url( 'ameheading.png' ) no-repeat top left; }
#americas { background: url( 'aheading.png' ) no-repeat top left; }
#europe { background: url( 'eheading.png' ) no-repeat top left; }
.top { float: left;
padding-right: 1em;
color: #3c6eb4;
background: url( 'to_top.png' ) no-repeat right top;
}
/* Needed to stop all the 'Back to tops' floating up to the first secion. Needed
when test with IE6 */
.ie6_float_fix { clear: both; }
/* Styling for more info on Fedora Project paragraph */
.more { clear: both;
margin: 0 0 2em 0;
color: #888a85;
font-size: 110%;
}
.more a { display: block;
color: #3c6fb5;
font-weight: bold;
margin: 0.25em 0 1em 0;
}
/* Styling for email address to add a new entry */
.contact { clear: both;
margin: 0 0 2em 0;
color: #888a85;
}
.contact a { color: #3c6fb5;
font-weight: bold;
}
</style>
<title>Region Specific Fedora Websites - fedoracommunity.org</title>
<meta name="description" content="List of region specific Fedora Project
websites.">
</head>
<body id="fedoracommunity_home">
<ul class="site_nav">
<li><a href="http://fedoraproject.org/">Home</a></li>
<li><a href="http://fedoraproject.org/get-fedora">Get
Fedora</a></li>
<li><a
href="http://fedoraproject.org/get-help">Help</a></...
</ul>
<h1>FedoraCommunity.org</h1>
<h2>Region Specific Fedora Websites</h2>
<div id="intro">
<img src="worldmap.png" width="419" height="214"
alt="Map of the world">
<p>Fedora Project contributors in various countries maintain their own region
specific content. Each site is solely responsible for the content they post.</p>
<p>A list of region specific websites is available below.</p>
</div>
<ul id="page_nav">
<li id="aa_inpage"><a href="#asiaaustralia">Asia &
Australia</a></li>
<li id="ame_inpage"><a href="#africamiddleeast">Africa
& the Middle
East</a></li>
<li id="a_inpage"><a href="#americas">the
Americas</a></li>
<li id="e_inpage"><a
href="#europe">Europe</a></li>
</ul>
<h3 id="asiaaustralia">Asia & Australia</h3>
<p class="top"><a href="#fedoracommunity_home">Back to
top</a></p>
<ul class="links" id="aalinks">
<li><a href="http://bd.fedoracommunity.org/";;;>
<h4>Bangladesh</h4>
<p>Fedora Bangladesh</p>
<p>http://bd.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://bd.fedoracommunity.org/";;;>
<h4>China</h4>
<p>Fedora Chinese User Group</p>
<p>http://bd.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://www.fedorachina.cn/";;;>
<h4>China</h4>
<p>Fedora China</p>
<p>http://www.fedorachina.cn/</p>
</a>
</li>
<li><a href="http://www.fedorachina.org/";;;>
<h4>China</h4>
<p>Fedora Chinese User Group Forum</p>
<p>http://www.fedorachina.org/</p>
</a>
</li>
<li><a href="http://oss.poyo.jp/fedora-ja/planet/";;;>
<h4>Japan</h4>
<p>Fedora Japanese Planet</p>
<p>http://oss.poyo.jp/fedora-ja/planet/</p>
</a>
</li>
<li><a href="http://fedorasrv.com/";;;>
<h4>Japan</h4>
<p>Fedora Japan</p>
<p>http://fedorasrv.com/</p>
</a>
</li>
<li><a href="http://ph.fedoracommunity.org/";;;>
<h4>Phillipines</h4>
<p>Fedora Phillipines</p>
<p>http://ph.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://fedora.tw/";;;>
<h4>Taiwan</h4>
<p>Fedora Taiwan</p>
<p>http://fedora.tw/</p>
</a>
</li>
<li><a href="http://vn.fedoracommunity.org/";;;>
<h4>Vietnam</h4>
<p>Fedora Vietnam</p>
<p>http://vn.fedoracommunity.org/</p>
</a>
</li>
</ul>
<div class="ie6_float_fix"></div>
<h3 id="africamiddleeast">Africa & the Middle East</h3>
<p class="top"><a href="#fedoracommunity_home">Back to
top</a></p>
<ul class="links" id="amelinks">
<li><a href="http://www.fedoraproject.ir/";;;>
<h4>Iran</h4>
<p>Fedora Iran</p>
<p>http://www.fedoraproject.ir/</p>
</a>
</li>
<li><a href="http://www.linuxguide.org.il/fedora/";;;>
<h4>Israel</h4>
<p>Fedora Israel</p>
<p>http://www.linuxguide.org.il/fedora/</p>
</a>
</li>
<li><a href="http://fedora-tunisia.org/";;;>
<h4>Tunisia</h4>
<p>Fedora Tunisia</p>
<p>http://fedora-tunisia.org/</p>
</a>
</li>
</ul>
<div class="ie6_float_fix"></div>
<h3 id="americas">the Americas: North and South America</h3>
<p class="top"><a href="#fedoracommunity_home">Back to
top</a></p>
<ul class="links" id="alinks">
<li><a href="http://proyectofedora.org/argentina/";;;>
<h4>Argentina</h4>
<p>Communidad Usuarios Argentina</p>
<p>http://proyectofedora.org/argentina/</p>
</a>
</li>
<li><a href="http://www.projetofedora.org/";;;>
<h4>Brazil</h4>
<p>Projeto Fedora Brasil</p>
<p>http://www.projetofedora.org/</p>
</a>
</li>
<li><a href="http://www.fedora.org.br/";;;>
<h4>Brazil</h4>
<p>Comunidade ñao oficial Brasileira</p>
<p>http://www.fedora.org.br/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.cl/";;;>
<h4>Chile</h4>
<p>Proyecto Fedora Chile</p>
<p>http://www.proyectofedora.cl/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/colombia/";;;>
<h4>Colombia</h4>
<p>Fedora Colombia</p>
<p>http://www.proyectofedora.org/colombia/</p>
</a>
</li>
<li><a href="http://fedora.org.sv/";;;>
<h4>El Salvador</h4>
<p>Fedora El Salvador</p>
<p>http://fedora.org.sv/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/";;;>
<h4>Latin America</h4>
<p>Proyecto Fedora Latinoamerica</p>
<p>http://www.proyectofedora.org/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/mexico/";;;>
<h4>México</h4>
<p>Fedora México</p>
<p>http://www.proyectofedora.org/mexico/</p>
</a>
</li>
<li><a href="http://fedora.org.ni/";;;>
<h4>Nicaragua</h4>
<p>Fedora Nicaragua</p>
<p>http://fedora.org.ni/</p>
</a>
</li>
<li><a href="http://www.proyectofedora.org/panama/";;;>
<h4>Panamá</h4>
<p>Comunidad Linux Panamá</p>
<p>http://www.proyectofedora.org/panama/</p>
</a>
</li>
<li><a href="http://proyectofedora.org/peru/";;;>
<h4>Peru</h4>
<p>Fedora Peru</p>
<p>http://proyectofedora.org/peru/</p>
</a>
</li>
<li><a href="http://fedora-uy.org/";;;>
<h4>Uruguay</h4>
<p>Fedora UY</p>
<p>http://fedora-uy.org/</p>
</a>
</li>
<li><a href="http://www.fedora-ve.org/";;;>
<h4>Venezuala</h4>
<p>Fedora Venezuala</p>
<p>http://www.fedora-ve.org/</p>
</a>
</li>
</ul>
<div class="ie6_float_fix"></div>
<h3 id="europe">Europe</h3>
<p class="top"><a href="#fedoracommunity_home">Back to
top</a></p>
<ul class="links" id="elinks">
<li><a href="http://be.fedoracommunity.org/";;;>
<h4>Belgium</h4>
<p>Fedora Community Belgium</p>
<p>http://be.fedoracommunity.org/</p>
</a>
</li>
<li><a href="http://www.fedora.cz/";;;>
<h4>Czech Republic</h4>
<p>Fedora České Project</p>
<p>http://www.fedora.cz/</p>
</a>
</li>
<li><a href="http://www.fedora-fr.org/";;;>
<h4>France</h4>
<p>Communauté Francophone Fedora</p>
<p>http://www.fedora-fr.org/</p>
</a>
</li>
<li><a href="http://www.fedorausers.de/";;;>
<h4>Germany</h4>
<p>Unofficial German Fedora Portal</p>
<p>http://www.fedorausers.de/</p>
</a>
</li>
<li><a href="http://www.fedoraonline.it/";;;>
<h4>Italy</h4>
<p>Il Portale Italiano degli utenti di Fedora</p>
<p>http://www.fedoraonline.it/</p>
</a>
</li>
<li><a href="http://www.fedora-linux.nl/";;;>
<h4>Netherlands</h4>
<p>Fedora-Linux.nl</p>
<p>http://www.fedora-linux.nl/</p>
</a>
</li>
<li><a href="http://www.fedora.pl/";;;>
<h4>Poland</h4>
<p>Fedora.pl</p>
<p>http://www.fedora.pl/</p>
</a>
</li>
<li><a href="http://www.fedoraproject.ro/";;;>
<h4>Romania</h4>
<p>Comunitatea Românească Fedora</p>
<p>http://www.fedoraproject.ro/</p>
</a>
</li>
<li><a href="http://fedoramd.org/";;;>
<h4>Russia</h4>
<p>Russia MD</p>
<p>http://fedoramd.org/</p>
</a>
</li>
<li><a href="http://www.fedora-es.com/";;;>
<h4>Spain</h4>
<p>Comunidad Fedora en Castellano</p>
<p>http://www.fedora-es.com/</p>
</a>
</li>
<li><a href="http://uk.fedoracommunity.org/";;;>
<h4>United Kingdom</h4>
<p>Fedora UK</p>
<p>http://uk.fedoracommunity.org/</p>
</a>
</li>
</ul>
<p class="more">There's more to Fedora. Visit the official Fedora
project
website at: <a
href="http://www.fedoraproject.org/">http://www.fedoraprojec...
<p class="contact">Want to add your local community's Fedora website
to this
directory? <a href="mailto:webmaster@fedoraproject.org?subject=Please add our
local community website to FedoraCommunity.org directory">Email the Fedora
Websites team.</a></p>
</body>
</html>
