Re: com web/php: Tinker with the positioning of the what-is-php block on the home page.: include/header.inc styles/home.css
| From: | Levi Morrison | Date: | Mon, 24 Jun 2013 18:51:25 +0000 |
| Subject: | Re: com web/php: Tinker with the positioning of the what-is-php block on the home page.: include/header.inc styles/home.css | ||
| References: | 1 | Groups: | php.webmaster |
| Request: | Send a blank email to php-webmaster+get-16073@lists.php.net to get a copy of this message | ||
Not sure if it was this specific commit since I'm rarely on Windows, but in
Chrome 27.0.1453.116 I see this: http://i.stack.imgur.com/yBpgs.png
Good luck :]
On Mon, Jun 24, 2013 at 12:11 PM, Adam Harvey <aharvey@php.net> wrote:
> Commit: 749280417b638cc76b3ecfb1ec67e25d38056606
> Author: Adam Harvey <aharvey@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
>
>
