[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www layout.css
|
From: |
Therese Godefroy |
|
Subject: |
www layout.css |
|
Date: |
Fri, 25 Apr 2014 07:03:47 +0000 |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 14/04/25 07:03:46
Modified files:
. : layout.css
Log message:
Fix gradient background; simplify integration of translation list into
the top bar; different styles for the old translation lists; same padding and
margin on both sides wherever possible (for rtl languages); define style for
h1; resize images in education/; restyle form inputs (thanks to Navaneeth);
misc fixes.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/layout.css?cvsroot=www&r1=1.172&r2=1.173
Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.172
retrieving revision 1.173
diff -u -b -r1.172 -r1.173
--- layout.css 14 Apr 2014 17:38:39 -0000 1.172
+++ layout.css 25 Apr 2014 07:03:45 -0000 1.173
@@ -41,10 +41,10 @@
Backgrounds
white #inner, navbar li.active
- #f0f2f4 light bluish gray: #translations, .emph-box, #outdated,
+ #f0f2f4 light bluish gray: #translations p, .emph-box, #outdated,
.listing, #footer, .toc
#e7e9eb .button, .lyrics
- #d1d4d7 #edu-navbar, #fsf-links, #searcher
+ #d1d4d7 #edu-navbar, #fsf-links, #searcher + #translations
#ddd gray (looks purplish): #gpl-compat-matrix
#ccffcc light green: #gpl-compat-matrix
#e4ffcc light yellowish green: #gpl-compat-matrix
@@ -66,6 +66,7 @@
#334683 #join-fsf
#171d33 dark blue (from screenshot): shade behind .button.large
#6989b6 light blue: border for h3 (license-list.html)
+ #cdc66e greenish yellow: submit buttons and focused text input
*/
/*** Luminosity contrast ratio and color difference ***
@@ -82,7 +83,6 @@
#333 #e7e9eb 10.38 546
#333 #c9cccf 7.83 459
#404040 #d1d4d7 6.97 444
- #444 white 9.74 561
#555 white 7.46 510
Red from GNU banner
@@ -95,7 +95,6 @@
#334683 #e7e9eb 7.36 428
#334683 #777 2.0 110
#334683 #555 1.20 76
- #334683 #444 1.09 67
#334683 #333 1.41 118
#334683 black 2.34 271
@@ -132,6 +131,8 @@
margin: 0;
text-decoration: none;
color: #000;
+}
+html {
background-color: #5b6a96;
/* Source: http://www.impressivewebs.com/css3-linear-gradient-syntax/ */
background: -moz-linear-gradient(#5b6a96, #c9cccf); /* FF 3.6+ */
@@ -141,15 +142,18 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b6a96',
endColorstr='#c9cccf'); /* IE6 & IE7 */
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b6a96',
endColorstr='#c9cccf')"; /* IE8+ */
background: linear-gradient(#5b6a96, #c9cccf); /* the standard */
+ background-attachment: fixed;
}
/* 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; max-width:74.92em; overflow: hidden;
+body {
+ max-width: 74.92em;
+ margin: auto;
background-color: white;
}
+.inner { overflow: hidden; }
.inner h2, .inner ul { padding-left: 1.5%; }
#content ul { padding-left: 0; }
@@ -191,9 +195,7 @@
.inline-list li { display: inline }
-.netscape4 {
- display: none !important;
-}
+.netscape4 { display: none !important; }
/*** TOP OF THE PAGE ***/
@@ -202,31 +204,47 @@
float: left;
font-size: .9em;
font-family: "FreeSans", sans-serif;
- line-height: 1.4em;
font-weight: bold;
- padding: .1em .4em;
- margin: .33em 1.1em;
- background: #d1d4d7;
+ padding: .5em 1.5em 0 1.5em;
+ margin: 0;
+ background-color: #d1d4d7;
}
#toplinks a, #toplinks a:visited {
- padding: 0 .2em;
color: #404040; text-decoration: none;
}
#toplinks a:hover { color: #777; }
#searcher {
+ display: block;
text-align: right;
- font-size: .9em;
- font-family: "FreeSans", sans-serif;
font-weight: bold;
- line-height: 2em;
- padding: .15em .95em;
+ padding: .2em 1.5%;
background-color: #d1d4d7;
}
-
#searcher input {
font-family: "FreeSans", sans-serif;
+ font-size: .9em;
+ margin: 0;
+}
+#searcher input[type="text"] {
color: #555;
+ background: white;
+ padding: .1em .2em;
+ margin: 0;
+ border: .2em solid #b9bcbf;
+}
+#searcher input[type="submit"] {
+ padding: .1em .2em;
+ color: #404040;
+ background: #e7e9eb;
+ border: .2em solid #cdc66e;
+}
+#searcher input[type="text"]:focus {
+ border: .2em solid #cdc66e;
+}
+#searcher input[type="submit"]:hover {
+ background-color: white;
+ cursor: pointer;
}
#translations {
@@ -235,21 +253,25 @@
font-size: .8em;
font-family: "FreeSans", sans-serif;
line-height: 1.3em;
- padding: .2em 0.5em .1em .5em;
+ padding-bottom: .5em;
+ background-color: #d1d4d7;
+}
+
+#translations p {
+ padding: .1em .5em .2em .5em;
+ margin: 0 1.5%;
background-color: #f0f2f4;
- border-top: .1em solid #d1d4d7;
- border-bottom: .4em solid #d1d4d7;
- border-left: 1.25em solid #d1d4d7;
- border-right: 1.25em solid #d1d4d7;
+ border-left: .2em solid #d1d4d7;
+ border-right: .2em solid #d1d4d7;
}
+
#translations span {
- display: inline; white-space: nowrap;
+ white-space: nowrap;
margin-right: .5em;
}
#translations a, #translations a:visited {
color: #222; text-decoration: none;
}
-#translations p { margin-bottom: 0.3em; }
/* Highlight the link to the original page */
#translations span.original {
font-size: 1.1em; font-weight: bold;
@@ -264,10 +286,23 @@
color: #777;
}
+/* For translation lists below the navigation bar. */
+#content #translations { background: white; }
+#content #translations p {
+ padding: .2em .5em .3em .5em;
+ margin: 1em 0 0 0;
+ background: #e7e9eb;
+}
+
/* Still used in some outdated translations. */
#translations h3, #translations h4 {
font-size: 1em; font-weight: bold;
- margin-bottom: 0.5em; padding: 0;
+ padding: 1em 1.5% 0 1.5%;
+ margin: 0;
+}
+#translations ul {
+ margin: 1em 1.5%;
+ background: #f0f2f4;
}
#translations li {
direction: ltr; display: inline; white-space: nowrap;
@@ -281,6 +316,7 @@
#header {
font-family: "FreeSans", sans-serif;
+ margin: 0 1.5%;
background-color: white;
}
#header:after {
@@ -293,45 +329,54 @@
text-align: center;
line-height: 1.3em;
width: auto;
- padding: .6em .3em .4em .3em;
- margin: 1em;
+ margin: 1em 0;
+ padding: .7em .5em .5em .5em;
background: #fff898;
- border: 1px solid #b9bcbf;
+ border: .2em solid #c9cccf;
}
-#fsf-frame p { color: #222; }
-#fsf-frame a { font-weight: bold; text-decoration: none; }
+#fsf-frame #join-fsf { padding: 0; }
#fsf-frame hr {
border: 1px #b9bcbf;
width: .5em; height: .5em;
- margin: .5em auto .3em auto;
+ margin: .4em auto;
background-color: #b9bcbf;
}
-#join-fsf {
- margin: 0;
-}
-#join-fsf a, #join-fsf a:visited {
- padding: .15em .2em .1em .2em;
+#fsf-frame p { color: #222; margin: 0; padding: .3em; }
+#fsf-frame a, #fsf-frame a:visited {
+ font-size: 1.1em;
+ font-weight: bold;
+ text-decoration: none;
color: #334683;
- background: white;
- border: 1px solid #334683;
}
+#fsf-frame a:hover { color: #777; }
-#fssbox p, input {
- margin-bottom: 0;
-}
+#fssbox { padding: 0; }
+#fssbox p, input { margin: 0; }
+#fssbox p { padding: .2em 0 0 0; }
#fssbox input {
font-family: "FreeSans", sans-serif;
font-weight: bold;
- margin: .1em .2em 0 .2em;
+}
+#fssbox input[type="text"] {
+ padding: .1em .2em;
+ margin: 0;
color: #555;
+ background: white;
+ border: .2em solid #b9bcbf;
}
-#fssbox a, #fssbox a:visited {
- font-size: 1.1em;
- font-weight: bold;
- color: #334683;
+#fssbox input[type="submit"] {
+ padding: .1em .2em;
+ margin: 0;
+ color: #404040;
+ background: #e7e9eb;
+ border: .2em solid #cdc66e;
}
-#fssbox a:hover, #join-fsf a:hover {
- color: #777;
+#fssbox input[type="text"]:focus {
+ border: .2em solid #cdc66e;
+}
+#fssbox input[type="submit"]:hover {
+ background-color: white;
+ cursor: pointer;
}
/* For "normal" pages */
@@ -344,7 +389,7 @@
#gnu-banner img {
float: left;
height: 2.4em;
- margin: 0 .15em 0 1.5%;
+ margin: 0 .15em;
position: relative; bottom: .5em;
}
#gnu-banner a {
@@ -359,8 +404,9 @@
font-size: .9em;
font-weight: bold;
font-style: italic;
+ padding: .5em 0;
+ margin: 0;
color: #555;
- margin: .4em 1% .6em 1%;
}
#fsf-support a, #fsf-support a:visited { color: #555; }
#fsf-support a:hover { color: black; }
@@ -427,15 +473,17 @@
text-align: left;
padding: 0 1.5% 1em 1.5%; margin-top: 0;
}
-#content h2 {
- font-size: 2em; font-weight:bold;
- padding: .7em 0 0 0; margin: 0 0 .9em 0;
+#content h1, #content h2 {
+ font-weight:bold;
+ padding: 0; margin: .7em 0 .9em 0;
color: #334683; text-shadow: #999 1px 1px 0;
}
+#content h1 { font-size: 2.4em; }
+#content h2 { font-size: 2em; }
+
#content h3, #content h4, #content h5, #content h6, #content p {
margin-top: 1em;
}
-
#content h3 { font-size: 1.6em; color: #333; }
#content h4 { font-size: 1.3em; color: #333; }
#content h5 { font-size: 1.1em; }
@@ -449,12 +497,6 @@
#content li, #fsf-campaigns li, #content dd, #content p, #content pre,
#content dt, #content code, #content address { line-height: 1.3em; }
-#content h2 a, #content h2 a:visited {
- font-size: .9em;
- text-shadow: none;
- text-decoration: none;
-}
-#content h3 a, #content h4 a { text-decoration: none; }
#content h3 a[href]:visited, #content h4 a[href]:visited { color: #334683; }
#content h3 a[href]:hover, #content h4 a[href]:hover { color: #777; }
@@ -471,7 +513,7 @@
text-align: right;
font-weight: bold;
line-height: 1.5em;
- padding: .6em 1em .4em 0; }
+ padding: .6em 1em .4em 1em; }
#content p.back a, .back a:visited { color: #333; }
#content p.back a:hover { color: #777; }
@@ -519,7 +561,7 @@
#mission-statement img {
float: left;
height: 2em;
- margin: .3em 1em .3em 0;
+ margin: .3em .5em;
}
#mission-statement p { margin: 0 0 .2em 0; }
@@ -532,14 +574,13 @@
}
div#backtotop {
/* For older versions of layout. */
- margin-left: 0; margin-bottom: 0; float: none;
- margin-right: 0;
+ margin: .7em 0 0 0;
text-align: right; padding: 1em;
}
#backtotop a, #backtotop a:visited { color: #333; }
#backtotop a:hover { color: #777; }
-#sisters { font-size: .9em; margin: 0 1% 1.5em 1%; }
+#sisters { font-size: .9em; margin: 0 1.5% 1.5em 1.5%; }
/*** FOOTER ***/
@@ -702,12 +743,17 @@
float: right;
text-align: center;
font-style: normal;
- width: 17em; max-width: 100%;
- padding: 0 .5em;
+ width: 20em; max-width: 90%;
+ padding: 0;
margin: .3em 1em 1em 1em;
border: .3em solid #3465a4;
}
-#content .note p { font-size: 1.1em; line-height: 1.4em; }
+#content .note p {
+ font-size: 1.1em;
+ line-height: 1.4em;
+ padding: 0 1em;
+ margin: 1em 0;
+}
#content .note strong { font-size: 1.2em; }
/* For the note about Free Software Free Society */
@@ -803,19 +849,31 @@
div.edu-cases {
border-top: 5px ridge #3465a4;
border-bottom: 5px ridge #3465a4;
- margin: 1.3em 3em;
- padding-top: .8em;
+ padding: 1.5em 0;
+ margin: 2em 3em;
}
/* make h3 for edu-cases look like h4 for other pages */
#content div.edu-cases h3 {
font-size: 1.3em;
- margin: 0;
+ margin: 0; margin-bottom: 1em;
}
div.edu-cases ul, div.edu-cases ol {
- padding-left: 3em;
- margin-right: 3em;
+ padding: 0 3em;
+}
+
+/* For images in the Education section (and elsewhere?) */
+#content .photo {
+ float: right;
+ width: 30em; max-width: 100%;
+ margin: .3em 0 1em 0;
}
+#content .photo img, #content .photo p {
+ width: 94%;
+ padding: 0 6%;
+}
+#content .photo img.recessed { width: 90%; }
+
/* End items specific to education */
@@ -912,8 +970,8 @@
We make it less obtrusive than the item heading it follows. */
.anchor-reference-id { font-size: 80%; font-weight: normal; }
-span.anchor-reference-id a { color: #333 !important; text-shadow: none; }
-span.anchor-reference-id a:hover { color: #777 !important; }
+span.anchor-reference-id a { color: #333; }
+span.anchor-reference-id a[href]:hover { color: #777; }
/* For license-list.html */
#content div.toc {
@@ -964,7 +1022,7 @@
#content .caption { color: #334683; font-size: 1.5em; margin:0; }
.lyrics {
- background-color: #eee; font-style: italic; width: 25em;
+ background-color: #f0f2f4; font-style: italic; width: 25em;
padding: 2em; border: 2px solid #e7e9eb;
margin-left: 2em; margin-right: 2em;
}
@@ -992,7 +1050,7 @@
}
-/* UNUSED? */
+/*** UNUSED? ***/
.pad { margin-bottom: 1em; }
.pad td { padding-left: 1em; padding-right: 1em; }