[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www layout.css
|
From: |
Therese Godefroy |
|
Subject: |
www layout.css |
|
Date: |
Thu, 29 Sep 2016 07:21:57 +0000 (UTC) |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 16/09/29 07:21:57
Modified files:
. : layout.css
Log message:
Change colors, update color list, redefine fonts for top-links and
header.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/layout.css?cvsroot=www&r1=1.221&r2=1.222
Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.221
retrieving revision 1.222
diff -u -b -r1.221 -r1.222
--- layout.css 29 Sep 2016 07:16:41 -0000 1.221
+++ layout.css 29 Sep 2016 07:21:57 -0000 1.222
@@ -36,40 +36,48 @@
/*
Text
- black normal text, hover on #555 and nav-bars
- white #navigation
- #999 light gray: text shadow
+ black normal text, hover on #555
#222, #333, #404040, #555: special items
#777 medium gray: hover special links
- #334683 blue from GNU banner: h1, h2
- #005090 greenish blue: normal links
+ white #navigation, #join-fsf, #fssbox submit:focus
+
+ #004caa blue: normal links, #fssbox submit
#100070 purplish blue: normal visited links, normal hover
blue #urgent links
- #971611 red from GNU banner: #join-fsf
+
+ #a42e2b red: GNU banner, #outdated, #join-fsf
Backgrounds
- white #inner, navbar li.active
- #f0f2f4 light bluish gray: #translations, .emph-box, #outdated,
- .listing, #footer, .toc, lyrics
- #e7e9eb html
- #d1d4d7 #edu-navbar, #fsf-links, #searcher
- #ddd gray (looks purplish): #gpl-compat-matrix
- #ccffcc light green: #gpl-compat-matrix
- #e4ffcc light yellowish green: #gpl-compat-matrix
- #ffc very pale yellow: .highlight-para, p.highlight
- #fff898 pale yellow: table headers, .highlight
+ #999 hr
+ #d4d4d4 #fsf-links, #searcher
+ #e4e4e4 html
+ #eee #edu-navigation, submit, #join-fsf
+ #f3f3f3 .announcement gradient
+ #f5f5f5 #translations, #footer, .emph-box, .summary, .toc, .lyrics,
+ .listing, .announcement
+ white body, .note, edu-note
+
+ #a42e2b red: #navigation
+
#ff3 yellow: #urgent
- #a42e2b red (slightly darker than the Gnowsys logo): #navigation
+
+ #fff1c0 light orange: span.highlight, table headers
+ #fff5d4 very light orange: .highlight-para, .highlight
Borders
black, #111, #333, #666: tables
- #999 buttons, hr, unfocused inputs
- #b9bcbf bluish gray: body, .highlight-para, .announcement
- #d1d4d7 bluish gray: #translations, #outdated
- #3465a4 blue (slightly lighter than GNU banner): edu-cases ridges
- #6092d0 note
- #334683 focused inputs
- #6989b6 light blue: border for .big-section h3
+ #bbb body
+ #ccc unfocused inputs, footer, #join-fsf
+ #d4d4d4 #translations, #outdated
+ #ddd emph-box, lyrics
+
+ #3465a4 .edu-cases
+ #4080d0 focused inputs, #fssbox submit
+ #6092d0 .note, edu-note
+
+ #a42e2b active link in edu-navbar
+ #e74c3c .big-section h3
+ #fc7 .announcement, .highlight-para
*/
/*** Luminosity contrast ratio and color difference ***
@@ -81,48 +89,35 @@
#000 white 21.3 765
#000 #ff3 19.6 561
#222 white 15.91 663
- #222 #c9cccf 9.87 510
#333 white 12.63 612
- #333 #e7e9eb 10.38 546
- #333 #c9cccf 7.83 459
- #404040 #d1d4d7 6.97 444
+ #333 #eee 10.89 561
+ #404040 #d4d4d4 6.99 444
#555 white 7.46 510
Red
- #971611 white 8.61 704
- #971611 #e7e9eb 7.07 638
#a42e2b white 6.99 630
-Blue from GNU banner
- #334683 white 8.96 494
- #334683 #fff898 8.16 384
- #334683 #e7e9eb 7.36 428
- #334683 #777 2.0 110
- #334683 #555 1.20 76
- #334683 #333 1.41 118
- #334683 black 2.34 271
-
Blue (urgent)
#00f #ff3 8.02 714
Blue links
- #005090 white 8.23 461
- #005090 #e4ffcc 7.64 383
- #005090 #fff898 7.50 351
- #005090 #f0f2f4 7.34 422
- #005090 #ccffcc 7.35 359
- #005090 #777 1.84 103
- #005090 #333 1.53 151
- #005090 black 2.55 304
+ #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 #fff898 15.23 543
+ #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 #005090 2.03 112
+ #100070 #004caa 2.08 134
*/
@@ -150,7 +145,7 @@
text-decoration: none;
color: #000;
}
-html { background: #e7e9eb; }
+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
@@ -159,13 +154,13 @@
max-width: 74.92em;
margin: auto;
background-color: white;
- border: .1em solid #b9bcbf;
+ border: .1em solid #bbb;
border-top: 1px solid transparent;
- -moz-box-shadow: 0 0 5px 5px #b9bcbf;
- -webkit-box-shadow: 0 0 5px 5px #b9bcbf;
- -icab-box-shadow: 0 0 5px 5px #b9bcbf;
- -o-box-shadow: 0 0 5px 5px #b9bcbf;
- box-shadow: 0 0 5px 5px #b9bcbf;
+ -moz-box-shadow: 0 0 5px 5px #bbb;
+ -webkit-box-shadow: 0 0 5px 5px #bbb;
+ -icab-box-shadow: 0 0 5px 5px #bbb;
+ -o-box-shadow: 0 0 5px 5px #bbb;
+ box-shadow: 0 0 5px 5px #bbb;
}
/** Widths **/
@@ -182,18 +177,23 @@
/** Backgrounds **/
-#searcher, #edu-navigation, #fsf-links {
- background-color: #d1d4d7;
+#searcher, #fsf-links {
+ background-color: #d4d4d4;
}
-#translations, #footer { background-color: #f0f2f4; }
+#translations, #footer { background-color: #f5f5f5; }
+
+#edu-navigation { background-color: #eee; }
#navigation { background-color: #a42e2b; }
/** Fonts **/
-#searcher, #toplinks, #translations, #header,
- #navigation, #edu-navigation,
- #fsf-links { font-family: "FreeSans", sans-serif; }
+#translations {
+ font-family: "FreeSans", sans-serif;
+}
+#searcher, #toplinks, #header {
+ font-family: "sans-serif", "FreeSans", sans-serif;
+}
/*** BASIC ELEMENTS ***/
@@ -239,18 +239,21 @@
/** Style **/
-h1, h2 { color: #334683; text-shadow: #999 1px 1px 0; }
/* The default color (black) is too dark for large text in
bold font. */
h3, h4 { color: #333; }
h5, h6, dt { color: #222; }
-a[href] { color: #005090; }
+a[href] { color: #004caa; }
a[href]:visited { color: #100070; }
a[href]:active, a[href]:hover {
color: #100070;
text-decoration: none;
}
+hr {
+ color: #999;
+ background-color: #999;
+}
ul li { list-style: square; }
ul ul li, ol ul li { list-style: circle; }
@@ -286,8 +289,6 @@
display: block;
height: .3em;
margin-bottom: 1.2em;
- color: #999;
- background-color: #999;
border: none;
}
@@ -298,7 +299,7 @@
line-height: 1.2em;
font-family: inherit;
font-weight: bold;
- border: .1em solid #c9cccf;
+ border: .1em solid #ccc;
}
form.header input[type="text"] {
padding: .25em;
@@ -308,14 +309,14 @@
form.header input[type="submit"] {
padding: .25em;
color: #333;
- background: #e7e9eb;
+ background: #eee;
}
form.header input[type="text"]:focus {
color: #333;
- border: .1em solid #334683;
+ border: .1em solid #4080d0;
}
form.header input[type="text"]:focus + input[type="submit"] {
- border: .1em solid #334683;
+ border: .1em solid #4080d0;
}
form.header input[type="submit"]:hover {
cursor: pointer;
@@ -382,8 +383,8 @@
padding: .2em 0;
margin: 1em .3em .5em 0;
color: black;
- border-top: .12em solid #6989b6;
- border-bottom: .12em solid #6989b6;
+ border-top: .12em solid #e74c3c;
+ border-bottom: .12em solid #e74c3c;
}
.big-subsection {
margin: 1.5em 0;
@@ -435,15 +436,15 @@
.highlight-para, p.highlight,
p.emph-box, pre.emph-box { padding: .6em 1.2em; }
-.highlight-para, .highlight { background-color: #ffc; }
-span.highlight { background-color: #fff898; }
+.highlight-para, .highlight { background-color: #fff5d4; }
+span.highlight { background-color: #fff1c0; }
.highlight-para {
- border-top: .1em solid #b9bcbf;
- border-bottom: .1em solid #b9bcbf;
+ border-top: .1em solid #fc7;
+ border-bottom: .1em solid #fc7;
}
.emph-box, .lyrics {
- background-color: #f0f2f4;
- border: .1em solid #c9cccf;
+ background-color: #f5f5f5;
+ border: .1em solid #ddd;
}
.lyrics {
max-width: 25em;
@@ -462,9 +463,9 @@
padding: .1em 1em .7em;
margin: 1.5em 0;
color: #333;
- border-left: .3em solid #b9bcbf;
- background: #f4f6f8;
- background: linear-gradient(to right, #f0f2f4, white);
+ 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. */
@@ -507,22 +508,18 @@
margin-top: 1.2em;
}
.trans-disclaimer a,
-.trans-disclaimer a:visited { color: #005090; }
+ .trans-disclaimer a:visited { color: #333; }
.trans-disclaimer a:hover { color: #777; }
/* For outdated translations */
#outdated {
text-align: center;
- padding: .4em 0;
- margin: .8em 0;
- background-color: #f0f2f4;
- border-bottom: .2em solid #d1d4d7;
-}
-#outdated p {
- margin: 0.2em 0;
+ padding: .4em 3%;
+ margin: .8em -3.2%;
+ color: #a42e2b;
+ border-bottom: .2em solid #d4d4d4;
}
-#outdated a:visited { color: #005090; }
-#outdated a:hover { color: #777; }
+#outdated p { margin: .2em 0; }
/* For translators notes */
.translators-notes {
@@ -556,6 +553,7 @@
max-width: 100%;
}
}
+
/* Several <p>'s */
.note {
padding: .4em 3%;
@@ -579,7 +577,7 @@
.summary, .toc {
padding: 1em 3% 1.7em;
margin: 2.5em auto 1.5em;
- background: #f0f2f4;
+ background: #f5f5f5;
}
.summary ul, .toc ul {
margin: 0 1.5%;
@@ -680,7 +678,7 @@
.listing th,
.stx table th {
- background: #fff898;
+ background: #fff1c0;
color: black;
font-weight: bold
border: 1px solid #666666;
@@ -700,7 +698,7 @@
background-color: transparent;
}
.listing .even {
- background-color: #f0f2f4;
+ background-color: #f5f5f5;
}
.listing .listingCheckbox {
text-align: center;
@@ -765,7 +763,7 @@
clear: both;
font-size: .9em;
text-align: left;
- border-bottom: .2em solid #d1d4d7;
+ border-bottom: .2em solid #d4d4d4;
}
#translations p {
line-height: 1.2em;
@@ -786,7 +784,7 @@
}
#translations span.original a,
#translations span.original a:visited {
- color: #334683;
+ color: #004caa;
}
#translations a:hover,
#translations span.original a:hover {
@@ -813,19 +811,27 @@
#join-fsf a, #join-fsf a:visited {
display: inline-block;
- color: #971611;
- background: #e7e9eb;
+ color: #a42e2b;
+ background: #eee;
}
+
#fssbox {
padding: 0;
margin-top: 1em;
}
#fssbox a, #fssbox a:visited {
font-weight: bold;
- color: #334683;
+ color: #004caa;
}
#fssbox form p { margin-top: .2em; }
+#fssbox form input[type="submit"] {
+ color: #004caa;
+ border-color: #4080d0;
+}
+#fssbox form input[type="text"]:focus + input[type="submit"] {
+ background: white;
+}
#fsf-frame a:hover { color: #777; }
/** GNU banner **/
@@ -843,8 +849,8 @@
position: relative; top: .15em;
margin-right: .15em;
}
-#gnu-banner a { color: #334683; }
-#gnu-banner a strong { color: #971611; }
+#gnu-banner a { color: #333; }
+#gnu-banner a strong { color: #a42e2b; }
/* FSF support */
#fsf-support { display: none; }
@@ -901,7 +907,7 @@
/* Mock border to avoid size change when a link becomes active */
#navigation li { border-bottom: .15em solid #a42e2b; }
-ul#edu-navigation li { border-bottom: .15em solid #d1d4d7; }
+ul#edu-navigation li { border-bottom: .15em solid #eee; }
#fsf-links li { padding-bottom: .15em; }
/* For Firefox (can't set line-height when "a" is displayed inline) */
@@ -960,7 +966,7 @@
font-size: .9em;
padding-top: 1.5em; padding-bottom: 1.5em;
color: #333;
- border-top: 1px solid #c9cccf;
+ border-top: 1px solid #ccc;
}
#footer p, #bottom-notes { margin: 0; }
@@ -983,7 +989,7 @@
}
.edu-breadcrumb a,
.edu-breadcrumb a:visited {
- color: #334683;
+ color: #004caa;
text-decoration: none;
}
.edu-breadcrumb a:hover {
- www layout.css, Therese Godefroy, 2016/09/05
- www layout.css, Therese Godefroy, 2016/09/05
- www layout.css, Therese Godefroy, 2016/09/13
- www layout.css, Therese Godefroy, 2016/09/29
- www layout.css, Therese Godefroy, 2016/09/29
- www layout.css, Therese Godefroy, 2016/09/29
- www layout.css, Therese Godefroy, 2016/09/29
- www layout.css,
Therese Godefroy <=