com web/php: Standardized colors; also brought some whitespace into line.: styles/home.css styles/theme-base.css styles/theme-medium.css

From: Date: Wed, 26 Feb 2014 05:31:53 +0000
Subject: com web/php: Standardized colors; also brought some whitespace into line.: styles/home.css styles/theme-base.css styles/theme-medium.css
Groups: php.webmaster 
Request: Send a blank email to php-webmaster+get-18378@lists.php.net to get a copy of this message
Commit: 46a855f1166cc5e6b641218a7999ea32d38161b3 Author: Levi Morrison <levim@php.net> Tue, 25 Feb 2014 22:26:45 -0700 Parents: a4898e52d06acec294cb8085bb6c2f91df76a0f5 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=46a855f1166cc5e6b641218a7999ea32d38161b3 Log: Standardized colors; also brought some whitespace into line. After looking at our current website on 4 different monitors with several different settings on each monitor, I concluded that we don't have enough contrast in our website. This commit is primarily intended to address this issue. Generally speaking, on mid to low grade monitors I have considerably improved contrast and it looks pretty good. It does not look as nice on the high-end monitors, though. I am a horrible contributor who doesn't break my changes into multiple commits so we get the spacing fixes this commit as well. I really do try to do one 'feature' or change per commit, but I notice things that bother me while fixing something else so I fix it... Changed paths: M styles/home..css M styles/theme-base.css M styles/theme-medium.css

