[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www/server/staging home.html layout.css
|
From: |
Therese Godefroy |
|
Subject: |
www/server/staging home.html layout.css |
|
Date: |
Mon, 26 Apr 2021 15:17:29 -0400 (EDT) |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 21/04/26 15:17:29
Modified files:
server/staging : home.html layout.css
Log message:
Test new colors for the home page & header.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/home.html?cvsroot=www&r1=1.29&r2=1.30
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout.css?cvsroot=www&r1=1.45&r2=1.46
Patches:
Index: home.html
===================================================================
RCS file: /webcvs/www/www/server/staging/home.html,v
retrieving revision 1.29
retrieving revision 1.30
diff -u -b -r1.29 -r1.30
--- home.html 2 Jul 2020 14:50:10 -0000 1.29
+++ home.html 26 Apr 2021 19:17:28 -0000 1.30
@@ -1,8 +1,17 @@
-<!--#include virtual="/server/header.html" -->
-<!-- Parent-Version: 1.91 -->
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<link rel="author" href="mailto:webmasters@gnu.org"; />
+<link rel="icon" type="image/png" href="/graphics/gnu-head-mini.png" />
+<meta name="ICBM" content="42.355469,-71.058627" />
+<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="/print.min.css" media="print" />
+<!-- Parent-Version: 1.96 -->
<!--#if expr="$QUERY_STRING = /distro=([^&#]+)/"
--><!--#set var="DISTRO" value="$1"
---><!--#else --><!--#set var="DISTRO" value="hyperbola"
+--><!--#else --><!--#set var="DISTRO" value="trisquel"
--><!--#endif -->
<title>The GNU Operating System and the Free Software Movement</title>
@@ -12,8 +21,6 @@
<style type="text/css" media="print,screen">
<!--
-blockquote.highlight-para { margin: 1.5em 0 0; }
-
.first-column, .second-column {
width: 46em; max-width: 100%;
margin: auto;
@@ -22,51 +29,43 @@
h2 { margin: 1.2em 0 .8em; }
h2.first { margin-top: .9em; }
-#gnu-linux, .thumbs {
+.screenshot, .thumbs {
text-align: center;
font-style: italic;
- margin: 1em auto;
+ margin: 1.5em auto;
}
-#gnu-linux {
- width: 32em;
- max-width: 100%;
- margin: .5em auto;
+.screenshot p, .thumbs p {
+ line-height: 1.2em;
}
.screenshot {
- line-height: .8em;
- background: #444;
- padding: .2em;
-}
-.screenshot a {
- color: white;
+ width: 32.4em; max-width: 100%;
}
-.screenshot a[href]:hover, .thumbs a[href]:hover {
+.screenshot > a[href]:hover, .thumbs > a[href]:hover {
background-color: transparent;
}
.screenshot img {
- width: 100%;
+ width: 32em; max-width: 98%; height: auto;
+ border: .2em solid #444;;
}
-#gnu-linux p {
- line-height: 1.2em;
+.screenshot p {
margin: .2em 0 0;
}
-div.thumbs {
- display: inline-block;
- width: 100%;
+.thumbs {
white-space: nowrap;
- overflow: auto;
- padding-bottom: .8em;
+ overflow-x: auto;
}
-div.thumbs div {
+.thumbs div {
display: inline-block;
vertical-align: top;
white-space: normal;
- width: 8em;
- margin: 0 2px;
+ margin: 0 1px;
}
-div.thumbs img {
- width: 100%;
- border: 1px solid #444;
+.thumbs img {
+ width: 8em; height: auto;
+ border: 1px solid #444;;
+}
+.thumbs p {
+ margin: 0 0 .7em;
}
.btn-left a[href], .btn-right a[href] {
display: inline-block;
@@ -76,62 +75,53 @@
font-weight: bold;
text-decoration: none;
padding: .4em .6em .5em;
- color: #b02500;
+ color: #55b;
background: white;
- border: .1em solid #b02500;
+ border: .1em solid #55b;
border-radius: .3em;
}
.btn-left a[href]:hover, .btn-right a[href]:hover {
text-decoration: none;
- color: #a42e2b;
- background: #f6e5e1;
- border-color: #a42e2b;
+ color: #55b;
+ background: #ebebff;
+ border-color: #55b;
}
.btn-left {
float: left;
- margin: 2em 0;
+ margin: 2em 0 1em;
}
.btn-right {
float: right;
- margin: 2em 0 1.5em;
+ margin: 1.5em 0;
}
.btn-right a { margin-left: .7em; }
-.first-column p.back {
+.first-column .button {
margin-bottom: 0;
}
-
+.first-column .button a {
+ color: #469;
+}
.second-column .emph-box {
- padding: 0 1.2em 1.2em;
margin-top: 2.3em;
}
-.second-column .emph-box.white {
- background: white;
-}
-.second-column .emph-box.beige {
- background: #fffdf5;
+.second-column .emph-box.color1 {
+ background: #f6f6ff;
+ background: linear-gradient(#eef, white);
+}
+.second-column .emph-box.color2 {
+ background: #eff;
+ background: linear-gradient(#dff, white);
}
.second-column .emph-box .back {
margin-top: 1em;
}
-h3 {
- margin-top: .7em;
-}
h3 img {
height: .8em;
vertical-align: middle;
padding: 0 .5em .2em;
- background: white;
-}
-h3 a[href]:visited {
- color: #049;
-}
-#Flashes h3 a {
background: none;
}
-.new {
- background: yellow;
-}
#blurb h4 {
text-align: left;
font-size: 1.5em;
@@ -141,6 +131,9 @@
float: left;
margin-right: .5em;
}
+#blurb div p {
+ margin-bottom: 0;
+}
#Flashes p, #unmaint, #blurb p, #blurb p small {
font-size: .9em;
}
@@ -169,6 +162,7 @@
padding: 0 3% 2em;
margin: 0;
}
+video track a[href] { color: white; }
@media (min-width: 60em) {
.first-column {
@@ -204,15 +198,33 @@
}-->
<!--#endif -->
</style>
-<!--#include virtual="/server/fs-gang-definitions.html" -->
<!--#include virtual="/po/home.translist" -->
-<!--#include virtual="/server/staging/banner.html" -->
+<!--#include virtual="/server/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>
<div id="home">
-<div class="first-column">
+<div class="first-column" role="article">
+
+<div style="max-width: 40em; margin: 2.3em auto 0">
+<video width="100%" controls="controls" crossorigin="anonymous"
+poster="https://static.gnu.org/nosvn/videos/fight-to-repair/thumbnails/FTR_David_Bike1_meme_7.jpeg";>
+
+<source
src="https://static.gnu.org/nosvn/videos/fight-to-repair/videos/Fight-to-Repair-720p.webm";
type="video/webm" />
+<source
src="https://static.gnu.org/nosvn/videos/fight-to-repair/videos/Fight-to-Repair-720p.ogv";
type="video/ogg" />
+<source
src="https://static.gnu.org/nosvn/videos/fight-to-repair/videos/Fight-to-Repair-720p.mp4";
type="video/mp4" />
+
+<track kind="subtitles" label="English" srclang="en"
src="https://static.gnu.org/nosvn/videos/fight-to-repair/captions/fight-to-repair_en.vtt";
default="default" />
+<track kind="subtitles" label="Persian" srclang="fa"
src="https://static.gnu.org/nosvn/videos/fight-to-repair/captions/fight-to-repair_fa.vtt";
/>
+<track kind="subtitles" label="French" srclang="fr"
src="https://static.gnu.org/nosvn/videos/fight-to-repair/captions/fight-to-repair_fr.vtt";
/>
+<track kind="subtitles" label="Brazilian" srclang="pt-br"
src="/server/banners/fight-to-repair_pt-br.vtt" />
+</video>
+</div>
+
+<p class="c">
+<a
href="https://www.fsf.org/blogs/community/watch-fight-to-repair-demand-the-right-to-repair";>
+Fight to Repair: A video from the FSF</a></p>
<h2 class="first">What is GNU?</h2>
@@ -233,111 +245,109 @@
<a href="/distros/free-distros.html">Try GNU/Linux</a></div>
<div style="clear:both"></div>
-<div id="gnu-linux"><!--#if expr="$DISTRO = dragora" -->
+<div id="gnu-linux" role="figure">
<div class="screenshot">
+<!--#if expr="$DISTRO = dragora" -->
<a href="/distros/screenshots/dragora-ice.png"><img
+ width="512" height="288"
src="/distros/screenshots/dragora-ice.png"
alt=" [Screenshot of Dragora 3.0-beta1 with IceWM window
manager] " /></a>
-</div>
<p><small><a href="https://dragora.org/en/index.html";>
Dragora 3.0-beta1</a> with customized <a href="https://ice-wm.org/";>
-IceWM</a> window manager</small></p><!--#endif
---><!--#if expr="$DISTRO = guix" -->
-<div class="screenshot">
+IceWM</a> window manager</small></p>
+<!--#endif --><!--#if expr="$DISTRO = guix" -->
<a href="/distros/screenshots/guixSD-gnome3.jpg"><img
+ width="512" height="288"
src="/distros/screenshots/guixSD-gnome3-medium.jpg"
alt=" [Screenshot of Guix 0.15 with GNOME 3 desktop] "
/></a>
-</div>
<p><small><a href="/software/guix/">Guix 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 = hyperbola" -->
-<div class="screenshot">
+browser, Totem video player, and GNOME terminal emulator</small></p>
+<!--#endif --><!--#if expr="$DISTRO = hyperbola" -->
<a href="/distros/screenshots/hyperbola-i3.png"><img
+ width="512" height="288"
src="/distros/screenshots/hyperbola-i3.png"
alt=" [Screenshot of Hyperbola with i3 window manager] " /></a>
-</div>
<p><small><a href="https://www.hyperbola.info/";>
Hyperbola 0.3</a> with <a href="https://i3wm.org/";>i3 window manager</a>,
cool-retro-term (terminal emulator), Gimp (image editor), and Iceweasel-UXP
(web
-browser)</small></p><!--#endif
---><!--#if expr="$DISTRO = parabola" -->
-<div class="screenshot">
+browser)</small></p>
+<!--#endif --><!--#if expr="$DISTRO = parabola" -->
<a href="/distros/screenshots/parabola2020-lxde.jpg"><img
+ width="512" height="288"
src="/distros/screenshots/parabola2020-lxde-medium.jpg"
alt=" [Screenshot of Parabola with LXDE desktop] " /></a>
-</div>
<p><small><a href="https://www.parabola.nu";>Parabola 2020</a> with <a
-href="http://lxde.sourceforge.net/about.html";>LXDE
desktop</a></small></p><!--#endif
---><!--#if expr="$DISTRO = pureos" -->
-<div class="screenshot">
+href="http://lxde.sourceforge.net/about.html";>LXDE desktop</a></small></p>
+<!--#endif --><!--#if expr="$DISTRO = pureos" -->
<a href="/distros/screenshots/pureos8-gnome3.jpg"><img
+ width="512" height="264"
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
---><!--#if expr="$DISTRO = trisquel" -->
-<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 -->
+PureBrowser (web browser), and Gimp (image editor)</small></p>
+<!--#endif --><!--#if expr="$DISTRO = trisquel" -->
+ <a href="https://trisquel.info/files/screenshots/etiona-media.jpg";><img
+ width="512" height="320"
+ src="/distros/screenshots/trisquel9-mate.jpg"
+ alt=" [Screenshot of Trisquel 9 with MATE desktop] " /></a>
+<p><small><a href="https://trisquel.info";>Trisquel 9</a> with <a
+href="https://mate-desktop.org/";>MATE</a> desktop, and VLC media
+player</small></p>
+<!--#endif -->
</div>
<div class="thumbs">
<div>
<a href="/home.html?distro=dragora#gnu-linux"><img
+ width="128" height="72"
src="/distros/screenshots/dragora-ice-thumb.jpg"
alt=" [Screenshot of Dragora 3.0-beta1 with IceWM window
manager] " /></a>
- <span class="gnun-split"></span>
- <small>Dragora / IceWM</small>
+ <p><small>Dragora / IceWM</small></p>
</div>
<div>
<a href="/home.html?distro=guix#gnu-linux"><img
+ width="128" height="72"
src="/distros/screenshots/guixSD-gnome3-thumb.jpg"
alt=" [Screenshot of Guix 0.15 with GNOME 3 desktop] "
/></a>
- <span class="gnun-split"></span>
- <small>Guix / GNOME3</small>
+ <p><small>Guix / GNOME3</small></p>
</div>
<div>
<a href="/home.html?distro=hyperbola#gnu-linux"><img
+ width="128" height="72"
src="/distros/screenshots/hyperbola-i3-thumb.jpg"
alt=" [Screenshot of Hyperbola 0.3 with i3 window manager] "
/></a>
- <span class="gnun-split"></span>
- <small>Hyperbola / i3</small>
+ <p><small>Hyperbola / i3</small></p>
</div>
<div>
<a href="/home.html?distro=parabola#gnu-linux"><img
+ width="128" height="72"
src="/distros/screenshots/parabola2020-lxde-thumb.jpg"
alt=" [Screenshot of Parabola 2020 with LXDE desktop] "
/></a>
- <span class="gnun-split"></span>
- <small>Parabola / LXDE</small>
+ <p><small>Parabola / LXDE</small></p>
</div>
<div>
<a href="/home.html?distro=pureos#gnu-linux"><img
+ width="128" height="72"
src="/distros/screenshots/gnome3-thumb.jpg"
alt=" [Screenshot of PureOS 8 with GNOME 3 desktop] "
/></a>
- <span class="gnun-split"></span>
- <small>PureOS / GNOME3</small>
+ <p><small>PureOS / GNOME3</small></p>
</div>
<div>
<a href="/home.html?distro=trisquel#gnu-linux"><img
- src="/distros/screenshots/trisquel8-mate-thumb.jpg"
- alt=" [Screenshot of Trisquel 8 with MATE desktop] " /></a>
- <span class="gnun-split"></span>
- <small>Trisquel / MATE</small>
+ width="128" height="72"
+ src="/distros/screenshots/trisquel9-mate-thumb.jpg"
+ alt=" [Screenshot of Trisquel 9 with MATE desktop] " /></a>
+ <p><small>Trisquel / MATE</small></p>
</div>
</div>
+</div>
<div class="btn-right">... or <a
href="https://directory.fsf.org/wiki/Free_Software_Directory:Free_software_replacements";>
@@ -417,20 +427,29 @@
developing the Hurd because it is an interesting technical
project.</p>
-<p class="back"><a href="/gnu/gnu.html">More information</a></p>
+<p class="button right-align"><a href="/gnu/gnu.html">More information</a></p>
</div><!-- /first-column -->
-<div class="second-column">
+<div class="second-column" role="complementary" aria-describedby="petititon,
+newsfeed, take action, priority projects, maintainers needed, etc.">
+
+<div class="emph-box color1">
+<p><strong>The GNU Project supports the Free Software Foundation's
+petition to call on school administrators around the world to stop
+requiring students to run nonfree software. <a
+href="https://my.fsf.org/give-students-userfreedom";>Sign the petition
+for freedom in the classroom</a></strong>.</p>
+</div>
-<div class="emph-box beige">
+<div class="emph-box color2">
<p><strong>The GNU Project strongly urges the community to communicate in
ways that are friendly, welcoming and kind. See the
<a href="/philosophy/kind-communication.html">
GNU Kind Communications Guidelines</a></strong>.</p>
</div>
-<div id="Flashes" class="emph-box white">
-<h3>Planet GNU
+<div id="Flashes" class="emph-box color1">
+<h3><a href="https://planet.gnu.org/";>Planet GNU</a>
<a href="https://planet.gnu.org/rss20.xml";><img src="/feed-icon-10x10.png"
alt="RSS Feed" /></a></h3>
<div class="ltr">
@@ -438,16 +457,36 @@
</div>
</div>
-<div id="unmaint" class="emph-box beige">
-<h3><a href="/help/help.html">Help GNU</a></h3>
+<div id="Action" class="emph-box color2">
+<h3>Take Action</h3>
+
+<ul>
+<li><strong>Support the efforts on net neutrality
+<a href="https://www.freepress.net/issues/free-open-internet/net-neutrality";
title="Net
+neutrality in the United States of America">in the USA</a></strong>,
+and in your home country.</li>
+
+<li>Defend <a href="https://www.laquadrature.net/en/personnal-data/";>
+privacy</a>, and support <a
+href="https://www.laquadrature.net/en/?s=copyright";>
+global copyright reform</a> with <a
+href="https://www.laquadrature.net/en/";>LQDN</a>.</li>
-<p><strong><span class="new">NEW:</span> Start one of the <a
-href="https://www.gnu.org/help/priority-projects.html";>High Priority
-Enhancement Projects</a>.</strong></p>
+<li><strong><a href="http://www.fsf.org/campaigns";>Support current FSF
+campaigns</a></strong>.</li>
-<p><strong>Contribute to one of
+<li>Fight against software patents:
+<a href="http://www.endsoftpatents.org";>worldwide</a>, and
+<a href="/server/takeaction.html#swpat">in Europe</a>.</li>
+</ul>
+
+<p class="back"><a href="/server/takeaction.html">More action items</a></p>
+</div>
+
+<div id="unmaint" class="emph-box color1">
+<p><strong>Can you contribute to any of
these <a href="//www.fsf.org/campaigns/priority-projects/">High
-Priority Areas</a>:</strong></p>
+Priority Areas</a>?</strong></p>
<ul>
<li>Free phone operating system,</li>
<li>decentralization, federation and self-hosting,</li>
@@ -457,8 +496,8 @@
<li>and more.</li>
</ul>
-<p><strong>Help <a
-href="/server/takeaction.html#unmaint">maintain a GNU package</a>.</strong></p>
+<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>,
@@ -483,33 +522,7 @@
<p>See the package web pages for more information.</p>
</div>
-<div id="Action" class="emph-box white">
-<h3>Take Action</h3>
-
-<ul>
-<li><strong>Support the efforts on net neutrality
-<a href="https://www.freepress.net/issues/free-open-internet/net-neutrality";
title="Net
-neutrality in the United States of America">in the USA</a></strong>,
-and in your home country.</li>
-
-<li>Defend <a href="https://www.laquadrature.net/en/personnal-data/";>
-privacy</a>, and support <a
-href="https://www.laquadrature.net/en/?s=copyright";>
-global copyright reform</a> with <a
-href="https://www.laquadrature.net/en/";>LQDN</a>.</li>
-
-<li><strong><a href="http://www.fsf.org/campaigns";>Support current FSF
-campaigns</a></strong>.</li>
-
-<li>Fight against software patents:
-<a href="http://www.endsoftpatents.org";>worldwide</a>, and
-<a href="/server/takeaction.html#swpat">in Europe</a>.</li>
-</ul>
-
-<p class="back"><a href="/server/takeaction.html">More action items</a></p>
-</div>
-
-<div id="blurb" class="emph-box beige">
+<div id="blurb" class="emph-box color2">
<p><strong><a href="/software/recent-releases.html">Recent GNU
releases</a></strong></p>
@@ -536,12 +549,10 @@
href="http://fsf.org.in/";>India</a>.<br />
Feel free to join them!</p>
-<!--#include virtual="/server/fs-gang.html" -->
-
-<div id="footer">
+<div id="footer" role="contentinfo">
<div class="unprintable">
-<p>Please send general FSF & GNU inquiries to
+<p id="ContactInfo">Please send general FSF & GNU inquiries to
<a href="mailto:gnu@gnu.org";><gnu@gnu.org></a>.
There are also <a href="/contact/">other ways to contact</a>
the FSF. Broken links and other corrections or suggestions can be sent
@@ -556,13 +567,13 @@
to <a href="mailto:web-translators@gnu.org";>
<web-translators@gnu.org></a>.</p>
- <p>For information on coordinating and submitting translations of
+ <p>For information on coordinating and contributing translations of
our web pages, see <a
href="/server/standards/README.translations.html">Translations
README</a>. -->
Please see the <a
href="/server/standards/README.translations.html">Translations
-README</a> for information on coordinating and submitting translations
+README</a> for information on coordinating and contributing translations
of this article.</p>
</div>
@@ -583,7 +594,7 @@
There is more detail about copyright years in the GNU Maintainers
Information document, www.gnu.org/prep/maintain. -->
-<p>Copyright © 1996-2020 <a
+<p>Copyright © 1996-2021 <a
href="http://www.fsf.org";>Free Software Foundation</a>, Inc.</p>
<p>This page is licensed under a <a rel="license"
@@ -594,7 +605,7 @@
<p class="unprintable">Updated:
<!-- timestamp start -->
-$Date: 2020/07/02 14:50:10 $
+$Date: 2021/04/26 19:17:28 $
<!-- timestamp end -->
</p>
</div>
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout.css,v
retrieving revision 1.45
retrieving revision 1.46
diff -u -b -r1.45 -r1.46
--- layout.css 27 May 2020 14:51:29 -0000 1.45
+++ layout.css 26 Apr 2021 19:17:28 -0000 1.46
@@ -3,7 +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-2011, 2013-2017, 2019, 2020 Free Software Foundation
+Copyright (C) 2006-2011, 2013-2017, 2019-2021 Free Software Foundation
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
@@ -47,7 +47,7 @@
Red
- #a42e2b white 6.99
+ #a32d2a white 7.08
Blue (non-visited links)
#049 white 9.18 AAA
@@ -82,19 +82,17 @@
/* TABLE OF CONTENTS
- * Transition from previous version
-
- * PAGE STRUCTURE
+ * MAIN DIVS & CONSTANT FEATURES
- html, body, .inner
- header for CSS3-unaware browsers
#gnu-banner
searcher, language & menu icons
- - navbars & back-to-top (layout, style)
+ - site navigation (layout, style)
- languages for CSS3-unaware browsers
- media queries for header, navbars & languages
#fsf-frame (> 57em)
- #content
- navigation (breadcrumb & edu-breadcrumb)
+ navigation (breadcrumb)
byline
text of the article (reduced-width, columns, infobox)
for translations (trans-disclaimer, #outdated, translators-notes)
@@ -113,12 +111,12 @@
- 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
+ - images (imgleft/imgright, pict)
+ - text with no background or border (comment)
+ - text with background and/or border (emph-box, highlight-para,
+ highlight, lyrics, announcement, important)
+ - notes (note & edu-note)
+ - table of contents (toc, summary & toc-inline)
- media queries for note & summary
* INTERACTIVE ELEMENTS
@@ -128,6 +126,34 @@
* FONT FAMILY
*/
+/* OVERVIEW OF TEXT CLASSES
+ ____________________________________________________________________________
+| | |
+| Class | Applies to Background Border Width Floats on |
+| | wide screens |
+|________________|___________________________________________________________|
+| |
+| ** General use |
+| emph-box | div p pre light gray complete - - |
+| important | block - left, orange - - |
+| highlight | p span orange - - - |
+|----------------------------------------------------------------------------|
+| ** Special parts of the article |
+| comment | block - - - - |
+| lyrics | id. light gray complete - - |
+|----------------------------------------------------------------------------|
+| ** Asides |
+| highlight-para | div p orange top & bottom - - |
+| announcement | block - left, green - - |
+| note | div blockquote - green + + |
+| edu-note | id. - green + - |
+|----------------------------------------------------------------------------|
+| ** Tables of contents |
+| toc | div light gray - + - |
+| summary | div light gray - + + |
+| toc-inline | div button-like - - |
+|____________________________________________________________________________|
+*/
@@ -149,16 +175,21 @@
consistency with fsf.org. */
body {
max-width: 74.92em; /* About 1200px */
- margin: auto;
+ padding: 0;
+ margin: 0 auto;
background: white;
border: .1em solid #bbb;
- border-top: 3px solid #a42e2b;
+ border-top: 0;
-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;
}
+div {
+ padding: 0;
+ margin: 0;
+}
.inner { overflow: hidden; }
@@ -168,6 +199,8 @@
/*** TOP LINKS ***/
+#top { border-top: 3px solid #a32d2a; }
+
.skip, #fsf-frame {
position: fixed;
top: -1000px;
@@ -189,7 +222,7 @@
#gnu-banner img {
display: inline-block;
vertical-align: middle;
- height: 1.5em;
+ height: 1.5em; width: auto;
margin-right: .15em;
}
#gnu-banner strong { font-weight: normal; }
@@ -210,80 +243,62 @@
}
.switch img {
display: inline-block;
- vertical-align: top;
height: 1.5em;
width: auto;
padding: .1em;
}
-/***************************/
-/* NAVBARS & BACK TO TOP */
-/***************************/
+/*********************/
+/* SITE NAVIGATION */
+/*********************/
/** LAYOUT **/
+/* 'submenu' would be a more appropriate name than 'edu-navigation'. */
#navigation, #edu-navigation {
font-size: .94em;
font-weight: bold;
}
#navigation ul { margin: 0; }
-ul#edu-navigation { margin: 0 -3.2%; }
+#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, ul#edu-navigation {
- line-height: 1.8em;
- padding: 0 2%;
+#navigation ul, #edu-navigation {
+ line-height: 2.125em;
+ padding: 0 2% ;
}
-#navigation li, ul#edu-navigation li {
+#navigation li, #edu-navigation li {
white-space: nowrap;
display: inline;
- display: inline-block;
- line-height: 1.8em;
- padding: .1em 0;
+ line-height: 2.125em;
margin: 0 .2em;
}
-
-/* For Firefox (can't set line-height when "a" is displayed inline) */
-#navigation a, ul#edu-navigation a {
+#navigation li a, #edu-navigation a {
display: inline-block;
line-height: 2em;
padding: 0 .6em;
+ margin-top: .125em;
}
+#more-links, #less-links { display: none; }
/** STYLE **/
-#navigation a, ul#edu-navigation a {
+#navigation a, #edu-navigation a {
text-decoration: none;
}
-#navigation { background: #a42e2b; }
-ul#edu-navigation { background: #eee; }
+#navigation { background: #a32d2a; }
+#edu-navigation { background: #eee; }
#navigation a { color: white; }
-ul#edu-navigation a { color: #333; }
+#edu-navigation a { color: #333; }
-#navigation li a:hover { background: #8c0300; }
-ul#edu-navigation li a:hover { background: #fafafa; }
+#navigation li a:hover,
+#navigation li.active a { background: #800300; }
+#edu-navigation li a:hover { background: white; }
-#navigation li.active a,
-ul#edu-navigation li.active a,
-ul#edu-navigation li.current,
-#navlinks li.current > a {
+#navigation li.active a {
font-style: italic;
-}
-#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;
+ cursor: default;
}
@@ -291,13 +306,20 @@
/* LANGUAGES FOR CSS3-UNAWARE BROWSERS */
/*****************************************/
+#language-container .backtotop {
+ margin: 0 3%;
+}
+#language-container .backtotop a {
+ margin-top: .5em;
+}
+#languages .close { display: none; }
#languages {
font-size: .94em; /* 15px */
line-height: 1.2em;
text-align: left;
padding: .6em 3%;
margin: 0;
- background: #f5f5f5;
+ background: #f4f4f4;
border-top: 3px solid #ddd;
}
#set-language { margin-bottom: .2em; }
@@ -343,7 +365,7 @@
font-size: 2em; /* 30px */
margin: 0;
}
- #gnu-banner img { height: 1.3em; }
+ #gnu-banner img { height: 1.3em; width: auto; }
#gnu-banner strong {
display: inline-block;
vertical-align: middle;
@@ -355,8 +377,8 @@
/* Display/hide language list */
#language-container { display: none; }
- #languages .backtotop { display: none; }
#language-container:target { display: block; }
+ .backtotop b { display: none; }
body { position: relative; }
#language-container {
@@ -365,21 +387,27 @@
width: 100%;
height: 100%;
}
- #language-container > .close {
+ #language-container .backtotop a {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
+ border: none;
+ margin-top: 0;
+ }
+ #languages .close {
+ float: right;
+ display: block;
+ }
+ #languages .close span {
+ display: none;
}
#languages .close:after {
- content: "\00274E";
- font-size: 1.2em;
+ content: "\2A09";
float: right;
- margin-right: .5em;
+ position: relative; bottom: .1em;
cursor: pointer;
}
- #language-container a.close:hover { background: 0; }
-
#languages {
position: relative;
margin-top: 4em;
@@ -389,7 +417,7 @@
text-align: left;
padding: .5em 1em;
background: white;
- border: .2em solid #bbb;
+ border: 2px solid #bbb;
box-shadow: 0 0 1em 1em #9999;
}
#translations {
@@ -404,28 +432,35 @@
#navigation, #edu-navigation { font-size: 1em; }
#navigation {
- height: 2.15em;
+ height: 2.25em;
overflow: hidden;
}
+ #more-links { display: block; }
+ #navigation:target { height: auto; }
+ #navigation:target #more-links { display: none; }
+ #navigation:target #less-links { display: block; }
#more-links, #less-links {
float: right;
+ line-height: 2em;
+ padding: 0 .6em;
background: #800300;
- margin: 0 2%;
+ margin: .125em 2% 0;
+ overflow: hidden; /* Removes extra clickable space below the button. */
}
- #more-links:after, #less-links:after {
- display: inline-block;
- padding: .05em .4em;
+ #more-links span, #less-links b { display: none; }
+ #more-links:after {
+ content: "\226B";
+ position: relative; bottom: .05em;
+ }
+ #less-links:after {
+ content: "\2A09";
+ font-weight: bold;
+ position: relative; bottom: .1em;
}
-
- a#less-links { display: none; }
- a#more-links { display: block; }
- #navigation:target { height: auto; }
- #navigation:target a#more-links { display: none; }
- #navigation:target a#less-links { display: block; }
}
@media (min-width: 20em) { /* 312px */
- #gnu-banner { font-size: 2.2em; }
+ #gnu-banner { font-size: 2.1em; }
}
@media (min-width: 34em) {
@@ -435,6 +470,7 @@
@media (min-width: 45em) { /* 720px */
body { font-size: 1em; }
+ #header { padding-top: .3em; }
p#gnu-banner { line-height: .7em; }
#gnu-banner .hide {
display: inline-block;
@@ -448,8 +484,6 @@
#fsf-support a { font-weight: bold; }
#languages { margin-top: 5.5em; }
-
- ul#edu-navigation { display: block; }
}
@media (min-width: 57em) { /* 912px */
@@ -457,12 +491,10 @@
position: static;
font-size: .875em; /* 14px */
width: 94%;
- padding: .3em 3%;;
- background: #f1f1f1;
+ padding: .3em 3%;
}
#fssbox { margin: 0; }
#fssbox a { font-weight: bold; }
- #fssbox fieldset { margin: 0; }
#fssbox div {
display: inline;
white-space: nowrap;
@@ -472,7 +504,8 @@
margin: 0 0 0 2em;
}
- #languages { margin-top: 8em; }
+ #header { padding-top: .5em; }
+ #languages { margin-top: 8.5em; }
}
@@ -488,29 +521,25 @@
/** Navigation **/
-.nav {
- float: left;
- margin: .4em 1.5em 0 0;
-}
-.breadcrumb, .edu-breadcrumb {
- display: inline;
- line-height: 1.7em;
-}
-.breadcrumb img { }
-#content .breadcrumb a[href] img {
+.breadcrumb {
+ display: inline-block;
vertical-align: top;
- height: 1.5em;
- padding: .05em;
- background: none;
+ line-height: 1.6em;
+ margin: .5em 1.5em 0 0;
+}
+.breadcrumb img {
+ height: 1.4em; width: auto;
+ padding: 0;
}
/** Author line after the main heading **/
-p.byline {
+address.byline {
font-size: 1.06em;
font-size: 1.06rem; /* 17px */
- margin-bottom: 2em;
+ font-style: italic;
+ margin-bottom: 1.5em;
}
@@ -518,45 +547,36 @@
.article { font-size: 1.06em; } /* 17px */
-.reduced-width {
+.reduced-width, .reduced-width + .translators-notes {
width: 47em;
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; }
+/** Back links **/
+/* ('forward' would be more appropriate) */
+
+.back {
+ line-height: 1.7em;
+ text-align: right;
+ font-weight: bold;
+ margin: 2em 2%;
}
+.back a { display: inline-block; }
-/** Metadata or footnotes at the end of articles **/
+/** Metadata, notes, etc. **/
.infobox {
font-size: .94em;
font-size: .94rem; /* 15px */
line-height: 1.3em;
+ color: #444;
margin: 2.5em 0 0;
}
-.infobox h3 {
- font-size: 1.2em; /* 18px */
- margin-top: 1.2em;
-}
.infobox p {
- margin: .3em 0 0;
+ margin: .4em 0 0;
}
.infobox hr {
display: block;
@@ -565,6 +585,17 @@
border: none;
margin: 0 0 1em;
}
+.infobox hr.full-width {
+ width: 100%;
+ margin: 1.5em 0;
+}
+
+
+/* Note about Free Software Free Society */
+blockquote#fsfs p {
+ padding: .3em 0;
+ font-size: 1.2em;
+}
/** Translations **/
@@ -574,48 +605,35 @@
clear: both;
text-align: center;
font-style: italic;
- margin: 0;
position: relative;
- top: .6em;
+ top: .4em;
+ margin: .2em 0 0;
}
-.nav ~ .trans-disclaimer {
- text-align: right;
- margin: 0 15% 0 0;
-}
-@media (max-width: 34em) {
- .nav ~ .trans-disclaimer {
- float: right;
- width: auto;
- text-align: right;
- margin: 0 0 0 1.5em;
- top: .5em;
- }
+@media (max-width: 30em) {
+ .nav ~ .trans-disclaimer { text-align: right; }
}
/* For outdated translations */
#outdated {
clear: both;
- width: 46.6em;
- max-width: 100%;
- text-align: center;
- margin: auto;
- position: relative;
- top: .6em;
-}
-#outdated p {
font-size: .94em; /* 15px */
- padding: .5em;
+ width: 48em;
+ max-width: 85%;
+ padding: .5em .8em .7em;
border: .2em solid #fc7;
+ margin: .8em auto;
+}
+#outdated p {
+ display: inline;
margin: 0;
color: black;
}
-#outdated span.hide { display: none; }
-@media (min-width: 45em) {
- #outdated span.hide { display: inline; }
+#outdated p.hide { display: none; }
+@media (min-width: 50em) {
+ #outdated p.hide { display: inline; }
}
-
/* For translators notes */
.translators-notes {
font-size: 1rem;
@@ -628,9 +646,6 @@
margin: 1.7em 0 1.2em;
border: none;
}
-.translators-notes h3, .translators-notes > b {
- font-size: 1.125em; /* 18px */
-}
.translators-notes p, .translators-notes ul, .translators-notes ol {
margin-bottom: 0;
}
@@ -648,13 +663,6 @@
.edu-cases h3 { font-size: 1.3em; } /* 22 px */
-/** Introduction of malware pages **/
-
-.about-dir { color: #444; }
-.about-page { font-style: italic; }
-.about-dir p, .about-page p { margin: .5em 0; }
-
-
/***********************/
/* MISSION STATEMENT */
/***********************/
@@ -662,13 +670,13 @@
#mission-statement {
padding: .5em 3% 2em;
background: white;
- border-top: 3px solid #ddd;
+ border-top: 3px solid #999;
}
#mission-statement blockquote {
font-size: .94em; /* 15px */
font-weight: bold;
font-style: italic;
- margin: 1.5em 3% .8em;
+ margin: .5em 3% .8em;
}
#mission-statement p { margin: 0; }
#mission-statement img {
@@ -690,8 +698,8 @@
font-size: .875em; /* 14px */
padding: 1.5em 3%;
color: #333;
- background: #f5f5f5;
- border-top: 3px solid #ddd;
+ background: #f4f4f4;
+ border-top: 3px solid #999;
}
#footer p, #bottom-notes {
line-height: 1.3em;
@@ -715,15 +723,24 @@
/*************************/
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; }
+strong { font-style: inherit; font-weight: bold; }
+em, cite, var, dfn { font-style: italic; font-weight: inherit; }
+em i, em cite, cite i, cite em, i em, i cite, i i { font-style: normal; }
acronym, abbr {
+ font-variant: normal;
text-decoration: none;
border-bottom: 1px dotted #000;
cursor: help;
}
+code, samp, kbd {
+ font-family: monospace;
+ padding: 0 .2em;
+}
+code, kbd { background: #f2f2f2; }
+kbd { color: #752b1b; }
+
/* Rarely used */
+ins { text-decoration: none; }
del { text-decoration: line-through; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
@@ -733,18 +750,9 @@
/* BASIC CLASSES */
/*******************/
-/* 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; }
.right-align { text-align: right; margin: 2em 0 2em 10%; }
-.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; }
@@ -757,27 +765,28 @@
p, pre { line-height: 1.5em; }
address { line-height: 1.3em; }
-caption { margin-bottom: .5em; text-align: center; }
-blockquote { margin: 1em 3%; }
+p, blockquote { padding: 0; }
+pre { padding: 0 0 .3em; overflow: auto; }
/* 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; }
+blockquote { margin: 1em 3%; }
-/****************/
-/* H* HEADERS */
-/****************/
+/*************/
+/* HEADERS */
+/*************/
-h1 { font-size: 2.375em; margin: 1.0em 0 1.0em; } /* 38px */
-h2 { font-size: 2.0em; margin: 1.0em 0 1.0em; } /* 32px */
+h1, h3, h4, h5, h6 { padding: 0; }
+h1 { font-size: 2.375em; margin: 1.0em 0; } /* 38px */
+h2 { font-size: 2em; padding: 0 0 .2em; margin: .9em 0 .8em; } /* 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; }
+h6 { font-size: 1.0em; margin: 1em 0; }
h2 { clear: both; }
@@ -787,11 +796,18 @@
h3.subheader {
padding-bottom: .2em;
+ margin: 1.8em 0 1.2em;
border-bottom: 1px solid #bbb;
}
-h3.footnote {
- font-size: 1.125em;
- font-size: 1.125rem; /* 18px */
+
+.infobox h3, h3.footnote {
+ font-size: 1.19em;
+ font-size: 1.19rem; /* 19px */
+ margin-top: 1.2em;
+}
+.translators-notes h3, .translators-notes > b {
+ color: #333;
+ font-size: 1.19em; /* 19px */
}
/** BIG SECTION HEADERS **/
@@ -829,6 +845,12 @@
line-height: 1.2em;
}
+/* 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 */
+
+
/** HEADERS ON NARROW SCREENS **/
@media (max-width: 30em) { /* 480 px - 1em = 15px */
@@ -851,26 +873,44 @@
/* LISTS */
/***********/
+ul, ol, li, dl, dd, dt { padding: 0; }
+li, dt, dd { line-height: 1.5em; }
+
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 {
+ul ul li { margin-top: .3em; }
+ul li p, ul li pre, ul li blockquote, table li {
margin-top: .3em; margin-bottom: .3em;
}
ul ul, ol ul, table ul { margin: 0 1.5%; }
+/* For items that are whole paragraphs. E.g., gnu-website-guidelines. */
+ul.para > li { margin-top: 1em; }
+
+/* For malware items */
ul.blurbs li { margin-top: 1em; }
ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li {
margin-top: .5em;
}
+ul.blurbs > li { list-style: none; }
+.blurbs .date-tag {
+ position: relative; right: 2em;
+ padding: .2em .5em;
+ color: #505050;
+ background: #f2f2f2;
+ border-radius: .25em;
+}
+@media (max-width:30em) {
+ .blurbs .date-tag { right: 1.5em; }
+}
/* Separate description lists from preceding text */
dl { margin: 1.5em 0 0; }
@@ -911,17 +951,19 @@
height: .3em;
border: none;
}
-hr.thin {
+/* Can be applied to div or hr. */
+.thin {
clear: both;
height: 1px;
margin: 1.5em 0;
border: none;
+ background: #999;
}
/* Can be applied to div or hr. */
.column-limit {
height: .4em;
- width: 10%; min-width: 5em;
- margin: 2em auto;
+ width: 15%; min-width: 7em;
+ margin: 2.5em auto;
border: none;
background: #bbb; /* default */
background-image: linear-gradient(to right, white, #bbb, white);
@@ -932,65 +974,84 @@
/* TABLES */
/************/
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin: 1.5em 0;
+}
+caption {
+ font-style: inherit;
+ font-weight: inherit;
+ text-align: center;
+ margin-bottom: .5em;
+}
th, td {
border: 1px solid #bbb; /* default */
padding: .5em;
+ margin: 0;
}
th { font-weight: bold; text-align: center; }
-table { margin: 1em 0; }
-.listing,
-.stx table {
+th, td, td p, td li { line-height: 1.3em; }
+
+.listing {
/* 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;
+ width: 100%;
+ display: block;
+ overflow-x: auto;
+ border: .2em solid #ccc;
}
-.listing th,
-.stx table th {
+.listing 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;
+ border: 1px solid #999;
+ /* for browsers that don't know about border-collapse: */
+ border-bottom: 0;
}
-.listing td,
-.stx table td {
+.listing td {
padding: 1em;
text-align: center;
- line-height: 1.3em;
- border: 1px solid #666;
+ border: 1px solid #999;
}
.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, #content .listing .even a[href] img {
- background: #f5f5f5;
+.listing .even {
+ background: #f4f4f4;
+}
+
+
+/*************/
+/* COLUMNS */
+/*************/
+
+.columns p.inline-block {
+ display: inline-block;
+ margin: 0;
+}
+.columns > *:first-child { margin-top: 0 }
+.columns > *:last-child { margin-bottom: 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;
+ }
}
+
/*====================================================================*/
/* IMAGES & EMPHASIZED TEXT */
/*====================================================================*/
@@ -1000,19 +1061,32 @@
/* IMAGES */
/************/
-/* This removes the extended background below images. */
-img { vertical-align: top; }
+img {
+ vertical-align: top;
+ border: 0;
+}
+/** SMALL FLOATING IMAGES **
+
+/* The floating direction will be reversed for rtl languages. */
.imgright, .imgleft { max-width: 100%; }
.imgright { float: right; margin: .3em 0 1em 2em; }
.imgleft { float: left; margin: .3em 2em 1em 0; }
-/* For pictures with/without legend. */
+
+/** ALL IMAGES, with or without legends **/
+
+/* 'narrow', 'medium' and 'wide' define both image width and breakpoint
+ between centered and floating image. If the preset combination doesn't
+ work, it is easier to redefine width than breakpoint. */
+/* 'pict' without 'narrow', 'medium' or 'wide' will always be centered
+ and resize to fit the screen. Image width needs to be defined in a
+ style element or attribute.*/
.narrow { width: 15em; }
.medium { width: 20em; }
.wide { width: 27em; }
.pict { max-width: 100%; margin: 1em auto; }
-.pict img { width: 100%; }
+.pict img { width: 100%; height: auto; }
.pict p {
text-align: center;
font-style: italic;
@@ -1039,41 +1113,50 @@
}
}
+/* This would be in the page if outdated translations could be modified. */
+#dynamic-duo p { font-size: .875em; }
-/**************************/
-/* TEXT WITH BACKGROUND */
-/**************************/
-/** LAYOUT **/
+/***************************************/
+/* TEXT WITH NO BACKGROUND OR BORDER */
+/***************************************/
-/* 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. */
+/* For comments within or at the beginning of an article. Can be used
+ with .important. */
+.comment {
+ font-style: italic;
+ margin: 1.5em 6%;
+}
+@media (max-width: 30em) {
+ .comment { margin: 1.5em 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; }
+/****************************************/
+/* TEXT WITH BACKGROUND AND/OR BORDER */
+/****************************************/
-.lyrics {
- max-width: 25em;
- font-style: italic;
- padding: 1em 2em 2em;
- margin-left: 3%; margin-right: 3%;
-}
+/* Strip bottom margins of children. */
+.emph-box *, .highlight-para *, .lyrics *,
+.announcement *, .important * { margin-bottom: 0; }
-/** STYLE **/
+
+/** emph-box, highlight-para, highlight **/
+
+div.highlight-para, div.emph-box {
+ padding: 0 1.2em 1.1em;
+ margin: 2em 0;
+}
+p.highlight-para, p.highlight,
+p.emph-box, pre.emph-box { padding: .7em 1.2em .8em; }
+
+.emph-box h3, .highlight-para h3, .lyrics h3 {
+ font-size: 1.25em; /* 20px */
+ margin: .8em 0;
+}
+pre.emph-box code, pre.emph-box kbd, pre.emph-box samp,
+p.emph-box code, p.emph-box kbd, p.emph-box samp { padding: 0; }
.highlight-para, .highlight { background: #fff5d4; }
span.highlight { background: #fff1c0; }
@@ -1082,20 +1165,35 @@
border-bottom: .1em solid #fc7;
}
-.emph-box, .lyrics {
- background: #f5f5f5;
- border: .1em solid #ddd;
+.emph-box {
+ background: #f2f2f2; /* to match <code> and <kbd> */
+ border: .1em solid #bbb;
}
-/***************************/
-/* TEXT WITH LEFT BORDER */
-/***************************/
+/** lyrics **/
-/** LAYOUT **/
+.lyrics {
+ display: inline-block;
+ font-style: italic;
+ padding: .5em 2em 1.7em;
+ background: #f4f4f4;
+ border: .1em solid #bbb;
+ border-radius: .5em;
+ margin: 1em 1.5em 1em 4%;
+}
+@media (max-width: 30em) {
+ .lyrics { margin: 1em 0; }
+}
+@media (min-width: 48em) {
+ .lyrics { margin-left: 8%; }
+}
+
+
+/** announcement, important **/
.announcement, .important {
- padding: .4em 1.5em;
+ padding: .4em 1em;
margin: 1.5em 0;
}
.announcement blockquote { margin: 0; }
@@ -1103,42 +1201,22 @@
padding: .4em 0 .5em;
margin: 0;
}
-.announcement ul, .important ul { margin: 0 1em; }
-.announcement ul li, .important ul li {
- padding: .3em;
- margin: 0 3%;
+.announcement > ul, .important > ul { margin: 0; }
+.announcement li, .important li {
+ padding: .2em 0 .3em;
+ margin-top: 0;
}
.announcement h3, .important h3 {
- font-size: 1.25em;
- font-size: 1.25rem; /* 20px */
- margin: .1em 0 .6em;
+ font-size: 1.25em; /* 20px */
+ margin: .35em 0 .4em;
}
-
-
-/** STYLE **/
-
-/* 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; }
-
-/***************************************/
-/* TEXT WITH NO BACKGROUND OR BORDER */
-/***************************************/
-
-/* 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%; }
+@media (min-width: 48em) {
+ .announcement, .important { padding: .4em 1.5em; }
}
-/* Note about Free Software Free Society */
-blockquote#fsfs p { padding: .3em 0; }
-
/***********/
/* NOTES */
@@ -1147,20 +1225,25 @@
/** LAYOUT **/
.note, .edu-note {
- text-align: center;
margin: 2em auto;
}
/* Single <p> */
+.edu-note {
+ width: 37.7em;
+ max-width: 100%;
+}
.edu-note p {
font-style: italic;
- padding: .8em 3%;
+ padding: .7em 1em .8em;
margin: 0;
}
/* Several <p>'s */
.note {
- padding: .4em 3%;
+ width: 45em;
+ max-width: 82%;
+ padding: .3em 3% .4em;
background: white;
}
.note p {
@@ -1170,7 +1253,8 @@
/** STYLE **/
-.note, .edu-note p { border: .15em solid #5c5; }
+.note, .edu-note p { border: .15em solid #0aa; }
+.edu-note p { border-radius: .5em; }
/************************/
@@ -1180,25 +1264,44 @@
/** LAYOUT **/
.summary, .toc {
- font-size: 1rem;
- padding: 1em 3% 1.7em;
- margin: 2.5em auto 1.5em;
- background: #f5f5f5;
+ width: 45em;
+ text-align: center;
+ padding: 1.3em 3% 1.4em;
+ margin: 2em auto;
+ background: #f4f4f4;
+}
+.summary { max-width: 82%; }
+.toc { max-width: 94%; }
+.summary > ul, .toc > ul {
+ display: inline-block;
}
.summary ul, .toc ul {
- margin: 0 1.5%;
+ text-align: left;
+ font-size: .94em;
+ margin: 0 .5em;
+}
+/* This is for displaying the list as columns without a need to
+ change the padding. */
+.summary > ul > li:first-child, .toc > ul > li:first-child {
+ margin-top: 0
}
.summary h3, .toc h3 {
- font-size: 1.25em; /* 20px */
- margin-top: .5em;
- text-align: center;
+ font-size: 1.125em; /* 18px */
+ margin-top: 0;
}
.summary h4, .toc h4 {
- font-size: 1.125em; /* 18px */
+ text-align: left;
+ font-size: 1em;
+}
+.summary a, .toc a {
+ display: inline-block;
+ vertical-align: top;
+ padding: .05em 0;
}
+
.toc-inline {
- font-size: 1rem;
+ font-size: .94em;
text-align: center;
padding: 0 3%;
margin: auto;
@@ -1207,6 +1310,7 @@
display: inline-block;
padding: .1em .4em;
margin: .3em;
+ background: #f2f2f2;
border: .1em solid #bbb;
}
.toc-inline h3 {
@@ -1231,28 +1335,50 @@
/* 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%;
- }
+@media (max-width: 30em) {
+ .note, .summary { max-width: 92%; }
+ /* Override margin definition in free-sw.html. */
+ #content .note { margin-left: auto; margin-right: auto; }
}
-
-@media (min-width: 45em) {
+@media (min-width: 48em) {
.note, .summary {
clear: right;
float: right;
- width: 20rem;
+ width: 20em;
max-width: 40%;
margin: .5em 0 1em 2em;
}
- .summary { padding: 1em 1.2em 1.5em; }
- .note { padding: .4em 1.2em; }
+ #content .note { margin-right: 0; margin-left: 2em; }
+ .summary { padding: 1em .8em 1.1em; }
+ .note { padding: .3em .8em .4em; }
+}
+
+/* ~~~~~~~ For outdated translations of proprietary.html ~~~~~~~ */
+/* (These pages should be fixed instead) */
+div.toc .malfunctions h3, div.toc .companies h3 {
+ padding: 0;
+ margin: 0 0 .5em;
+}
+#content .malfunctions, #content .companies {
+ display: inline-block;
+ padding: .5em .5em 0; margin: 0;
+}
+#content .toc .malfunctions { max-width: 29em; }
+#content .toc .companies { max-width: 14em; }
+#content .malfunctions ul, #content .companies ul {
+ padding: 0; margin: 0;
+}
+#content div.toc .malfunctions li, #content div.toc .companies li {
+ padding: 0 0 .5em; margin: 0;
}
+/* ~~~~~~~~ For outdated translations of education.html ~~~~~~~~ */
+/* (These pages should be fixed instead) */
+#content #video-container { width: 37.7em; margin: 2em auto; }
+#video-container .emph-box { font-size: smaller; margin-top: 0; }
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
/*====================================================================*/
@@ -1264,29 +1390,11 @@
/* LINKS */
/***********/
-/** SPECIAL LINKS **/
-
-.back {
- line-height: 1.7em;
- text-align: right;
- font-weight: bold;
- margin: 2em 2%;
-}
-.back a { display: inline-block; }
-
-/* 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 */
-
-
-/** STYLE **/
-
/* Inline links */
a[href]:link {
color: #049;
- text-decoration-color: #5e93d5;
+ text-decoration-color: #57a;
}
a[href]:visited {
color: #505050;
@@ -1294,8 +1402,6 @@
}
a[href]:active { text-decoration: none; }
-#content a[href] img { background: white; }
-
/* Navigation links */
#gnu-banner > a {
@@ -1303,38 +1409,23 @@
text-decoration: none;
}
#gnu-banner > a strong {
- color: #a42e2b;
+ color: #a32d2a;
}
#fsf-support,
-#fsf-support a[href]:link,
-#fsf-support a[href]:visited,
-#fssbox a[href]:link,
-#fssbox a[href]:visited,
-.breadcrumb a[href]:link,
-.breadcrumb a[href]:visited,
-.edu-breadcrumb a[href]:link,
-.edu-breadcrumb 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;
+#fsf-support a[href],
+#fssbox a[href],
+.breadcrumb a[href],
+.back a[href],
+.anchor-reference-id a[href] {
+ color: #4b4b4b;
text-decoration-color: #bbb;
}
-#languages a[href]:link,
-#languages a[href]:visited,
-#navlinks a[href]:link,
-#navlinks a[href]:visited,
-#TOC a[href]:link,
-#TOC a[href]:visited,
-.trans-disclaimer a[href]:link,
-.trans-disclaimer 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 {
+#translations a[href],
+.trans-disclaimer a[href],
+.toc a[href],
+.toc-inline a[href],
+.summary a[href],
+.package-list a[href] {
color: #049;
text-decoration: none;
}
@@ -1342,11 +1433,17 @@
/* :hover */
a[href]:hover {
- background: #e7f2e2;
+ color: black;
text-decoration: none;
}
-#gnu-banner > a[href]:hover, .pict > a[href]:hover {
- background: none
+#translations a[href]:hover {
+ background: #eee;
+}
+.toc a[href]:hover,
+.summary a[href]:hover,
+.toc-inline a[href]:hover,
+.package-list a[href]:hover {
+ background: white;
}
@@ -1356,17 +1453,28 @@
/** LAYOUT **/
-fieldset { margin: 1em 0; }
-optgroup { font-weight: normal; }
+form, legend, fieldset, textarea { padding: 0; }
+form, legend, button, textarea, input { margin: 0; }
+fieldset {
+ border: 0;
+ margin: 1em 0;
+}
+input, button, textarea, select, optgroup, option {
+ font-family: inherit;
+ font-size: inherit;
+ font-style: normal;
+ font-weight: normal;
+}
button, input[type="checkbox"], input[type="radio"],
input[type="reset"], input[type="submit"] {
padding: 1px;
}
-form.header input, .button a {
+#fssbox input, .button a {
line-height: 1.1em;
- padding: .4em .5em;
+ padding: .4em .6em;
}
-form.header input[type="submit"], .button a {
+#fssbox input[type="text"] { height: 1.1em; }
+#fssbox input[type="submit"], .button a {
font-weight: bold;
margin: 0;
}
@@ -1379,106 +1487,91 @@
margin: 1em 1.5em 0;
}
-.backtotop {
- float: right;
- margin: 0 1em;
-}
.backtotop a {
- display: inline-block;
- vertical-align: top;
+ float: right;
+ position: relative; bottom: 1em;
font-size: 1.2em;
- font-size: 1.2rem;
- line-height: 1.2em;
- padding: .2em .5em;
+ font-weight: bold;
+ line-height: 1em;
+ padding: .2em .6em .5em;
+ margin: 0 1em;
}
.backtotop a span { display: none; }
+.inner > .backtotop { margin-right: 3%; }
+
/** STYLE **/
-.button a[href], .backtotop a[href] {
+.button a[href],
+.backtotop a[href] {
text-decoration: none;
background: white;
-}
-.button a[href], .backtotop a[href] {
- color: #049;
border: .1em solid #999;
+ border: .1rem solid #999;
}
-.button a[href]:hover, .backtotop a[href]:hover {
- background: #e7f2e2;
- border-color: #006400;
+.button a[href] { color: #049; }
+.backtotop a[href] { color: #469; }
+
+.button a[href]:hover,
+.backtotop a[href]:hover {
+ background: #dff;
+ border-color: #088;
}
#join-fsf a, #support-the-fsf a.join {
- color: #b02500;
- border-color: #b02500;
+ color: #a32d2a;
+ border-color: #a32d2a;
}
#join-fsf a:hover, #support-the-fsf a.join:hover {
- color: #a42e2b;
background: #f6e5e1;
- border-color: #a42e2b;
}
#support-the-fsf a.donate {
- color: #005ccd;
- border-color: #005ccd;
+ color: #4040bb;
+ border-color: #55b;
}
#support-the-fsf a.donate:hover {
- color: #049;
background: #d9e8f7;
- border-color: #049;
+ background: #ebebff;
}
#support-the-fsf a.shop {
- color: #008400;
- border-color: #008400;
+ color: #006363;
+ border-color: #088;
}
#support-the-fsf a.shop:hover {
- color: #006400;
- background: #e7f2e2;
- border-color: #006400;
+ background: #dff;
}
-.switch img:hover {
- background: #e7f2e2;
+a[href].switch:hover {
+ background: none;
cursor: pointer;
}
-form.header input {
- border: .1em solid #bbb;
-}
-form.header input[type="text"], form.header input[type="submit"] {
- color: #555;
+#fssbox input {
background: white;
}
-form.header input[type="submit"] {
- cursor: pointer;
+#fssbox input[type="text"] {
+ color: #555;
+ border: .1em solid #bbb;
}
-form.header input[type="text"]:focus {
+#fssbox input[type="text"]:focus {
color: #333;
- border-color: #006400;
-}
-form.header input[type="text"]:focus + input[type="submit"] {
- color: #008400;
- border-color: #008400;
-}
-form.header input[type="submit"]:hover {
- color: #006400;
- border-color: #006400;
+ border-color: #088;
}
#fssbox input[type="submit"] {
- color: #008400;
- border-color: #008400;
+ color: #006060;
+ border: .1em solid #088;
+ cursor: pointer;
}
-#fssbox input[type="submit"]:hover {
- color: #006400;
- background: #e7f2e2;
- border-color: #006400;
+#fssbox input[type="text"]:focus ~ input[type="submit"] {
+ background: #dff;
}
-.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;
+.rounded-corners, .button a, .backtotop a, #fssbox input {
+ border-radius: .4em;
+ -moz-border-radius: .4em;
+ -khtml-border-radius: .4em;
+ -webkit-border-radius: .4em;
+ -opera-border-radius: .4em;
}
@@ -1490,15 +1583,14 @@
a[href] { font-family: sans-serif; }
-#fsf-frame a[href], #fssbox label, form.header input, .button a[href],
+#fsf-frame a[href], form, .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] {
+#navigation a[href], #edu-navigation a[href] {
font-family: "Dosis", "Noto Sans Display", "Noto Sans", "Liberation Sans",
sans-serif;
}
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- www/server/staging home.html layout.css,
Therese Godefroy <=