1
0
mirror of https://github.com/php/web-php.git synced 2026-03-23 23:02:13 +01:00

Miscellaneous layout fixes. Readded some content on the homepage. Also moved styles around from theme.css and home.css to better reflect where they are used, so we can not load home.css by default.

This commit is contained in:
Levi Morrison
2013-07-18 11:17:07 -06:00
parent b85b0510a7
commit bef1e68bb0
6 changed files with 289 additions and 263 deletions

View File

@@ -42,7 +42,6 @@ if (isset($shortname) && $shortname) {
<link rel="stylesheet" type="text/css" href="<?php echo $STATIC_ROOT ?>styles/bootstrap.css<?php echo $v?>" media="all" />
<link rel="stylesheet" type="text/css" href="<?php echo $STATIC_ROOT ?>styles/theme.css<?php echo $v?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $STATIC_ROOT ?>styles/doc.css<?php echo $v?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $STATIC_ROOT ?>styles/home.css<?php echo $v?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $STATIC_ROOT ?>styles/dynamic.php<?php echo $v?>" media="screen" />
<?php
@@ -118,6 +117,14 @@ if (isset($shortname) && $shortname) {
<?php include 'uservoice.inc' ?>
<?php if (!empty($config['intro'])):?>
<div id="intro">
<div class="container">
<?php echo $config['intro'];?>
</div>
</div>
<?php endif;?>
<div id="layout" class="container">
<?php if (!empty($config['breadcrumbs'])): ?>
<div id="breadcrumbs" class="row-fluid">

View File

@@ -99,6 +99,43 @@ $content = "
</div>
";
$intro = <<<EOF
<div class="row-fluid">
<div class="span9 blurb">
<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>
</div>
<div class="background span3"></div>
<div class="span3">
<div class="download-php">
<h2>Download PHP</h2>
EOF;
if(!empty($RELEASES[5])) {
$releases = array_chunk($RELEASES[5], 2, $preserve_keys = TRUE);
foreach ($releases as $row) {
$intro .= "
<div class='row-fluid'>
";
foreach ($row as $version => $release) {
$intro .= "
<div class='span6'>
<p><a class='download-link' href='/downloads.php#v$version'>$version</a></p>
<p class='notes'><a href='/ChangeLog-5.php#$version'>Release Notes</a></p>
</div>
";
}
$intro .="
</div>
";
}
}
$intro .= <<<EOF
</div>
</div>
</div>
EOF;
// Write out common header
site_header("Hypertext Preprocessor",
array(
@@ -125,7 +162,9 @@ site_header("Hypertext Preprocessor",
"title" => "PHP Release feed"
),
)
),
'css' => array('home.css'),
'intro' => $intro
)
);

View File