diff --git a/styles/home.css b/styles/home.css index 8292eae..67e5e1d 100644 --- a/styles/home.css +++ b/styles/home.css @@ -4,10 +4,10 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 */ #intro { - background:#444449; + background:#333; box-shadow:inset 0 0 2em rgba(0,0,0,.375); color:#fff; - border-bottom:.25em solid #99c; + border-bottom:.25em solid #8C8CC5; } #intro p { text-shadow:0 1px 2px rgba(0,0,0,.5); diff --git a/styles/theme-base.css b/styles/theme-base.css index d3a245f..5b73ccd 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -173,7 +173,7 @@ textarea { float: left; display: block; height: 1.5em; - padding: .75em; + padding: .75em .75em .75em 1.5em; color: #fff; text-shadow: 0 1px 0 #fff; } @@ -231,12 +231,9 @@ textarea { background-color: #e5e5e5; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } -.navbar .navbar-inner { - background-color: #99c; -} .navbar .brand, .navbar .nav > li > a { - color: #eef; + color: #eee; border:0; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } @@ -255,7 +252,7 @@ textarea { .navbar .nav .active > a:hover, .navbar .nav .active > a:focus { color: #fff; - background-color: #669; + background-color: #5B5B89; } .navbar .navbar-search .search-query { background-color: #fff; @@ -634,17 +631,13 @@ pre.info { } .layout-menu { - padding:.625em .75em 1.5em; - border: 1px solid; - border-top:0; - border-right:0; + padding:.75em 1.5em 1.5em; + border-right:1px solid; -moz-box-sizing:border-box; box-sizing:border-box; } #layout-content { padding:1.5em; - border:1px solid; - border-top:0; -moz-box-sizing:border-box; box-sizing:border-box; } @@ -758,14 +751,14 @@ table.standard th { } table.standard tr:nth-child(even) td { - background-color: #f2f2f2; + background-color: #E6E6E6; } table.standard th { font-size: 1.125em; line-height: 1.333333333; padding: 20px 10px 5px 10px; - color: #777; + color: #666; font-weight: normal; } @@ -782,7 +775,7 @@ table.standard tr:nth-child(even) td.sub, table.standard tr:nth-child(even) th.sub, table.standard tr td.sub, table.standard tr th.sub { - background: #E3E3F1; + background: #E6E6E6; } table.standard td.subr, @@ -1177,7 +1170,7 @@ fieldset { .title { padding:6px 12px; - border-top:2px solid #669; + border-top:2px solid #666; border-bottom:1px solid; overflow:hidden; } @@ -1393,7 +1386,7 @@ ul.chunklist_children { } .refsect1 { - margin: 1.5em 0 2.25em; + margin: 1.5em 0; } .docs .classsynopsis { @@ -1432,38 +1425,44 @@ ul.chunklist_children { } .docs .layout-menu ul.parent-menu-list > li > a { border:0; + font-size: 1.125rem; + line-height:1.333333333; + margin-bottom:0.666666667em; + display:block; } .docs .layout-menu ul.child-menu-list { margin: 0; - padding:0 .25em; } .layout-menu ul.child-menu-list li { list-style-type: none; margin: 0; } +.layout-menu ul.child-menu-list li:first-child a { + border-top: 1px dotted; +} .layout-menu ul.child-menu-list a { font-size: .875em; line-height: 1.714285714; border-bottom: 1px dotted; display:block; - padding-left:.125em; + padding-left:.75em; + position:relative; } -.docs .layout-menu ul.child-menu-list .current { +.layout-menu ul.child-menu-list .current { font-weight:bolder; } -.docs .layout-menu ul.child-menu-list .current { - position:relative; -} #layout-content .current:before { content:"\bb \20"; } -.docs .layout-menu ul.child-menu-list .current a:before { +.layout-menu ul.child-menu-list a:hover:before, +.layout-menu ul.child-menu-list a:focus:before, +.layout-menu ul.child-menu-list .current a:before { content:"\bb \20"; position:absolute; - left:-.675em; + left:0em; } .docs .sect2 { @@ -1495,8 +1494,7 @@ div.soft-deprecation-notice blockquote.sidebar { #breadcrumbs { -moz-box-sizing:border-box; box-sizing:border-box; - border:1px solid; - border-top:0; + border-bottom:1px solid; margin:0 auto; font-size:.875em; line-height:1.71428571428571; @@ -1509,7 +1507,7 @@ div.soft-deprecation-notice blockquote.sidebar { overflow: hidden; } #breadcrumbs div { - padding:.5em .75em; + padding:.5em 1.714285714em; } #breadcrumbs li { display:inline-block; @@ -1618,7 +1616,7 @@ div.soft-deprecation-notice blockquote.sidebar { } #mainmenu-toggle-overlay { - background: #669 url(/images/mobile-menu.png) no-repeat center center; + background: #5B5B89 url(/images/mobile-menu.png) no-repeat center center; float: right; display: block; height: 32px; @@ -1782,9 +1780,8 @@ aside.tips p { } aside.tips .panel { margin:0.66666666666667em 0; - background:#f0f0f0; - border:1px solid #d9d9d9; - border-bottom-color:#d0d0d0; + background:#E3E3F1; + border:1px solid #C6C6E2; border-radius:2px; } @@ -1796,7 +1793,6 @@ aside.tips .panel > a { aside.tips .panel > a:hover, aside.tips .panel > a:focus { color:#369; - background:#f9f9f9; } aside.tips .panel .headline, .panel .body, @@ -1813,8 +1809,8 @@ aside.tips div.inner { background:inherit; } .panel .body { - background-color: #f9f9f9; - border-top:1px solid #d9d9d9; + background-color: #fff; + border-top:1px solid #C6C6E2; border-radius: 0 0 2px 2px; } .panel .body:first-child { diff --git a/styles/theme-medium.css b/styles/theme-medium.css index c6c38ad..3fc9367 100755 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -4,21 +4,21 @@ * ---------------+---------+ * light-purple | #E3E3F1 | * ---------------+---------+ - * medium-purple | #9999cc | + * medium-purple | #8C8CC5 | * ---------------+---------+ - * dark-purple | #666699 | + * dark-purple | #5B5B89 | * ---------------+---------+ * */ html { - background-color: #262626; + background-color: #333; } body { - background:#E3E3F1; - color: #262626; + background:#C6C6E2; + color: #333; } #layout-content { background:#fff; @@ -26,19 +26,19 @@ body { } abbr { - border-color: #999; + border-color: #8C8CC5; } h1 { - color: #336; + color: #333; } h2 { - color: #262626; + color: #333; } h1, h2, h3, h4, h5, h6 { font-weight:bolder; - color:#336 + color:#333 } a:link, @@ -60,17 +60,12 @@ ol { list-style-type: decimal; } -em, -strong { - color: #262626; -} - dl.qandaentry { border-color:#000; } h1.refname { - color: #669; + color: #333; } @@ -84,7 +79,7 @@ h1.refname { .fieldsynopsis .modifier, .methodsynopsis .modifier, .constructorsynopsis .modifier { - color:#444; + color:#333; } .classsynopsis { @@ -96,17 +91,17 @@ h1.refname { } .title { - color: #446; + color: #333; background: #E3E3F1; border-radius:0 0 2px 2px; border-color:#C6C6E2; - border-top-color:#669; + border-top-color:#5B5B89; box-shadow: inset 1px 0 1px -1px #C6C6E2, inset -1px 0 1px -1px #C6C6E2 } .title a { - color: #446; + color: #333; } .methodname b, @@ -138,8 +133,8 @@ div.tip { border-bottom-color:#9FBFDF; } blockquote.note { - background-color: #F2F2F2; - border-color: #CCC; + background-color: #E6E6E6; + border-color: #ccc; } div.caution { background: #fcfce9; @@ -187,8 +182,8 @@ div.warning:before { /* {{{ Navbar */ .navbar { - border-color:#669; - background:#99c; + border-color:#5B5B89; + background:#8C8CC5; box-shadow: 0 .25em .25em rgba(0,0,0,.1); } /* }}} */ @@ -196,12 +191,12 @@ div.warning:before { /* {{{ User notes */ #usernotes .count { - background-color: #669; + background-color: #5B5B89; color: #fff; border-radius: 4px; } #usernotes .note .name { - color: #444; + color: #333; } #usernotes .note .date { color: #666; @@ -210,11 +205,11 @@ div.warning:before { color: black; } #usernotes .note .text { - background-color: #F2F2F2; - border-color: #CCC; + background-color: #E6E6E6; + border-color: #ccc; box-shadow: - inset 1px 0 1px -1px #CCC, - inset -1px 0 1px -1px #CCC; + inset 1px 0 1px -1px #ccc, + inset -1px 0 1px -1px #ccc; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; @@ -223,7 +218,7 @@ div.warning:before { transition: opacity 0.4s; } #usernotes .note .votes .tally { - color: #262626; + color: #333; } #usernotes .note .votes a { -webkit-transition: border 0.4s; @@ -240,11 +235,12 @@ div.warning:before { border-color: #ccc; } .doctable thead tr { - border-color: #99c; - color: #262626; + border-color: #C6C6E2; + border-bottom-color: #8C8CC5; + color: #333; } .doctable th { - background-color: #bbd; + background-color: #C6C6E2; } .doctable tr { border-color: #ccc @@ -253,7 +249,7 @@ div.warning:before { background-color: #ffffff; } .doctable tbody tr:nth-child(even) { - background-color: #E3E3F1; + background-color: #E6E6E6; } /* }}} */ @@ -261,7 +257,7 @@ div.warning:before { /* {{{ Syntax highlighting */ .example-contents > [class$="code"], .example-contents.screen { - background-color: #f2f2f2; + background-color: #fff; border-color: #d0d0d0 !important; border-top-color: #cdcdcd !important; } @@ -280,7 +276,7 @@ div.warning:before { background-color: transparent; } .phpcode span.comment { - color: #808080; + color: #5B5B89; background-color: transparent; } div.phpcode span.default { @@ -301,9 +297,9 @@ div.phpcode span.string { .simpara em:not(.emphasis), .simpara var { - background-color: #f2f2f2; + background-color: #E6E6E6; border-radius: 2px; - color: #474747; + color: #333; padding: 2px 4px; white-space: nowrap; font-style: normal; @@ -335,8 +331,8 @@ a.genanchor:focus { .warn { - border-color: #669; - background-color: #f2f2f2; + border-color: #5B5B89; + background-color: #fff; border-radius: 0 0 2px 2px; } @@ -346,14 +342,14 @@ pre.info { } aside.tips { - border-color:#99c; + border-color:#8C8CC5; } aside.tips div.border { display:none; } .soft-deprecation-notice { - color: #262626; + color: #333; border-color: #eecdde; background-color: #f9ecf2; } @@ -368,44 +364,45 @@ aside.tips div.border { /* {{{ Breadcrumbs */ #breadcrumbs { - color: #737373; - background-color: #f2f2f2; + color: #666; + background-color: #E6E6E6; border-color: #ccc; } #breadcrumbs li:last-child a { - color:#262626; + color:#333; } /* }}} */ /* {{{ Layout menu Left-hand sidebar */ .layout-menu { - background-color:#f2f2f2; + background-color:#E6E6E6; border-color: #ccc; - border-bottom-color:#bfbfbf; } .layout-menu ul.parent-menu-list a { color: #000; } -.layout-menu ul.parent-menu-list a:hover { +.layout-menu ul.parent-menu-list a:hover, +.layout-menu ul.parent-menu-list a:focus { color: #693; border-color: #693; text-shadow:0 0 .25em #fff; + outline:0; } .layout-menu ul.child-menu-list a { - border-bottom-color: #808080; + border-bottom-color: #999; } .layout-menu ul.child-menu-list .current a { - color:#669; - border-color:#669; + color:#5B5B89; + border-color:#5B5B89; } /* }}} */ /* {{{ Footer */ footer { - background-color: #262626; - border-top-color: #99C; + background-color: #333; + border-top-color: #8C8CC5; } footer a { color:#ccc; @@ -417,7 +414,7 @@ footer a:visited { } footer a:hover, footer a:focus { - color: #888; + color: #999; border-bottom: none; } /* }}} */ @@ -425,7 +422,7 @@ footer a:focus { /* {{{ ElePHPants */ div.elephpants div.images { - background-color: #262626; + background-color: #333; } div.elephpants img { opacity: 0.5; @@ -448,7 +445,7 @@ div.elephpants img:focus { .mirror { position: relative; - border: 1px solid #CCC; + border: 1px solid #ccc; padding: 20px; margin: 5px; }
« previous php.webmaster (#18378) next »