[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www/server/staging/layout layout.css
|
From: |
Therese Godefroy |
|
Subject: |
www/server/staging/layout layout.css |
|
Date: |
Fri, 28 Dec 2018 07:37:49 -0500 (EST) |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 18/12/28 07:37:49
Modified files:
server/staging/layout: layout.css
Log message:
Float #backtotop; minor changes.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/layout.css?cvsroot=www&r1=1.4&r2=1.5
Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/layout.css,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -b -r1.4 -r1.5
--- layout.css 12 Jun 2016 23:19:52 -0000 1.4
+++ layout.css 28 Dec 2018 12:37:49 -0000 1.5
@@ -1,12 +1,14 @@
/*!
layout.css -- css stylesheet used on www.gnu.org
+(This version should be used with reset.css. A few basic parameters that used
+to be set in combo.css are now defined here.)
-Copyright (C) 2006-2011, 2013-2016 Free Software Foundation
+Copyright (C) 2006, 2007, 2008, 2009, 2010, 2011,
+ 2013, 2014, 2015, 2016, 2017, 2019 Free Software Foundation
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
-</div><!-- /toplinks -->
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
@@ -32,184 +34,369 @@
*/
+/*** COLORS ***/
+
+/*
+Text
+ black hover on #555
+ #222 normal text
+ #333, #404040, #444, #555: special items
+ #777 medium gray: hover special links, buttons & submit
+ white #navigation
+
+ #004caa blue: normal links, #fssbox submit
+ #100070 purplish blue: normal visited links, normal hover
+ blue #urgent links
+
+ #b02500 #join-fsf
+ #a42e2b red: GNU banner, #outdated
+
+Backgrounds
+ #999 hr
+ #bbb .column-limit
+ #d4d4d4 #fsf-links, #searcher
+ #e4e4e4 html
+ #eee #edu-navigation, submit
+ #f3f3f3 .announcement gradient
+ #f5f5f5 #translations, #footer, .emph-box, .summary, .toc, .lyrics,
+ .listing, .announcement, code
+ white body, .note, edu-note, submit, #backtotop
+
+ #a42e2b red: #navigation
+
+ #ff3 yellow: #urgent
+
+ #fff1c0 light orange: span.highlight, table headers
+ #fff5d4 very light orange: .highlight-para, .highlight
+
+Borders
+ black, #111, #333, #666: tables
+ #777 hover buttons & submit
+ #999 #outdated
+ #bbb body, .subheader
+ #ccc unfocused inputs, footer
+ #d4d4d4 #translations
+ #ddd emph-box, lyrics
+
+ #3aa .important
+ #3465a4 .edu-cases
+ #004caa focused inputs, #fssbox submit
+ #6092d0 .note, edu-note
+
+ #a42e2b active link in edu-navbar
+ #b02500 #join-fsf
+ #e74c3c .big-section h3
+ #fc7 .announcement, .highlight-para
+*/
+
+/*** Luminosity contrast ratio and color difference ***
+ source: http://springmeier.org/www/contrastcalculator/index.php
+
+ Color1 Color 2 contrast Color
+ ratio difference
+Black-gray
+ #000 white 21.3 765
+ #000 #ff3 19.6 561
+ #222 white 15.91 663
+ #333 white 12.63 612
+ #333 #eee 10.89 561
+ #404040 #d4d4d4 6.99 444
+ #555 white 7.46 510
+
+Red
+ #a42e2b white 6.99 630
+
+Blue (urgent)
+ #00f #ff3 8.02 714
+
+Blue links
+ #004caa white 8.03 443
+ #004caa #e4ffcc 7.45 365
+ #004caa #fff1c0 7.11 366
+ #004caa #f3f3f3 7.24 407
+ #004caa #ccffcc 7.17 341
+ #004caa #777 1.79 137
+ #004caa #333 1.57 169
+ #004caa black 2.61 322
+
+Purple links
+ #100070 white 16.72 653
+ #100070 #fff1c0 14.81 576
+ #100070 #ccffcc 14.92 551
+ #100070 #777 3.73 245
+ #100070 #333 1.32 163
+ #100070 black 1.26 112
+ #100070 #004caa 2.08 134
+*/
+
+
+/*** MAIN DIVS ***/
+
+/*
+From top to bottom:
+ #searcher + #toplinks [body-include-1.html]
+ #translations [body-include-1.html]
+ #header (#gnu-banner, #fsf-frame) [body-include-2.html]
+ #navigation [body-include-2.html]
+ (#edu-navigation in a few pages) [<page>.html]
+ #content [<page>.html]
+ #fsf-links [footer-text.html]
+ #mission-statement + #backtotop [footer-text.html]
+ #footer [<page>.html]
+*/
+
+
+/*** PAGE LAYOUT ***/
html, body {
font-size: 1em;
text-align: left;
- padding: 0;
- margin: 0;
text-decoration: none;
- color: #000;
+ color: #222;
}
-html { background: #f7f7f7; }
+html { background: #e4e4e4; }
-#toplinks, #header, #left-column, #edu-navigation {
- font-family: "FreeSans", sans-serif;
+/* This specifies the basic width of our web pages. Don't change it
+ without discussion on www-discuss. The magic 74.92 is for
+ consistency with fsf.org. */
+body {
+ max-width: 74.92em;
+ margin: auto;
+ background-color: white;
+ border: .1em solid #bbb;
+ border-top: 1px solid transparent;
+ -moz-box-shadow: 0 0 5px 5px #bbb;
+ -webkit-box-shadow: 0 0 5px 5px #bbb;
+ -icab-box-shadow: 0 0 5px 5px #bbb;
+ -o-box-shadow: 0 0 5px 5px #bbb;
+ box-shadow: 0 0 5px 5px #bbb;
}
+/** Widths **/
+.inner { overflow: hidden; }
-/***********************
- ** BUILDING BLOCKS **
- ***********************/
+#searcher, #translations, #header, #content,
+ #mission-statement, #footer {
+ padding-left: 3%; padding-right: 3%;
+}
+#content ul#edu-navigation {
+ margin-left: -3.2%; margin-right: -3.2%;
+}
-/*** SIMPLE ELEMENTS ***/
+/** Backgrounds **/
-a[href] { color: #005090; }
-a[href]:visited { color: #100070; }
-a[href]:active, a[href]:hover { color: #777; }
+#searcher, #fsf-links {
+ background-color: #d4d4d4;
+}
+#translations, #footer { background-color: #f5f5f5; }
-/* The default color (black) is too dark for large text in
- bold font. */
-h1, h2, h3, h4 { color: #333; }
-h5, h6, dt { color: #222; }
-
-blockquote { font-style: italic; }
-acronym, abbr { border-bottom: 1px dotted #111; }
-pre { overflow: auto; }
-small { font-size: .9em; }
+#edu-navigation { background-color: #eee; }
-p, pre, ul li, ol li, dt, dd, code, address { line-height: 1.3em; }
-p, pre { margin-top: 1em; } /* In combo.css: margin-bottom:1em. */
+#navigation { background-color: #a42e2b; }
-ul, ol, blockquote { margin-left: 1.5%; margin-right: 1.5%; }
+/** Fonts **/
+#translations {
+ font-family: "FreeSans", sans-serif;
+}
+#searcher, #toplinks, #header {
+ font-family: "sans-serif", "FreeSans", sans-serif;
+}
+
+
+/*** BASIC ELEMENTS ***/
+
+/** Size and positioning **/
+
+p, pre, li, dt, dd { line-height: 1.5em; }
+address { line-height: 1.3em; }
+
+h1 { font-size: 2.4em; margin: 1em 0 1.1em; }
+h2 { font-size: 2.0em; margin: 1em 0 1.1em; }
+h3 { font-size: 1.5em; margin: 1.2em 0 .80em; }
+h4 { font-size: 1.2em; margin: 1.2em 0 .83em; }
+h5 { font-size: 1.1em; margin: 1em 0 .91em; }
+h6 { margin: 1em 0; }
+
+/* The top margin should be sufficient. The bottom margin is only useful
+ if the following element is an anonymous box. */
+p, pre, table, address { margin: 1em 0; }
+pre { padding-bottom: .3em; overflow: auto; }
+
+ul, ol, blockquote {
+ margin: 1em 1.5%;
+}
/* Lists of underlined links are difficult to read. The top margin
gives a little more spacing between entries. */
-ul li { margin: .5em 1em 0 1em; list-style: square; }
-
-/* Second-level lists don't usually need bullets (e.g. /prep/ftp.html). */
-ul ul li { list-style: none; margin-top: .3em; }
-ul li ul { margin-top: 0; margin-bottom: .7em; }
-
-/* Ordered list items are treated like paragraphs: spacing between
- internal p's is smaller than between list items. Complex unordered
- lists (with p in some items) should ideally be treated the same way,
- but CSS can't tell whether an ul list will have complex items or not. */
-ol li { margin: 1em; }
+ol li { margin: 1em 0 0 1em; }
+ul li, ul ol li { margin: .5em 0 0 1em; }
+ul li p, ul li pre, ul ul li, ul li blockquote, table li {
+ margin-top: .3em; margin-bottom: .3em;
+}
+ul ul, ol ul, table ul { margin: 0 1.5%; }
/* Separate description lists from preceding text */
-dl { margin: 2em 0 0 0; }
+dl { margin: 1.5em 0 0 0; }
/* separate the "term" from subsequent "description" */
dt { margin: 1em 0; }
/* separate the "description" from subsequent list item
when the final <dd> child is an anonymous box */
-dl dd { margin: 1em 3% 2em 3%; }
-/* separate anonymous box (used to be the first element in <dd>)
- from subsequent <p> */
-dd p { margin-top: 1em; }
+dl dd { margin: 1em 3% 1.5em 3%; }
+
+small { font-size: .9em; }
-address { margin-bottom: 1em; }
+/** Style **/
+
+h1, h2, h3, h4, h5, h6, strong, dt { font-weight: bold; }
+th { font-weight: bold; text-align: center; }
+th, td { border: 1px solid #bbb; padding: .5em; }
+
+em, cite { font-style: italic; }
+em i, em cite, cite i, cite em { font-style: normal; }
+
+code {
+ padding: 0 .1em;
+ background: #f5f5f5;
+}
+pre code { background-color: transparent; }
+
+/* The default color is too dark for large text in bold font. */
+h3, h4 { color: #333; }
+
+a[href] { color: #004caa; }
+a[href]:visited { color: #100070; }
+a[href]:active, a[href]:hover {
+ color: #100070;
+ text-decoration: none;
+}
+
+acronym, abbr {
+ text-decoration: none;
+ border-bottom: 1px dotted #000;
+ cursor: help;
+}
+
+ol li { list-style: decimal outside; }
+ul li { list-style: square outside; }
+ul ul li, ol ul li { list-style: circle; }
+
+/* Rarely used */
+del { text-decoration: line-through; }
+caption { margin-bottom: .5em; text-align: center; }
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
+
+
+/*** SIMPLE CLASSES ***/
.center, .c { text-align: center; }
+.nocenter{ text-align: left; }
.underline { text-decoration: underline; }
.nounderline { text-decoration: none; }
-/* Found in some tables of contents. */
-.no-bullet li { list-style: none; }
-
-.big { font-size: 130%; padding-top: 0.7em; }
+.big { font-size: 1.1em; }
.inline-list li { display: inline }
+.no-bullet li { list-style: none; }
-.netscape4, .no-display { display: none; }
-
+.no-display { display: none; }
-/*** SEPARATOR ***/
+ul.blurbs li { margin-top: 1em; }
+ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li {
+ margin-top: .5em;
+}
+dl.compact { margin: .8em 0 0 0; }
+dl.compact dt {
+ margin: .8em 0 0;
+ font-weight: normal;
+ font-style: italic;
+}
+dl.compact dd { margin: .5em 3% 0; }
+dl.compact dd p { margin: .5em 0 0; }
+hr {
+ display: block;
+ margin: 1.2em 0;
+ color: #999;
+ background: #999;
+}
/* For license-list.html, but could be used elsewhere. */
hr.separator {
- display: block;
height: .3em;
- margin: 2em 0;
- color: #999;
- background-color: #999;
+ border: none;
+}
+hr.thin {
+ clear: both;
+ height: 1px;
+ margin: 1.5em 0;
border: none;
}
/*** FORMS ***/
-form {
- display: block;
- font-size: .9em;
+fieldset { margin: 1em 0; }
+optgroup { font-weight: normal; }
+button, input[type="checkbox"], input[type="radio"],
+ input[type="reset"], input[type="submit"] {
+ padding: 1px;
+}
+form.header input {
+ line-height: 1.2em;
+ font-family: inherit;
font-weight: bold;
+ border: .1em solid #ccc;
}
-form input { font-family: inherit; }
-form input[type="text"] {
- padding: .2em;
- margin: 0;
+form.header input[type="text"] {
+ padding: .25em;
color: #555;
background: white;
- border: .1em solid #999;
}
-form input[type="submit"] {
- padding: .2em .4em;
- margin: 0;
+form.header input[type="submit"] {
+ padding: .25em;
color: #333;
- background: white;
- border: .1em solid #999;
+ background: #fff;
}
-form input[type="text"]:focus {
+form.header input[type="text"]:focus {
color: #333;
- border: .1em solid #0156bf;
+ border: .1em solid #4080d0;
}
-form input[type="text"]:focus + input[type="submit"] {
- border: .1em solid #0156bf;
+form.header input[type="text"]:focus + input[type="submit"] {
+ border: .1em solid #4080d0;
}
-form input[type="submit"]:hover {
- cursor: pointer;
+form.header input[type="submit"]:hover {
+ color: #777;
+ border-color: #777;
}
/*** BUTTONS ***/
-.button, #join-fsf {
+.button a, #join-fsf a {
+ display: block;
line-height: 1.2em;
font-weight: bold;
-}
-.button a, .button a:visited,
- #join-fsf a, #join-fsf a:visited {
+ text-align: center;
text-decoration: none;
-}
-
-/* The large button is defined in home.html.
- Color, background and border are left out because they
- depend on the environment.
- font-size for #join-fsf is defined separately. */
-.button.small { font-size: 1.3em; }
-.button.small a, #join-fsf a {
- padding: .4em .6em;
-}
-
-.button.small a, #join-fsf a {
-/* Display the button link as block in
- browsers lacking support for inline-block, */
- display: block;
-/* and as inline-block in those that support it. */
- display: inline-block;
+ padding: .3em .5em;
+/* Color and background are left out because they depend
+ on the environment. */
+ border: .1em solid #999;
}
/*** SPECIAL BORDERS ***/
#searcher input[type="text"], #searcher input[type="submit"],
- .fssbox input[type="text"], #fssbox input[type="text"],
- .fssbox input[type="submit"], #fssbox input[type="submit"] {
- border-radius: .4em;
- -moz-border-radius: .4em;
- -khtml-border-radius: .4em;
- -webkit-border-radius: .4em;
- -opera-border-radius: .4em;
-}
-p.button.large, .button.small a, .join-fsf a, #join-fsf a,
- .fssbox input[type="submit"], #fssbox input[type="submit"] {
- border-radius: 1em;
- -moz-border-radius: 1em;
- -khtml-border-radius: 1em;
- -webkit-border-radius: 1em;
- -opera-border-radius: 1em;
+ #fssbox input[type="text"], #fssbox input[type="submit"],
+ .button a, #join-fsf a {
+ border-radius: .3em;
+ -moz-border-radius: .3em;
+ -khtml-border-radius: .3em;
+ -webkit-border-radius: .3em;
+ -opera-border-radius: .3em;
}
@@ -220,54 +407,63 @@
line-height: 1.5em;
font-weight: bold;
}
-p.back { margin: 1.5em 3%; }
+.back { margin: 1.5em 2%; }
+
.back a, .back a:visited,
- #backtotop a, #backtotop a:visited { color: #333; }
+ #backtotop a, #backtotop a:visited {
+ display: inline-block;
+ line-height: 1.5em;
+ padding: .1em 1em;
+ color: #444;
+}
.back a:hover,
- #backtotop a:hover { color: #0156bf; }
+ #backtotop a:hover { color: #777; }
-p#backtotop {
+#backtotop {
+ clear: both;
float: right;
- line-height: 1em;
- position: relative;
- bottom: 3em;
- font-size: 1.2em; /* In #mission-statement, font-size is .9em. */
- padding: 0;
- margin: 0 10% 0 0;
+ font-family: "sans-serif", sans-serif;
+ font-size: .9em;
+ background: white;
+ margin: .35em 1em 0;
}
-
-p#backtotop a {
- padding: .2em .5em;
+#backtotop a[href] {
text-decoration: none;
- background: #c1ddff;
}
/*** BIG SECTION HEADERS ***/
-/* Used in license-list.html and proprietary-surveillance.html,
- but could apply elsewhere. */
-
-div.big-section {
+/* For browsers that don't support inline-block */
+.big-section {
clear: left;
- margin-bottom: .5em;
+ float: left;
}
-div.big-section h3 {
+.big-section h3 {
display: inline-block;
+ font-size: 1.7em;
padding: .2em 0;
- margin-right: .3em;
+ margin: 1em .3em .5em 0;
color: black;
- border-top: .2em solid #3673bf;
- border-bottom: .2em solid #3673bf;
+ border-top: .12em solid #e74c3c;
+ border-bottom: .12em solid #e74c3c;
+}
+.big-subsection {
+ margin: 1.5em 0;
}
-div.big-subsection { margin: 1.5em 0; }
-div.big-subsection h4 {
+.big-subsection h4 {
display: inline;
+ font-size: 1.5em;
margin-right: .3em;
color: black;
}
-#content div.big-section h3 { font-size: 1.7em; }
-#content div.big-subsection h4 { font-size: 1.5em; }
+/* The next two statements adjust line spacing in Netsurf 1.2 */
+.big-subsection {
+ line-height: 2.0em;
+}
+.big-subsection h4 {
+ line-height: 1.2em;
+}
/*** ANCHOR ***/
@@ -276,48 +472,89 @@
to give readers a hint that they can link directly to a given item.
We make it less obtrusive than the item heading it follows. */
.anchor-reference-id { font-size: 80%; font-weight: normal; }
+
span.anchor-reference-id a { color: #333; }
span.anchor-reference-id a[href]:hover { color: #777; }
/*** NON-FLOATING INSETS AND HIGHLIGHTED STUFF ***/
-/* .highlight doesn't have a border. It can be applied to in-line elements,
- or next to .summary.
- .highlight-para and .emph-box have borders. They are used for blocks
- which are not adjacent to floating stuff (unless a margin keeps
- the right border away from the floating stuff). */
-
-.highlight-para, .emph-box { clear: both; }
-.highlight-para, p.highlight, .emph-box { padding: .4em 1.2em .5em 1.2em; }
-
-.highlight { background-color: #fff898; }
-.highlight-para, p.highlight { background-color: #ffc; }
-.highlight-para { border: 2px solid #bbb; }
+/** WITH BACKGROUND **/
+
+/* NetSurf collapses the bottom border of the last element with that of its
+ parent div, even when the div has a padding or border.
+ To fix this, strip the bottom margin of <p> and <pre>. If another element
+ comes last, it may need a special clause. */
+div.highlight-para p, div.highlight-para pre, div.highlight-para ul,
+ div.emph-box p, div.emph-box pre, div.emph-box ul,
+ .lyrics p { margin-bottom: 0; }
+
+/* .highlight doesn't have a border. It can be applied to in-line elements.
+ .highlight-para and .emph-box have borders. They are used for block
elements.
+ highlight-para can be used next to .note or .summary because it only has top
+ and bottom borders. */
+
+div.highlight-para, div.emph-box { padding: .2em 1.2em 1.2em; }
+
+.highlight-para, p.highlight,
+ p.emph-box, pre.emph-box { padding: .6em 1.2em; }
+
+.highlight-para, .highlight { background-color: #fff5d4; }
+span.highlight { background-color: #fff1c0; }
+.highlight-para {
+ border-top: .1em solid #fc7;
+ border-bottom: .1em solid #fc7;
+}
.emph-box, .lyrics {
background-color: #f5f5f5;
- border: 1px solid #ccc;
+ border: .1em solid #ddd;
}
-
.lyrics {
max-width: 25em;
font-style: italic;
- padding: 2em;
+ padding: 1em 2em 2em;
margin-left: 3%; margin-right: 3%;
}
-/* Announcements */
-div.announcement {
- font-size: 1.1em; font-weight: bold;
+
+/** WITH LEFT BORDER **/
+
+/* For important text within an article. The border is bluish-green. */
+.important {
padding: 0 1em;
+ border-left: .3em solid #3aa;
+}
+
+/* For information that isn't part of the article. The border is
+ orange and the background is light gray. */
+.announcement blockquote { margin: 0; }
+
+.announcement {
+ font-size: 1.1em;
+ padding: .1em 1em .7em;
margin: 1.5em 0;
color: #333;
- border-left: .5em solid #fd7e2a;
+ border-left: .3em solid #fc7;
+ background: #f5f5f5;
+ background: linear-gradient(to right, #f3f3f3, white);
}
-div.announcement blockquote {
- margin-left: 0; margin-right: 0;
+/* Currently, announcements contain <p>, <ul>, and <h3>, with p or
+ ul as last element. Try to make them NetSurf-friendly. */
+.announcement p { margin: .5em 0 0; }
+.announcement ul { margin: 0 1em; }
+.announcement ul li { margin-top: .5em; }
+.announcement h3 {
+ font-size: 1.3em;
+ margin: .4em 0;
}
+
+/** WITH NO BACKGROUND OR LEFT BORDER **/
+
+/* For comments within or at the beginning of an article. Can be used
+ with .important or .big. */
+.comment { margin: 1.5em 6%; }
+
/* Note about Free Software Free Society */
blockquote#fsfs p { padding: .3em 0; }
@@ -333,112 +570,160 @@
border-bottom: .3em solid #333;
}
#urgent a, #urgent a:visited {
- color: blue; text-decoration: underline;
+ color: blue;
}
#urgent a:hover { color: #777; }
+/* For the note saying the page is a translation. */
+.trans-disclaimer {
+ text-align: center;
+ font-weight: bold;
+ font-style: italic;
+ margin-bottom: 0;
+ margin-top: 1.2em;
+}
+.trans-disclaimer a,
+ .trans-disclaimer a:visited { color: #333; }
+.trans-disclaimer a:hover { color: #777; }
+
+/* For outdated translations */
+#outdated {
+ text-align: center;
+ padding: .4em 0;
+ margin: .8em 0;
+ color: #a42e2b;
+ border-bottom: 1px solid #999;
+}
+#outdated p { margin: .2em 0; }
+
+/* For translators notes */
+.translators-notes {
+ clear: left;
+ line-height: 1.5em;
+ margin-top: 2em;
+}
+.translators-notes hr {
+ height: 1px;
+ margin: 1.7em 0 1.2em;
+ border: none;
+}
+.translators-notes ol li { margin: .5em 1.1em; }
-/*** FLOATING NOTES ***/
-.note {
- clear: right;
- float: right;
+/*** NOTES ***/
+
+.note, .edu-note {
text-align: center;
- font-style: normal;
- /* The next line could be "max-width:20em;". It would work
- better in modern browsers, but the note wouldn't float in
- NetSurf 1.2. Same problem with .summary. */
- width: 20em; max-width: 90%;
- padding: 0;
- margin: .3em 0 1em 1.5em;
- border: .3em solid #3465a4;
+ margin: 2em auto;
+}
+
+/* Single <p> */
+.edu-note p {
+ font-style: italic;
+ padding: .8em 1em;
+ margin: 0;
+ border: .15em dotted #6092d0;
+}
+/* Baby NetSurf (1.2) would hurt itself using these definitions.
+ Place them out of reach. Too bad for its older brother (2.9). */
address@hidden (min-width: 0) {
+ .edu-note {
+ width: 40em;
+ max-width: 100%;
+ }
+}
+
+/* Several <p>'s */
+.note {
+ padding: .4em 3%;
+ background: white;
+ border: .15em dotted #6092d0;
}
.note p {
- font-size: 1.1em;
- line-height: 1.4em;
- padding: 0 1em ;
+ padding: .4em 0;
+ margin: 0;
}
-.note strong { font-size: 1.2em; }
address@hidden (max-width: 60em) {
- .note { float: none; margin: 1em auto; }
address@hidden (min-width: 0) {
+ .note { max-width: 44.7em; }
}
/*** TABLES OF CONTENTS ***/
-/* Common definitions */
.summary, .toc {
- padding: .4em 1.5em; .5em 1.5em;;
+ padding: 1em 3% 1.7em;
+ margin: 2.5em auto 1.5em;
background: #f5f5f5;
}
.summary ul, .toc ul {
- padding: 0 3%;
+ margin: 0 1.5%;
}
-.summary a, .toc a {
- text-decoration: none;
-}
-.summary a:hover, .toc a:hover {
- color: black; text-decoration: underline;
-}
-#content .summary h3, #content .toc h3 {
- font-size: 1.2em;
- margin-top: 1em;
+.summary h3, .toc h3 {
+ font-size: 1.3em;
+ margin-top: .5em;
text-align: center;
}
-#content .summary h4, #content .toc h4 {
+.summary h4, .toc h4 {
font-size: 1.1em;
}
address@hidden (min-width: 0) {
+ .summary { width: 30em; }
+ .toc { width: 45em; }
+ .summary, .toc { max-width: 94%; }
+}
+
+/*** NOTE AND SUMMARY ON WIDE SCREENS ***/
-/* Small tables of contents */
-.summary {
address@hidden (min-width: 48em) {
+ .note, .summary {
clear: right;
float: right;
- max-width: 20em;
- margin: .3em 0 1em 0;
- border-left: 1.5em solid white;
-}
-/* Big tables of contents */
-.toc { float: left; margin: .5em 0 2em 0; }
-
address@hidden (max-width: 60em) {
- .summary {
- float: none;
- max-width: 25em;
- margin: 2.5em auto 2em auto;
- border: none;
- }
- .toc {
- float: none;
- max-width: 40em;
- margin-top: 2.5em;
+ width: 20em;
+ max-width: 40%;
+ margin: .3em 0 1em 2em;
+/* This keeps an adjacent background (e.g. highlight-para)
+ from touching the note or summary. */
+ box-shadow: 0 0 0 1em white;
+ -moz-box-shadow: 0 0 0 1em white;
+ -webkit-box-shadow: 0 0 0 1em white;
+ -icab-box-shadow: 0 0 0 1em white;
+ -o-box-shadow: 0 0 0 1em white;
}
+ .summary { padding: 1em 1.2em 1.5em; }
+ .note { padding: .4em 1.2em; }
}
/*** IMAGES ***/
-.imgright {
- float: right;
- margin: .3em 0 1.5em 1.5em;
+.imgright { float: right; margin: .3em 0 1em 1.5em; }
+.imgleft { float: left; margin: .3em 1.5em 1em 0; }
+
+/* For pictures with/without legend. */
+.narrow { width: 15em; }
+.medium { width: 20em; }
+.wide { width: 27em; }
+.pict { max-width: 100%; margin: 1em auto; }
+.pict img { width: 100%; }
+.pict p {
+ text-align: center;
+ font-style: italic;
+ margin-top: .5em;
}
-.imgleft {
- float: left;
- margin: .3em 1.5em 1.5em 0;
address@hidden (min-width: 43em) {
+ .pict.narrow {
+ float:right; margin: .3em 0 1em 1.5em;
+ }
}
-/* For photo-like images */
-.portrait, .landscape {
- max-width: 100%;
address@hidden (min-width: 48em) {
+ .pict.medium {
+ float:right; margin: .3em 0 1em 1.5em;
+ }
}
-.portrait p, .landscape p { font-style: italic; }
-.portrait img, .landscape img { width: 100%; }
-.portrait { width: 20em; }
-
address@hidden (max-width: 60em) {
- .portrait { float: none; margin: auto; }
-}
-.landscape { width: 25em; }
address@hidden (max-width: 65em) {
- .landscape { float: none; margin: auto; }
address@hidden (min-width: 55em) {
+ .pict.wide {
+ float:right; margin: .3em 0 1em 1.5em;
+ }
}
@@ -455,9 +740,9 @@
.listing th,
.stx table th {
- background: #fff898;
+ background: #fff1c0;
color: black;
- font-weight: bold !important;
+ font-weight: bold;
border: 1px solid #666666;
font-weight: normal;
padding: .7em;
@@ -466,7 +751,7 @@
.listing td a { display: block; }
.listing .top {
border-top: 1px solid #666666;
- text-align: right ! important;
+ text-align: right;
padding: 0em 0em 1em 0em;
}
@@ -483,409 +768,366 @@
.listing td,
.stx table td {
border: 1px solid #666666;
- padding: 1em .3em;
+ padding: 1em;
text-align: center;
line-height: 1.3em
}
-
-.listing a:hover {
- text-decoration: underline;
-}
-
.listing img {
vertical-align: middle;
}
-
-.listing { width: 100%; }
-
-/* For wide tables, e.g. in doc/other-free-books.html */
-table.listing {
+.listing {
+ width: 100%;
display: block;
overflow: auto;
padding: .1em;
- margin: 2em auto;
+ margin: auto;
}
+/*** TOP LINKS ***/
-/************************
- ** PAGE DESCRIPTION **
- ************************/
-
-/*** HEADER ***/
-
-#header:after {
- clear: both; content: ""; display: block;
- height: 0px; visibility: hidden; width: 0px;
-}
-#header {
- position: relative;
- max-width: 95.5em;
- padding: .2em 1.5em;
-}
-
-#toplinks a, #toplinks a:visited {
- display: inline-block;
- white-space: nowrap;
- font-size: .9em;
- font-weight: bold;
- color: #444;
- text-decoration: none;
- margin: 0 1em;
-}
-#toplinks a:hover { color: #0156bf; }
-
-#gnu-banner {
+#toplinks {
float: left;
- max-width: 8em;
- text-align: center;
- margin: 0 3.5em .3em 3.5em;
+ /* For NetSurf 1.2, and maybe a few other browsers. */
+ padding: .5em 2em .3em;
}
-#gnu-banner img {
- width: 100%;
- margin: 0;
+/* For standard browsers. */
address@hidden (min-width: 0) {
+ #toplinks { padding: .5em 3% .3em; }
}
-#fsf-support {
- float: left:
+#toplinks a, #toplinks a:visited {
white-space: nowrap;
- line-height: 1.1em;
+ /* the next line is a workaround for Midori 0.5.8 */
+ display: inline-block;
+ font-weight: bold;
font-size: .9em;
- font-style: italic;
- color: #444;
-}
-#fsf-support a, #fsf-support a:visited { color: #444; }
-#fsf-support a:hover { color: #a42e00; }
-#fsf-support span.abbr { display: none; }
-#searcher {
- float: right; margin: 0 0 1em 0;
+ color: #404040;
+ text-decoration: none;
+ margin-right: 1em;
}
+#toplinks a:hover { color: #777; }
-/*** CONTENT and LEFT COLUMN ***/
+/*** SEARCHER ***/
-#content-wrapper {
- float: left;
- width: 100%;
- margin: 0; padding: 0;
-}
-#content {
- max-width: 75em;
- overflow: hidden;
- padding: 1em 2em 5em 2em;
- margin: 0 1.5em 0 18em;
- background: white;
- border: .1em solid #ccc;
- -moz-box-shadow: 0 0 .2em .2em #ccc;
- -webkit-box-shadow: 0 0 .2em .2em #ccc;
- -icab-box-shadow: 0 0 .2em .2em #ccc;
- -o-box-shadow: 0 0 .2em .2em #ccc;
- box-shadow: 0 0 .2em .2em #ccc;
-}
-#left-column {
- float: left;
- width: 15em;
- text-align: center;
- padding: .5em 1.5em;
- margin-left: -100%;
+#searcher {
+ display: block;
+ text-align: right;
+ font-size: .9em;
+ font-weight: bold;
+ padding-top: .3em; padding-bottom: .3em;
}
-#left-column a { text-decoration: none; }
-/* Translations */
+/*** TRANSLATION LIST ***/
-#lang {
- max-height: 9em; overflow: auto;
+#translations {
+ clear: both;
font-size: .9em;
- padding: .7em .5em;
- color: #444;
- background: white;
- border: 1px solid #ccc;
+ text-align: left;
+ border-bottom: .2em solid #d4d4d4;
}
-#lang p {
- line-height: 1.4em;
- padding: .2em 0 0 0;
+#translations p {
+ line-height: 1.2em;
+ padding: .3em 0;
margin: 0;
}
-#lang p#set-lang { margin: 0 0 .5em 0; }
-
#translations span {
white-space: nowrap;
- line-height: 1.3em;
+ font-size: .9em;
+ margin-right: .5em;
}
#translations span a, #translations span a:visited {
- color: #333; text-decoration: none;
+ color: #222; text-decoration: none;
}
/* Highlight the link to the original page */
#translations span.original {
- font-weight: bold;
+ font-size: 1em; font-weight: bold;
}
#translations span.original a,
- #translations span.original a:visited,
- #set-lang a, #set-lang a:visited {
- color: #0156bf;
+#translations span.original a:visited {
+ color: #004caa;
+}
+#translations a:hover,
+#translations span.original a:hover {
+ color: #777;
}
-#translations a:hover { color: #0156bf; }
-#translations span.original a:hover,
- #set-lang a:hover { color: #777; }
-/* FSF stuff */
+/*** HEADER ***/
-#fssbox { margin: 2em 0 0 0; }
-#fssbox p { margin: 0 0 .3em 0; }
-#fssbox form p { margin: 0; }
-#fssbox form input[type="submit"] { color: #0156bf; }
-#fssbox form input[type="text"]:focus + input[type="submit"] {
- color: white;
- background: #0156bf;
-}
-#fssbox a, #fssbox a:visited { color: #0156bf; }
-#fssbox a:hover { color: #777; }
+#header a { text-decoration: none; }
+
+/** FSF frame **/
-#join-fsf {
- margin: 1em 1em 2em 1em;
- padding: 1.5em 0 .5em 0;
+#fssbox, #join-fsf { display: none; }
+
+#fsf-frame {
+ float: right;
+ font-size: .9em;
+ text-align: center;
+ margin: .8em 0;
}
-p#join-fsf a, p#join-fsf a:visited {
- color: white;
- background: #0156bf;
+#fsf-frame p {
+ line-height: 1.3em;
+ margin: 0;
}
-p#join-fsf a:hover { color: #ffa; }
-
+#join-fsf a, #join-fsf a:visited {
+ display: inline-block;
+ color: #b02500;
+ background: #fff;
+ border-color: #b02500;
+ padding: .4em .5em .3em;
+}
-/* Navigation */
+#fssbox {
+ padding: 0;
+ margin-top: 1em;
+}
+#fssbox a, #fssbox a:visited {
+ font-weight: bold;
+ color: #004caa;
+}
+#fssbox form p { margin-top: .2em; }
-#navigation {
- clear: right;
- position: absolute; bottom: 1em; left: 1.5em; right: 1.5em;
- margin-left: 16.5em;
+#fssbox input[type="submit"] {
+ color: #004caa;
+ border-color: #004caa;
+}
+#fssbox form input[type="text"]:focus + input[type="submit"] {
background: white;
}
-#navigation ul, ul#edu-navigation {
- text-align: center;
- font-size: .9em;
- padding: .15em .3em;
- margin: 0;
- border: 1px solid #ccc;
+#fsf-frame a:hover, #fssbox input[type="submit"]:hover {
+ color: #777;
+ border-color: #777;
}
-#navigation ul li, ul#edu-navigation li {
- display: inline-block;
- line-height: 1.1em;
- font-weight: bold;
- padding: .2em;
- margin: .1em 0;
- list-style: none;
+/** GNU banner **/
+
+#gnu-banner {
+ font-size: 2em;
+ font-family: "FreeSans", sans-serif;
+ line-height: 1.2em;
+ text-align: center;
+ padding: .3em 0 .7em;
}
-#navigation a, ul#edu-navigation a {
- white-space: nowrap;
- padding: .2em;
- text-decoration: none;
+#gnu-banner img {
+ height: 1.7em;
+ vertical-align: bottom;
+ position: relative; top: .15em;
+ margin-right: .15em;
}
-#navigation a, #navigation a:visited,
- #edu-navigation a, #edu-navigation a:visited {
+#gnu-banner a { color: #333; }
+#gnu-banner a strong { color: #a42e2b; }
+
+/* FSF support */
+#fsf-support { display: none; }
+
+#fsf-support {
+ font-size: .45em;
+ font-style: italic;
+ margin: .7em 0 0;
color: #555;
}
-#navigation li.active a, #navigation li.active a:hover {
- color: white;
- background-color: #a42e00;
-}
-#navigation a:hover { color: #a42e00; }
-#edu-navigation li.active a, #edu-navigation li.active a:hover {
+#fsf-support a, #fsf-support a:visited {
+ font-weight: bold;
color: #555;
- background-color: #c1ddff;
+ text-decoration: underline;
+}
+#fsf-support a:hover {
+ color: black;
+ text-decoration: none;
}
-#edu-navigation a:hover { color: #0156bf; }
-#navigation img {
- height: 1em;
- position: relative; top: .2em;
- margin: 0 .5em;
address@hidden (min-width: 40em) {
+ #fsf-support { display: block; }
+ #gnu-banner { padding-bottom: .5em; }
+}
address@hidden (min-width: 60em) {
+ #gnu-banner { float: left; }
+ #fssbox, #join-fsf { display: block; }
}
-#navigation ul li.no-display { display: none; }
-/* Content headers */
+/*** NAVIGATION BARS ***/
-#content h1, #content h2 {
+#navigation { clear: both; }
+
+/* line-height is defined here for NetSurf 1.2.
+ No effect in NetSurf 2.9 or Firefox. */
+#navigation ul, #fsf-links ul, ul#edu-navigation {
+ font-size: 0.9em;
+ line-height: 1.7em;
+ padding: .15em 0;
+ margin-top: 0; margin-bottom: 0;
+}
+ul#edu-navigation {
+ padding: .15em 1.5%;
+}
+#navigation li, ul#edu-navigation li, #fsf-links li {
+ white-space: nowrap;
+ display: inline;
+ display: inline-block;
+ line-height: 1.5em;
+ font-family: "sans-serif", sans-serif;
font-weight: bold;
- padding: 0;
- margin: .6em 0 1.1em 0;
- color: #0156bf;
+ padding-top: .1em;
+ margin: .1em .4em;
}
-#content h1 { font-size: 2.4em; }
-#content h2 { font-size: 2em; }
-#content h3 { font-size: 1.4em; margin: 1.2em 0 0.7em 0; }
-#content h4 { font-size: 1.2em; margin: 1.0em 0 0.83em 0; }
-#content h5 { font-size: 1.1em; margin: 1.0em 0 0.91em 0; }
-#content h6 { font-size: 1.0em; margin: 1.0em 0 1.0em 0; }
+/* Mock border to avoid size change when a link becomes active */
+#navigation li { border-bottom: .15em solid #a42e2b; }
+ul#edu-navigation li { border-bottom: .15em solid #eee; }
+#fsf-links li { padding-bottom: .15em; }
-/*** MISSION STATEMENT AND FOOTER ***/
+ /* For Firefox (can't set line-height when "a" is displayed inline) */
+#navigation a, ul#edu-navigation a, #fsf-links a {
+ display: inline-block;
+ padding-top: .1em;
+}
-#mission-statement {
- font-size: .9em;
- padding: 0 .5em .5em .5em;
- color: #444;
- background: white;
- border: 1px solid #ccc;
+#navigation, #navigation a, #navigation a:visited { color: white; }
+#edu-navigation, #edu-navigation a, ul#edu-navigation a:visited,
+ #fsf-links a, #fsf-links li a:visited { color: #222; }
+
+#navigation li.active {
+ font-style: italic;
+ border-bottom: .15em solid white;
}
-#mission-statement blockquote {
- font-weight: bold;
+ul#edu-navigation li.active,
+ ul#edu-navigation li.current {
+ font-style: italic;
+ border-bottom: .15em solid #a42e2b;
}
-#mission-statement img {
- height: 2em;
- padding: .2em 0;
+#navigation li a, ul#edu-navigation li a, #fsf-links li a,
+ #navigation li.active a:hover,
+ ul#edu-navigation li.active a:hover {
+ text-decoration: none;
}
+#navigation a:hover, ul#edu-navigation a:hover,
+ #fsf-links a:hover { text-decoration: underline; }
-#footer {
- max-width: 75em;
- text-align: center; /* Probably not the best. */
- color: #333;
- padding: 0 2em;
- margin-left: 18em; margin-bottom: 1em;
-}
-#footer p { font-size: .9em; margin: 0; }
-#footer .unprintable, #footer .translators-credits {
- margin-bottom: .7em;
-}
+/*** CONTENT ***/
-#bottom-notes { margin-top: .7em; }
+#content { margin-bottom: 2.5em; }
+p.byline {
+ font-size: 1.1em;
+ margin: 1.5em 0;
+}
+.article { font-size: 1.1em; }
+.article h3 { font-size: 1.4em; }
-/*** FOR NARROW SCREENS ***/
+h3.subheader {
+ padding-bottom: .2em;
+ border-bottom: 1px solid #bbb;
+}
+.columns p.inline-block {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0;
+}
address@hidden (max-width: 55em) {
- #content-wrapper, #content, #left-column { float: none; }
- #header, #content, #mission-statement, #footer {
- padding-left: 3%; padding-right: 3%;
- margin-left: 0; margin-right: 0;
- }
- #header { border-bottom: .2em solid #ccc; }
- #gnu-banner { margin: 0 1.5em .3em 0; }
- #fsf-support { display: block; margin: 0 1em 1.7em 0; }
- #navigation { position: static; margin: 0 0 .7em 9.5em; }
- #navigation li#i18n { display: inline; }
- #content { border: none; margin-bottom: none; box-shadow: none; }
- #content { margin: 0; }
- ul#edu-navigation { margin-top: 0; }
- div.inner #backtotop { bottom: 2em; }
- #left-column {
- clear: both;
- width: auto;
- /* The following fills up the space left by #backtotop */
- position: relative; bottom: 1em;
- padding: 0; margin: 0;
- border-top: 1px solid #bbb;
+/* Can be applied to div or hr. */
+.column-limit {
+ height: .4em;
+ width: 10%;
+ margin: 1.5em auto;
+ border: none;
+ background: #bbb;
+ background-image: linear-gradient(to right, white, #bbb, white);
+}
+
address@hidden (min-width: 53em) {
+ .columns {
+ -webkit-column-count: 2;
+ -webkit-column-gap: 1.5em;
+ -moz-column-count: 2;
+ -moz-column-gap: 1.5em;
+ column-count: 2;
+ column-gap: 1.5em;
}
- #lang { padding: 1em 3%; }
- #footer { text-align: center; }
- .summary { width: 70%; }
-}
-
address@hidden (max-width: 45em) {
- #searcher { display: none }
- #navigation ul li#search { display: inline; }
-}
address@hidden (max-width: 38em) {
- #navigation { margin: 0; }
- #navigation { clear: none; float: right; margin-top: 1em; }
- #navigation ul li { display: none; }
- #navigation ul li#i18n, #navigation ul li#menu { display: inline; }
- #edu-navigation { display: none; }
-}
-
address@hidden (max-width: 21em) {
- #header { text-align: center; }
- #toplinks > span { display: inline; }
- p#toplinks { margin-top: 0; }
- #gnu-banner {
- clear: left; float: none;
- margin: .5em auto 0 auto;
+ .columns > *:first-child { margin-top: 0 }
+ .columns > *:last-child { margin-bottom: 0; }
+ .reduced-width {
+ width: 45em;
+ margin: 1.5em auto;
}
- p#fsf-support { margin: 0; }
- #navigation { float: none; margin-bottom: .5em; }
- #navigation li { margin: 0; }
- #content h1 { font-size: 1.8em; text-align: center; }
- #content h2 { font-size: 1.6em; text-align: center; }
- .note { display: none }
}
-/*********************
- ** SPECIAL PAGES **
- *********************/
-
-/*** TRANSLATIONS ***/
+/*** MISSION STATEMENT ***/
-/* Note saying the page is a translation. */
-.trans-disclaimer {
- text-align: center;
+#mission-statement {
+ clear: both;
+ font-size: 0.9em;
+ margin-top: 2em; margin-bottom: 2em;
+}
+#mission-statement blockquote {
font-weight: bold;
font-style: italic;
- margin: 1em; margin-bottom: 0;
+ margin: 0;
+}
+#mission-statement img {
+ float: left;
+ height: 2em;
+ margin: .5em;
}
-.trans-disclaimer a,
-.trans-disclaimer a:visited { color: #333; }
-.trans-disclaimer a:hover { color: #777; }
-/* Outdated translations */
-#outdated {
- text-align: center;
- padding: .7em 3%;
- margin-top: 1.5em;
- background-color: #f5f5f5;
- border-left: 1em solid #fd7e2a;
- border-right: 1em solid #fd7e2a;
- border-top: 1px solid #fd7e2a;
- border-bottom: 1px solid #fd7e2a;
- border-radius: 3em;
- -moz-border-radius: 3em;
- -khtml-border-radius: 3em;
- -webkit-border-radius: 3em;
- -opera-border-radius: 3em;
+
+/*** FOOTER ***/
+
+#footer {
+ font-size: .9em;
+ padding-top: 1.5em; padding-bottom: 1.5em;
+ color: #333;
+ border-top: 1px solid #ccc;
}
-#outdated p {
- margin: .2em 0;
+#footer p, #bottom-notes {
+ line-height: 1.3em;
+ margin: 0;
}
+.unprintable { margin-bottom: .7em; }
-/* Translators notes */
-.translators-notes {
- font-size: .9em; margin-top: 2.2em;
-}
+.translators-credits { margin: .7em 0; }
+
+#footer p.unprintable, #generic p { margin-top: .7em; }
/*** EDUCATION ***/
/* Breadcrumbs */
-#content .edu-breadcrumb {
+.edu-breadcrumb {
font-size: .9em;
font-weight: bold;
- padding-bottom: .5em;
- margin: .3em 0 0 0;
+ padding-top: .4em;
+ margin-top: 0;
color: #333;
}
-#content .edu-breadcrumb a,
-#content .edu-breadcrumb a:visited {
- color: #0156bf;
+.edu-breadcrumb a,
+.edu-breadcrumb a:visited {
+ color: #004caa;
text-decoration: none;
}
-#content .edu-breadcrumb a:hover {
+.edu-breadcrumb a:hover {
color: #777;
}
/* Subsections of /education "Case Studies" */
-div.edu-cases {
- border-top: .35em ridge #3673bf;
- border-bottom: .35em ridge #3673bf;
+.edu-cases {
+ border-top: 5px ridge #3465a4;
+ border-bottom: 5px ridge #3465a4;
padding: 1.5em 0;
margin: 2em 4%;
}
/* make h3 for edu-cases look like h4 for other pages */
-#content div.edu-cases h3 {
- font-size: 1.2em;
- margin: 1em 0;
+.edu-cases h3 {
+ font-size: 1.3em;
+ margin: 0; margin-bottom: 1em;
+}
+.edu-cases ul, .edu-cases ol {
+ padding: 0 4%;
}
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- www/server/staging/layout layout.css,
Therese Godefroy <=