FreeBSD web site re-styling with font relative sizes
Václav Zeman
vhaisman at gmail.com
Sun Jan 12 22:18:14 UTC 2014
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
-------------- next part --------------
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$
*/
+ at font-face {
+ font-family: "DejaVu Sans";
+ src: url("../fonts/DejaVuSans.woff");
+}
+
+ at font-face {
+ font-family: "DejaVu Sans";
+ src: url("../fonts/DejaVuSans-Bold.woff");
+ font-weight: bold;
+}
+
+ at 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 {
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 295 bytes
Desc: OpenPGP digital signature
URL: <http://lists.freebsd.org/pipermail/freebsd-doc/attachments/20140112/06eabfbd/attachment.sig>
More information about the freebsd-doc
mailing list