Commit: 749280417b638cc76b3ecfb1ec67e25d38056606 Author: Adam Harvey <ahar...@php.net> Mon, 24 Jun 2013 11:09:06 -0700 Parents: c42650881f5607ea6da7090adb010d6347a6fbdb Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=749280417b638cc76b3ecfb1ec67e25d38056606 Log: Tinker with the positioning of the what-is-php block on the home page. With two releases, this should be identical to the previous positioning. With more than two releases, the text is vertically aligned, then moved ever so slightly up to avoid the feeling of the chunky Begin Tutorial button being too far off centre. This has mostly been done by feel, so everyone else may find this horrible, but I think it's an improvement on the previous iteration where that block was just at the top. Changed paths: M include/header.inc M styles/home.css Diff: diff --git a/include/header.inc b/include/header.inc index 4b1870f..7f548a8 100644 --- a/include/header.inc +++ b/include/header.inc @@ -109,15 +109,6 @@ if (isset($shortname) && $shortname) { <li id="headhome" class="parent <?php echo $curr == "home" ? "current" : ""?>"> <a href="/" rel="home" class="menu-link">Home</a> <div class="children downloads"><div class="children-1"><div class="children-2"> - <div class="what-is-php"> - <p> - PHP is a popular general-purpose scripting language that is - especially suited to web development. - </p><p> - Fast, flexible and pragmatic, PHP powers everything from your blog to the largest social networking site in the world. - </p> - <p class="tutorial"><a href="/tut.php">Begin Tutorial »</a></p> - </div> <div class="download"> <h2>Download PHP</h2> <?php if(!empty($RELEASES[5])): ?> @@ -135,6 +126,19 @@ if (isset($shortname) && $shortname) { </ul> <?php endif; ?> </div> + <div class="children-left"> + <div class="what-is-php-container"> + <div class="what-is-php downloads-<?php count($RELEASES[5]); ?>"> + <p> + PHP is a popular general-purpose scripting language that is + especially suited to web development. + </p><p> + Fast, flexible and pragmatic, PHP powers everything from your blog to the largest social networking site in the world. + </p> + <p class="tutorial"><a href="/tut.php">Begin Tutorial »</a></p> + </div> + </div> + </div> <br style="clear: both;" /> </div></div></div> </li> diff --git a/styles/home.css b/styles/home.css index 4e41e0f..820c4eb 100644 --- a/styles/home.css +++ b/styles/home.css @@ -4,10 +4,28 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 */ +#mega-drop-down .children-2 { + position: relative; +} + +#mega-drop-down .children-left { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 648px; +} + +#mega-drop-down .what-is-php-container { + display: table; + width: 100%; + height: 100%; +} + #mega-drop-down div.what-is-php { color: #eee; - width: 648px; - float: left; + display: table-cell; + vertical-align: middle; } #mega-drop-down div.what-is-php p { @@ -15,6 +33,21 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 line-height: 1.333em; margin:1.333em 0; } + +/* The vertical centering looks better when it's slightly higher than the dead + * centre with more than 2 downloads, but with 2 downloads we want it perfectly + * centred, because it looks weird if it's off centre. */ +#mega-drop-down div.what-is-php.downloads-1 p:first-child, +#mega-drop-down div.what-is-php.downloads-2 p:first-child { + margin-top: 1.333em; +} + +#mega-drop-down div.what-is-php p:first-child { + /* There's some fudge factor here. It looks right to my eyes, but could + * stand some tweaking. */ + margin-top: 0.2em; +} + #mega-drop-down .what-is-php .tutorial { text-align: center; } -- PHP Webmaster List Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
