[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www/server/staging home.html layout.css layout/...
|
From: |
Therese Godefroy |
|
Subject: |
www/server/staging home.html layout.css layout/... |
|
Date: |
Fri, 15 Feb 2019 14:14:17 -0500 (EST) |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 19/02/15 14:14:17
Modified files:
server/staging : home.html layout.css
server/staging/layout: head-include-1.html
Log message:
Replace text with Join, Donate and Shop buttons in footer-text.html.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/home.html?cvsroot=www&r1=1.16&r2=1.17
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout.css?cvsroot=www&r1=1.1&r2=1.2
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/head-include-1.html?cvsroot=www&r1=1.1&r2=1.2
Patches:
Index: home.html
===================================================================
RCS file: /webcvs/www/www/server/staging/home.html,v
retrieving revision 1.16
retrieving revision 1.17
diff -u -b -r1.16 -r1.17
--- home.html 3 Jul 2018 13:00:30 -0000 1.16
+++ home.html 15 Feb 2019 19:14:17 -0000 1.17
@@ -1,6 +1,9 @@
-<!--#include virtual="/server/header.html" -->
-<!-- Parent-Version: 1.84 -->
-
+<!--#include virtual="/server/staging/layout/header.html" -->
+<!-- Parent-Version: 1.86 -->
+ <!--#if expr="$QUERY_STRING = /distro=([^&#]+)/"
+--><!--#set var="DISTRO" value="$1"
+--><!--#else --><!--#set var="DISTRO" value="pureos8"
+--><!--#endif -->
<title>The GNU Operating System and the Free Software Movement</title>
<meta http-equiv="Keywords" content="GNU, FSF, Free Software Foundation,
Linux, Emacs, GCC, Unix, Free Software, Libre Software, Operating System, GNU
Kernel, GNU Hurd" />
@@ -9,30 +12,8 @@
<style type="text/css" media="print,screen">
<!--
-/* ~~ For layout.css ~~ */
-#join-fsf a, #join-fsf a:visited {
- color: #b02500;
- background: #fff;
- border-color: #b02500;
-}
-form.header input[type="submit"] {
- background: #fff;
-}
-#fssbox input[type="submit"] {
- color: #004caa;
- border-color: #004caa;
-}
-#join-fsf a:hover, #fssbox input[type="submit"]:hover,
- form.header input[type="submit"]:hover {
- color: #777;
- border-color: #777;
-}
-/* ~~~~~~~~~~~~~~~~~~~~ */
-#content {
- margin: 0;
-}
.first-column, .second-column {
- width: 40em; max-width: 100%;
+ width: 46em; max-width: 100%;
margin: auto;
}
@@ -44,58 +25,75 @@
margin-top: 1em;
}
+#gnu-linux, .thumbs {
+ text-align: center;
+ font-style: italic;
+ margin: 1em auto;
+}
#gnu-linux {
- width: 31.5em;
+ width: 32em;
max-width: 100%;
+ margin: .5em auto;
}
-.thumbs {
- max-height: 7em;
- overflow: auto;
+.screenshot, .thumbs .image td {
+ line-height: .8em;
+ background: #444;
padding: .2em;
- background: #232323;
}
-#gnu-linux, .thumbs {
- text-align: center;
- font-style: italic;
- margin: 1em auto;
+.screenshot a, .thumbs .image td a {
+ color: white;
+}
+.screenshot img {
+ width: 100%;
}
#gnu-linux p {
line-height: 1.2em;
+ margin: .2em 0 0;
}
-img#screenshot {
+.thumbs {
width: 100%;
- border: .2em solid #232323;
+ display: block;
+ overflow: auto;
+ padding-bottom: .2em;
}
-.thumbs p {
- float: left;
+.thumbs td {
+ width: 33.3%;
+ vertical-align: top;
+ padding: .1em;
+ border: 0;
+ border-left: .5em solid white;
+}
+.thumbs td:first-child {
+ border: 0;
+}
+.thumbs .caption td {
line-height: 1em;
- text-align: center;
- color: white;
- margin: .3em 0;
}
.thumbs img {
- height: 3.8em;
+ width: 10em;
max-width: 100%;
- border: .1em solid white;
- margin: 0 .3em;
-}
-.button {
- margin: .7em 0 1.2em;
+ min-width: 8em;
}
-.button a, .button a:visited {
+p.btn-left a, p.btn-right a,
+ p.btn-left a:visited, p.btn-right a:visited {
font-size: 1.6em;
padding: .4em .6em;
color: #b02500;
border: .1em solid #b02500;
margin: .3em 0;
}
-.button a:hover {
+p.btn-left {
+ float: left;
+ margin: .7em 0;
+}
+p.btn-right {
+ float: right;
+ margin: 0 0 .3em;
+}
+p.button a:hover {
color: #777;
border-color: #777;
}
-.left { float: left; }
-.right { float: right; }
-
.first-column p.back {
margin-bottom: 0;
}
@@ -129,7 +127,7 @@
float: left;
margin-right: .5em;
}
-#Flashes p, #unmaint li, #blurb p, #blurb p small {
+#Flashes p, #unmaint, #blurb p, #blurb p small {
font-size: .9em;
}
#unmaint li, #blurb p {
@@ -139,26 +137,23 @@
display: block;
font-size: 1.1em;
color: black;
+ margin-bottom: .5em;
}
.ltr {
direction: ltr;
text-align: left;
}
-.clear {
- clear: both;
- height: 2em;
-}
.translators-notes {
width: 44.4em; max-width: 100%;
margin: 0 auto;
}
-#mission-statement {
- margin-bottom: 0;
-}
#sisters {
font-size: .9em;
- margin: 0 3% 2em;
+ text-align: center;
+ margin: 0;
+ padding: 0 3% 2em;
+ background-color: white;
}
@media (min-width: 60em) {
@@ -180,7 +175,7 @@
</style>
<!--#include virtual="/server/fs-gang-definitions.html" -->
<!--#include virtual="/po/home.translist" -->
-<!--#include virtual="/server/banner.html" -->
+<!--#include virtual="/server/staging/layout/banner.html" -->
<p class="no-display">GNU is the only operating system developed
specifically to give its users freedom. What is GNU, and what freedom
is at stake?</p>
@@ -192,50 +187,72 @@
<p>GNU is an operating system that
is <a href="/philosophy/free-sw.html">free software</a>—that is,
-it respects users' freedom. The development of GNU made it possible
-to use a computer without software that would trample your freedom.</p>
+it respects users' freedom. The GNU operating system consists of GNU
+packages (programs specifically released by the GNU Project) as well
+as free software released by third parties. The development of GNU
+made it possible to use a computer without software that would trample
+your freedom.</p>
<p>We recommend <a href="/distros/free-distros.html">installable
versions of GNU</a> (more precisely, GNU/Linux distributions) which
are entirely free software. <a href="#More-GNU">More about GNU
below</a>.</p>
-<p class="button left">
+<p class="button btn-left">
<a href="/distros/free-distros.html">Try GNU/Linux</a></p>
<div style="clear: left"></div>
-<div id="gnu-linux">
-<p><a href="/distros/screenshot.html"><img id="screenshot"
- src="/distros/screenshots/trisquel-medium.jpg"
- alt="Screenshot of Trisquel with Gnome 2 desktop"/></a><br />
- Trisquel with Gnome 2 desktop</p>
-</div>
-
-<div class="thumbs">
-<p><a href="/distros/screenshots/trisquel.png"><img
- src="/graphics/backgrounds/white-gnus-bg.jpg"
- alt="Screenshot of Trisquel with Gnome 2 desktop"/></a><br />
- <small>Trisquel</small></p>
-<p><a href="/distros/screenshots/parabola.png"><img
- src="/graphics/backgrounds/green-gnus-bg.jpg"
- alt="Screenshot of Parabola"/></a><br /><small>Parabola</small></p>
-<p><a href=""><img
- src="/graphics/backgrounds/grey-gnus-bg.jpg"
- alt="Screenshot of GuixSD with Gnome 3 desktop"/><br />
- </a><small>GuixSD</small></p>
-<p><a href=""><img
- src="/graphics/backgrounds/blue-gnus-bg.jpg"
- alt="Screenshot of Gnome 3 desktop"/></a><br /><small>Gnome 3</small></p>
-<p><a href=""><img
- src="/graphics/backgrounds/white-gnus-bg.jpg" alt=""/></a><br />
- <small>etc.</small></p>
-<p><a href=""><img
- src="/graphics/backgrounds/white-gnus-bg.jpg" alt=""/></a><br />
- <small>etc.</small></p>
-</div>
-
-<p class="button right">
- ... or <a
href="https://directory.fsf.org/wiki/Free_Software_Directory:Free_software_replacements";>
+<div id="gnu-linux"><!--#if expr="$DISTRO = trisquel8" -->
+<div class="screenshot">
+ <a href="/distros/screenshots/trisquel8-mate.jpg"><img
+ src="/distros/screenshots/trisquel8-mate-medium.jpg"
+ alt=" [Screenshot of Trisquel 8 with MATE desktop] " /></a>
+</div>
+<p><small><a href="https://trisquel.info";>Trisquel 8</a> with <a
+href="https://mate-desktop.org/";>MATE</a> desktop, Abrowser (web browser),
+and Inkscape (vector graphics editor)</small></p><!--#endif
+--><!--#if expr="$DISTRO = guix" -->
+<div class="screenshot">
+ <a href="/distros/screenshots/guixSD-gnome3.jpg"><img
+ src="/distros/screenshots/guixSD-gnome3-medium.jpg"
+ alt=" [Screenshot of GuixSD 0.15 with GNOME 3
desktop] " /></a>
+</div>
+<p><small><a href="/software/guix/">GuixSD 0.15</a> with <a
+href="https://www.gnome.org/";>GNOME 3</a> desktop, Epiphany web
+browser, Totem video player, and GNOME terminal emulator</small></p><!--#endif
+--><!--#if expr="$DISTRO = pureos8" -->
+<div class="screenshot">
+ <a href="/distros/screenshots/pureos8-gnome3.jpg"><img
+ src="/distros/screenshots/gnome3-medium.jpg"
+ alt=" [Screenshot of PureOS 8 with GNOME 3 desktop] "
/></a>
+</div>
+<p><small><a href="https://www.pureos.net/";>PureOS 8</a> with <a
+href="https://www.gnome.org/";>GNOME 3</a> desktop,
+PureBrowser (web browser), and Gimp (image editor)</small></p><!--#endif -->
+
+<table class="thumbs">
+ <tr class="image">
+ <td><a href="/home.html?distro=trisquel8#gnu-linux"><img
+ src="/distros/screenshots/trisquel8-mate-thumb.jpg"
+ alt=" [Screenshot of Trisquel 8 with MATE desktop] "
/></a></td>
+ <td><a href="/home.html?distro=guix#gnu-linux"><img
+ src="/distros/screenshots/guixSD-gnome3-thumb.jpg"
+ alt=" [Screenshot of GuixSD 0.15 with GNOME 3
desktop] " /></a></td>
+ <td><a href="/home.html?distro=pureos8#gnu-linux"><img
+ src="/distros/screenshots/gnome3-thumb.jpg"
+ alt=" [Screenshot of PureOS 8 with GNOME 3 desktop] "
/></a></td>
+ </tr>
+ <tr class="caption">
+ <td><small>Trisquel 8 & MATE</small></td>
+ <td><small>GuixSD & GNOME 3</small></td>
+ <td><small>PureOS 8 & GNOME 3</small></td>
+ </tr>
+</table>
+</div>
+
+<p class="button btn-right">
+ ... or <a
+href="https://directory.fsf.org/wiki/Free_Software_Directory:Free_software_replacements";>
Try parts of GNU</a></p>
<div style="clear: right"></div>
@@ -243,7 +260,7 @@
<p>The free software movement campaigns to win for the users of
computing the freedom that comes from free software. Free software
-puts its users in control of their own computing. Non-free software
+puts its users in control of their own computing. Nonfree software
puts its users under the power of the software's developer. See
<a
href="https://www.fsf.org/blogs/rms/20140407-geneva-tedx-talk-free-software-free-society";>
the video explanation</a>.</p>
@@ -354,22 +371,30 @@
</div>
<div id="unmaint" class="emph-box beige">
-<ul>
-<li><strong>Can you contribute to any of
+<p><strong>Can you contribute to any of
these <a href="//www.fsf.org/campaigns/priority-projects/">High
-Priority Areas</a>?</strong> Free phone operating system;
-decentralization, federation, and self-hosting; free drivers,
-firmware, and hardware designs; real-time voice and video chat;
-encourage contribution by people underrepresented in the community,
-and more.</li>
-
-<li><strong>Can you take over an <a
-href="/server/takeaction.html#unmaint">unmaintained GNU
-package</a>?</strong>
-<span class="gnun-split"></span>
- <a href="/software/halifax/">halifax</a><span class="gnun-split"></span>,
-are all <a href="/server/takeaction.html#unmaint">looking for
-maintainers</a>. Also, these packages are looking for co-maintainers:
+Priority Areas</a>?</strong></p>
+<ul>
+ <li>Free phone operating system,</li>
+ <li>decentralization, federation and self-hosting,</li>
+ <li>free drivers, firmware and hardware designs,</li>
+ <li>real-time voice and video chat,</li>
+ <li>encourage contribution by people underrepresented in the community,</li>
+ <li>and more.</li>
+</ul>
+
+<p><strong>Can you help <a
+href="/server/takeaction.html#unmaint">maintain a GNU package</a>?</strong></p>
+<ul>
+<li><span class="gnun-split"></span>
+ <a href="/software/cfengine/">cfengine</a>,
+ <a href="/software/freetalk/">freetalk</a>,
+ <a href="/software/halifax/">halifax</a>,
+ <a href="/software/mcron/">mcron</a>,
+ <a href="/software/quickthreads/">quickthreads</a><span
class="gnun-split"></span>,
+are all looking for maintainers.</li>
+
+<li>Also, these packages are looking for co-maintainers:
<span class="gnun-split"></span>
<a href="/software/aspell/">aspell</a>,
<a href="/software/bison/">bison</a>,
@@ -377,9 +402,10 @@
<a href="/software/gnubik/">gnubik</a>,
<a href="/software/metaexchange/">metaexchange</a>,
<a href="/software/powerguru/">powerguru</a>,
- <a href="/software/xboard/">xboard</a><span class="gnun-split"></span>.
-See the package web pages for more information.</li>
+ <a href="/software/xboard/">xboard</a><span class="gnun-split"></span>.</li>
</ul>
+
+<p>See the package web pages for more information.</p>
</div>
<div id="blurb" class="emph-box white">
@@ -398,15 +424,16 @@
</div><!-- /second-column -->
</div><!-- /home -->
-<div class="clear"></div>
+<div style="clear:both"></div>
</div><!-- for id="content", starts in the include above -->
-<!--#include virtual="/server/footer.html" -->
+<!--#include virtual="/server/staging/layout/footer-text.html" -->
<p id="sisters">The <a href="http://www.fsf.org/";>FSF</a> also has sister
organizations in <a href="http://www.fsfe.org";>Europe</a>, <a
href="http://www.fsfla.org/";>Latin America</a> and <a
-href="http://gnu.org.in/";>India</a>.</p>
+href="http://gnu.org.in/";>India</a>.<br />
+Feel free to join them!</p>
<!--#include virtual="/server/fs-gang.html" -->
@@ -466,10 +493,10 @@
<p class="unprintable">Updated:
<!-- timestamp start -->
-$Date: 2018/07/03 13:00:30 $
+$Date: 2019/02/15 19:14:17 $
<!-- timestamp end -->
</p>
</div>
-</div>
+</div><!-- for class="inner", starts in the banner include -->
</body>
</html>
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout.css,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- layout.css 14 Dec 2011 19:08:58 -0000 1.1
+++ layout.css 15 Feb 2019 19:14:17 -0000 1.2
@@ -1,7 +1,10 @@
-/*
+/*!
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, 2007, 2008, 2009, 2010, 2011 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
@@ -16,465 +19,1161 @@
included in all copies or substantial portions of the Software.
*/
-/* NOTE: Changes to this file will affect the entire site, often in
-unexpected ways. Please mail patches to address@hidden rather
-than commit changes directly. */
+/*
+ NOTE: Changes to this file will affect the entire site, often in
+ unexpected ways. Please mail patches to address@hidden rather
+ than commit changes directly.
-html, body{
- padding: 0;
- margin: 0;
- background-color: #fff;
- color: #35382a;
- text-align: inherit;
- font-size: 100%;
-}
+ NOTE: After modifying this file, please generate the corresponding minified
+ version, otherwise the changes won't be visible.
-a[href] { color: blue }
-a[href]:visited { color: purple }
-a[href]:active, a[href]:hover { color: red }
+ To generate the minified version of this file, we currently use a free
+ program called YUI Compressor and run this command:
-/* For outdated translations */
-#outdated {
- margin-top: 0.5em ;
- margin-bottom: 0.5em ;
- padding: 0.5em;
- border:2px solid red;
- background: #FFFFCC;
-}
-#outdated p { margin: 0.2em; }
+ yuicompressor layout.css > layout.min.css
+*/
-/* the urgent div should be enabled when we have something urgent to
-appear on every page - these typically come from johns, peterb or rms
-at the fsf */
-#urgent{
+/*** COLORS ***/
-background-color:#ff3;
-line-height: 3em;
-font-size: 0.9em;
-text-align: center;
-border-bottom: 5px solid #333;
- }
+/*
+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
+ #850803 red: GNU links in bottom navbar
+
+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, #back-to-top
+
+ #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, #back-to-top
+ #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
+*/
-#urgent a, #urgent a:visited{
-color: blue; text-decoration: underline !important;
-}
+/*** Luminosity contrast ratio and color difference ***
+ source: http://springmeier.org/www/contrastcalculator/index.php (dead)
+ http://juicystudio.com/services/luminositycontrastratio.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
+ #850803 #d4d4d4 6.97
+
+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
+*/
-#urgent a:hover{ background-color: red; }
- #wrapper{
- margin: 0;
- background-color: transparent;
- padding: 0em;
- position: relative;
- }
+/*** 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]
+ #back-to-top #fsf-links [footer-text.html]
+ #mission-statement [footer-text.html]
+ #footer [<page>.html]
+*/
-a:hover{ color: red; }
+html, body {
+ font-size: 1em;
+ text-align: left;
+ text-decoration: none;
+ color: #222;
+}
+html { background: #e4e4e4; }
/* 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. */
-.inner { margin: auto; width: 99%; max-width:74.92em; }
-
-#logo{background:url(/graphics/topbanner.png) no-repeat;border:0;float:
left;margin:0em;padding:0;}
-#logo:lang(ar) {background:url(/graphics/topbanner.ar.png) no-repeat; float:
right;}
-
-#logo a {
display:block;text-decoration:none;overflow:hidden;border:0;margin:0;padding:0;padding-top:101px;height:0px
!important;width:550px;cursor:pointer;}
-
-#fsf-logo{ position: absolute; top: 0; right: 25px; }
-
-#links{ display: none !important; }
-
-#links{ position: absolute; top: 5px; right: 1em; border-left: 1px
- solid #333; padding-left: 1em;height: 90px; overflow: hidden; }
-
-#links ul{ padding-left: 1em; padding-top: 1em; }
-
-#links li { line-height: 1.6em; font-size: 0.9em; }
-
-#content { background-color: #fff; padding-bottom: 1.8em; margin-top: 0.5em;
text-align: left; }
-
-#content .home { margin-bottom: 10px; }
-
-#content:lang(ar), #content:lang(fa), #searcher:lang(he) {text-align: right;}
+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;
+}
+.inner { overflow: hidden; }
+
+#searcher {
+ font-family: "sans-serif", "FreeSans", sans-serif;
+ padding: .3em 3%;
+ background-color: #d4d4d4;
+}
+#translations {
+ font-family: "FreeSans", sans-serif;
+ padding: 0 3%;
+ background-color: #f5f5f5;
+}
+#header {
+ font-family: "sans-serif", "FreeSans", sans-serif;
+ padding: 0 3%;
+}
+#content {
+ padding: 0 3%;
+ margin-bottom: 2.5em;
+}
+#mission-statement {
+ padding: 0 3%;
+}
+#footer {
+ padding: 1.5em 3%;
+ background-color: #f5f5f5;
+}
+/* #navigation, #edu-navigation, #back-to-top and #fsf-links are defined after
+ the #header elements. */
+
+
+/*** 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. */
+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%; }
-#navigation{ background-color: #bd0000; border-bottom: 3px solid #bd0000;
clear: both; }
+/* Separate description lists from preceding text */
+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% 1.5em 3%; }
-#navigation:after{ clear: both; content: ""; display: block; height: 0px;
visibility: hidden; width: 0px; }
+small { font-size: .9em; }
-#navigation ul{font-size: 0.8em; margin: 0.9em auto; padding-top: 1.1em }
+/** Style **/
-#navigation li{display: inline; }
+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; }
-#navigation li a {color: white; text-decoration: none; font-weight: bold;
padding: .9em;}
+em, cite { font-style: italic; }
+em i, em cite, cite i, cite em { font-style: normal; }
-#navigation li a:hover, #navigation li.selected a{ background-color: #F5DEB3;
color: #0000FF; }
+code {
+ padding: 0 .1em;
+ background: #f5f5f5;
+}
+pre code { background-color: transparent; }
-#sub-nav { background: #F5DEB3; margin-bottom:0 !important;padding:.4em 2em
!important; }
+/* The default color is too dark for large text in bold font. */
+h3, h4 { color: #333; }
-#sub-nav li{display: inline; }
+a[href] { color: #004caa; }
+a[href]:visited { color: #100070; }
+a[href]:active, a[href]:hover {
+ color: #100070;
+ text-decoration: none;
+}
-#sub-nav li a {color: maroon; text-decoration: none; font-weight: bold;
padding: .4em .9em;}
+acronym, abbr {
+ text-decoration: none;
+ border-bottom: 1px dotted #000;
+ cursor: help;
+}
-#sub-nav li a:hover, #sub-nav li.selected a{ color: #0000FF; }
+ol li { list-style: decimal outside; }
+ul li { list-style: square outside; }
+ul ul li, ol ul li { list-style: circle; }
-#joinfsftab a{color: yellow !important}
+/* Rarely used */
+del { text-decoration: line-through; }
+caption { margin-bottom: .5em; text-align: center; }
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
-#content h2 {
- background-color: #3465a4; color: white; font-size: 2em;
- margin-bottom: 0.3em; font-weight:bold; text-align: center; margin: 0;
margin-bottom: 12px; }
-#content h3, #content h4, #content h5, #content h6 {line-height: 1.5em;}
+/*** SIMPLE CLASSES ***/
-#content h3{ font-size: 1.6em; }
+.center, .c { text-align: center; }
+.nocenter{ text-align: left; }
-#content h4{ font-size: 1.3em; }
+.underline { text-decoration: underline; }
+.nounderline { text-decoration: none; }
-#content h5{ font-size: 1.1em; }
+.big { font-size: 1.1em; }
-#content h6{ font-size: 1em; }
+.inline-list li { display: inline }
+.no-bullet li { list-style: none; }
-.caption{ color: #3465a4; font-size: 1.5em !important; margin:0; }
+.no-display { display: none; }
-.netscape4{
- display: none !important;
- height: 0;
+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; }
+dl.compact dt {
+ margin: .8em 0 0;
+ font-weight: normal;
+ font-style: italic;
+}
+dl.compact dd { margin: .3em 3% 0; }
+dl.compact dd p { margin: .3em 0 0; }
-#translations{ background-color: #fff;
- padding: 0; line-height: 1.6em; color: #000; }
-
-#translations h3, #translations h4{ font-size: 1em; font-weight: bold;
margin-bottom: 0.5em; padding: 0; }
-
-#translations li { direction: ltr; display: inline-block;
- padding-left: 0.25em; padding-right: 0.25em; }
-
-#translations a{ color: blue !important; }
-
-#footer { background-color: #fff; border-top: 5px solid #444; padding:1em;
color: #000; margin-top: 1em; }
-
-#footer a{ color: blue; }
-
-#footer p{ margin-bottom: 0.7em; }
-
-#footer, #translations { font-size: 0.9em; }
-
-.announcement{ font-size: 1.1em; font-weight: bold; padding-left: 1em;
margin-left: 1em; border-left: 1em solid #eee; margin-bottom: 1em; }
+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;
+}
-img{ border: 0; }
-#rms-image{
-width: 200px;
-height: 219px;
-float: right;
-margin-left: 1em; margin-bottom: 1em;
-border: 1px solid #ddd;
-background-image: url('/graphics/rms2005chrys.jpg');
+/*** FORMS ***/
+
+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.header input[type="text"] {
+ padding: .25em;
+ color: #555;
+ background: white;
+}
+form.header input[type="submit"] {
+ padding: .25em;
+ color: #333;
+ background: #fff;
+}
+form.header input[type="text"]:focus {
+ color: #333;
+ border: .1em solid #4080d0;
+}
+form.header input[type="text"]:focus + input[type="submit"] {
+ border: .1em solid #4080d0;
+}
+form.header input[type="submit"]:hover {
+ color: #777;
+ border-color: #777;
}
-.lyrics{background-color: #eee; font-style: italic; width: 25em; padding: 2em;
border: 2px solid #e5e5e5; margin-left: 2em;}
-
- #gplv3-dogear{
- position: absolute;
- top: -1px;
- left: -1px;
- }
- #gplv3-dogear h3{margin: 0;}
+/*** BUTTONS ***/
- #gplv3-dogear a{
- background-image: url('/graphics/dogear.png');
- border: 0;
+.button a, #join-fsf a {
display: block;
+ line-height: 1.2em;
+ font-weight: bold;
+ text-align: center;
text-decoration: none;
- overflow: hidden;
- height: 0px !important;
- width: 64px;
- padding: 0;
- padding-top: 64px;
- cursor: pointer;
+ padding: .3em .5em;
+/* Color and background are left out because they depend
+ on the environment. */
+ border: .1em solid #999;
+}
- }
-.nocenter{ text-align: left; }
+/*** SPECIAL BORDERS ***/
-/* Licensing */
-/* This is for licenses/gpl-faq.html. */
+#searcher input[type="text"], #searcher input[type="submit"],
+ #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;
+}
-table#gpl-compat-matrix { border-collapse: collapse; }
-table#gpl-compat-matrix td, th.gpl-matrix-border {
- text-align: center; border: 1px solid black; margin: 0;
- padding: .3em; }
+/*** RETURN LINKS ***/
-th.gpl-matrix-license { text-align: right; }
+.back {
+ text-align: right;
+ line-height: 1.5em;
+ font-weight: bold;
+ margin: 1.5em 2%;
+}
+.back a, .back a:visited { color: #333; }
+.back a:hover { color: #777; }
-tr.gpl-matrix-use-type { border-top: 2px solid black; }
-table#gpl-compat-matrix td.ok { background-color: #ccffcc; }
-table#gpl-compat-matrix td.mok { background-color: #e4ffcc; }
-table#gpl-compat-matrix td.nok { background-color: #dddddd; }
+/*** BIG SECTION HEADERS ***/
-#print-this-article p{ text-align: center; }
+/* For browsers that don't support inline-block */
+.big-section {
+ clear: left;
+ float: left;
+}
+.big-section h3 {
+ display: inline-block;
+ font-size: 1.7em;
+ padding: .2em 0;
+ margin: 1em .3em .5em 0;
+ color: black;
+ border-top: .12em solid #e74c3c;
+ border-bottom: .12em solid #e74c3c;
+}
+.big-subsection {
+ margin: 1.5em 0;
+}
+.big-subsection h4 {
+ display: inline;
+ font-size: 1.5em;
+ margin-right: .3em;
+ color: black;
+}
+/* The next two statements adjust line spacing in Netsurf 1.2 */
+.big-subsection {
+ line-height: 2.0em;
+}
+.big-subsection h4 {
+ line-height: 1.2em;
+}
-#content ul, #fsf-campaigns ul{ list-style: square; margin-left: 1.4em;
list-style-image:url(/graphics/bullet.gif); }
+/*** ANCHOR ***/
-#content ol{ list-style: decimal; margin-left: 1.9em; }
+/* 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-size: 80%; font-weight: normal; }
-#content li, #fsf-campaigns li, #content dd, #content p, #content pre,
#content dt, #content code, #content address{
- line-height: 1.3em; }
+span.anchor-reference-id a { color: #333; }
+span.anchor-reference-id a[href]:hover { color: #777; }
-/* separate the "term" from subsequent "description" */
-dt { margin-bottom: 1em; }
-/* separate the "description" from subsequent list item
- when the final <dd> child is an anonymous box */
-dd { margin-bottom: 2em; }
-/* separate anonymous box (used to be the first element in <dd>)
- from subsequent <p> */
-dd p { margin-top: 1em; }
-#bottom-links{ background-color: #fff; font-size: 0.8em;}
+/*** NON-FLOATING INSETS AND HIGHLIGHTED STUFF ***/
-#bottom-links li{ display: inline; margin-right: 1em; line-height: 2em; }
+/** WITH BACKGROUND **/
-#backtotop{ padding-bottom: 1em; background-color: #fff; }
+/* 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; }
-#backtotop p{ text-align: right; }
+/* .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. */
-blockquote{ margin: 1em; font-style: italic; }
+div.highlight-para, div.emph-box { padding: .2em 1.2em 1.2em; }
-#toplinks{font-size: 80%; padding: 4px; z-index: 999; top: 0; left: 0; }
+.highlight-para, p.highlight,
+ p.emph-box, pre.emph-box { padding: .6em 1.2em; }
-#toplinks a{ font-weight: bold; color: #888; }
+.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: .1em solid #ddd;
+}
+.lyrics {
+ max-width: 25em;
+ font-style: italic;
+ padding: 1em 2em 2em;
+ margin-left: 3%; margin-right: 3%;
+}
-#toplinks a:hover, #toplinks a:active{color: blue;}
-.center{ text-align:center; }
+/** WITH LEFT BORDER **/
-.big{ font-size: 130%; padding-top: 0.7em; }
+/* For important text within an article. The border is bluish-green. */
+.important {
+ padding: 0 1em;
+ border-left: .3em solid #3aa;
+}
-.inline-list li { display: inline }
+/* For information that isn't part of the article. The border is
+ orange and the background is light gray. */
+.announcement blockquote { margin: 0; }
-#searcher{ float: right; margin-right: 1em; line-height: 3em; color: white;
text-transform: uppercase; font-weight: bold; background-color: maroon;
padding-left: 1em; padding-right: 1em;}
+.announcement {
+ font-size: 1.1em;
+ padding: .1em 1em .7em;
+ margin: 1.5em 0;
+ color: #333;
+ border-left: .3em solid #fc7;
+ background: #f5f5f5;
+ background: linear-gradient(to right, #f3f3f3, white);
+}
+/* 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;
+}
-#searcher:lang(ar), #searcher:lang(fa), #searcher:lang(he) {float: left;}
-#searcher, #searcher input{ font-size: 0.8em; }
+/** WITH NO BACKGROUND OR LEFT BORDER **/
-.highlight, .highlight-para{background-color: #ff6;}
+/* For comments within or at the beginning of an article. Can be used
+ with .important or .big. */
+.comment { margin: 1.5em 6%; }
-#takeactionhomepage{
+/* Note about Free Software Free Society */
+blockquote#fsfs p { padding: .3em 0; }
- background-color: #fdb144;
+/* the urgent div should be enabled when we have something urgent to
+ appear on every page - these typically come from johns, peterb or rms
+ at the fsf */
+#urgent {
+ text-align: center;
+ font-size: .9em; font-weight: bold;
+ line-height: 2.6em;
color: black;
- margin-bottom: 0.5em;
- font-size: 90%;
- padding: 1em;
+ background-color: #ff3;
+ border-bottom: .3em solid #333;
}
+#urgent a, #urgent a:visited {
+ color: blue;
+}
+#urgent a:hover { color: #777; }
-#takeactionhomepage h1{text-align: center !important; border: 0 !important;
color: black; font-size: 2em !important; padding-top: 0.2em;}
+/* 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; }
-#takeactionhomepage ul{list-style: none !important; text-align: center;
margin: 0 !important; padding: 0 !important; }
+/* 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; }
-#takeactionhomepage li{line-height: 1.3em; list-style: none !important;}
+/* 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; }
-#fssbox {text-align: center; float: right; font-size: 80%;}
-#fssbox:lang(ar) {float: left;}
-#fssbox p{ margin-bottom: 0px;}
+/*** NOTES ***/
-#content h2 a{color: yellow !important;}
+.note, .edu-note {
+ text-align: center;
+ margin: 2em auto;
+}
-acronym, abbr {border-bottom: 1px dotted #111;}
+/* 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 {
+ padding: .4em 0;
+ margin: 0;
+}
address@hidden (min-width: 0) {
+ .note { max-width: 44.7em; }
+}
-.pad {margin-bottom: 1em;}
-.layout-table * { border: 0; }
+/*** TABLES OF CONTENTS ***/
-#fpnav ul{list-style: none; margin: 0 !important; padding: 0 !important;}
+.summary, .toc {
+ padding: 1em 3% 1.7em;
+ margin: 2.5em auto 1.5em;
+ background: #f5f5f5;
+}
+.summary ul, .toc ul {
+ margin: 0 1.5%;
+}
+.summary h3, .toc h3 {
+ font-size: 1.3em;
+ margin-top: .5em;
+ text-align: center;
+}
+.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 ***/
+
address@hidden (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; }
+}
-#fpnav li{display: block; text-align: left; margin-right: 1em; font-size:
0.9em;}
-#fpnav li a{display: block; padding-top: 6px; padding-bottom: 6px;}
+/*** IMAGES ***/
-#fpnav li a:hover{text-decoration: none; background-color: yellow;}
+.imgright { float: right; margin: .3em 0 1em 1.5em; }
+.imgleft { float: left; margin: .3em 1.5em 1em 0; }
-.pad td{padding-left: 1em; padding-right: 1em;}
+/* 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;
+}
-.imgright{ float: right; margin: 12px; }
address@hidden (min-width: 43em) {
+ .pict.narrow {
+ float:right; margin: .3em 0 1em 1.5em;
+ }
+}
address@hidden (min-width: 48em) {
+ .pict.medium {
+ float:right; margin: .3em 0 1em 1.5em;
+ }
+}
address@hidden (min-width: 55em) {
+ .pict.wide {
+ float:right; margin: .3em 0 1em 1.5em;
+ }
+}
-.imgleft { float: left; margin: 12px; }
-.c { text-align: center; }
+/*** LISTINGS ***/
.listing,
.stx table {
- /* The default table for document listings. Contains name, document types,
modification times etc in a file-browser-like fashion */
+ /* The default table for document listings. Contains name, document types,
+ modification times etc in a file-browser-like fashion */
border-collapse: collapse;
- border-left: 1px solid #666666;
- border-bottom: 1px solid #666666;
+ border: 1px solid #666666;
margin: 1em 0em 1em 0em;
}
+
.listing th,
.stx table th {
- background: #d40;
- color: white;
- font-weight: bold !important;
- border-top: 1px solid #666666;
- border-bottom: 1px solid #666666;
- border-right: 1px solid #666666;
+ background: #fff1c0;
+ color: black;
+ font-weight: bold;
+ border: 1px solid #666666;
font-weight: normal;
- padding: 1em;
+ padding: .7em;
}
.listing td a { display: block; }
-
.listing .top {
border-top: 1px solid #666666;
- text-align: right ! important;
+ text-align: right;
padding: 0em 0em 1em 0em;
}
+
.listing .odd {
/*every second line should be shaded */
background-color: transparent;
}
.listing .even {
- background-color: #ededed;
+ background-color: #f5f5f5;
}
.listing .listingCheckbox {
text-align: center;
}
.listing td,
.stx table td {
- border-right: 1px solid #666666;
+ border: 1px solid #666666;
padding: 1em;
text-align: center;
line-height: 1.3em
}
-.listing a:hover {
- text-decoration: underline;
-}
.listing img {
vertical-align: middle;
}
+.listing {
+ width: 100%;
+ display: block;
+ overflow: auto;
+ padding: .1em;
+ margin: auto;
+}
-.listing { width: 100%; }
-
-#fsf-links { margin: 1em auto; border: 1px solid #ccc; padding: 5px; }
-#fsf-links li a{ color: #555; text-decoration: none; }
+/*** TOP LINKS ***/
-#fsf-links ul li {
- list-style: none;
- padding: 0.3em 0.7em;
- font-weight: bold;
+#toplinks {
+ float: left;
+ /* Matches #searcher. */
+ font-family: "sans-serif", "FreeSans", sans-serif;
+ /* For NetSurf 1.2, and maybe a few other browsers. */
+ padding: .5em 2em .3em;
+}
+/* For standard browsers. */
address@hidden (min-width: 0) {
+ #toplinks { padding: .5em 3% .3em; }
+}
+#toplinks a, #toplinks a:visited {
+ white-space: nowrap;
+ /* the next line is a workaround for Midori 0.5.8 */
display: inline-block;
+ font-weight: bold;
+ font-size: .9em;
+ color: #404040;
+ text-decoration: none;
+ margin-right: 1em;
}
+#toplinks a:hover { color: #777; }
-#fsf-links li{ font-size: 13px }
-
-#fsf-links li a:hover{ color: #0063DC; }
-#fsf-links ul { padding: 0; margin: 0; text-align: center; }
+/*** SEARCHER ***/
-.button { border: 3px solid #999;
- border-left-color: #ccc;
- border-top-color: #ccc;
+#searcher {
+ display: block;
+ text-align: right;
+ font-size: .9em;
font-weight: bold;
- margin-bottom: 10px;
- -moz-border-radius: 0.4em;
- -khtml-border-radius: 0.4em;
- }
+ padding-top: .3em; padding-bottom: .3em;
+}
-.button a{ display: block; text-decoration: none; color: #333; padding:
0.25em;}
-.button a:hover{ color: red;}
+/*** TRANSLATION LIST ***/
-.large { font-size: 36px; background-color: #aacb50; }
+#translations {
+ clear: both;
+ font-size: .9em;
+ text-align: left;
+ border-bottom: .2em solid #d4d4d4;
+}
+#translations p {
+ line-height: 1.2em;
+ padding: .3em 0;
+ margin: 0;
+}
+#translations span {
+ white-space: nowrap;
+ font-size: .9em;
+ margin-right: .5em;
+}
+#translations span a, #translations span a:visited {
+ color: #222; text-decoration: none;
+}
+/* Highlight the link to the original page */
+#translations span.original {
+ font-size: 1em; font-weight: bold;
+}
+#translations span.original a,
+#translations span.original a:visited {
+ color: #004caa;
+}
+#translations a:hover,
+#translations span.original a:hover {
+ color: #777;
+}
-.small { font-size: 22px; background-color: #89b1bd; }
-.emph-box { background-color: #ececec; border: 1px solid #ccc; padding: 12px; }
+/*** HEADER ***/
-.emph-box p { font-size: 0.9em }
+#header a { text-decoration: none; }
-.emph-box h4 { text-align: center; font-size: 28px !important; margin-bottom:
12px;}
+/** FSF frame **/
-#windows7sins { width: 310px; text-align: center; float: right; margin: 12px; }
+#fssbox, #join-fsf { display: none; }
-.highlight-para { padding: 1em; }
+#fsf-frame {
+ float: right;
+ font-size: .9em;
+ text-align: center;
+ margin: .8em 0;
+}
+#fsf-frame p {
+ line-height: 1.3em;
+ margin: 0;
+}
-/* 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-size: 70%; font-weight: normal; }
+#join-fsf a, #join-fsf a:visited {
+ display: inline-block;
+ color: #b02500;
+ background: #fff;
+ border-color: #b02500;
+ padding: .4em .5em .3em;
+}
-/* emacs-page */
-/* Items specific to education */
+#fssbox {
+ padding: 0;
+ margin-top: 1em;
+}
+#fssbox a, #fssbox a:visited {
+ font-weight: bold;
+ color: #004caa;
+}
+#fssbox form p { margin-top: .2em; }
-/* definitions for /education-specific navigation bar */
-ul#edu-navigation {
+#fssbox input[type="submit"] {
+ color: #004caa;
+ border-color: #004caa;
+}
+#fssbox form input[type="text"]:focus + input[type="submit"] {
+ background: white;
+}
+#fsf-frame a:hover, #fssbox input[type="submit"]:hover {
+ color: #777;
+ border-color: #777;
+}
+
+/** GNU banner **/
+
+#gnu-banner {
+ font-size: 2em;
+ font-family: "FreeSans", sans-serif;
+ line-height: 1.2em;
text-align: center;
- /* the selected colors are the same as for h2 */
- background-color: #3465a4;
- color: white;
- /* right and left extents should be the same as for h2;
- the top separation is determined via h2 margin-bottom */
+ padding: .3em 0 .7em;
+}
+#gnu-banner img {
+ height: 1.7em;
+ vertical-align: bottom;
+ position: relative; top: .15em;
+ margin-right: .15em;
+}
+#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;
+}
+#fsf-support a, #fsf-support a:visited {
+ font-weight: bold;
+ color: #555;
+ text-decoration: underline;
+}
+#fsf-support a:hover {
+ color: black;
+ text-decoration: none;
+}
+
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 BARS ***/
+
+#navigation ul, #fsf-links ul {
margin: 0;
- margin-bottom: 1.7em;
+}
+ul#edu-navigation {
+ margin: 0 -3.2%;
}
-#edu-navigation li {
+/* 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 2.5%;
+ margin-top: 0; margin-bottom: 0;
+}
+#navigation li, ul#edu-navigation li, #fsf-links li {
+ white-space: nowrap;
display: inline;
- list-style-type: none;
+ display: inline-block;
+ line-height: 1.5em;
+ font-family: "sans-serif", sans-serif;
+ font-weight: bold;
+ padding-top: .1em;
+ margin: .1em .4em;
+/* Mock border to avoid size change when a link becomes active. */
+ border-bottom: .15em solid transparent;
+}
+li#more-links {
+ float: right;
+ margin-left: 1.5em;
}
-#edu-navigation li a {
- /* font size and padding are set to make the navigation bar
- remain a single line when window is 921 pixels or wider */
- font-size: 12.8px;
- padding: 0 10px;
+ /* For Firefox (can't set line-height when "a" is displayed inline) */
+#navigation a, ul#edu-navigation a, #fsf-links a {
display: inline-block;
- background-color: #3465a4;
- color: white;
+ padding-top: .1em;
+}
+
+#back-to-top {
+ float: right;
+/* For NetSurf 1.2, and maybe a few other browsers. */
+ margin: .3em 1em 0;
+}
+/* For standard browsers. */
address@hidden (min-width: 0) {
+ #back-to-top { margin-right: 3%; }
+}
+#back-to-top a {
+ display: inline-block;
+ line-height: 1.2em;
+ padding: 0 .5em .2em;
+ background: white;
+ border: .1em solid #bbb;
+}
+#back-to-top a span { display: none; }
+
+#navigation { background-color: #a42e2b; }
+ul#edu-navigation { background-color: #eee; }
+#fsf-links { background-color: #d4d4d4; }
+
+#navigation, #navigation a, #navigation a:visited { color: white; }
+ul#edu-navigation, ul#edu-navigation a, ul#edu-navigation a:visited,
+ #fsf-links, #fsf-links a, #fsf-links a:visited { color: #333; }
+#back-to-top a, #back-to-top a:visited { color: #444; }
+#fsf-links .gnu a, #fsf-links .gnu a:visited { color: #850803; }
+
+#navigation li.active {
+ font-style: italic;
+ border-color: white;
+}
+ul#edu-navigation li.active,
+ ul#edu-navigation li.current {
+ font-style: italic;
+ border-color: #a42e2b;
+}
+#navigation li a, ul#edu-navigation li a, #fsf-links li a,
+ #navigation li.active a:hover, #back-to-top a,
+ ul#edu-navigation li.active a:hover {
text-decoration: none;
- font-weight: bold;
}
+#navigation a:hover, ul#edu-navigation a:hover,
+ #fsf-links a:hover { text-decoration: underline; }
+#back-to-top a:hover { color: #777; }
-#edu-navigation li a:hover, #edu-navigation li.active a {
- background-color: #006;
- color: yellow;
address@hidden (max-width: 53em) {
+ #navigation a span, #fsf-links a span { display: none; }
}
-/* let edu-navigation bar approach closer to h2 */
-div#education-content h2 { margin-bottom: 1px; }
address@hidden (min-width: 60em) {
+ #navigation, ul#edu-navigation, #fsf-links {
+ text-align: center;
+ }
+ li#more-links {
+ float: none;
+ }
+}
+
+/*** CONTENT ***/
+
+p.byline {
+ font-size: 1.1em;
+ margin-bottom: 2em;
+}
+.article { font-size: 1.1em; }
+.article h3 { font-size: 1.4em; }
+
+h3.subheader {
+ padding-bottom: .2em;
+ border-bottom: 1px solid #bbb;
+}
+.reduced-width {
+ width: 45em;
+ max-width: 100%;
+ margin: 1.5em auto;
+}
+.columns p.inline-block {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0;
+}
-/* breadcrumb for /education */
-p.edu-breadcrumb {
- line-height: 150% !important;
- padding-left: 10px;
+/* 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;
+ }
+ .columns > *:first-child { margin-top: 0 }
+ .columns > *:last-child { margin-bottom: 0; }
}
-/* styles for subsections of /education "Case Studies" */
-div.edu-cases {
- border-top: 5px ridge #3465a4;
- border-bottom: 5px ridge #3465a4;
- margin-right: 4em;
- margin-left: 4em;
- margin-bottom: 1em;
+/*** MISSION STATEMENT ***/
+
+#mission-statement {
+ clear: both;
+ padding: 1.8em 3% 2em;
+ background: white;
+}
+#mission-statement blockquote {
+ font-size: .9em;
+ font-weight: bold;
+ font-style: italic;
+ margin: 0 0 .8em;
+}
+#mission-statement p {
+ margin: 0;
+}
+#mission-statement img {
+ float: left;
+ height: 2em;
+ margin: .5em;
+}
+#support-the-fsf {
+ text-align: center;
+}
+#support-the-fsf a {
+ display: inline-block;
+ background: white;
+ padding: .5em .8em;
+ margin: 1em 1.5em 0;
+}
+#support-the-fsf a.join, #support-the-fsf a.join:visited {
+ color: #b02500;
+ border-color: #b02500;
+}
+#support-the-fsf a.donate, #support-the-fsf a.donate:visited {
+ color: #004caa;
+ border-color: #004caa;
}
+#support-the-fsf a.shop, #support-the-fsf a.shop:visited {
+ color: #0a8383;
+ border-color: #099;
+}
+#support-the-fsf a.shop:hover, #support-the-fsf a.donate:hover,
+ #support-the-fsf a.join:hover {
+ color: #777;
+ border-color: #777;
+}
+
+
+/*** FOOTER ***/
-/* make h3 for edu-cases look like h4 for other pages */
-div.edu-cases h3 {
- font-size: 1.3em !important;
+#footer {
+ font-size: .9em;
+ color: #333;
+ border-top: 1px solid #ccc;
+}
+#footer p, #bottom-notes {
+ line-height: 1.3em;
margin: 0;
}
+.unprintable { margin-bottom: .7em; }
+
+.translators-credits { margin: .7em 0; }
+
+#footer p.unprintable, #generic p { margin-top: .7em; }
+
-div.edu-cases ul, div.edu-cases ol {
- padding-left: 3em;
- margin-right: 3em;
+/*** EDUCATION ***/
+
+/* Breadcrumbs */
+.edu-breadcrumb {
+ font-size: .9em;
+ font-weight: bold;
+ padding-top: .4em;
+ margin-top: 0;
+ color: #333;
+}
+.edu-breadcrumb a,
+.edu-breadcrumb a:visited {
+ color: #004caa;
+ text-decoration: none;
+}
+.edu-breadcrumb a:hover {
+ color: #777;
}
-/* End items specific to education */
+/* Subsections of /education "Case Studies" */
+.edu-cases {
+ width: 52em; max-width: 100%;
+ padding: 0 0 .8em;
+ border-top: 4px ridge #3465a4;
+ border-bottom: 4px ridge #3465a4;
+ margin: 2em auto;
+}
+.edu-cases ul, .edu-cases ol {
+ margin: 1em 4%;
+}
+.edu-cases h3 {
+ font-size: 1.3em;
+}
Index: layout/head-include-1.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/head-include-1.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- layout/head-include-1.html 28 Dec 2018 12:33:03 -0000 1.1
+++ layout/head-include-1.html 15 Feb 2019 19:14:17 -0000 1.2
@@ -6,6 +6,6 @@
<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="layout.css" media="screen" />
+<link rel="stylesheet" type="text/css" href="/server/staging/layout.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="/print.min.css" media="print" />
<!-- end of server/head-include-1.html -->
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- www/server/staging home.html layout.css layout/...,
Therese Godefroy <=