com web/php: Many typography improvements. I tried to be pretty thorough to make sure it didn't break anything. The only area that seems negatively
affected is the mega menu dropdown, but that needs more work done on it anyway.: include/shared-manual.inc index-beta.php styles/doc.css
styles/home.css styles/theme.css views/homepage/sidebar.php

From: Date: Tue, 19 Jun 2012 16:18:06 +0000
Subject: com web/php: Many typography improvements. I tried to be pretty thorough to make sure it didn't break anything. The only area that seems negatively
affected is the mega menu dropdown, but that needs more work done on it anyway.: include/shared-manual.inc index-beta.php styles/doc.css
styles/home.css styles/theme.css views/homepage/sidebar.php
Groups: php.webmaster 
Request: Send a blank email to php-webmaster+get-13728@lists.php.net to get a copy of this message
Commit: 4c55e6c954cf28f54758b5e12fe73ded3461e054 Author: Levi Morrison <levim@php.net> Tue, 19 Jun 2012 10:18:06 -0600 Parents: e93f30d59ceb4e1b896d8deab51d61fe170b086a Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=4c55e6c954cf28f54758b5e12fe73ded3461e054 Log: Many typography improvements. I tried to be pretty thorough to make sure it didn't break anything. The only area that seems negatively affected is the mega menu dropdown, but that needs more work done on it anyway. Also included the elephpants in the footer on the manual pages. Changed paths: M include/shared-manual.inc M index-beta.php M styles/doc.css M styles/home.css M styles/theme.css M views/homepage/sidebar.php

