[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www/server/staging layout/banner.html layout/bo...
|
From: |
Therese Godefroy |
|
Subject: |
www/server/staging layout/banner.html layout/bo... |
|
Date: |
Mon, 30 Mar 2020 09:06:59 -0400 (EDT) |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 20/03/30 09:06:59
Modified files:
server/staging/layout: banner.html body-include-1.html
body-include-2.html footer-text.html
layout.css
server/staging/readability: free-sw.html
Log message:
Translation button links to translist.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/banner.html?cvsroot=www&r1=1.5&r2=1.6
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/body-include-1.html?cvsroot=www&r1=1.6&r2=1.7
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/body-include-2.html?cvsroot=www&r1=1.11&r2=1.12
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/footer-text.html?cvsroot=www&r1=1.9&r2=1.10
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/layout.css?cvsroot=www&r1=1.12&r2=1.13
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/readability/free-sw.html?cvsroot=www&r1=1.30&r2=1.31
Patches:
Index: layout/banner.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/banner.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -b -r1.5 -r1.6
--- layout/banner.html 30 Jan 2020 18:13:34 -0000 1.5
+++ layout/banner.html 30 Mar 2020 13:06:58 -0000 1.6
@@ -2,8 +2,8 @@
<!--#include virtual="/server/staging/head-include-2.html" -->
</head>
<body>
-<div class="inner">
<!--#include virtual="/server/staging/layout/body-include-1.html" -->
-<!--#include virtual="/server/staging/body-include-2.html" -->
+<div class="inner">
+<!--#include virtual="/server/staging/layout/body-include-2.html" -->
<div id="content">
<!-- end of server/banner.html -->
Index: layout/body-include-1.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/body-include-1.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -b -r1.6 -r1.7
--- layout/body-include-1.html 1 Feb 2020 13:02:05 -0000 1.6
+++ layout/body-include-1.html 30 Mar 2020 13:06:58 -0000 1.7
@@ -1,8 +1,9 @@
<!-- start of server/body-include-1.html -->
-<div id="toplinks">
-
-<a class="no-display" href="#content"><b>Skip to main text</b></a>
+<div>
+<a class="skip" href="#content"><b>Skip to main text</b></a>
+</div>
+<div id="fsf-frame">
<div id="join-fsf" class="button"><a
href="https://www.fsf.org/associate/support_freedom?referrer=4052";>JOIN THE FSF</a>
</div>
@@ -14,7 +15,9 @@
<input type="hidden" name="group[25]" value="1" />
<input name="cancelURL" type="hidden"
value="https://crm.fsf.org/civicrm/profile?reset=1&gid=31"; />
<input name="_qf_default" type="hidden" value="Edit:cancel" />
- <label>BoletÃn «<cite><a href=\"//www.fsf.org/fss\">Free Software
Supporter</a></cite>» (también en español):</label>
+ <label for="frmEmail"><span class="gnun-split"></span>
+ <a href="//www.fsf.org/fss">Free Software Supporter</a>:
+ <span class="gnun-split"></span></label>
<div>
<input type="text" id="frmEmail" name="email-Primary" size="18"
maxlength="80"
value="email address" onfocus="this.value=''"/>
@@ -22,7 +25,39 @@
</div>
</fieldset>
</form>
-
<div style="clear: both"></div>
</div>
+
+<div id="header">
+<p id="gnu-banner">
+ <a href="/">
+ <img src="/graphics/heckert_gnu.transp.small.png" height="48"
+ alt=" [A GNU head] " /><strong>GNU</strong> <span
+ class="hide">Operating System</span></a><br />
+ <span id="fsf-support">Supported by the
+ <a href="#mission-statement">Free Software Foundation</a></span>
+</p>
+
+<div id="switches">
+ <label for="navbar-input" id="navbar-button" class="switch">
+ <img id="navbar-icon" width="1" height="1"
+ src="/server/staging/layout/menu.png"
+ alt=" [Show/Hide main menu in browsers that support CSS3] " />
+ </label>
+
+ <a id="search-button" class="switch" href="//www.gnu.org/cgi-bin/estseek.cgi">
+ <img id="search-icon" height="32"
+ src="/server/staging/layout/search.png"
+ alt=" [Search www.gnu.org] " />
+ </a>
+<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" -->
+ <a id="language-button" class="switch" href="#languages">
+ <img id="language-icon" height="32"
+ src="/server/staging/layout/flags.1.png"
+ alt=" [Languages] " />
+ </a>
+<!--#endif -->
+
+</div>
+</div>
<!-- end of server/body-include-1.html -->
Index: layout/body-include-2.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/body-include-2.html,v
retrieving revision 1.11
retrieving revision 1.12
diff -u -b -r1.11 -r1.12
--- layout/body-include-2.html 15 Jan 2020 19:25:46 -0000 1.11
+++ layout/body-include-2.html 30 Mar 2020 13:06:58 -0000 1.12
@@ -1,57 +1,7 @@
<!-- start of server/body-include-2 -->
-<div id="header">
-
-<div id="switches">
-<label for="navbar-input" id="navbar-button" class="switch">
- <img id="navbar-icon" src="/server/staging/layout/menu.png"
- alt="[Toggle main navigation bar] "
- title="Toggle main navigation bar" />
-</label>
-
-<span id="search-button" class="switch">
- <a href="//www.gnu.org/cgi-bin/estseek.cgi">
- <img id="search-icon"
- src="/server/staging/layout/search.png"
- alt=" [Search www.gnu.org] "
- title="Search www.gnu.org" /></a>
-</span>
-
-<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" --><label
- for="language-input" id="language-button" class="switch">
- <img id="language-icon"
- src="/server/staging/layout/flags.1.png"
- alt=" [Languages - Toggle translation list] "
- title="Languages - Toggle translation list" />
-</label><!--#endif -->
-</div>
-
-<p id="gnu-banner">
-<a href="/">
-<img src="/graphics/heckert_gnu.transp.small.png"
- alt=" [A GNU head] " /><span class="hide">El sistema
-operativo </span><strong>GNU</strong></a><br />
-<span id="fsf-support" class="hide">Patrocinado por la <a
-href="#mission-statement">Free Software Foundation</a></span>
-</p><!-- /gnu-banner -->
-
-</div>
-
-</div><!-- /#header -->
-
-<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" -->
-<input type="checkbox" id="language-input" />
-<div id="languages">
-<p id="set-language" title="Set your preferred language on gnu.org">
- <span class="gnun-split"></span><!--#echo
- encoding="none" var="language_selector" -->Set
- language<span class="gnun-split"></span><!--#echo
- encoding="none" var="closing_anchor" -->
-</p>
-
-<!--#echo encoding="none" var="TRANSLATION_LIST" -->
-</div>
-</div><!--#endif -->
-
+<!--#set var="MARK_START" value=" <span class='no-display'>=</span> " -->
+<!--#set var="MARK_END" value=" <span class='no-display'>=</span> " -->
+<div style="clear: both"></div>
<input type="checkbox" id="navbar-input" />
<div id="navigation">
<ul>
@@ -85,7 +35,7 @@
<!--#else -->
<li id="tabLicenses"><a href="/licenses/licenses.html">LICENSES</a></li>
<!--#endif -->
-<!--#if expr="$REQUEST_URI = /edu-/" -->
+<!--#if expr="$REQUEST_URI = /^\/education\//" -->
<li id="tabEducation" class="active">
<!--#echo encoding="none" var="MARK_START" -->
<a href="/education/education.html">EDUCATION</a>
@@ -125,8 +75,8 @@
<!--#else -->
<li id="tabHelp"><a href="/help/help.html">HELP GNU</a></li>
<!--#endif -->
- <li id="more-links"><a href="#fsf-links">More ▼</a></li>
+ <li id="more-links"><a href="#fsf-links"><sup>...</sup> ▼</a></li>
</ul>
-<div style="clear: both"></div>
-</div>
+ <div style="clear: both"></div>
+</div><!-- /"navigation -->
<!-- end of server/body-include-2 -->
Index: layout/footer-text.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/footer-text.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -b -r1.9 -r1.10
--- layout/footer-text.html 16 Dec 2019 21:43:20 -0000 1.9
+++ layout/footer-text.html 30 Mar 2020 13:06:58 -0000 1.10
@@ -1,33 +1,62 @@
<!-- begin server/footer-text.html -->
+<!--#set var="HTML_BODY" value="yes" -->
+<!--#set var="cb" value="$REQUEST_URI" -->
+<!--#if expr="$cb = /^([^?]*)[?]/" -->
+<!--#set var="cb" value="$1" -->
+<!--#endif -->
+<!--#set var="language_selector"
+ value='<a href="/server/select-language.html?callback=$cb" rel="nofollow">'
-->
+<!--#set var="closing_anchor" value='</a>' -->
<div style="clear:both"></div>
-<div id="back-to-top"><a href="#toplinks"><span>TOP</span> ▲</a></div>
-<hr class="no-display" />
+<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" -->
+<div id="languages">
+<div class="backtotop">
+ <hr class="no-display" />
+ <a href="#header"><span>BACK TO TOP </span>▲</a>
+</div>
+<div id="set-language" class="button">
+ <span class="gnun-split"></span>
+ <!--#echo encoding="none" var="language_selector" -->
+ Set language
+ <span class="gnun-split"></span>
+ <!--#echo encoding="none" var="closing_anchor" -->
+</div>
+<p>Available for this page:</p>
+<!--#echo encoding="none" var="TRANSLATION_LIST" -->
+</div><!--#endif -->
+
<div id="fsf-links">
+ <div class="backtotop">
+ <hr class="no-display" />
+ <a href="#header"><span>BACK TO TOP </span>▲</a>
+ </div>
+
<ul>
+ <li class="gnu"><a href="/proprietary/proprietary.html">MALWARE</a></li>
<li class="gnu"><a href="/graphics/graphics.html">GNU ART</a></li>
<li class="gnu"><a href="/people/people.html">GNU'S WHO?</a></li>
<li class="gnu"><a href="/server/sitemap.html">SITEMAP</a></li>
<li><a href="//directory.fsf.org">SOFTWARE DIRECTORY</a></li>
<li><a href="https://h-node.org/";>HARDWARE</a></li>
</ul>
-</div><!-- /fsf-links -->
+</div>
+<div style="clear: both"></div>
<div id="mission-statement">
-
+<hr class="no-display" />
<blockquote>
<p style="direction:ltr; text-align:left"><a href="//www.fsf.org"><img
id="fsfbanner"
-src="/graphics/fsf-logo-notext-small.png" alt=" [FSF logo] "/></a><strong>
+src="/graphics/fsf-logo-notext-small.png" alt=" [FSF
logo] "/></a><strong>
“The Free Software Foundation (FSF) is a nonprofit with a worldwide
mission to promote computer user freedom. We defend the rights of all
software users.”</strong></p>
</blockquote>
-<p id="support-the-fsf" class="button">
+<div id="support-the-fsf" class="button">
<a class="join"
href="//www.fsf.org/associate/support_freedom?referrer=4052">JOIN</a>
<a class="donate" href="//donate.fsf.org/">DONATE</a>
<a class="shop" href="//shop.fsf.org/">SHOP</a>
-</p>
-
-</div><!-- /mission-statement -->
+</div>
+</div>
<!-- end server/footer-text.html -->
Index: layout/layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/layout.css,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -b -r1.12 -r1.13
--- layout/layout.css 17 Jan 2020 20:06:56 -0000 1.12
+++ layout/layout.css 30 Mar 2020 13:06:58 -0000 1.13
@@ -3,8 +3,7 @@
(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, 2007, 2008, 2009, 2010, 2011,
- 2013, 2014, 2015, 2016, 2017, 2019 Free Software Foundation
+Copyright (C) 2006-2011, 2013-2017, 2019, 2020 Free Software Foundation
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
@@ -34,14 +33,46 @@
*/
+/* CONTRAST
+
+ source: http://juicystudio.com/services/luminositycontrastratio.php
+
+ Color1 Color 2 Contrast Passing
+ ratio level
+Black-gray
+ #000 white 21.30 AAA
+ #222 white 15.91 AAA
+ #333 white 12.63 AAA
+ #333 #eee 10.89 AAA
+
+
+Red
+ #a42e2b white 6.99
+
+Blue (non-visited links)
+ #049 white 9.18 AAA
+ #eee 7.91 AAA
+ #ddd 6.76 AA
+ #333 1.38
+ #222 1.73
+ black 2.29
+
+Gray (visited links)
+ #595959 white 7.00 AAA
+ #222 2.27
+ black 3.00
+ #049 1.31
+*/
+
+
/* PAGE STRUCTURE
From top to bottom:
- #toplinks (skiplink, #fssbox, #join-fsf) [body-include-1.html]
- #header (#switches, #gnu-banner,
- #languages, #navigation) [body-include-2.html]
- (#edu-navigation in a few pages) [<page>.html]
+ skiplink, #fsf-frame (#, #fssbox) [body-include-1.html]
+ #header (#switches, #gnu-banner, #navigation) [body-include-2.html]
+ (#edu-navigation / #navlinks in a few pages) [<page>.html]
#content [<page>.html]
+ #languages [footer-text.html]
#fsf-links [footer-text.html]
#mission-statement [footer-text.html]
#footer [<page>.html]
@@ -50,485 +81,988 @@
/* TABLE OF CONTENTS
- * Invariant (html, body, .inner, basic styles)
- * Layout of building blocks (paragraphs, headers, lists, tables, separators,
- forms, buttons & links, emphasized text, images)
- * Layout of main divs
- - Header & navigation for CSS3-unaware browsers
- - CSS3 media queries for header & navigation (#navigation,
#edu-navigation,
- #fsf-links, #back-to-top)
+ * Transition from previous version
+
+ * PAGE STRUCTURE
+ - html, body, .inner
+ - header for CSS3-unaware browsers
+ #gnu-banner
+ searcher, language & menu icons
+ - navbars & back-to-top (layout, style)
+ - languages for CSS3-unaware browsers
+ - media queries for header, navbars & languages
+ #fsf-frame (> 57em)
- #content
+ navigation (breadcrumb & edu-breadcrumb)
+ byline
+ text of the article (reduced-width, columns, infobox)
+ for translations (trans-disclaimer, #outdated, translators-notes)
+ for the Education section (edu-cases)
+ for the Malware section (about-dir, about-page)
- #mission-statement
- #footer
- * Font family
- * Color, background, border
+
+ * BUILDING BLOCKS
+ - simple text styling (small, strong, em, etc.)
+ - basic classes, mostly replacing inline elements like small or em
+ - blocks of text (p, blockquote, etc.)
+ - h* headers
+ - lists
+ - separators
+ - tables
+
+ * IMAGES & EMPHASIZED TEXT
+ - images
+ - text with no background or border
+ - text with background (layout, style)
+ - text with left border (layout, style)
+ - notes (layout, style)
+ - table of contents: toc, summary & toc-inline
+ - media queries for note & summary
+
+ * INTERACTIVE ELEMENTS
+ - links (special links, style)
+ - forms & buttons (layout, style)
+
+ * FONT FAMILY
*/
+/************************************/
+/* Transition from previous version */
+/************************************/
-/*============================================================================*/
-/* INVARIANT
*/
-/*============================================================================*/
+#header #fsf-frame { display: none; }
+#navlinks { display: none; }
+/*** TOPLINKS ***/
-html, body {
- font-size: 1em;
- text-align: left;
+#toplinks {
+ float: left;
+ font-size: .9em;
+ padding: .5em 2em .3em;
+}
+@media (min-width: 0) {
+ #toplinks { padding: .6em 3% .3em; }
+}
+#toplinks a {
+ white-space: nowrap;
+ display: inline-block;
+ font-family: "Noto Sans Display", "Noto Sans", "Liberation Sans",
+ sans-serif;
+ font-weight: bold;
+ margin-right: 1em;
+}
+#toplinks a[href]:link, #toplinks a[href]:link:visited {
+ color: #444;
text-decoration: none;
}
-
-/* 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; /* About 1200px */
- margin: auto;
+#toplinks a[href]:link:hover, #toplinks a[href]:link:visited:hover {
+ color: #006400;
}
-.inner { overflow: hidden; }
+/*** SEARCHER ***/
-/*** BASIC STYLES ***/
+div#searcher {
+ display: block;
+ font-size: .9em;
+ text-align: right;
+ padding: .2em 3%;
+ background-color: #eee;
+}
-small { font-size: .9em; }
-strong { font-weight: bold; }
-em, cite { font-style: italic; }
-em i, em cite, cite i, cite em { font-style: normal; }
-acronym, abbr {
- text-decoration: none;
- border-bottom: 1px dotted #000;
- cursor: help;
+/*** TRANSLATION LIST ***/
+
+.inner > #translations {
+ clear: both;
+ font-size: .9em;
+ text-align: left;
+ columns: 1;
+ border-bottom: .2em solid #ddd;
+}
+.inner > #translations p {
+ padding: 0 3%;
+ line-height: 1.2em;
+ margin: 0;
+}
+.inner > #translations span {
+ display: inline;
+ white-space: nowrap;
+ width: auto;
+ font-size: .9em;
+}
+.inner > #translations span a, #translations span a:visited {
+ padding: 0;
+ width: auto;
+ color: #222; text-decoration: none;
+}
+.inner > #translations span.original {
+ font-size: 1em; font-weight: bold;
}
-.italic { font-style: italic; }
-.italic em, .italic cite, .italic i { font-style: normal; }
-.center, .c { text-align: center; }
-.nocenter{ text-align: left; }
-.underline { text-decoration: underline; }
-.nounderline { text-decoration: none; }
-.small { font-size: .9em; }
-.big { font-size: 1.1em; }
-.inline-list li { display: inline }
-.no-bullet li { list-style: none; }
-.no-display { display: none; }
+/*** BANNER ***/
-/* Rarely used */
-del { text-decoration: line-through; }
-caption { margin-bottom: .5em; text-align: center; }
-sup { vertical-align: super; }
-sub { vertical-align: sub; }
+div#gnu-banner { line-height: 1.2em; padding: .4em 0 .5em; }
+div#gnu-banner strong, div#gnu-banner img { vertical-align: bottom; }
-/*============================================================================*/
-/* LAYOUT OF BUILDING BLOCKS
*/
-/*============================================================================*/
+/*====================================================================*/
+/* MAIN DIVS & CONSTANT FEATURES */
+/*====================================================================*/
-/*** PARAGRAPHS ***/
+html, body {
+ font-size: 1em; /* 16px */
+ text-align: left;
+ text-decoration: none;
+ color: #222;
+}
+html { background: #e4e4e4; }
-p, pre { line-height: 1.5em; }
-address { line-height: 1.3em; }
-blockquote { margin: 1em 3%; }
+/* 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; /* About 1200px */
+ margin: auto;
+ background: white;
+ border: .1em solid #bbb;
+ border-top: 3px solid #a42e2b;
+ -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;
+}
+.inner { overflow: hidden; }
-/* The top margin should be sufficient. The bottom margin is only useful
- if the element that follows is an anonymous box. */
-p, pre, address { margin: 1em 0; }
-pre { padding-bottom: .3em; overflow: auto; }
+/**************************************/
+/* HEADER FOR CSS3-UNAWARE BROWSERS */
+/**************************************/
-/*** <h*> HEADERS ***/
-h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+/*** TOP LINKS ***/
-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; }
+.skip, #fsf-frame {
+ position: fixed;
+ top: -1000px;
+}
-/** Big section headers **/
+/*** BANNER ***/
-/* For browsers that don't support inline-block */
-.big-section {
- clear: left;
- float: left;
+#header {
+ padding: 0 3%;
+ text-align: center;
}
-.big-section h3 {
+#gnu-banner {
display: inline-block;
- font-size: 1.7em;
- padding: .2em 0;
- margin: 1em .3em .5em 0;
+ font-size: 1.875em; /* 30px */
+ line-height: 1em;
+ padding: .25em 0 .3em;
+ margin: 0;
}
-.big-subsection {
- margin: 1.5em 0;
+#gnu-banner img {
+ display: inline-block;
+ vertical-align: middle;
+ height: 1.5em;
+ margin-right: .15em;
}
-.big-subsection h4 {
- display: inline;
- font-size: 1.5em;
- margin-right: .3em;
+#gnu-banner strong { font-weight: normal; }
+
+#fsf-support { display: none; }
+
+/*** SEARCHER, LANGUAGES & MENU ICONS ***/
+
+#switches {
+ display: inline-block;
+ line-height: 2em;
+ padding: .3em 0;
}
-/* The next two statements adjust line spacing in Netsurf 1.2 */
-.big-subsection {
- line-height: 2.0em;
+.switch {
+ display: inline-block;
+ height: 1.5em;
+ margin-left: .4em;
}
-.big-subsection h4 {
- line-height: 1.2em;
+.switch img {
+ display: inline-block;
+ vertical-align: top;
+ height: 1.5em;
+ width: auto;
+ padding: .1em;
}
-
-/** Article headers **/
-
-.article h2 {
- font-size: 1.7em;
- margin: .8em 0;
- padding: .2em .3em;
- border-left: .7em solid #eee;
+#language-link {
+ display: inline-block;
+ vertical-align: middle;
+ margin: .2em 0;
}
-.article h3 { font-size: 1.4em; }
-.article h4 { font-size: 1.15em; }
-.article .big-section h3 { font-size: 1.6em; }
-.article .big-subsection h4 { font-size: 1.4em; }
+/* #outdated-input, #outdated-button,*/
+#navbar-input, #navbar-button { display: none; }
-/*** LISTS ***/
+/***************************/
+/* NAVBARS & BACK TO TOP */
+/***************************/
-ol li { list-style: decimal outside; }
-ul li { list-style: square outside; }
-ul ul li, ol ul li { list-style: circle; }
+/** LAYOUT **/
-li, dt, dd { line-height: 1.5em; }
-ul, ol { margin: 1em 1.5%; }
+#navigation ul, #fsf-links ul { margin: 0; }
+ul#edu-navigation { margin: 0 -3.2%; }
-/* Lists of underlined links are difficult to read. The top margin
- gives a little more spacing between entries. */
-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;
+/* 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: .94em; */
+ line-height: 2em;
+/* font-weight: bold; */
+ padding: 0 1.5%;
+}
+#navigation li, ul#edu-navigation li, #fsf-links li {
+ white-space: nowrap;
+ display: inline;
+ display: inline-block;
+ line-height: 1.8em;
+ padding: 1px;
+ margin: 0;
+ font-weight: bold;
}
-ul ul, ol ul, table ul { margin: 0 1.5%; }
-ul.blurbs li { margin-top: 1em; }
-ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li {
- margin-top: .5em;
+/* For Firefox (can't set line-height when "a" is displayed inline) */
+#navigation a, ul#edu-navigation a, #fsf-links a {
+ display: inline-block;
+ line-height: 2em;
+ padding: 0 .4em;
+ margin: 0;
+}
+#more-links {
+ float: right;
+ padding: 0;
+}
+#more-links sup {
+ font-size: 1.5em;
+ line-height: .6em;
}
+.backtotop { font-size: 1.1em; }
+#fsf-links .backtotop { margin: .15em 1.5em 0; }
-/* Separate description lists from preceding text */
-dl { margin: 1.5em 0 0 0; }
-/* separate the "term" from subsequent "description" */
-dt { font-weight: bold; margin: 1em 0; }
-/* separate the "description" from subsequent list item
- when the final <dd> child is an anonymous box */
-dl dd { margin: 1em 3% 1.5em 3%; }
+/** STYLE **/
-dl.compact { margin: .5em 0; }
-dl.compact dt {
- font-weight: normal;
+#navigation a, ul#edu-navigation a, #fsf-links a {
+ text-decoration: none;
+}
+#navigation { background: #a42e2b; }
+ul#edu-navigation { background: #eee; }
+#fsf-links { background: #d4d4d4; }
+
+#navigation a { color: white; }
+ul#edu-navigation a,
+#fsf-links a { color: #333; }
+#fsf-links .gnu a { color: #850803; }
+
+#navigation li a:hover { background: #8c0300; }
+ul#edu-navigation li a:hover { background: #fafafa; }
+#fsf-links li a:hover { background: #eee; }
+
+#navigation li.active a,
+ul#edu-navigation li.active a,
+ul#edu-navigation li.current,
+#navlinks li.current > a {
font-style: italic;
- margin: .5em 0 0;
+ cursor: default;
+ pointer-events: none;
+}
+#navigation li.active,
+#navigation li.active a:hover {
+ background: #800300;
+}
+ul#edu-navigation li.active,
+ul#edu-navigation li.active a:hover,
+ul#edu-navigation li.current {
+ background: white;
+}
+#navlinks li.current > a[href],
+#navlinks li.current > a[href]:hover {
+ color: #333;
+ background: none;
}
-dl.compact dd { margin: .3em 3% 0; }
-dl.compact dd p { margin: .3em 0 0; }
-dl.compact dd ul { margin: .3em 1.5% 0; }
-/*** TABLES ***/
+/*****************************************/
+/* LANGUAGES FOR CSS3-UNAWARE BROWSERS */
+/*****************************************/
-th, td {
- border: 1px solid #bbb; /* default */
- padding: .5em;
-}
-th { font-weight: bold; text-align: center; }
-table { margin: 1em 0; }
-.listing,
-.stx table {
- /* The default table for document listings. Contains name, document types,
- modification times etc in a file-browser-like fashion */
- border-collapse: collapse;
- margin: 1em 0;
+#languages {
+ font-size: .94em; /* 15px */
+ line-height: 1.2em;
+ text-align: left;
+ padding: .6em 3%;
+ margin: 0;
+ background: #f5f5f5;
+ border-top: 3px solid #ddd;
}
-.listing th,
-.stx table th {
- font-weight: normal;
- padding: .7em;
+#set-language {
+ margin-bottom: .2em;
}
-/* This doesn't work if the a element is within normal text. */
-.listing td a { display: block; }
-.listing .top {
- text-align: right;
- padding: 0 0 1em 0;
+#set-language + p {
+ display: inline-block;
+ font-size: 1em; /* 15px */
+ margin: .45em 0 0;
}
-.listing .listingCheckbox {
- text-align: center;
+
+#translations {
+ padding: .4em 0;
}
-.listing td,
-.stx table td {
- padding: 1em;
- text-align: center;
- line-height: 1.3em
-}
-.listing img {
- vertical-align: middle;
+#translations p { margin: 0; }
+#translations span {
+ display: inline-block;
+ width: 10.5em;
+ line-height: 2em;
+ margin: 0;
}
-.listing {
- width: 100%;
- display: block;
- overflow: auto;
- padding: .1em;
- margin: auto;
+#translations span a {
+ line-height: 1.9em;
}
+#translations span.original { font-weight: bold; }
-/*** SEPARATORS ***/
+/***************************************************/
+/* MEDIA QUERIES FOR HEADER, NAVBARS & LANGUAGES */
+/***************************************************/
-hr {
+
+@media (min-width: 0) {
+ body { font-size: .94em; }
+ .inner { position: relative; }
+ #header { display: block; }
+
+ #gnu-banner .hide { display: none; }
+ #gnu-banner {
+ font-size: 2em; /* 30px */
+ padding-left: 0;
+ margin: 0;
+ }
+ #gnu-banner img { height: 1.3em; }
+ #gnu-banner strong {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ #switches {
display: block;
- margin: 1.2em 0;
-}
+ padding: 0
+ }
+ .switch { margin: 0 3%; }
-/* For license-list.html, but could be used elsewhere. */
-hr.separator {
- height: .3em;
- border: none;
-}
-hr.thin {
- clear: both;
- height: 1px;
- margin: 1.5em 0;
- border: none;
+ #navbar-button { display: inline-block; }
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+/* This will need to be commented out until all the translated includes are
+ regenerated. */
+ #navigation, #fsf-links { height: 3px; }
+ #navigation ul, #fsf-links ul { display: none; }
+ #fsf-links .backtotop { margin: .5em 3% 0 1.5em; }
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+ #navbar-input:checked ~ #navigation { height: auto; }
+ #navbar-input:checked ~ #navigation ul { display: block; }
+ #navbar-input:checked ~ #fsf-links { height: auto; }
+ #navbar-input:checked ~ #fsf-links ul { display: block; }
+ #navbar-input:checked ~ #fsf-links .backtotop { margin-top: .15em; }
+
+ #translations {
+ column-width: 10em;
+ column-gap: 0;
+ }
+ #translations span {
+ display: block;
+ }
+ #translations span a {
+ display: inline-block;
+ }
+/*
+ #outdated-button {
+ display: inline-block;
+ float: right;
+ margin-right: 0;
+ }
+ #outdated { display: none; }
+ #outdated-input:checked ~ #outdated { display: block; }
+*/
+ ul#edu-navigation { display: none; }
}
-/* Can be applied to div or hr. */
-.column-limit {
- height: .4em;
- width: 10%;
- margin: 2em auto;
- border: none;
- background: #bbb; /* default */
+
+@media (min-width: 19.5em) { /* 312px */
+ #header {
+ display: table;
+ width: 94%;
+ }
+ p#gnu-banner, #switches {
+ display: table-cell;
+ vertical-align: middle;
+ }
+ p#gnu-banner { font-size: 2.2em; }
+ #switches { padding-top: .3em; padding-left: 1.5em; }
}
+@media (min-width: 45em) { /* 720px */
+ body { font-size: 1em; }
-/*** FORMS ***/
+ p#gnu-banner { line-height: .7em; }
+ #gnu-banner .hide {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ #fsf-support {
+ display: block;
+ font-size: .4em; /* 14px */
+ margin: 0;
+ }
+ #fsf-support a { font-weight: bold; }
-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;
+ #outdated-button { display: none; }
+ #outdated { display: block; }
+
+ #navbar-button { display: none; }
+ #navigation, #fsf-links { height: auto; }
+ #navigation ul, #fsf-links ul, ul#edu-navigation {
+ display: block;
+ }
+ #fsf-links .backtotop { margin-top: .15em; }
}
-form.header input[type="text"] {
- padding: .25em;
+
+@media (min-width: 57em) { /* 912px */
+ #fsf-frame {
+ position: static;
+ font-size: .875em; /* 14px */
+ width: 94%;
+ padding: .3em 3%;;
+ background: #f1f1f1;
+ }
+ #fssbox { margin: 0; }
+ #fssbox a { font-weight: bold; }
+ #fssbox fieldset { margin: 0; }
+ #fssbox div {
+ display: inline;
+ white-space: nowrap;
+ }
+ #join-fsf a {
+ float: right;
+ margin: 0 0 0 2em;
+ }
+ #navigation ul, ul#edu-navigation, #fsf-links ul {
+ text-align: center;
+ }
+ li#more-links {
+ float: none;
+ margin-left: 2em;
+ }
}
-form.header input[type="submit"] {
- font-weight: bold;
- padding: .25em;
+
+
+/*************/
+/* CONTENT */
+/*************/
+
+#content {
+ padding: 0 3%;
+ margin-bottom: 3em;
}
-/*** BUTTONS & LINKS ***/
+/** Navigation; see also education.css **/
-.button a, #join-fsf a {
- display: block;
- line-height: 1.2em;
- text-align: center;
- font-weight: bold;
- padding: .3em .5em;
- border: .1em solid #999; /* default */
+.breadcrumb, .edu-breadcrumb {
+/* font-size: .94em; */
+ line-height: 1.7em;
+ padding: .3em 0 0;
+ margin: 0 0 .3em 0;
}
+.breadcrumb, .edu-breadcrumb a { line-height: 1.6em; }
-/* Return link */
-.back {
- line-height: 1.5em;
- text-align: right;
- font-weight: bold;
- margin: 2em 2%;
+
+/** Author line after the main heading **/
+
+p.byline {
+ font-size: 1.06em; /* 17px - assumes #content > p.byline */
+ margin-bottom: 1.5em;
}
-/* Anchor - This is used in pages of lists, such as gnu-linux.faq.html,
- 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-weight: normal; font-size: .8em; }
+/** Text of the article **/
-/*** ROUNDED CORNERS ***/
+.article { font-size: 1.06em; } /* 17px */
-form.header input[type="text"], form.header 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;
+/* Narrower paragraphs surrounded by full-width text or columns.
+ Useless next to a side menu: line width is already limited
+ to 50em; */
+.reduced-width {
+ width: 45em;
+ max-width: 100%;
+ margin: 1.5em auto;
+}
+
+/* Columns */
+.columns p.inline-block {
+ display: inline-block;
+ margin: 0;
}
+@media (min-width: 55em) {
+ .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;
+ }
+ .columns > *:first-child { margin-top: 0 }
+ .columns > *:last-child { margin-bottom: 0; }
+}
-/*** SPECIAL TEXT 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%; }
+/** Metadata or footnotes at the end of articles **/
-@media (max-width: 30em) {
- .comment { margin: 1.5em 3%; }
+.infobox {
+ font-size: .94em; /* 15px - assumes #content > .infobox */
+ line-height: 1.3em;
+ margin: 2.5em 0 0;
+}
+.infobox h3 {
+ font-size: 1.27em; /* 19px - assumes #content > .infobox */
+ margin-top: 1.2em;
+}
+.infobox p {
+ margin: .3em 0 0;
+}
+.infobox hr {
+ display: block;
+ width: 15em; max-width: 100%;
+ height: 1px;
+ border: none;
+ margin: 0 0 1em;
}
-/* Note about Free Software Free Society */
-blockquote#fsfs p { padding: .3em 0; }
-/* For the note saying the page is a translation. */
+/** Translations **/
+
+/* For the note saying the page is a translation */
.trans-disclaimer {
- font-size: .9em;
+/* font-size: .94em; */ /* 15px */
text-align: center;
- font-weight: bold;
font-style: italic;
- margin-bottom: 0;
- margin-top: 1.2em;
+ line-height: 1.7em;
+ padding: .3em 3%;
+ margin: 0 -3.2%;
+}
+.trans-disclaimer a {
+ display: inline-block;
+ line-height: 1.6em;
}
/* For outdated translations */
#outdated {
- font-size: .9em;
+ font-size: .94em; /* 15px */
text-align: center;
padding: .5em;
margin: .8em 0;
+ color: black;
+ border: .2em solid #fc7;
}
#outdated p { margin: 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 h3 { font-size: 1.125em; } /* 18px */
-/*** TEXT 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 without special
- precaution because it only has top and bottom borders. */
+.translators-notes p, .translators-notes ul, .translators-notes ol {
+ margin-bottom: 0;
+}
+.translators-notes ol li { margin: .5em 1.1em 0; }
-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; }
+/** Subsections of /education "Case Studies" **/
-.lyrics {
- max-width: 25em;
- font-style: italic;
- padding: 1em 2em 2em;
- margin-left: 3%; margin-right: 3%;
+.edu-cases {
+ font-size: 1.06em; /* 17 px */
+ width: 50em; max-width: 100%;
+ padding: 0 0 .8em;
+ margin: 2em auto;
+ border-top: 3px ridge #3465a4;
+ border-bottom: 3px ridge #3465a4;
}
+.edu-cases ul, .edu-cases ol { margin: 1em 4%; }
+.edu-cases h3 { font-size: 1.3em; }
-/*** TEXT WITH LEFT BORDER ***/
+/** Introduction of malware pages **/
-.announcement, .important {
- font-size: inherit;
- padding: .1em 1em .7em;
- margin: 1.5em 0;
- background: none;
-}
-.announcement blockquote { margin: 0; }
-.announcement p, .important p { margin: .5em 0 0; }
-.announcement ul, .important ul { margin: 0 1em; }
-.announcement ul li, .important ul li { margin-top: .5em; }
-.announcement h3, .important h3 {
- font-size: 1.3em;
- margin: .4em 0;
-}
+.about-dir { color: #444; }
+.about-page { font-style: italic; }
+.about-dir p, .about-page p { margin: .5em 0; }
-/*** NOTES ***/
+/***********************/
+/* MISSION STATEMENT */
+/***********************/
-.note, .edu-note {
- text-align: center;
- margin: 2em auto;
+#mission-statement {
+ padding: 2em 3%;
+ background: white;
}
-
-/* Single <p> */
-.edu-note p {
+#mission-statement blockquote {
+ font-size: .94em; /* 15px */
+ font-weight: bold;
font-style: italic;
- padding: .8em 1em;
- margin: 0;
+ margin: 0 3% .8em;
}
-/* Baby NetSurf (1.2) would hurt itself using these definitions.
- Place them out of reach. Too bad for its older brother (2.9). */
+#mission-statement p { margin: 0; }
+#mission-statement img {
+ float: left;
+ height: 2em;
+ margin: .5em;
+}
+#support-the-fsf {
+ clear: both;
+ text-align: center;
+}
+
@media (min-width: 0) {
- .edu-note {
- width: 40em;
- max-width: 100%;
+ #mission-statement {
+ padding-top: 1em;
}
}
-
-/* Several <p>'s */
-.note {
- padding: .4em 3%;
- background: white;
+@media (min-width: 45em) {
+ #mission-statement {
+ padding-top: 2em;
+ }
}
-.note p {
- padding: .4em 0;
+
+/************/
+/* FOOTER */
+/************/
+
+#footer {
+ font-size: .875em; /* 14px */
+ padding: 1.5em 3%;
+ color: #333;
+ background: #f5f5f5;
+ border-top: .1em solid #ddd;
+}
+#footer p, #bottom-notes {
+ line-height: 1.3em;
margin: 0;
}
-@media (min-width: 0) {
- .note { max-width: 44.7em; }
+.unprintable { margin-bottom: .7em; }
+
+.translators-credits { margin: .7em 0; }
+
+#footer p.unprintable, #generic p { margin-top: .7em; }
+
+
+
+/*====================================================================*/
+/* BUILDING BLOCKS */
+/*====================================================================*/
+
+
+/*************************/
+/* SIMPLE TEXT STYLING */
+/*************************/
+
+small { font-size: .875em; } /* 16px -> 14px */
+strong { font-weight: bold; }
+em, cite { font-style: italic; }
+em i, em cite, cite i, cite em { font-style: normal; }
+acronym, abbr {
+ text-decoration: none;
+ border-bottom: 1px dotted #000;
+ cursor: help;
}
+/* Rarely used */
+del { text-decoration: line-through; }
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
-/*** TABLES OF CONTENTS ***/
+/*******************/
+/* BASIC CLASSES */
+/*******************/
-.summary, .toc {
- padding: 1em 3% 1.7em;
- margin: 2.5em auto 1.5em;
+/* Please use .italic and .small for whole paragraphs, rather that <em>
+and <small>. Translators will thank you. */
+
+.italic { font-style: italic; }
+.italic em, .italic cite, .italic i { font-style: normal; }
+.center, .c { text-align: center; }
+.nocenter { text-align: left; }
+.underline { text-decoration: underline; }
+.nounderline { text-decoration: none; }
+.small { font-size: .875em; } /* 16px -> 14px */
+.big { font-size: 1.125em; } /* 16px -> 18px */
+.inline-list li { display: inline; }
+.no-bullet li { list-style: none; }
+.no-display { display: none; }
+.clear { clear: both; }
+
+
+/********************/
+/* BLOCKS OF TEXT */
+/********************/
+
+p, pre { line-height: 1.5em; }
+address { line-height: 1.3em; }
+caption { margin-bottom: .5em; text-align: center; }
+blockquote { margin: 1em 3%; }
+
+/* The top margin should be sufficient. The bottom margin is only useful
+ if the element that follows is an anonymous box. */
+p, pre, address { margin: 1em 0; }
+pre { padding-bottom: .3em; overflow: auto; }
+
+
+/****************/
+/* H* HEADERS */
+/****************/
+
+h1 { font-size: 2.375em; margin: .5em 0 .9em; padding: .2em 0; } /* 38px */
+h2 { font-size: 2.0em; margin: .5em 0 .9em; padding: .2em 0; } /* 32px */
+h3 { font-size: 1.5em; margin: 1.2em 0 .8em; } /* 24px */
+.article h3 { font-size: 1.41em; } /* 24px */
+h4 { font-size: 1.25em; margin: 1.2em 0 .85em; } /* 20px */
+.article h4 { font-size: 1.18em; } /* 20px */
+h5 { font-size: 1.125em; margin: 1em 0 .9em; } /* 18px */
+h6 { margin: 1em 0; }
+
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+
+/* The default color is too dark for large text in bold font. */
+h3, h4, h5, h6, dt { color: #333; }
+
+h2#main-heading {
+ padding: .2em 0 .2em .3em;
+ border-left: .7em solid #eee; /* default color */
}
-.summary ul, .toc ul {
- margin: 0 1.5%;
+h3.subheader {
+ padding-bottom: .2em;
+ border-bottom: 1px solid #bbb;
}
-.summary h3, .toc h3 {
- font-size: 1.3em;
+
+/** BIG SECTION HEADERS **/
+
+/* For browsers that don't support inline-block */
+.big-section {
+ clear: left;
+ float: left;
+}
+.big-section h3 {
+ display: inline-block;
+ font-size: 1.75em; /* 28px */
+ padding: .2em 0;
+ margin: 1em .3em .5em 0;
+ color: black;
+ border-top: .12em solid #e74c3c;
+ border-bottom: .12em solid #e74c3c;
+}
+.article .big-section h3 { font-size: 1.647em; } /* 28px */
+
+.big-subsection { margin: 1.5em 0; }
+.big-subsection h4 {
+ display: inline;
+ font-size: 1.5em; /* 24px */
+ margin-right: .3em;
+ color: black;
+}
+.article .big-subsection h4 { font-size: 1.41em; } /* 24px */
+
+/* The next two statements adjust line spacing in Netsurf 1.2 */
+.big-subsection {
+ line-height: 2.0em;
+}
+.big-subsection h4 {
+ line-height: 1.2em;
+}
+
+/** HEADERS ON NARROW SCREENS **/
+
+@media (max-width: 30em) { /* 480 px - 1em = 15px */
+ h2#main-heading { border-left: .4em solid #eee; }
+ h1 { font-size: 2em; } /* 30px */
+ h2 { font-size: 1.73em; } /* 26px */
+ h3 { font-size: 1.4em; } /* 21px */
+ .article h3 { font-size: 1.32em; } /* 21px */
+ h4 { font-size: 1.2em; } /* 18px */
+ .article h4 { font-size: 1.13em; } /* 18px */
+ h5 { font-size: 1.07em; } /* 16px */
+
+ .big-section h3 { font-size: 1.53em; } /* 23px */
+ .article .big-section h3 { font-size: 1.44em; } /* 23px */
+ .big-subsection h4 { font-size: 1.4em; } /* 21px */
+ .article .big-subsection h4 { font-size: 1.32em; } /* 21px */
+}
+
+
+/***********/
+/* LISTS */
+/***********/
+
+ol li { list-style: decimal outside; }
+ul li { list-style: square outside; }
+ul ul li, ol ul li { list-style: circle; }
+
+li, dt, dd { line-height: 1.5em; }
+ul, ol { margin: 1em 1.5%; }
+
+/* Lists of underlined links are difficult to read. The top margin
+ gives a little more spacing between entries. */
+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%; }
+
+ul.blurbs li { margin-top: 1em; }
+ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li {
margin-top: .5em;
- text-align: center;
}
-.summary h4, .toc h4 {
- font-size: 1.1em;
+
+/* Separate description lists from preceding text */
+dl { margin: 1.5em 0 0; }
+/* separate the "term" from subsequent "description" */
+dt { font-weight: bold; margin: 1em 0; }
+/* separate the "description" from subsequent list item
+ when the final <dd> child is an anonymous box */
+dl dd { margin: 1em 3% 1.5em; }
+
+dl.compact { margin: .5em 0; }
+dl.compact dt {
+ font-weight: normal;
+ font-style: italic;
+ margin: .5em 0 0;
}
-@media (min-width: 0) {
- .summary { width: 30em; }
- .toc { width: 45em; }
- .summary, .toc { max-width: 94%; }
+dl.compact dd { margin: .3em 3% 0; }
+dl.compact dd p { margin: .3em 0 0; }
+dl.compact dd ul { margin: .3em 1.5% 0; }
+
+
+/****************/
+/* SEPARATORS */
+/****************/
+
+hr {
+ display: block;
+ margin: 1.2em 0;
+ color: #999;
+ background: #999;
+}
+
+/* For license-list.html, but could be used elsewhere. */
+hr.separator {
+ height: .3em;
+ border: none;
+}
+hr.thin {
+ clear: both;
+ height: 1px;
+ margin: 1.5em 0;
+ border: none;
+}
+/* Can be applied to div or hr. */
+.column-limit {
+ height: .4em;
+ width: 10%;
+ margin: 2em auto;
+ border: none;
+ background: #bbb; /* default */
+ background-image: linear-gradient(to right, white, #bbb, white);
}
-/*** NOTE AND SUMMARY ON WIDE SCREENS (FLOAT) ***/
+/************/
+/* TABLES */
+/************/
-@media (min-width: 48em) {
- .note, .summary {
- clear: right;
- float: right;
- 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; }
+th, td {
+ border: 1px solid #bbb; /* default */
+ padding: .5em;
+}
+th { font-weight: bold; text-align: center; }
+table { margin: 1em 0; }
+
+.listing,
+.stx table {
+ /* The default table for document listings. Contains name, document
+ types, modification times etc in a file-browser-like fashion */
+ border-collapse: collapse;
+ margin: 1em 0;
+ border: 1px solid #666;
+}
+.listing th,
+.stx table th {
+ font-weight: normal;
+ padding: .7em;
+ color: black;
+ background: #fff1c0;
+ border: 1px solid #666;
+}
+/* This doesn't work if the a element is within normal text. */
+.listing td a { display: block; }
+.listing .top {
+ text-align: right;
+ padding: 0 0 1em 0;
+ border-top: 1px solid #666;
+}
+.listing .listingCheckbox {
+ text-align: center;
+}
+.listing td,
+.stx table td {
+ padding: 1em;
+ text-align: center;
+ line-height: 1.3em;
+ border: 1px solid #666;
+}
+.listing img {
+ vertical-align: middle;
+}
+.listing {
+ width: 100%;
+ display: block;
+ overflow: auto;
+ padding: .1em;
+ margin: auto;
}
+.listing .odd {
+ /*every second line should be shaded */
+ background: transparent;
+}
+.listing .even {
+ background: #f5f5f5;
+}
+
+/*====================================================================*/
+/* IMAGES & EMPHASIZED TEXT */
+/*====================================================================*/
-/*** IMAGES ***/
-.imgright, imgleft { max-width: 100%; }
+/************/
+/* IMAGES */
+/************/
+
+/* This removes the extended background below images. */
+img { vertical-align: top; }
+
+.imgright, .imgleft { max-width: 100%; }
.imgright { float: right; margin: .3em 0 1em 2em; }
.imgleft { float: left; margin: .3em 2em 1em 0; }
@@ -541,7 +1075,7 @@
.pict p {
text-align: center;
font-style: italic;
- font-size: .9em;
+ font-size: .875em; /* 14px */
margin-top: .5em;
}
@@ -565,750 +1099,400 @@
}
+/***************************************/
+/* TEXT WITH NO BACKGROUND OR BORDER */
+/***************************************/
-/*============================================================================*/
-/* LAYOUT OF MAIN DIVS & CONSTANT FEATURES
*/
-/*============================================================================*/
+/* For comments within or at the beginning of an article. Can be used
+ with .important or .big. */
+.comment { margin: 1.5em 6%; }
+@media (max-width: 30em) {
+ .comment { margin: 1.5em 3%; }
+}
-/***************************************************/
-/* HEADER & NAVIGATION FOR CSS3-UNAWARE BROWSERS */
-/***************************************************/
+/* Note about Free Software Free Society */
+blockquote#fsfs p { padding: .3em 0; }
-/*** FSF STUFF ***/
+/**************************/
+/* TEXT WITH BACKGROUND */
+/**************************/
+
+/** LAYOUT **/
+
+/* 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; }
-#toplinks { display: none; }
-
-
-/*** GNU BANNER ***/
-
-#header {
- text-align: center;
- padding: 0;
-}
-#gnu-banner {
- display: inline-block;
- font-size: 2em;
- text-align: center;
- line-height: 1em;
- margin: .1em 3%;
-}
-#gnu-banner strong {
- font-weight: normal;
-}
-#gnu-banner img {
- height: 1.7em;
- vertical-align: bottom;
- position: relative; top: .15em;
- margin-right: .15em;
-}
-
-#fsf-support {
- font-size: .45em;
- font-style: italic;
-}
-#fsf-support a {
- font-weight: bold;
-}
-
-
-/*** LANGUAGES ***/
-
-#languages { font-size: .9em; padding: 0 3%; }
-#set-language {
- float: right;
- font-weight: bold;
- padding: .2em 0;
- margin: .3em 0 0 1em;
-}
-#languages h3 {
- display: inline-block;
- font-size: 1em;
- margin: .6em 0 0;
-}
-
-/* Could apply to div#translations or p#translations. */
-#translations {
- padding: .4em 0;
- margin: 0;
-}
-#translations p {
- margin: 0;
-}
-#translations span {
- display: inline-block;
- vertical-align: middle;
- width: 14em;
- padding: 0;
- margin: .1em 0;
-}
-#translations span a {
- line-height: 1.1em;
- padding: .1em .3em;
-}
-#translations span.original {
- font-weight: bold;
-}
-
-
-/*** TOGGLE SWITCHES to display navbar and languages,
- & SEARCHER BUTTON. ***/
-#switches {
- display: inline-block;
- clear: right;
- float: right;
- margin: .2em .7em .4em 0;
-}
-.switch {
- display: inline-block;
- vertical-align: middle;
- height: 2em;
- margin: .2em 0 .2em .7em;
-}
-.switch img {
- display: inline-block;
- vertical-align: middle;
- height: 100%;
-}
-
-#navbar-input, #outdated-input, #language-input,
-#navbar-button, #outdated-button, #language-button {
- display: none;
-}
-
-
-/*** NAVIGATION BARS ***/
-
-#navigation ul, #fsf-links ul { margin: 0; }
-ul#edu-navigation { margin: 0 -3.2%; }
-
-/* 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: 2em;
- text-align: left;
- font-weight: bold;
- padding: 0 2.5%;
-}
-#navigation li, ul#edu-navigation li, #fsf-links li {
- white-space: nowrap;
- display: inline;
- display: inline-block;
- line-height: 2em;
- padding: 1px;
- margin: 0;
-}
-li#more-links {
- float: right;
- margin-left: 1.7em;
-}
-
- /* For Firefox (can't set line-height when "a" is displayed inline) */
-#navigation a, ul#edu-navigation a, #fsf-links a {
- display: inline-block;
- line-height: 2em;
- padding: 0 .4em;
- margin: 0;
-}
-
-
-/*** BACK-TO-TOP ***/
-
-#back-to-top {
- float: right;
-/* For NetSurf 1.2, and maybe a few other browsers. */
- margin: .25em 1em 0;
-}
-/* For standard browsers. */
-@media (min-width: 0) {
- #back-to-top { margin-right: 3%; }
-}
-#back-to-top a {
- display: inline-block;
- line-height: 1.2em;
- padding: 0 .5em .2em;
-}
-#back-to-top a span { display: none; }
-
-
-/*******************************************/
-/* MEDIA QUERIES FOR HEADER & NAVIGATION */
-/*******************************************/
-
-@media (min-width: 0) {
-/* Reduce font size below 40em */
- html { font-size: .9em; }
-
- .hide { display: none; }
- #gnu-banner { margin: .1em 0 .4em; }
-
- #switches { max-width: 7em; }
-
- #languages { display: none; }
- #language-button { display: inline-block; }
- #language-input:checked ~ #languages { display: block; }
-
- #navbar-button {
- display: inline-block;
- height: 1.8em;
- padding: .1em 0;
- }
- #navigation { height: 3px; }
- #navigation ul { display: none; }
- #navbar-input:checked ~ #navigation { height: auto; }
- #navbar-input:checked ~ #navigation ul { display: block; }
-
- ul#edu-navigation { display: none; }
-
- #outdated-button {
- display: inline-block;
- float: right;
- }
-
- #outdated { display: none; }
- #outdated-input:checked ~ #outdated { display: block; }
-}
-
-@media (min-width: 22em) {
- #switches { max-width: none; }
-}
-
-@media (min-width: 28em) {
- #navbar-button { display: none; }
- #navigation { height: auto; }
- #navigation ul, ul#edu-navigation {
- display: block;
- text-align: left;
- }
- #gnu-banner { margin: .2em 3% .5em; }
-}
-
-@media (min-width: 40em) {
- html { font-size: 1em; }
-
- .hide { display: inline; }
- #gnu-banner { margin: .1em 3%; }
- #gnu-banner img { top: .3em; }
- #fsf-support {
- font-size: .45em;
- margin: .3em 0 0;
- }
-
- #switches { margin-right: 3%; }
- #outdated-button { display: none; }
- #outdated { display: block; }
-}
-
-@media (min-width: 55em) {
- #toplinks {
- display: block;
- width: 94%;
- font-size: .9em;
- padding: .2em 3%;
- }
- #toplinks > a { display: none; }
-
- #fssbox {
- display: inline;
- margin: 0 1.5em .5em 0;
- }
- #fssbox > p {
- display: inline-block;
- vertical-align: middle;
- line-height: 1.1em;
- margin: 0;
- }
- #fssbox a { font-weight: bold; }
- #fssbox form {
- display: inline-block;
- margin: .1em 0;
- }
- #fssbox form p { margin: 0; }
-
- #join-fsf {
- float: right;
- margin: .1em 0 .1em 2em;
- }
- #join-fsf a {
- padding: .25em .4em;
- }
-}
-
-@media (min-width: 77.5em) {
- body { margin-left: .5em; }
- .inner { overflow: visible; }
- #navigation ul, ul#edu-navigation, #fsf-links ul { text-align: center; }
- li#more-links { float: none; }
-}
-
-@media (min-width: 89em) {
- body { position: relative; }
-
- #gnu-banner { padding-left: 2.35em; }
-
- #language-button { display: none; }
- #languages {
- display: block;
- width: 15em;
- position: absolute;
- top: -3px; left: 100%;
- padding: 1em;
- }
- #translations span { padding: .2em 0; }
- #translations span a { padding: .2em .3em; }
- #set-language {
- float: none;
- text-align: left;
- margin: 0;
- }
-}
-
-
-/*************/
-/* CONTENT */
-/*************/
-
-#content {
- padding: 0 3%;
- margin-bottom: 3em;
-}
-
-#main-text, #main-text ~ .translators-notes {
- max-width: 50rem;
- margin: auto;
-}
-
-#breadcrumb, .edu-breadcrumb {
- line-height: 1.7em;
- font-size: .9em;
- padding: .6em 0 0;
- margin: 0;
-}
-
-/* Author line after the main heading */
-p.byline {
- font-size: 1.1em; /* assumes #content > p.byline */
- margin-bottom: 1.5em;
-}
-
-.article { font-size: 1.1em; }
-
-.reduced-width {
- width: 45em;
- max-width: 100%;
- margin: 1.5em auto;
-}
-
-.columns p.inline-block {
- display: inline-block;
- margin: 0;
-}
-
-@media (min-width: 55em) {
- .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;
- }
- .columns > *:first-child { margin-top: 0 }
- .columns > *:last-child { margin-bottom: 0; }
-}
-
-/* For metadata or footnotes at the end of articles. */
-.infobox {
- font-size: .9em;
- line-height: 1.3em;
- margin: 2.5em 0 0;
-}
-.infobox h3 {
- font-size: 1.2em;
- margin-top: 0;
-}
-.infobox p {
- margin: .3em 0 0;
-}
-.infobox hr {
- display: block;
- width: 15em; max-width: 100%;
- height: 1px;
- background: #999;
- border: none;
- margin: 0 0 1em 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; }
-
-div.translators-notes h3 { font-size: 1.2em; }
+/* .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 without special precaution because it only has top and
+ bottom borders. */
+div.highlight-para, div.emph-box { padding: .2em 1.2em 1.2em; }
-/*******************************/
-/* MISSION STATEMENT & FOOTER */
-/*******************************/
+.highlight-para, p.highlight,
+p.emph-box, pre.emph-box { padding: .6em 1.2em; }
-#mission-statement {
- clear: both;
- padding: 1.8em 3% 2em;
- background: white;
-}
-#mission-statement blockquote {
- font-size: .9em;
- font-weight: bold;
+.lyrics {
+ max-width: 25em;
font-style: italic;
- margin: 0 3% .8em;
-}
-#mission-statement p {
- margin: 0;
-}
-#mission-statement img {
- float: left;
- height: 2em;
- margin: .5em;
-}
-#support-the-fsf {
- clear: both;
- text-align: center;
-}
-#support-the-fsf a {
- display: inline-block;
- padding: .5em .8em;
- margin: 1em 1.5em 0;
-}
-
-#footer {
- font-size: .9em;
- padding: 1.5em 3%;
-}
-#footer p, #bottom-notes {
- line-height: 1.3em;
- margin: 0;
+ padding: 1em 2em 2em;
+ margin-left: 3%; margin-right: 3%;
}
-.unprintable { margin-bottom: .7em; }
-
-.translators-credits { margin: .7em 0; }
-
-#footer p.unprintable, #generic p { margin-top: .7em; }
+/** STYLE **/
-/******************************************************************************/
-/* FONT FAMILY
*/
-/******************************************************************************/
-
-
-a[href] { font-family: sans-serif; }
-
-#toplinks, #toplinks a, #header, #header a,
-#edu-navigation a, #fsf-links a, #languages, #languages a {
- font-family: "FreeSans", sans-serif;
+.highlight-para, .highlight { background: #fff5d4; }
+span.highlight { background: #fff1c0; }
+.highlight-para {
+ border-top: .1em solid #fc7;
+ border-bottom: .1em solid #fc7;
}
-h2, h3 { font-family: serif; }
-
+.emph-box, .lyrics {
+ background: #f5f5f5;
+ border: .1em solid #ddd;
+}
-/******************************************************************************/
-/* COLOR, BACKGROUND, BORDER
*/
-/******************************************************************************/
+/***************************/
+/* TEXT WITH LEFT BORDER */
+/***************************/
+/** LAYOUT **/
-/*** Luminosity contrast ratio and color difference ***
- source: http://juicystudio.com/services/luminositycontrastratio.php
+.announcement, .important {
+ padding: .1em 1em .7em;
+ margin: 1.5em 0;
+ background: none;
+}
+.announcement blockquote { margin: 0; }
+.announcement p, .important p { margin: .5em 0 0; }
+.announcement ul, .important ul { margin: 0 1em; }
+.announcement ul li, .important ul li { margin-top: .5em; }
+.announcement h3, .important h3 {
+ font-size: 1.25em; /* 20px */
+ margin: .4em 0;
+}
- 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
- #850803 #d4d4d4 6.97
+/** STYLE **/
-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
-*/
+/* For information that isn't part of the article. The border is
+ green. */
+.announcement { border-left: .4em solid #5c5; }
+/* For important information inside an article. The border is orange. */
+.important { border-left: .4em solid #fc7; }
-/*** MAIN DIVS ***/
+/***********/
+/* NOTES */
+/***********/
-html, body {
- color: #222;
-}
-html { background: #e4e4e4; }
+/** LAYOUT **/
-body {
- background: white;
- border: 2px solid #bbb;
- border-top: 3px solid #a42e2b;
- -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;
+.note, .edu-note {
+ text-align: center;
+ margin: 2em auto;
}
-#header { background: white; }
-
-#toplinks {
- background: #eee;
-}
-#languages {
- background: #f5f5f5;
- border-top: .1em solid #bbb;
-}
-@media (min-width: 89em) {
- #languages {
- border: .1em solid #999;
- border-top: 3px solid #a42e2b;
- }
+/* Single <p> */
+.edu-note p {
+ font-style: italic;
+ padding: .8em 3%;
+ margin: 0;
}
-#languages h3, #translations { color: #a42e2b; }
-#mission-statement {
+/* Several <p>'s */
+.note {
+ padding: .4em 3%;
background: white;
}
-#footer {
- color: #333;
- background: #f7f7f7;
- border-top: .1em solid #ddd;
+.note p {
+ padding: .4em;
+ margin: 0;
}
+/** STYLE **/
-/*** <h2> & <h3> HEADERS ***/
+.note, .edu-note p { border: .15em solid #5c5; }
-/* The default color is too dark for large text in bold font. */
-h3, h4 { color: #333; }
-h3.subheader {
- padding-bottom: .2em;
- border-bottom: 1px solid #bbb;
-}
+/************************/
+/* TABLES OF CONTENTS */
+/************************/
-.big-section h3 {
- color: black;
- border-top: .12em solid #e74c3c;
- border-bottom: .12em solid #e74c3c;
+/** LAYOUT **/
+
+.summary, .toc {
+ font-size: 1rem;
+ padding: 1em 3% 1.7em;
+ margin: 2.5em auto 1.5em;
+ background: #f5f5f5;
}
-.big-subsection h4 {
- color: black;
+.summary ul, .toc ul {
+ margin: 0 1.5%;
}
-
-
-/*** SEPARATORS ***/
-
-hr {
- color: #999;
- background: #999;
+.summary h3, .toc h3 {
+ font-size: 1.25em; /* 20px */
+ margin-top: .5em;
+ text-align: center;
}
-
-.column-limit {
- background: #bbb;
- background-image: linear-gradient(to right, white, #bbb, white);
+.summary h4, .toc h4 {
+ font-size: 1.125em; /* 18px */
}
-
-/*** LISTINGS ***/
-
-.listing,
-.stx table {
- border: 1px solid #666;
+.toc-inline {
+ font-size: 1rem;
+ text-align: center;
+ padding: 0 3%;
+ margin: auto;
}
-.listing th,
-.stx table th {
- color: black;
- background: #fff1c0;
- border: 1px solid #666;
+.toc-inline a {
+ display: inline-block;
+ padding: .1em .4em;
+ margin: .3em;
+ border: .1em solid #bbb;
}
-.listing .top {
- border-top: 1px solid #666;
+.toc-inline h3 {
+ display: none;
}
-.listing .odd {
- /*every second line should be shaded */
- background: transparent;
+.toc-inline h4 {
+ font-size: 1em;
+ margin: 1em 0 .2em;
}
-.listing .even {
- background: #f5f5f5;
+.toc-inline h4 a {
+ border: none;
}
-.listing td,
-.stx table td {
- border: 1px solid #666;
+.toc-inline ul, .toc-inline li {
+ display: inline;
+ margin: 0;
}
-/*** EMPHASIZED TEXT, NOTES, etc. ***/
+/**************************************/
+/* MEDIA QUERIES FOR NOTE & SUMMARY */
+/**************************************/
-.highlight-para, .highlight { background: #fff5d4; }
-span.highlight { background: #fff1c0; }
-.highlight-para {
- border-top: .1em solid #fc7;
- border-bottom: .1em solid #fc7;
+/* Baby NetSurf (1.2) would hurt itself using these definitions.
+ Place them out of reach. Too bad for its older brother (2.9). */
+@media (min-width: 0) {
+ .note, .summary { width: 30rem; }
+ .toc { width: 45em; }
+ .note,.summary, .toc { max-width: 92%; }
+ .edu-note {
+ width: 40em;
+ max-width: 100%;
+ }
}
-.emph-box, .lyrics {
- background: #f5f5f5;
- border: .1em solid #ddd;
+@media (min-width: 45em) {
+ .note, .summary {
+ clear: right;
+ float: right;
+ width: 20rem;
+ max-width: 40%;
+ margin: .5em 0 1em 2em;
+ }
+ .summary { padding: 1em 1.2em 1.5em; }
+ .note { padding: .4em 1.2em; }
}
-/* For information that isn't part of the article. The border is
- green. */
-.announcement { border-left: .3em solid #5c5; }
-/* For important information inside an article. The border is orange. */
-.important { border-left: .3em solid #fc7; }
-#outdated {
- color: black;
- border: .2em solid #fc7;
+
+/*====================================================================*/
+/* INTERACTIVE ELEMENTS */
+/*====================================================================*/
+
+
+/***********/
+/* LINKS */
+/***********/
+
+/** SPECIAL LINKS **/
+
+.back {
+ line-height: 1.7em;
+ text-align: right;
+ font-weight: bold;
+ margin: 2em 2%;
}
+.back a { display: inline-block; }
-.note, .edu-note p { border: .15em solid #5c5; }
+/* Anchor - This is used in pages of lists, such as gnu-linux.faq.html,
+ 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-weight: normal; font-size: .8125em; } /* 13px */
-.summary, .toc { background: #f5f5f5; }
+/** STYLE **/
-/*** LINKS ***/
+/* Inline links */
a[href]:link {
- color: #004caa;
- text-decoration: underline #4899ff solid;
+ color: #049;
+ text-decoration-color: #5e93d5;
}
a[href]:visited {
- color: #004caa;
- text-decoration: underline #ccc solid;
-}
-a[href]:link:hover, a[href]:visited:hover {
- color: #006400;
- text-decoration: underline #006400 dotted;
+ color: #595959;
+ text-decoration-color: #aaa;
}
a[href]:active { text-decoration: none; }
-/* Variants */
+/* Navigation links */
-#gnu-banner a[href]:link, #gnu-banner a[href]:visited {
+#gnu-banner > a {
color: #333;
text-decoration: none;
}
-/*
-#gnu-banner a[href]:link strong, #gnu-banner a[href]:visited strong {
+#gnu-banner > a strong {
color: #a42e2b;
}
-*/
-#fsf-support { color: #555; }
-#fsf-support a[href]:link, #fsf-support a[href]:visited,
-.trans-disclaimer a[href]:link, .trans-disclaimer a[href]:visited {
- color: #555;
- text-decoration: underline #ccc solid;
-}
-#fssbox a[href]:link, #fssbox a[href]:visited,
-.back a[href]:link, .back a[href]:visited,
-.anchor-reference-id a[href]:link, .anchor-reference-id a[href]:visited,
-#set-language a[href]:link, #set-language a[href]:visited,
-#translations a[href]:link, #translations a[href]:visited {
- color: #333;
- text-decoration: underline #ccc solid;
+#fsf-support,
+#fsf-support a[href]:link,
+#fsf-support a[href]:visited,
+#fssbox a[href]:link,
+#fssbox a[href]:visited,
+.back a[href]:link,
+.back a[href]:visited,
+.anchor-reference-id a[href]:link,
+.anchor-reference-id a[href]:visited {
+ color: #595959;
+ text-decoration-color: #bbb;
+}
+#languages a[href]:link,
+#languages a[href]:visited,
+#navlinks a[href]:link,
+#navlinks a[href]:visited,
+.breadcrumb a[href]:link,
+.breadcrumb a[href]:visited,
+.edu-breadcrumb a[href]:link,
+.edu-breadcrumb a[href]:visited,
+.trans-disclaimer a[href]:link,
+.trans-disclaimer a[href]:visited,
+#TOC a[href]:link,
+#TOC a[href]:visited,
+.toc a[href]:link,
+.toc a[href]:visited,
+.toc-inline a[href]:link,
+.toc-inline a[href]:visited,
+.summary a[href]:link,
+.summary a[href]:visited {
+ color: #049;
+ text-decoration: none;
}
-#set-language a[href]:link:hover, #set-language
a[href]:visited:hover,
-#translations a[href]:link:hover, #translations
a[href]:visited:hover,
-#fsf-support a[href]:link:hover, #fsf-support
a[href]:visited:hover,
-.trans-disclaimer a[href]:link:hover, .trans-disclaimer
a[href]:visited:hover,
-#fssbox a[href]:link:hover, #fssbox
a[href]:visited:hover,
-.back a[href]:link:hover, .back
a[href]:visited:hover,
-.anchor-reference-id a[href]:link:hover, .anchor-reference-id
a[href]:visited:hover {
- color: #006400;
- text-decoration: underline #006400 dotted;
-}
+/* :hover */
-#breadcrumb a[href]:link, .breadcrumb a[href]:visited {
+a[href]:hover {
+ background: #e7f2e2;
text-decoration: none;
}
-#breadcrumb a[href]:link:hover, .breadcrumb a[href]:visited:hover {
- text-decoration: underline #006400 dotted;
+#gnu-banner > a[href]:hover, .pict > a[href]:hover {
+ background: none
+}
+
+
+/*********************/
+/* FORMS & BUTTONS */
+/*********************/
+
+/** LAYOUT **/
+
+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, .button a {
+ line-height: 1.1em;
+ padding: .4em .5em;
+}
+form.header input[type="submit"], .button a {
+ font-weight: bold;
+ margin: 0;
+}
+.button a {
+ display: block;
+ display: inline-block;
+}
+#support-the-fsf a {
+ padding: .6em 1em;
+ margin: 1em 1.5em 0;
}
+.backtotop {
+ float: right;
+ font-size: 1.2em;
+ font-size: 1.2rem;
+}
+.backtotop a, #fsf-links .backtotop a {
+ display: inline-block;
+ vertical-align: top;
+ line-height: 1.2em;
+ padding: 0 .3em .2em;
+}
+.backtotop a span { display: none; }
-/*** BUTTONS ***/
+/** STYLE **/
-.button a[href]:link, .button a[href]:visited,
-.button a[href]:link:hover, .button a[href]:visited:hover,
-#join-fsf a[href]:link, #join-fsf a[href]:visited,
-#join-fsf a[href]:link:hover, #join-fsf a[href]:visited:hover {
+.button a, .backtotop a {
text-decoration: none;
+ background: white;
+}
+.button a, .backtotop a, #fsf-links .backtotop a {
+ color: #049;
+ border: .1em solid #999;
+}
+.button a:hover, .backtotop a:hover, #fsf-links .backtotop a:hover {
+ background: #e7f2e2;
+ border-color: #006400;
}
-#join-fsf a[href]:link, #join-fsf a[href]:visited,
-#support-the-fsf a.join[href]:link, #support-the-fsf a.join[href]:visited {
+#join-fsf a, #support-the-fsf a.join {
color: #b02500;
- background: white;
border-color: #b02500;
}
-#join-fsf a[href]:link:hover, #join-fsf
a[href]:visited:hover,
-#support-the-fsf a.join[href]:link:hover, #support-the-fsf
a.join[href]:visited:hover {
+#join-fsf a:hover, #support-the-fsf a.join:hover {
color: #a42e2b;
background: #f6e5e1;
border-color: #a42e2b;
}
-
-#support-the-fsf a.donate[href]:link, #support-the-fsf a.donate[href]:visited {
+#support-the-fsf a.donate {
color: #005ccd;
- background: white;
border-color: #005ccd;
}
-#support-the-fsf a.donate[href]:link:hover, #support-the-fsf
a.donate[href]:visited:hover {
- color: #004caa;
+#support-the-fsf a.donate:hover {
+ color: #049;
background: #d9e8f7;
- border-color: #004caa;
+ border-color: #049;
}
-#support-the-fsf a.shop[href]:link, #support-the-fsf a.shop[href]:visited {
+#support-the-fsf a.shop {
color: #008400;
- background: white;
border-color: #008400;
}
-#support-the-fsf a.shop[href]:link:hover, #support-the-fsf
a.shop[href]:visited:hover {
+#support-the-fsf a.shop:hover {
color: #006400;
- border-color: #006400;
background: #e7f2e2;
+ border-color: #006400;
}
.switch img:hover {
- opacity: 0.5;
- filter: alpha(opacity=50); /* For IE8 and earlier */
+ background: #e7f2e2;
cursor: pointer;
}
-
-/*** FORM INPUTS ***/
-
form.header input {
- font-family: inherit;
- border: .1em solid #ccc;
+ border: .1em solid #bbb;
}
form.header input[type="text"], form.header input[type="submit"] {
color: #555;
@@ -1322,8 +1506,8 @@
border-color: #006400;
}
form.header input[type="text"]:focus + input[type="submit"] {
- color: #006400;
- border-color: #006400;
+ color: #008400;
+ border-color: #008400;
}
form.header input[type="submit"]:hover {
color: #006400;
@@ -1332,48 +1516,42 @@
#fssbox input[type="submit"] {
color: #008400;
border-color: #008400;
- background: white;
}
#fssbox input[type="submit"]:hover {
color: #006400;
- border-color: #006400;
background: #e7f2e2;
+ border-color: #006400;
}
+.rounded-corners, form.header input, .button a, .backtotop a {
+ border-radius: .3em;
+ -moz-border-radius: .3em;
+ -khtml-border-radius: .3em;
+ -webkit-border-radius: .3em;
+ -opera-border-radius: .3em;
+}
-/*** NAVIGATION BARS & BACK-TO-TOP ***/
-#navigation a, ul#edu-navigation a, #fsf-links a,
-#back-to-top a {
- text-decoration: none;
-}
-#navigation { background: #a42e2b; }
-ul#edu-navigation { background: #eee; }
-#fsf-links { background: #d4d4d4; }
-#navigation a { color: white; }
-ul#edu-navigation a,
-#fsf-links a { color: #333; }
-#fsf-links .gnu a { color: #850803; }
+/*====================================================================*/
+/* FONT FAMILY */
+/*====================================================================*/
-#back-to-top a {
- color: #444;
- background: white;
- border: .1em solid #bbb;
-}
-#navigation li:hover { background: #850803; }
-ul#edu-navigation li:hover { background: #ddd; }
-#fsf-links li:hover { background: #ccc; }
-#back-to-top a:hover { background: #eee; }
-#navigation li.active, #navigation li.active a:hover {
- font-style: italic;
- background: #bb5653;
- cursor: default;
+a[href] { font-family: sans-serif; }
+
+#fsf-frame a[href], #fssbox label, form.header input, .button a[href],
+#header a[href], #fsf-support, #languages, #languages a[href],
+#navlinks, #navlinks a[href], .edu-breadcrumb, .edu-breadcrumb a[href],
+.breadcrumb, .breadcrumb a, .trans-disclaimer, .trans-disclaimer a[href],
+#outdated, #outdated a[href] {
+ font-family: "Noto Sans Display", "Noto Sans", "Liberation Sans",
+ sans-serif;
+}
+#navigation a[href], ul#edu-navigation a[href], #fsf-links a[href] {
+ font-family: "Dosis", "Noto Sans Display", "Noto Sans", "Liberation Sans",
+ sans-serif;
}
-ul#edu-navigation li.active, ul#edu-navigation li.active a:hover,
-ul#edu-navigation li.current {
- background: white;
- font-style: italic;
- cursor: default;
+#gnu-banner strong {
+ font-family: "Noto Sans", "Liberation Sans", sans-serif;
}
Index: readability/free-sw.html
===================================================================
RCS file: /webcvs/www/www/server/staging/readability/free-sw.html,v
retrieving revision 1.30
retrieving revision 1.31
diff -u -b -r1.30 -r1.31
--- readability/free-sw.html 17 Feb 2020 15:43:59 -0000 1.30
+++ readability/free-sw.html 30 Mar 2020 13:06:58 -0000 1.31
@@ -8,7 +8,7 @@
<meta name="DC.title" content="gnu.org" />
<link rel="stylesheet" type="text/css" href="/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/mini.css" media="handheld" />
-<link rel="stylesheet" type="text/css" href="/server/staging/layout.css"
media="screen" />
+<link rel="stylesheet" type="text/css"
href="/server/staging/layout/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/print.min.css" media="print" />
<!--#set var="DISABLE_TOP_ADDENDUM" value="yes" -->
<!--#set var="TAGS" value="essay aboutfs" -->
@@ -27,7 +27,7 @@
<meta http-equiv="Description" content="Since 1983, developing the free Unix
style operating system GNU, so that computer users can have the freedom to
share and improve the software they use." />
<!--#include virtual="/philosophy/po/free-sw.translist" -->
-<!--#include virtual="/server/staging/banner.html" -->
+<!--#include virtual="/server/staging/layout/banner.html" -->
<div id="main">
<div id="section-menu">
@@ -37,10 +37,9 @@
alt="Section menu" /></a>
</div>
<p class="breadcrumb">
- <a href="/philosophy/philosophy.html">Philosophy</a> >
- <a href="/philosophy/essays-and-articles.html#content">Essays &
articles</a> >
- <a href="/philosophy/essays-and-articles.html#aboutfs">About free
software</a> >
- What is free software?
+ <a href="/philosophy/philosophy.html">Philosophy</a> >
+ <a href="/philosophy/essays-and-articles.html#content">Essays &
articles</a> >
+ <a href="/philosophy/essays-and-articles.html#aboutfs">About free
software</a> ≫
</p>
<!--GNUN: OUT-OF-DATE NOTICE-->
@@ -674,7 +673,7 @@
</div><!-- /#main-text -->
<!--#include virtual="/server/staging/nav-bar/test9/philosophy-menu.html" -->
-<!--#include virtual="/server/staging/nav-bar/test9/footer-text.html" -->
+<!--#include virtual="/server/staging/layout/footer-text.html" -->
<div id="footer">
<div class="unprintable">
@@ -731,7 +730,7 @@
<p class="unprintable">Updated:
<!-- timestamp start -->
-$Date: 2020/02/17 15:43:59 $
+$Date: 2020/03/30 13:06:58 $
<!-- timestamp end -->
</p>
</div>
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- www/server/staging layout/banner.html layout/bo...,
Therese Godefroy <=