Commit: b8938f73e7e96580ce02c296ec666ab6e1981fd7 Author: Adam Harvey <[email protected]> Mon, 24 Jun 2013 11:09:06 -0700 Parents: 316919883fdb9cfdb34b9fd02a1cc42ecd251388 Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=b8938f73e7e96580ce02c296ec666ab6e1981fd7 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
