Hi. I have always regarded FreeBSD.org style having too small font size. I have tried to re-style it with font relative sizes. I am attaching a proto-patch that does that. It would require more work and time, which I do not have right now. Maybe somebody else interested could continue with this.
-- VZ
Index: index.xsl =================================================================== diff --git a/head/en_US.ISO8859-1/htdocs/index.xsl b/head/en_US.ISO8859-1/htdocs/index.xsl --- a/head/en_US.ISO8859-1/htdocs/index.xsl (revision 43358) +++ b/head/en_US.ISO8859-1/htdocs/index.xsl (working copy) @@ -29,9 +29,9 @@ <xsl:variable name="title">&title;</xsl:variable> <xsl:template name="process.content"> - <div id="frontcontainer"> - <div id="frontmain"> - <div id="frontfeaturecontainer"> + <div id="frontcontainer"> + <div id="frontmain"> + <div id="frontfeaturecontainer"> <div id="frontfeatureleft"> <div id="frontfeaturecontent"> @@ -55,7 +55,7 @@ embedded networking and storage devices.</p> - <div + <div id="txtfrontfeaturelink"> »<a href="&base;/about.html" title="Learn More">Learn More</a> @@ -65,16 +65,10 @@ </div> <!-- FRONTFEATURELEFT --> <div id="frontfeaturemiddle"> - <div class="frontgetroundbox"> - <div class="frontgettop"><div><b style="display: none">.</b></div></div> - <div class="frontgetcontent"> - <a href="&base;/where.html">Download &os;</a> - </div> <!-- frontgetcontent --> - <div class="frontgetbot"><div><b style="display: none">.</b></div></div> - </div> <!-- frontgetroundbox --> - <div id="frontreleases"> <div id="frontreleasescontent" class="txtshortcuts"> + <img id="beastie" alt="Beastie" src="layout/images/beastie.png" /> + <div id="frontdlandreleases"> <h2><a href="&base;/releases/">LATEST RELEASES</a></h2> <ul id="frontreleaseslist"> <li>Production: <a @@ -90,7 +84,13 @@ href="&base;/where.html#helptest">&betarel2.current;-&betarel2.vers;</a></li> </xsl:if> </ul> - </div> <!-- FRONTRELEASESCONTENT --> + <div class="frontgetroundbox"> + <div class="frontgetcontent"> + <a href="&base;/where.html">Download &os;</a> + </div> <!-- frontgetcontent --> + </div> <!-- frontgetroundbox --> + </div> <!-- FRONTRELEASESCONTENT --> + </div> </div> <!-- FRONTRELEASES --> </div> <!-- FRONTFEATUREMIDDLE --> @@ -178,12 +178,12 @@ </div> <!-- frontnewroundbox --> </div> <!-- FEATURERIGHT --> - </div> <!-- FRONTFEATURECONTAINER --> + </div> <!-- FRONTFEATURECONTAINER --> <br class="clearboth" /> - <div id="frontnemscontainer"> - <div id="frontnews"> - <div id="frontnewscontent" class="txtnewsevent"> + <div id="frontnemscontainer"> + <div id="frontnews"> + <div id="frontnewscontent" class="txtnewsevent"> <h2>LATEST NEWS</h2> <div class="newseventswrap"> @@ -204,10 +204,10 @@ </div> <!-- unnamed --> </div> <!-- newseventswrap --> - </div> <!-- FRONTNEWSCONTENT --> - </div> <!-- FRONTNEWS --> - <div class="frontseparator"><b style="display: none">.</b></div> - <div id="frontevents"> + </div> <!-- FRONTNEWSCONTENT --> + </div> <!-- FRONTNEWS --> + <div class="frontseparator"><b style="display: none">.</b></div> + <div id="frontevents"> <div id="fronteventscontent" class="txtnewsevent"> <h2>UPCOMING EVENTS</h2> @@ -228,9 +228,9 @@ </div> <!-- newseventswrap --> </div> <!-- FRONTEVENTSCONTENT --> - </div> <!-- FRONTEVENTS --> - <div class="frontseparator"><b style="display: none">.</b></div> - <div id="frontmedia"> + </div> <!-- FRONTEVENTS --> + <div class="frontseparator"><b style="display: none">.</b></div> + <div id="frontmedia"> <div id="frontmediacontent" class="txtnewsevent"> <h2>PRESS</h2> @@ -251,7 +251,7 @@ </div> <!-- newseventswrap --> </div> <!-- FRONTMEDIACONTENT --> - </div> <!-- FRONTMEDIA --> + </div> <!-- FRONTMEDIA --> <div class="frontseparator"><b style="display: none">.</b></div> <div id="frontsecurity"> <div id="frontsecuritycontent" class="txtnewsevent"> @@ -286,7 +286,7 @@ </xsl:call-template> <div> - <ul class="newseventslist"> + <ul class="newseventslist"> <li class="first-child"> <a href="&base;/security/notices.html" title="More Errata Notices">More</a> </li> @@ -298,13 +298,13 @@ </div> <!-- newseventswrap --> </div> <!-- FRONTSECURITYCONTENT --> - </div> <!-- FRONTSECURITY --> + </div> <!-- FRONTSECURITY --> <br class="clearboth" /> - </div> <!-- FRONTNEMSCONTAINER --> - </div> <!-- FRONTMAIN --> - </div> <!-- FRONTCONTAINER --> + </div> <!-- FRONTNEMSCONTAINER --> + </div> <!-- FRONTMAIN --> + </div> <!-- FRONTCONTAINER --> </xsl:template> <xsl:template name="process.footer"> Index: layout/css/global.css =================================================================== diff --git a/head/en_US.ISO8859-1/htdocs/layout/css/global.css b/head/en_US.ISO8859-1/htdocs/layout/css/global.css --- a/head/en_US.ISO8859-1/htdocs/layout/css/global.css (revision 43358) +++ b/head/en_US.ISO8859-1/htdocs/layout/css/global.css (working copy) @@ -4,13 +4,29 @@ * $FreeBSD$ */ +@font-face { + font-family: "DejaVu Sans"; + src: url("../fonts/DejaVuSans.woff"); +} + +@font-face { + font-family: "DejaVu Sans"; + src: url("../fonts/DejaVuSans-Bold.woff"); + font-weight: bold; +} + +@font-face { + font-family: "DejaVu Sans Mono"; + src: url("../fonts/DejaVuSansMono.woff"); +} + body { margin: 0; padding: 0; - font-family: verdana, sans-serif; - font-size: 69%; + font-family: /*Verdana,*/ "DejaVu Sans", Courier, sans-serif; + font-size: 100%; color: #000; - background: #fff url("../images/hdr_fill.png") repeat-x; + background: #fff; //url("../images/hdr_fill.png") repeat-x; } h1 { @@ -58,6 +74,7 @@ line-height: 1.2em; margin-top: 0.2em; margin-bottom: 0.1em; + vertical-align:middle; } p { Index: layout/css/layout.css =================================================================== diff --git a/head/en_US.ISO8859-1/htdocs/layout/css/layout.css b/head/en_US.ISO8859-1/htdocs/layout/css/layout.css --- a/head/en_US.ISO8859-1/htdocs/layout/css/layout.css (revision 43358) +++ b/head/en_US.ISO8859-1/htdocs/layout/css/layout.css (working copy) @@ -10,14 +10,17 @@ #containerwrap { text-align: center; /* Win IE5 */ + margin-left: 1em; + margin-right: 1em; } #container { +// width: 35em; + max-width: 80em; +// min-width: 800px; + padding: 0; + padding-bottom: 1em; margin: 0em auto; - width: 775px; - padding: 0; - padding-top: 0px; - padding-bottom: 15px; text-align: left; /* Win IE5 */ } @@ -24,15 +27,17 @@ /* Header */ #headercontainer { - padding-bottom: 2px; + background-color: #660000; } #header { position: relative; - height: 76px; + width: 100% +// height: 76px; margin: 0; padding: 0; clear: both; + display: block; } #headerlogoleft { @@ -40,8 +45,9 @@ border: 0px; padding: 0px; top: 0px; - margin-left: -4%; + margin-left: 0px; float: left; +// width: 100%; } #headerlogoleft img { @@ -52,7 +58,7 @@ position: relative; border: 0px; padding-left: 0px; - margin-right: -4%; + margin-right: 1em; float: right; } @@ -67,13 +73,13 @@ text-align: right; padding: 0; margin: 0; - margin-top: 6px; + margin-top: 0.25em; color: #666; } #search form { position: relative; - top: 5px; + top: 0px; right: 0; margin: 0; /* need for IE Mac */ text-align: right; /* need for IE Mac */ @@ -92,7 +98,7 @@ #search form #submit { font-size: 0.8em; background: transparent; - color: #fff; + color: gray; border-right: 1px solid #DADADA; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; @@ -102,7 +108,6 @@ #search form #words { font-size: 0.8em; - width: 120px; border: 1px solid #DADADA; background: #FFFFFF; color: #666; @@ -115,12 +120,12 @@ text-align: right; padding: 0; margin: 0; - margin-top: 6px; + margin-top: 0.5em; color: #666; } #mirror form { - padding-top: 5px; + padding-top: 0.3em; right: 0; margin: 0; /* need for IE Mac */ text-align: right; /* need for IE Mac */ @@ -134,11 +139,12 @@ #mirror form select { font-size: 0.8em; + width: 90%; } #mirror form #mirrorsel { font-size: 0.8em; - width: 150px; + width: 90%; border: 1px solid #DADADA; background: #FFFFFF; color: #666; @@ -160,7 +166,7 @@ #frontcontainer { width: 100%; - float: left; +// float: left; } #frontfeaturecontainer { @@ -168,7 +174,7 @@ } #frontfeatureleft{ - width: 273px; + max-width: 30em; margin: 0; padding: 0; float: left; @@ -183,24 +189,31 @@ margin: 0 0 1em 0; } - #frontfeaturecontent { - margin: 10px 10px 10px 13px; - } +#frontfeaturecontent { + margin: 10px 10px 10px 13px; +} #frontfeaturemiddle { + margin-top: 1em; +// min-height: 20em; + width: 35em; float: left; - margin-top: 20px; - background: url(../images/beastie.png) no-repeat top left; - min-height: 196px; } +#frontfeaturemiddle #beastie { + float: left; + border-style: none;//solid; + padding-right: 1em; +} + #frontfeatureright { position: relative; border: 0px; padding: 0px; margin: 0px; - width: 162px; - float: right; + width: 15em; + text-align: left; + float: left; } /* News/Events/Media/Security Box */ @@ -209,58 +222,69 @@ background: #eee; display: inline; float: left; - margin-top: 8px; - margin-bottom: 8px; + margin-top: 0.5em; + margin-bottom: 0.5em; + width: 100%; + //max-width: 80em; + word-wrap: break-word; } #frontnews { - width: 191px; + width: 25%; margin: 0; - padding: 0; + padding: 1px; float: left; } #frontnewscontent { - margin: 17px 15px 24px 18px; + padding: 1em 1em 2em 2em; + margin: 1px; + background: #eee; } #frontevents { - width: 189px; + width: 25%; margin: 0; - padding: 0; + padding: 1px; float: left; } #fronteventscontent { - margin: 17px 15px 24px 14px; + padding: 1em 1em 2em 1em; + margin: 1px; + background: #eee; } #frontmedia { - width: 189px; + width: 25%; margin: 0; - padding: 0; + padding: 1px; float: left; } #frontmediacontent { - margin: 17px 15px 24px 14px; + padding: 1em 1em 2em 1em; + margin: 1px; + background: #eee; } #frontsecurity { - width: 190px; + width: 24%; margin: 0; - padding: 0; + padding: 1px 0px 1px 1px; float: left; } #frontsecuritycontent { - margin: 17px 15px 24px 14px; + padding: 1em 2em 2em 1em; + margin: 1px; + background: #eee; } /* No way to get equal columns in pure CSS - setting height is a temporary hack */ .frontseparator { - width: 1px; - height: 317px; +// width: 1px; + height: 30em; margin: 0; padding: 0; background-color: #fff; @@ -268,7 +292,7 @@ } .newseventswrap { - padding-left: 5px; +// background-color: black; } .newseventslist { @@ -318,38 +342,37 @@ #frontshortcutscontent { margin: 0; padding: 0; - padding-left: 15px; - padding-top: 20px; + padding-left: 1em; + padding-top: 1.5em; } #frontshortcutslist { margin: 0; padding: 0; - margin-left: 5px; - margin-top: 5px; - list-style: none; + list-style-image: url(../images/blt_red_arrow.png); + list-style-position: inside; } #frontshortcutslist li { - margin: 0; - padding-left: 12px; - background-image: url(../images/blt_red_arrow.png); - background-repeat: no-repeat; - background-position: 0px 0.5em; } /* Latest Releases */ #frontreleases { - padding: 0; + padding-top: 1.5em; margin: 0; - margin-left: 162px; - margin-top: 15px; - padding-bottom: 20px; color: #666; - width: 155px; + float:left; + width: 100%; +// clear:right; +// display: block; } +#frontdlandreleases { + display: block; + float: left; +} + #frontreleasescontent { margin: 0; padding: 0; @@ -356,38 +379,34 @@ } #frontreleaseslist { + padding: 0; margin: 0; - padding: 0; - margin-left: 5px; - margin-top: 5px; - list-style: none; + margin-bottom: 1em; } #frontreleaseslist li { margin: 0; - padding-left: 12px; - background-image: url(../images/blt_red_arrow.png); - background-repeat: no-repeat; - background-position: 0px 0.5em; + list-style-image: url(../images/blt_red_arrow.png); + list-style-position: inside; } /* New User Box */ /* height and width details */ -.frontnewtop div, .frontnewtop, .frontnewbot div, .frontnewbot { +/*.frontnewtop div, .frontnewtop, .frontnewbot div, .frontnewbot { width: 100%; height: 12px; font-size: 1px; -} +}*/ .frontnewcontent { margin: 0; padding: 0; - margin-top: -4px; - margin-bottom: -4px; text-align: center; font-size: 1.1em; font-weight: bold; + border-left: 1px; + border-color: white; } .frontnewcontent a, .frontnewcontent a:link, .frontnewcontent a:visited, .frontnewcontent a:hover, .frontnewcontent a:active { @@ -396,28 +415,29 @@ } .frontnewroundbox { - margin: 0; - margin-top: 30px; - padding: 0; - width: 130px; + margin-top: 1em; + padding: 0.6em; +// width: 9em; background-color: #D8D8D8; - border-radius: 10px; + border-radius: 0.6em; + //float: right; } /* Donate Button */ /* height and width details */ .frontdonatetop div, .frontdonatetop, .frontdonatebot div, .frontdonatebot { - width: 20%; - height: 10px; - font-size: 1px; + width: 100%; + height: 1em; +// font-size: 1px; text-align: center; } .frontdonatecontent { margin: 0; - padding: 0; - margin-top: -4px; - margin-bottom: -4px; + padding-top: 0.3em; + padding-bottom: 0.3em; + margin-top: 0px; + margin-bottom: 0px; text-align: center; font-size: 1.1em; font-weight: bold; @@ -429,11 +449,11 @@ } .frontdonateroundbox { - margin-top: 10px; - padding: 0; - width: 180px; + margin-top: 0.5em; + padding: 0px; + width: 100%; background-color: white; - border-radius: 10px; + border-radius: 0.6em; } /* Get FreeBSD Box */ @@ -461,12 +481,15 @@ } .frontgetroundbox { - margin-top: 50px; - margin-left: 140px; - padding: 0; - width: 190px; + //margin-top: 50px; + //margin-left: 140px; + margin-bottom: 0.5em; + padding: 1em; + //width: 7em; background-color: #FACC2E; - border-radius: 15px; + border-radius: 1em; +// float:left; +// clear:right; } /* Secondary Pages */ @@ -473,9 +496,9 @@ #sidewrap { float: left; - width: 166px; - margin-top: 15px; - margin-right: -170px; +// width: 166px; + margin-top: 1em; +// margin-right: -170px; } #rightwrap { @@ -485,8 +508,8 @@ } #contentwrap { - margin-left: 170px; - padding-top: 15px; + margin-left: 13em; + padding-top: 1em; } /* Footer */ @@ -495,7 +518,7 @@ font-size: 0.9em; color: #737373; line-height: 1.3em; - padding-top: 5px; + padding-top: 0.3em; clear: both; } Index: layout/css/navigation.css =================================================================== diff --git a/head/en_US.ISO8859-1/htdocs/layout/css/navigation.css b/head/en_US.ISO8859-1/htdocs/layout/css/navigation.css --- a/head/en_US.ISO8859-1/htdocs/layout/css/navigation.css (revision 43358) +++ b/head/en_US.ISO8859-1/htdocs/layout/css/navigation.css (working copy) @@ -74,33 +74,32 @@ /* New drop-down menu implementation */ #menu { - width: 122%; - float: left; - height: 29px; + display: inline-block; + width: 100%; + float: none; font-size: 0.9em; clear: both; - margin-left: -1%; - margin-right: -5%; - margin-top: 5px; + margin-top: 0.2em; font-weight: bold; + background-color: #E4E4E4; } #menu ul { + display: inline; list-style: none; margin: 0; - padding: 0px 10px 2px 10px; + padding: 0px 1em 0px 1em; float: left; border-left: 1px solid #B4B4B4; } #menu ul:first-child { - padding-left: 0; border: 0; } #menu a { display: block; - padding: 0px 3px; +// padding: 0px 3px; color: #666; text-decoration: none; } @@ -124,7 +123,7 @@ #menu ul ul li { border-top: 1px solid #B4B4B4; - padding: 4px 0 4px 0; + padding: 0.25em 0 0.25em 0; } #menu ul ul ul { @@ -163,13 +162,13 @@ } #languagenavlist li { - padding: 0 0.5em 0 0.2em; + padding: 0 0.5em 0 0.5em; display: inline; border-right: 1px solid #B6B6B6; } #languagenavlist li.last-child { - padding: 0 0em 0 0.2em; + padding: 0 0em 0 0.5em; border-right: 0; } @@ -188,7 +187,7 @@ color: #fff; font-size: 0.9em; margin: 0px 0px 0px 0px; - margin-top: 8px; + margin-top: 0.5em; right: 0px; padding: 0; } @@ -222,20 +221,22 @@ /* Category Navigation */ #sidenav, #sidenav ul, #sidenav ul ul { - margin: 0; - padding: 0; list-style: none; font-size: 1.0em; } #sidenav { - width: 150px; + width: 10em; //150px; + padding: 0.5em 2em 0.5em 0px; background-color: #eee; border: 1px solid #D4D4D4; } #sidenav ul { - padding: 8px 4px 12px 4px; + padding: 0.5em 0.5em 1em 1.5em; + list-style: disc; + list-style-position: outside; + list-style-image: url(../images/blt_red_arrow.png); } #sidenav ul ul { @@ -253,11 +254,8 @@ #sidenav ul li { border-bottom: 1px solid #eee; - margin: 0; - padding-left: 12px; - background-image: url(../images/blt_red_arrow.png); - background-repeat: no-repeat; - background-position: 12px 0.65em; + padding-left: 0.0em; + vertical-align: middle; } #sidenav ul li.active { @@ -269,10 +267,9 @@ } #sidenav ul li a { - display: block; + display: inline; color: #990000; text-decoration: underline; - padding: 3px 5px 3px 12px; margin: 0; } @@ -282,7 +279,7 @@ #sidenav ul ul li a { display: block; - padding-left: 12px; + padding-left: 0.75em; margin: 0; } Index: layout/css/text.css =================================================================== diff --git a/head/en_US.ISO8859-1/htdocs/layout/css/text.css b/head/en_US.ISO8859-1/htdocs/layout/css/text.css --- a/head/en_US.ISO8859-1/htdocs/layout/css/text.css (revision 43358) +++ b/head/en_US.ISO8859-1/htdocs/layout/css/text.css (working copy) @@ -14,11 +14,11 @@ color: #990000; } -h3 { +h3 { color: #990000; } -h4 { +h4 { color: #990000; } @@ -38,36 +38,36 @@ font-weight: bold; } -.txtdivider { - font-size: 0.8em; - color: #E1E1E1; - padding-left: 4px; - padding-right: 4px; +.txtdivider { + font-size: 0.8em; + color: #E1E1E1; + padding-left: 4px; + padding-right: 4px; } -.txtnewsevent { - font-size: 0.9em; +.txtnewsevent { + font-size: 0.9em; color: #000000; } -.txtshortcuts { - font-size: 0.9em; - color: #000000; +.txtshortcuts { + font-size: 0.9em; + color: #000000; } -.txtdate { +.txtdate { font-size: 0.9em; - color: #666; + color: #666; } -.txtmediumgrey { - color: #666; +.txtmediumgrey { + color: #666; } -.txtformlabel { - color: #666; - font-weight: bold; - text-align: right; +.txtformlabel { + color: #666; + font-weight: bold; + text-align: right; vertical-align: top; } @@ -80,9 +80,7 @@ } .txtoffscreen { - position: absolute; - left: -1999px; - width: 1990px; + display: none; } #txtfrontfeatureheading {
signature.asc
Description: OpenPGP digital signature