com web/php: More changes to the tutorial button. Added separator between the grid and the news, removed announcement border, and increased the
padding for the 2x2 grid.: include/header.inc index-beta.php styles/home.css

Commit: 404ffde3b3e8c66a79782f1ac68ecdde50530312 Author: Levi Morrison <levim@php.net> Tue, 19 Jun 2012 21:09:29 -0600 Parents: 444064271176d0ea3f865946643a892bc7ca0506 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=404ffde3b3e8c66a79782f1ac68ecdde50530312 Log: More changes to the tutorial button. Added separator between the grid and the news, removed announcement border, and increased the padding for the 2x2 grid. Changed paths: M include/header.inc M index-beta.php M styles/home.css Diff: diff --git a/include/header.inc b/include/header.inc index 3eba5d8..2b1d270 100644 --- a/include/header.inc +++ b/include/header.inc @@ -116,7 +116,7 @@ if (isset($shortname) && $shortname) { </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 Introductory Tutorial</a></p> + <p class="tutorial"><a href="/tut.php">Begin Tutorial &raquo;</a></p> </div> <div class="download"> <h2>Download PHP</h2> diff --git a/index-beta.php b/index-beta.php index 8c77e9a..5e318b9 100644 --- a/index-beta.php +++ b/index-beta.php @@ -114,7 +114,8 @@ $features = " </p> </div> </div> - <br style='clear: left;' /> + <br class='clear-left' /> + <div class='separator'></div> "; require_once './Gateway/NewsFileSystemGateway.php'; diff --git a/styles/home.css b/styles/home.css index d58916a..79e5e6f 100644 --- a/styles/home.css +++ b/styles/home.css @@ -17,56 +17,40 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 margin-bottom: 1em; } +#mega-drop-down .what-is-php .tutorial { + text-align: center; +} #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; + background: #669; + -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.334) inset, 0px -1px 5px 0px rgba(255,255,255,.1) inset; + -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.334) inset, 0px -1px 5px 0px rgba(255,255,255,.1) inset; + box-shadow: 0px 1px 0px 0px rgba(255,255,255,.334) inset; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - padding: 0px 2em; + padding: .25em 2em; display: block; - border: 1px solid #000000; + border: 1px solid rgba(0,0,0,.9); + border-bottom-width:3px; text-align: center; - font-size:.75em; + font:1em bold; color: #fff; - text-shadow: 0 0 .334em rgba(0,0,0,.3); + color: rgba(255,255,255,.8); + text-shadow: 0 -1px 1px rgba(0,0,0,.3); + display:inline-block; } #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: #181833; + background: #77a; } -#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: #181833; +#mega-drop-down .what-is-php .tutorial a:active { + background: #669; + border-bottom-width:1px; + margin-top:2px; } #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: #ccccff; /* Old browsers */ - background: -moz-linear-gradient(top, #ccccff 0%, #aaaadd 50%, #9999cc 51%, #666699 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccccff), color-stop(50%,#aaaadd), color-stop(51%,#9999cc), color-stop(100%,#666699)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #ccccff 0%,#aaaadd 50%,#9999cc 51%,#666699 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #ccccff 0%,#aaaadd 50%,#9999cc 51%,#666699 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #ccccff 0%,#aaaadd 50%,#9999cc 51%,#666699 100%); /* IE10+ */ - background: linear-gradient(top, #ccccff 0%,#aaaadd 50%,#9999cc 51%,#666699 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccccff', endColorstr='#666699',GradientType=0 ); /* IE6-9 */ - cursor: pointer; } #mega-drop-down div.download { @@ -223,7 +207,6 @@ div.home-content { .home .announcements { display: table; width: 100%; - border: 1px solid #99c; background-color: #bfbfff; padding: 15px; text-align: center; @@ -252,7 +235,7 @@ div.home-content { div.featured-content div.feature { float: left; width: 270px; - padding:0 20px; + padding:5px 20px; } div.featured-content span.graphic { @@ -335,4 +318,14 @@ div.home-sidebar a:hover { .home-content a.newsArchiveLink:hover, .home-content a.newsArchiveLink:focus { border-bottom: 1px solid #666; +} + +.clear-left { + clear:left +} +.home-content .separator { + clear: left; + height:3px; + margin-top:3em; + background:#669; } \ No newline at end of file