diff --git a/include/shared-manual.inc b/include/shared-manual.inc index c86c4aa..ed19766 100644 --- a/include/shared-manual.inc +++ b/include/shared-manual.inc @@ -597,6 +597,6 @@ function manual_footer_beta() { echo "</section>"; manual_notes(); - site_footer(); + site_footer(array('elephpants' => true)); } diff --git a/index-beta.php b/index-beta.php index 401b69f..fb7ed00 100644 --- a/index-beta.php +++ b/index-beta.php @@ -80,7 +80,7 @@ $features = " <div class=featured-content> <div class='feature top-left'> <span class='graphic'></span> - <h2>Get Involved</h2> + <h3>Get Involved</h3> <p> We are looking for people with talents of various kinds, not just developers. <br/> <a href='/get-involved.php' class='readmore'>See how you can contribute.</a> @@ -88,7 +88,7 @@ $features = " </div> <div class='feature top-right'> <span class='graphic'></span> - <h2>Need Help?</h2> + <h3>Need Help?</h3> <p> Thankfully, PHP has one of the best support communities in existence. <br/> <a href='/support.php' class='readmore'>View support options.</a> @@ -96,10 +96,9 @@ $features = " </div> <div class='feature bottom-left'> <span class='graphic'></span> - <h2>PECL &amp; PEAR</h2> + <h3>PECL &amp; PEAR</h3> <p> - Is PHP missing a feature you need? No worries! - PHP has a large extension library called + Is PHP missing a feature you need? PHP has a large extension library called <abbr title='The PHP Extension Community Library'><a href='http://pecl.php.net/'>PECL</a></abbr>, and a reusable class library called <abbr title='The PHP Extension and Application Repository'><a href='http://pear.php.net/'>PEAR</a></abbr>. @@ -107,7 +106,7 @@ $features = " </div> <div class='feature bottom-right'> <span class='graphic'></span> - <h2>Website Tips</h2> + <h3>Website Tips</h3> <p> Everything has 'an app' these days, even the PHP manual. We also have <a href='/tips.php'>tips and tricks</a> diff --git a/styles/doc.css b/styles/doc.css index 9d6fc49..3f4dca7 100755 --- a/styles/doc.css +++ b/styles/doc.css @@ -40,9 +40,6 @@ aside#quicktoc { /* }}} */ /* {{{ General styles (p, parameters, initializers, ...) */ -.docs p { - margin: 0.7em 0; -} .docs .methodname b, .docs .methodname strong { color: #000; } @@ -146,17 +143,16 @@ aside#quicktoc { } /* {{{ Parameter listing */ -.docs .refentry .parameters dt { - font-size: 1.1em; +.docs .refentry .parameters dl { + margin-top: -10px; + margin-bottom: -10px; } - -.docs .refentry .parameters dd { - margin-top: -0.7em; - padding-left: 20px; +.docs .refentry .parameters dt { + font-size: 1.167em; } -.docs .refentry .parameters p { - margin: 0.7em 0; +.docs .refentry .parameters p:empty { + background:#f00; } /* }}} */ @@ -255,10 +251,11 @@ dl.qandaentry { } .docs h1.refname { - font-family: sans-serif,Arial,Helvetica; - font-size: 20px; - font-weight: bold; - color: #454e55; + font-size: 1.334em; + line-height: 1.049em; + margin-bottom:1.4em; + color:#444; + font-weight:bold; } .docs p.refpurpose { @@ -272,7 +269,7 @@ dl.qandaentry { padding: 0; margin:0; line-height: 1em; - top:-22px; + top:-1.4em; left: 0; font-size: 1.4em; } diff --git a/styles/home.css b/styles/home.css index dfeea94..7a36ce6 100644 --- a/styles/home.css +++ b/styles/home.css @@ -6,29 +6,70 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 #mega-drop-down div.what-is-php { color: #eee; - font-size: 1.4em; + font-size: 1.334em; + line-height: 1.573em; width: 500px; float: left; - margin: 20px 0 5px 20px; -} - -#mega-drop-down div.what-is-php p { - margin: 10px 0px; - line-height: 130%; -} - -#mega-drop-down div.what-is-php p:first-child { - margin-top: 0; -} - -#mega-drop-down div.what-is-php p.tutorial { - margin-top: 15px; - font-size: .9em; -} - -#mega-drop-down div.what-is-php p.tutorial a { - padding: 0; - border-bottom: none; + padding:1em 0 0; +} + +#mega-drop-down .what-is-php p { + margin-bottom: 1em; +} + +#mega-drop-down .what-is-php .tutorial a { + background: #696969; /* Old browsers */ + /* IE9 SVG, needs conditional override of 'filter' to 'none' */ + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY5Njk2OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzI5MjkyOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNzE3MTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, #696969 0%, #3d3d3d 50%, #292929 50%, #171717 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* IE10+ */ + background: linear-gradient(top, #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#696969', endColorstr='#171717',GradientType=0 ); /* IE6-8 */ + -webkit-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset; + -moz-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset; + box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset; + -webkit-border-radius: 28px 8px 28px 8px; + -moz-border-radius: 28px 8px 28px 8px; + border-radius: 28px 8px 28px 8px; + padding: 0px 2em; + display: block; + border: 1px solid #000000; + text-align: center; + font:italic .75em 'Lucida Grande', Times, serif; + line-height: 34px; + color: #fff; + text-shadow: 0 0 .334em rgba(0,0,0,.3); +} +#mega-drop-down .what-is-php .tutorial a:hover, +#mega-drop-down .what-is-php .tutorial a:focus { + -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.5) inset, 0px -1px 5px 0px rgba(255,255,255,.3) inset; + -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.5) inset, 0px -1px 5px 0px rgba(255,255,255,.3) inset; + box-shadow: 0px 1px 0px 0px rgba(255,255,255,.5) inset, 0px -1px 5px 0px rgba(255,255,255,.3) inset; + border-color: #00008a; +} +#mega-drop-down .what-is-php .tutorial a:hover:active { + -webkit-box-shadow: inset 0 1px 3px 0px rgba(0,0,0,.6); + -moz-box-shadow: inset 0 1px 3px 0px rgba(0,0,0,.6); + box-shadow:inset 0 1px 3px 0px rgba(0,0,0,.6); + border-color: #00008a; +} +#mega-drop-down .what-is-php .tutorial a:hover, +#mega-drop-down .what-is-php .tutorial a:focus, +#mega-drop-down .what-is-php .tutorial a:hover:active { + background: #6db3f2; /* Old browsers */ + /* IE9 SVG, needs conditional override of 'filter' to 'none' */ + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */ + background: linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-8 */ + cursor: pointer; } #mega-drop-down div.download { @@ -178,7 +219,6 @@ section.layout-content.home { div.home-content { width: 650px; - padding-top: 5px; } /* Announcement Area */ @@ -215,12 +255,7 @@ div.home-content { div.featured-content div.feature { float: left; width: 270px; - padding: 10px 20px 20px 20px; -} - -div.featured-content div.top-left, -div.featured-content div.top-right { - padding-top: 0; + padding:0 20px; } div.featured-content span.graphic { @@ -247,15 +282,9 @@ div.featured-content div.bottom-right span.graphic { background-position: 0px -399px; } -div.featured-content div.feature h2 { - line-height: 1; +.featured-content .feature h3 { padding-bottom: .5em; - margin: 0; - text-align: center -} - -div.featured-content p { - font-size: 1.1em; + text-align: center; } /* Right-hand sidebar */ @@ -267,16 +296,13 @@ div.home-sidebar { margin: 0 0 20px 20px; } -div.home-sidebar h2 { +div.home-sidebar h3 { border-bottom: 6px solid #99c; - font-size: 1.5em; - line-height: 100%; - padding: 5px 0 5px 0; font-weight: normal; - margin: 20px 0 5px 0; + margin: .5em 0; } -div.home-sidebar h2:first-child { +div.home-sidebar h3:first-child { margin-top: 0; } @@ -299,7 +325,6 @@ div.home-sidebar a:hover { margin-top:3em; } .home-content .recentNewsEntries h1 { - border-bottom:1px solid #000; color:#000; } .home-content a.newsArchiveLink { diff --git a/styles/theme.css b/styles/theme.css index a380e0c..f28a413 100755 --- a/styles/theme.css +++ b/styles/theme.css @@ -17,55 +17,76 @@ body * { body, input, textarea { font-family: Arial, Helvetica, sans-serif; - font-size: 14px; +} + +input { + font-size:100%; } body { - line-height: 1.4; + font-size: 0.9em; + line-height: 1.4em; background: url('/images/sprites.png') repeat-x 0px -990px #fff; } - h1 { - font-size: 2.5em; - margin: 1.2em 0 0.6em 0; - line-height: 1; + font-size: 2.374em; + line-height: 1.179em; + margin:0; } - -h1:first-child { - margin-top: 0.3em; +h2 { + font-size: 1.78em; + line-height: 1.573em; + margin:0; +} +h3 { + font-size: 1.334em; + line-height: 1.049em; + margin: 0; +} +p, ul { + margin-top: 0; + margin-bottom: 1.4em; +} +p:last-child { + margin-bottom: 0; +} +small { + font-size: 0.75em; } h1, h1 a, h1 a:visited, h1 a:link { font-weight: normal; color: #666; + border-color:#666; } - -h1 a:hover { +h1 a:hover, +h1 a:focus { color: #444; + border-color:#444; } -h2 { - font-size: 1.6em; - margin: 1.4em 0 0.7em 0; - line-height: 1; +h2, h2 a, h2 a:visited, h2 a:link { + font-weight: normal; + color: #222; + border-color:#222; } -h3 { - font-size: 1.4em; - line-height: 2.2em; +h2 a:hover, +h2 a:focus { + color: #000; + border-color:#000; } + h3.title { font-size: 1.5em; - border-top-style: solid; - border-top-width: 3px; + border-top: 3px solid; padding-top: 6px; margin-top: 2em; } -h4 { font-size: 1.3em; line-height: 2.0em; } -h5 { font-size: 1.2em; line-height: 1.8em; } -h6 { font-size: 1.1em; line-height: 1.6em; } -small { font-size: .9em; } +h4 { font-size: 1.3em;} +h5 { font-size: 1.2em;} +h6 { font-size: 1.1em;} a:link, @@ -316,9 +337,8 @@ ul { } #usernotes h3 { - padding-right: 20px; - border-color: #666699; - padding-bottom: 6px; + border-color: #669; + padding:.8em 20px .5em 0; } #usernotes .note { @@ -346,6 +366,10 @@ dl dd { margin: 0.5em 0 0.5em 2em; padding: 0.5em; } +dl dd p { + margin-bottom:0; + padding:0; +} /* PHP source code highlighting ------------------------------------------- */ @@ -682,7 +706,11 @@ table.standard td { vertical-align: middle; } +.newsItem { + margin:2em 0; +} .newsItem .published { display:block; margin:.5em 0; + color:#666; } \ No newline at end of file diff --git a/views/homepage/sidebar.php b/views/homepage/sidebar.php index 2395875..0da77aa 100644 --- a/views/homepage/sidebar.php +++ b/views/homepage/sidebar.php @@ -2,21 +2,21 @@ <?php echo $announcements; ?> - <h2>Conferences</h2> + <h3>Conferences</h3> <ul> <li>Conference 1</li> <li>Conference 2</li> <li>Conference 3</li> </ul> - <h2>User Group Events</h2> + <h3>User Group Events</h3> <ul> <li>Event 1</li> <li>Event 2</li> <li>Event 3</li> </ul> - <h2>Thanks To</h2> + <h3>Thanks To</h3> <ul> <li><a target="_blank" href="http://www.easydns.com/?V=698570efeb62a6e2" title="DNS Hosting provided by easyDNS">easyDNS</a></li> <li><a target="_blank" href="http://www.directi.com/" title="Directi">Directi</a></li>
« previous php.webmaster (#13728) next »