@@ -1877,18 +1877,11 @@ textarea {
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {

View File

@@ -1,45 +1,9 @@
/* vim: set et ts=4 sw=4 fdm=marker: : */
/* {{{ The Quick TOC reference top on man pages */
aside#quicktoc {
display: block;
border-top: 1px solid #9999CC;
border-left: 1px solid #9999CC;
border-bottom: none;
margin: 0 0 20px 20px;
width: 160px;
background: white;
position: fixed;
right: 0px;
z-index: 100;
body.docs #layout {
margin-top:.75em;
}
#quicktoc .content, #quicktoc .language {
padding: 10px 0 10px 10px;
}
#quicktoc .links, #quicktoc .content {
}
#quicktoc .links a:first-child {
border-top: 1px solid #9F8A8A;
}
#quicktoc .links a {
display: block;
color: black;
padding-left: 5px;
border-bottom: 1px solid #9F8A8A;
background-color: #F3F3F3;
}
#quicktoc .links a:hover {
background-color: #F2E5F4;
}
/* }}} */
.docs .refsect1 > p:last-child,
.docs .refsect1 > .warning:last-child,
.docs .refsect1 > .note:last-child,
@@ -87,79 +51,81 @@ aside#quicktoc {
/* {{{ Warning and notes */
.docs .notes blockquote.note {
padding:0;
background:transparent;
}
.docs div.tip,
.docs div.warning,
.docs div.caution,
.docs blockquote.note {
padding: .75em 1em;
margin: .75em 0;
}
.docs .refsect1 div.caution,
.docs .refsect1 blockquote.note {
margin-left:0;
margin-right:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
background-color:#fafafc;
padding:.375em .5em;
position:relative;
margin-top:.75em;
margin-bottom:.75em;
}
.docs blockquote.note {
background-color: #eee;
border:1px solid #d5d5d5;
}
.docs div.caution {
background-color: #ffc;
background:#fcfce9;
border:1px solid #e2e2d1;
}
.docs div.warning strong.warning {
font-size: 1.5em;
line-height: 1;
display:block;
text-align: center;
}
.docs div.tip *:last-child,
.docs div.warning *:last-child {
margin-bottom:0;
}
.docs div.caution b.caution, .docs div.caution strong.caution {
float: left;
margin-right: 0.8em;
}
.docs blockquote.note p,
.docs div.caution p {
margin: 0;
.docs .refsect1 blockquote.note {
margin-left:0;
}
.docs .refsect1 blockquote.note,
.docs div.tip {
background:#eeeef6;
border-top: 0.1875em solid #99c;
margin:.75em 0;
padding:0.5625em .75em .75em;
}
.docs .refsect1.notes div.tip {
background:#e8e8e8;
border-top-color:#d8d8d8;
padding:.75em .625em;
}
.docs div.tip p {
margin:0;
background:#f8f8fb;
border: 1px solid #e5e6e9;
}
.docs div.warning {
background: #f2e5f4;
margin: .75em 0;
padding: .75em .625em;
border:1px solid #d9cddb;
}
.docs div.warning strong.warning {
font-size: 1.5em;
display:block;
text-align: center;
}
.docs div.tip b.tip,
.docs div.tip strong.tip,
.docs div.caution b.caution,
.docs div.caution strong.caution {
float: left;
margin-right: 0.675em;
}
.docs blockquote.note p,
.docs div.caution p,
.docs div.warning p,
.docs div.tip p {
margin: 0;
}
.docs div.tip:before,
.docs div.caution:before,
.docs blockquote.note:before,
.docs div.warning:before {
border-top:1px solid rgba(255,255,255,0.5);
content:"";
display:block;
top:0;
left:0;
width:100%;
position:absolute;
}
/* }}} */
.docs .dc-description,
.docs .dc-description code {
.docs .refsect1 .dc-description,
.docs .refsect1 .dc-description code,
.docs .sect1 .dc-description,
.docs .sect1 .dc-description code {
font-weight:400;
font-size:16px;
font-family:"Source Code Pro", monospace;
@@ -200,10 +166,13 @@ aside#quicktoc {
padding: .75em .625em;
border:1px solid #ccc;
}
.docs .dc-description {
background-color: #fafafc;
.docs .refsect1 .dc-description,
.docs .sect1 .dc-description {
background:#f8f8fb;
padding: .625em .75em;
-moz-box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.25);
box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.25);
border:-bottom 1px solid #e5e6e9;
margin-bottom: .75em;
}
.docs .example-contents .phpcode code {
@@ -215,10 +184,6 @@ aside#quicktoc {
margin:-1px 0;
}
.docs .refsect1.examples {
border-top: 0.2em solid #669;
}
/* }}} */
@@ -462,6 +427,7 @@ div.soft-deprecation-notice blockquote.sidebar {
#breadcrumbs {
background:#eee;
border:1px solid #d5d5d5;
margin:0 0 0.85714285714286em;
font-size:.875em;
line-height:1.71428571428571;

View File

@@ -3,154 +3,62 @@
complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99
*/
#mega-drop-down .children-2 {
position: relative;
#intro {
background:#444;
box-shadow:inset 0 0 1.5em rgba(0,0,0,.375);
color:#fff;
border-bottom:.25em solid #99c;
}
#mega-drop-down .children-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 648px;
#intro p {
text-shadow:0 1px 2px rgba(0,0,0,.5);
font-size:1.25em;
line-height:1.2;
margin-bottom:1.2em;
}
#intro .blurb p {
line-height:1.8;
}
#intro .blurb p:last-child {
margin-bottom:0;
}
#intro h2 {
font-size:1.25em;
line-height:1.8;
color:#ccc;
text-shadow:0 -1px 0 rgba(0,0,0,.25);
text-transform:uppercase;
letter-spacing:3px;
word-spacing:6px;
}
#mega-drop-down .what-is-php-container {
display: table;
width: 100%;
height: 100%;
#intro .row-fluid {
position:relative;
}
#mega-drop-down div.what-is-php {
color: #eee;
display: table-cell;
vertical-align: middle;
#intro .background {
display:none;
}
#mega-drop-down div.what-is-php p {
font-size: 1.125em;
line-height: 1.333em;
margin:1.333em 0;
#intro .download-php {
text-align:left;
margin:0 1.5em;
padding:.75em 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;
#intro .download-php .row-fluid p {
margin-top:0;
margin-bottom:0;
}
#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;
#intro .download-php .row-fluid p.notes {
font-size:.75em;
line-height:2;
}
#mega-drop-down .what-is-php .tutorial {
text-align: center;
.download-php a {
color:#ccc;
border:0;
}
#mega-drop-down .what-is-php .tutorial a {
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: .6em 1.2em;
margin-bottom:-3px;
display: block;
border: 1px solid rgba(0,0,0,.9);
border-bottom-width:3px;
text-align: center;
font-size:1em;
font-weight: bold;
color: #fff;
color: rgba(255,255,255,.8);
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
display:inline-block;
.download-php a.download-link {
border:0;
color:#fff;
}
#mega-drop-down .what-is-php .tutorial a:hover,
#mega-drop-down .what-is-php .tutorial a:focus {
background: #77a;
}
#mega-drop-down .what-is-php .tutorial a:active {
background: #669;
border-bottom-width:1px;
margin-top:2px;
}
#mega-drop-down div.download {
color: #eee;
width: 264px;
margin:0 0 0 20px;
display: block;
float: right;
min-height:240px;
background:#4f4f4f;
}
#mega-drop-down div.download h2 {
font-size:1em;
line-height: 3;
color: #ddd;
text-align: center;
letter-spacing: .2em;
word-spacing: .4em;
text-transform: uppercase;
text-shadow: #000 -1px -1px 1px;
}
#mega-drop-down div.children.downloads {
padding-bottom: 0;
}
/* We have to override these because theme.css has a generic style for 'ul'
and that doesn't apply here on the downloads area
*/
#mega-drop-down div.download ul {
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0;
}
#mega-drop-down div.download li:first-child {
background: url('/images/sprites.png') no-repeat 0px -195px;
}
#mega-drop-down div.download li {
color: #eee;
display: block;
padding: 0 0 1.5em 100px;
background: url('/images/sprites.png') no-repeat 14px -273px;
cursor: pointer;
border-top: 1px solid #6f6f6f;
margin: -1px 0 0;
line-height: 1;
}
#mega-drop-down div.download a {
padding: 0;
display: block;
clear: right;
font-weight: normal;
line-height: 1.5em;
}
#mega-drop-down div.download li:first-child a:first-child {
font-size: 1.5em;
line-height: 2;
}
#mega-drop-down div.download a:first-child {
font-size: 1.25em;
line-height: 2.4;
font-weight: bold;
color: #fff;
text-shadow:0 .1em .1em rgba(0,0,0,.666);
.download-php a.download-link:before {
content: "\21AF \2003";
}
#head-beta-warning {
@@ -196,13 +104,6 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99
border:0;
}
/* Main content area */
section.layout-content.home {
width: 960px;
margin: 0 auto;
}
/* Announcement Area */
.home aside.tips {
@@ -247,10 +148,15 @@ section.layout-content.home {
.home aside.tips h3.panel a::after {
float:right;
content:"»";
color:#666;
}
.home aside.tips h3.panel a:hover,
.home aside.tips h3.panel a:focus {
background:#eee;
background:#eeeef6;
}
.home aside.tips h3.panel a:hover::after,
.home aside.tips h3.panel a:focus::after {
color:#333;
}
.home aside.tips a:link,
@@ -259,16 +165,14 @@ section.layout-content.home {
}
.home aside.tips a:hover,
.home aside.tips a:focus {
border-bottom-color: #3F438D;
border-bottom-color: inherit;
border-bottom-color:rgba(63, 67, 141, 0.5);
}
.home-content #recentNewsEntries {
position: relative;
}
.clear-left {
clear:left
}
.home-content .separator {
clear: left;
height:.25em;

View File

@@ -23,16 +23,62 @@ body * {
body, input, textarea {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.docs .refentry .constructorsynopsis,
.docs .refentry .methodsynopsis,
code,
pre.info {
font: 400 .75em / 1.5 "Source Code Pro", monospace;
}
.docs .classsynopsis,
.docs .classsynopsis code {
font: 400 1em / 1.5 "Source Code Pro", monospace;
}
#head-beta-warning + #head-nav {
top:2em;
}
#head-beta-warning {
padding:.25em 0;
border:0;
background-color: #99C;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 999;
}
#beta-warning {
margin: 0 auto;
text-align: center;
}
#beta-warning .blurb {
color: #EEE;
}
#beta-warning .blurb a {
color: #333;
}
#beta-warning .blurb strong {
color: #333;
}
#beta-warning-close {
background-color: #333;
color: #EEE;
font-weight: bold;
text-decoration: none;
margin: 0 0 0 1em;
width: 1.2em;
height: 1.2em;
padding: 0 0.375em;
text-align: center;
-moz-border-radius: 2px;
border-radius: 2px;
border:0;
}
body {
font-size: 1em;
@@ -94,6 +140,9 @@ small {
font-size: 0.75em;
line-height: 2;
}
blockquote {
margin: .75em 0 .75em .75em;
}
abbr {
border-bottom:1px dotted #999;
@@ -135,14 +184,16 @@ h4, h5, h6 {
a:link,
a:visited {
color: #3F438D;
border-bottom: 1px solid #c5c3e3;
color: rgb(63, 67, 141);
border-bottom: 1px solid rgb(63, 67, 141);
border-bottom: 1px solid rgba(63, 67, 141, 0.5);
}
a:hover,
a:focus {
color: #015;
border-bottom: 1px solid #3F438D;
color: rgb(0, 17, 85);
border-bottom-color:rgb(0, 17, 85);
border-bottom-color:rgba(0, 17, 85, 0.5);
}
ul {
@@ -359,7 +410,7 @@ hr {
#usernotes .note .text {
background-color: #eee;
border-top: 0.125em solid #ccc;
border-top: .125em solid #d4d4d4;
padding: .375em .625em .75em;
margin-top:.25em;
-moz-border-radius:0 0 2px 2px;
@@ -566,7 +617,7 @@ aside.tips div.inner {
#layout {
margin: .75em auto;
margin: 1.5em auto;
clear:both;
}
@@ -574,6 +625,7 @@ aside.tips div.inner {
float: left;
padding:.5em .75em 1.5em;
background-color:#eeeef6;
border: 1px solid #d5d5d5;
border-radius:2px;
}
@@ -964,10 +1016,75 @@ fieldset {
.navbar a {
display:inline-block;
}
#topsearch {
@media (max-width:767px) {
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width:auto;
}
.navbar-search {
float:none;
}
}
@media (min-width:768px) {
#intro .download-php h2 {
text-align:center;
}
#intro .background {
display:block;
background:rgba(255,255,255,.1);
position:absolute;
top:0;
right:0;
height:100%;
}
#topsearch {
float:right;
}
.navbar-search .search-query {
width:100%;
}
#intro .container > .row-fluid:before,
#intro .container > .row-fluid:after {
display:none;
content:none;
}
#intro .notes {
padding-left:1.65em;
}
#intro .container {
position:relative;
}
#intro .container > .row-fluid {
display:table-row;
}
#intro .container > .row-fluid > div[class*=span] {
display:table-cell;
float:none;
}
#intro .container > .row-fluid > .span9 {
vertical-align:middle;
}
}
@media (max-width: 979px) and (min-width: 768px) {
#intro .download-php .row-fluid .span6 {
width:100%;
margin:0;
}
#intro .download-php a.btn-pop {
padding-right:.375em;
}
}
@media (min-width:980px) {
#intro .download-php .row-fluid {
margin-bottom:1em;
}
}
@media (min-width:1200px) {
#intro p {
line-height:1.2;
margin:0 0 1.2em;
}
body.docs .row-fluid .layout-menu.span3 {
width:18%;
}