From bef1e68bb00bd2356f6bbd320d8b6320acaca769 Mon Sep 17 00:00:00 2001 From: Levi Morrison Date: Thu, 18 Jul 2013 11:17:07 -0600 Subject: [PATCH] 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. --- include/header.inc | 9 +- index-beta.php | 41 ++++++++- styles/bootstrap.css | 7 -- styles/doc.css | 154 +++++++++++++------------------- styles/home.css | 206 ++++++++++++------------------------------- styles/theme.css | 135 ++++++++++++++++++++++++++-- 6 files changed, 289 insertions(+), 263 deletions(-) diff --git a/include/header.inc b/include/header.inc index 9187b7fad..7101fd2ab 100644 --- a/include/header.inc +++ b/include/header.inc @@ -42,7 +42,6 @@ if (isset($shortname) && $shortname) { - + +
+
+ +
+
+ +
"; +$intro = << +
+

PHP is a popular general-purpose scripting language that is especially suited to web development.

+

Fast, flexible and pragmatic, PHP powers everything from your blog to the largest social networking site in the world.

+
+
+
+
+

Download PHP

+ +EOF; +if(!empty($RELEASES[5])) { + $releases = array_chunk($RELEASES[5], 2, $preserve_keys = TRUE); + foreach ($releases as $row) { + $intro .= " +
+"; + foreach ($row as $version => $release) { + $intro .= " +
+

$version

+

Release Notes

+
+"; + } + $intro .=" +
+"; + } +} +$intro .= << +
+
+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 ) ); diff --git a/styles/bootstrap.css b/styles/bootstrap.css index 4097f2c88..ca46eb60f 100644 --- a/styles/bootstrap.css +++ b/styles/bootstrap.css @@ -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 { diff --git a/styles/doc.css b/styles/doc.css index 5820d0a0f..d70fac47a 100755 --- a/styles/doc.css +++ b/styles/doc.css @@ -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; diff --git a/styles/home.css b/styles/home.css index 8b7800f4b..b69fb07b8 100644 --- a/styles/home.css +++ b/styles/home.css @@ -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; diff --git a/styles/theme.css b/styles/theme.css index 7032454a9..bbc8e228f 100755 --- a/styles/theme.css +++ b/styles/theme.css @@ -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%; }