com web/people: Rewrite layout to look like www.php.net redesign: include/footer.inc include/header.inc include/layout.php include/misc.php
include/sidebar.inc index.php js/search.js styles.css user.php
| From: | Hannes Magnusson | Date: | Thu, 12 Dec 2013 06:37:52 +0000 |
| Subject: | com web/people: Rewrite layout to look like www.php.net redesign: include/footer.inc include/header.inc include/layout.php include/misc.php include/sidebar.inc index.php js/search.js styles.css user.php |
||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-17540@lists.php.net to get a copy of this message | ||
Commit: cc4b509d7bb6bae2893df7978df0ba4613bacb32
Author: Hannes Magnusson <bjori@mongodb.com> Wed, 11 Dec 2013 22:32:17 -0800
Parents: a59c37a3e16211cdee8cd2f23e13d0b254bc507d
Branches: master
Link: http://git.php.net/?p=web/people.git;a=commitdiff;h=cc4b509d7bb6bae2893df7978df0ba4613bacb32
Log:
Rewrite layout to look like www..php.net redesign
The markup and CSS is rewritten from the www markup/css.
It is dramatically simpler, yet offering all the same benefits
(e.g. "responsive") - plus no need for js workarounds for anchors
Need to work on migrating it over to www
Changed paths:
A include/footer.inc
A include/header.inc
M include/layout.php
M include/misc.php
A include/sidebar.inc
M index.php
M js/search.js
M styles.css
M user.php
diff --git a/include/footer.inc b/include/footer.inc new file mode 100644 index 0000000..9b12328 --- /dev/null +++ b/include/footer.inc @@ -0,0 +1,18 @@ +<?php /* vim: set ft=html et ts=2 sw=2: : */ ?> +</section> +<footer> + <nav class="fullscreen"> + <ul> + <li><a href="//php.net/copyright">Copyright © 2001-2013 The PHP Group</a></li> + <li><a href="//php.net/site">Other PHP.net sites</a></li> + <li><a href="//php.net/privacy">Privacy policy</a></li> + </ul> + </nav> +</footer> + + <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> + <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script> + <script type="text/javascript" src="js/userlisting.php"></script> + <script type="text/javascript" src="js/search.js"></script> +</body> +</html> diff --git a/include/header.inc b/include/header.inc new file mode 100644 index 0000000..b8a1c08 --- /dev/null +++ b/include/header.inc @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>PHP: <?=$title ?></title> + <link type="text/css" media="all" rel="stylesheet" href="/styles.css?v=3"> + <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic|Source+Code+Pro&subset=latin,latin-ext" rel="stylesheet" type="text/css"> + <link rel="shortcut icon" href="//php.net/favicon.ico"> +</head> +<body> + +<header> + <nav class="fullscreen"> + <div class="mainscreen"> + <a href="/" class="home"><img src="//php.net/images/logo.php" width="48" height="24" alt="php"><span class="subdomain">people</span></a> + <ul> + <li><a href="/user.php">Users</a></li> + </ul> + </div> + <div class="secondscreen"> + <form method="get" action="user.php"> + <input type="search" placeholder="Search profiles" name="username" class="search"> + </form> + </div> + </nav> +</header> + +<section class="fullscreen"> diff --git a/include/layout.php b/include/layout.php index a38981e..a3d1f66 100644 --- a/include/layout.php +++ b/include/layout.php @@ -2,56 +2,17 @@ /* $Id$ */ function site_header($title) { -?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> -<html - xml:lang="en" - xmlns="http://www.w3.org/1999/xhtml" - xmlns:foaf="http://xmlns.com/foaf/0.1/" - xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" -> -<head> - <title><?php echo $title ?></title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <link type="text/css" media="all" rel="stylesheet" href="styles.css" /> - <link rel="shortcut icon" href="http://php.net/favicon.ico" /> - <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> - <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script> - <script type="text/javascript" src="js/userlisting.php"></script> -</head> - -<body> - <h1 id="header"><a href="http://php.net/index.php">PHP: Hypertext Preprocessor</a> - <a href="http://people.php.net/index.php" rel="home">Developers Profile pages</a></h1> - <form id="searchbox" method="get" action="user.php"> - <label for="search">User search</label> - <input type="text" name="username" id="search" /> - </form> - <script type="text/javascript" src="js/search.js"></script> - <ul id="mainmenu"> - <li><a href="http://php.net/downloads.php">Downloads</a></li> - <li><a href="http://php.net/docs.php">Documentation</a></li> - <li><a href="http://php.net/FAQ.php">Faq</a></li> - <li><a href="http://php.net/support.php">Getting Help</a></li> - <li><a href="http://php.net/mailing-lists.php">Mailing Lists</a></li> - <li><a href="http://bugs.php.net">Reporting Bugs</a></li> - <li><a href="http://php.net/sites.php">PHP.net Sites</a></li> - <li><a href="http://php.net/links.php">Links</a></li> - <li><a href="http://php.net/conferences/">Conferences</a></li> - <li><a href="http://php.net/my.php">My PHP.net</a></li> - </ul> -<?php + include dirname(__FILE__) . "/header.inc"; } function site_footer() { -?> - <p id="copyright"> - <a href="http://php.net/copyright.php">Copyright © 2009-<?php echo date('Y');?> The PHP Group</a><br /> - All rights reserved. - </p> -</body> -</html> -<?php + include dirname(__FILE__) . "/footer.inc"; } +function site_panel($data) { + include dirname(__FILE__) . "/sidebar.inc"; +} + + // vim: set expandtab shiftwidth=4 softtabstop=4 tabstop=4 : diff --git a/include/misc.php b/include/misc.php index 9da9ecd..d9359da 100644 --- a/include/misc.php +++ b/include/misc.php @@ -117,7 +117,7 @@ function findPHPUserProfile($username) function error($errormsg) { - echo '<p class="warning error">', $errormsg, "</p>"; + echo '<p class="warning error">', $errormsg, "</p></section>"; site_footer(); exit; } diff --git a/include/sidebar.inc b/include/sidebar.inc new file mode 100644 index 0000000..43015e0 --- /dev/null +++ b/include/sidebar.inc @@ -0,0 +1,3 @@ +<aside class="secondscreen"> +<?=$data?> +</aside> diff --git a/index.php b/index.php index e87d17b..e1202b4 100644 --- a/index.php +++ b/index.php @@ -12,8 +12,10 @@ if ($USERNAME) { site_header("PHP: Developers Profile Pages"); ?> - <p class="warning smaller"><strong>WARNING</strong>: This is obviously work in progress :)</p> - <p>Use the searchbox to search for usernames/names</p> +<section class="fullscreen"> + <p class="warning smaller"><strong>WARNING</strong>: This is obviously work in progress :)</p> + <p>Use the searchbox to search for usernames/names</p> +</section> <?php site_footer(); diff --git a/js/search.js b/js/search.js index 9be8adc..ecbd310 100644 --- a/js/search.js +++ b/js/search.js @@ -7,10 +7,9 @@ var fnFormatSearchResult = function(value, data, currentValue) { return '<img src="http://www.gravatar.com/avatar/' + users[value]["email"] + '.jpg?s=25" /> ' + listing; }; -$('#search').autocomplete({ +$('input.search').autocomplete({ minChars:2, maxHeight:400, - width:300, fnFormatResult: fnFormatSearchResult, onSelect: function(value, data){ window.location = "user.php?username=" + users[value]["username"]; }, lookup: lookup diff --git a/styles.css b/styles.css index 2f93193..0a2d8d9 100644 --- a/styles.css +++ b/styles.css @@ -1,124 +1,148 @@ -/* $Id$ */ - -body { - margin: 0; - font-family: Tahoma, Arial, sans-serif, serif, monospace; - background-color: #f8f8f8; -} -h2 { - margin: 0; - font-size: 1em; -} - -#header { - margin: 0; - background: url(/images/php.gif) #5a5993 no-repeat; - padding: 20px 0 10px 150px; - height: 37px; - font-style: italic; - font-size: 1em; - color: #B5B5E9; -} -#header a { - color: #B5B5E9; -} - -#mainmenu { - margin: 0; - background-color: #f3f3f3; - font-size: 0.9em; - padding: 8px 10px; - text-align: center; - border-top: 1px solid #000000; - border-bottom: 1px solid #D0D0D0; -} -#mainmenu li { - display: inline; - padding: 0 1%; - border-right: 1px solid #CDCDCD; -} -#mainmenu li a { - color: #6181B7; -} -#mainmenu li:last-child { - border: 0px; -} +/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */ -#searchbox { - color: #B5B5E9; - position: absolute; - top: 20px; - right: 200px; +/* {{{ widths blatantly stolen from bootstrap */ +.fullscreen { + width: 940px; +} +.fullscreen { + margin-right: auto; + margin-left: auto; + *zoom: 1; +} +.mainscreen, .secondscreen { + display: inline-block; +} +.mainscreen { + width: 700px; +} +.secondscreen { + width: 220px; +} +@media (max-width: 767px) { + .fullscreen { + width: auto; + padding: 0px 10px 0px 10px; + } +} +@media (min-width: 768px) and (max-width: 979px) { + .fullscreen { + width: 724px; + } + .mainscreen { + width: 538px; + } + .secondscreen { + width: 166px; + } +} +@media (min-width: 1200px) { + .fullscreen { + width: 1170px; + } + .mainscreen { + width: 870px; + } + .secondscreen { + width: 270px; + } } -#copyright { - margin: 0; - background-color: #f3f3f3; - font-size: 0.9em; - padding: 8px 10px; - text-align: left; - border-top: 1px solid #000000; - border-bottom: 1px solid #D0D0D0; +@media (min-width: 1500px) { + .fullscreen { + width: 1440px; + } } +/* }}} */ -#profile { - margin: 10px 100px 0 100px; - padding-bottom: 20px; +body { + background-color: #eeeef6; + color: #444; + font-family: Tahoma, Arial, sans-serif, serif, monospace; + background-color: #fff; + margin: 50px 0 0 0; } +header { + top: 0px; + left: 0px; + position: fixed; + width: 100%; -#profile dl { - padding-bottom: 20px; - margin: 0; + border-bottom: 0.25em solid #669; + background-color: #99c; + box-shadow: 0 .25em .25em rgba(0,0,0,.1); + z-index: 1; } -#profile dd { - line-height: 20px; - margin-left: 150px; -} -#profile dt { - float: left; - line-height: 20px; - color: #5A5993; +footer { + width: 100%; + position: absolute; + border-top: .25em solid #99C; + background-color: #262626; } -#blurb, -#karma, -#notes { - color: #5A5993; +nav { + line-height: 2.5; } - -.blurb { - margin: 0 0 0 2em; - width: 600px; +nav img { + vertical-align: middle; } - -.warning { - padding: 1em; - margin: 0px; - border-bottom:1px solid #D0D0D0; - margin-bottom: 6px; - text-align: center; - font-weight: bold; - font-size:1.17em; - background:#ffffff; - color:#6F0000; -} -.error { - background: #FFEEEE; - border: 1px solid #666600; - color: #660000; -} -.smaller { - font-size: .9em; +nav ul { + display: inline-block; + list-style: none; + list-style-type: none; + margin: 0; } - -.note { - text-indent: 30px; - margin: 5px; - padding: 5px 0 0 0; - border-bottom:1px dashed #5A5993; - width: 600px; +nav li { + display: inline-block; } -.note:last-child { - border-bottom: 0; +nav a { + display: inline-block; + font-weight: normal; + padding: 0 0.75em; + color: #eef; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + text-decoration: none; + font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; +} +nav a:hover { + color: #fff; +} +nav form { + display: inline-block; + width: 100%; +} +nav input { + width: 100%; + color: #333; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 1em; + text-shadow: 0 1px 0 #ffffff; + border: 0; + border-radius: 2px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); + line-height: 1.5; +} +/* Pad the #fragment below the header */ +section *[id] { + margin-top: -50px; + padding-top: 50px; +} +section.fullscreen { + /* Force the content below the fixed header */ + display: block; +} +.secondscreen { + vertical-align: top; + display: inline-block; + margin-left: 10px; +} +.secondscreen .panel { + background: #f0f0f0; + border: 1px solid #e3e3e3; + border-radius: 2px; +} +.secondscreen a { + color: #333; + display: block; + padding: .75em 1em; } /* {{{ Stolen from http://www.devbridge.com/projects/autocomplete/jquery/ */ @@ -128,19 +152,16 @@ h2 { top: 0px; left: 0px; margin: 6px 0 0 6px; - /* IE6 fix: */ - _background:none; _margin:1px 0 0 0; + z-index: 1; } .autocomplete { border: 1px solid #999; background: #FFF; cursor: default; text-align: left; - max-height: 350px; + max-height: 270px; overflow: auto; margin: -6px 6px 6px -6px; - /* IE6 specific: */ - _height:350px; _margin:0; _overflow-x:hidden; } .autocomplete .selected { background:#F0F0F0; @@ -156,5 +177,18 @@ h2 { /* }}} */ -/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */ +/* Grab attention with a warning */ +.warning { + background: #f9ecf2; + border: 1px solid #eecdde; + + padding: 1em; + margin: 0px; + + text-align: center; + font-weight: bold; + font-size:1.17em; + + color: #660000; +} diff --git a/user.php b/user.php index 0a843e1..8d86e19 100644 --- a/user.php +++ b/user.php @@ -6,7 +6,7 @@ require "./include/misc.php"; require "./include/karma.php"; $USERNAME = filter_input(INPUT_GET, "username", FILTER_SANITIZE_ENCODED, FILTER_FLAG_STRIP_HIGH); -site_header("PHP: Developers Profile Pages; $USERNAME"); +site_header("Developers Profile Pages; $USERNAME"); $NFO = findPHPUser($USERNAME); $PEAR = findPEARUser($USERNAME); @@ -18,6 +18,7 @@ $email = $NFO["enable"] ? $NFO["username"].'@php.net' : ""; $location = isset($PEAR["long"], $PEAR["lat"]) ? $PEAR["lat"] . ", " . $PEAR["long"] : null; ?> +<section class="mainscreen"> <div about="#me" typeof="foaf:Person" id="profile"> <?php if ($email) { @@ -108,7 +109,13 @@ if (isset($GITHUB["location"])) { <?php } ?> </div> +</section> <?php +$SIDEBAR = <<< SIDEBAR + <p class="panel"><a href="https://master.php.net/manage/users.php?username=$USERNAME">Edit $USERNAME on master</a></p> +SIDEBAR; + +site_panel($SIDEBAR); site_footer(); // vim: set expandtab shiftwidth=4 softtabstop=4 tabstop=4 :
diff --git a/include/footer.inc b/include/footer.inc new file mode 100644 index 0000000..9b12328 --- /dev/null +++ b/include/footer.inc @@ -0,0 +1,18 @@ +<?php /* vim: set ft=html et ts=2 sw=2: : */ ?> +</section> +<footer> + <nav class="fullscreen"> + <ul> + <li><a href="//php.net/copyright">Copyright © 2001-2013 The PHP Group</a></li> + <li><a href="//php.net/site">Other PHP.net sites</a></li> + <li><a href="//php.net/privacy">Privacy policy</a></li> + </ul> + </nav> +</footer> + + <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> + <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script> + <script type="text/javascript" src="js/userlisting.php"></script> + <script type="text/javascript" src="js/search.js"></script> +</body> +</html> diff --git a/include/header.inc b/include/header.inc new file mode 100644 index 0000000..b8a1c08 --- /dev/null +++ b/include/header.inc @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>PHP: <?=$title ?></title> + <link type="text/css" media="all" rel="stylesheet" href="/styles.css?v=3"> + <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic|Source+Code+Pro&subset=latin,latin-ext" rel="stylesheet" type="text/css"> + <link rel="shortcut icon" href="//php.net/favicon.ico"> +</head> +<body> + +<header> + <nav class="fullscreen"> + <div class="mainscreen"> + <a href="/" class="home"><img src="//php.net/images/logo.php" width="48" height="24" alt="php"><span class="subdomain">people</span></a> + <ul> + <li><a href="/user.php">Users</a></li> + </ul> + </div> + <div class="secondscreen"> + <form method="get" action="user.php"> + <input type="search" placeholder="Search profiles" name="username" class="search"> + </form> + </div> + </nav> +</header> + +<section class="fullscreen"> diff --git a/include/layout.php b/include/layout.php index a38981e..a3d1f66 100644 --- a/include/layout.php +++ b/include/layout.php @@ -2,56 +2,17 @@ /* $Id$ */ function site_header($title) { -?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> -<html - xml:lang="en" - xmlns="http://www.w3.org/1999/xhtml" - xmlns:foaf="http://xmlns.com/foaf/0.1/" - xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" -> -<head> - <title><?php echo $title ?></title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <link type="text/css" media="all" rel="stylesheet" href="styles.css" /> - <link rel="shortcut icon" href="http://php.net/favicon.ico" /> - <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> - <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script> - <script type="text/javascript" src="js/userlisting.php"></script> -</head> - -<body> - <h1 id="header"><a href="http://php.net/index.php">PHP: Hypertext Preprocessor</a> - <a href="http://people.php.net/index.php" rel="home">Developers Profile pages</a></h1> - <form id="searchbox" method="get" action="user.php"> - <label for="search">User search</label> - <input type="text" name="username" id="search" /> - </form> - <script type="text/javascript" src="js/search.js"></script> - <ul id="mainmenu"> - <li><a href="http://php.net/downloads.php">Downloads</a></li> - <li><a href="http://php.net/docs.php">Documentation</a></li> - <li><a href="http://php.net/FAQ.php">Faq</a></li> - <li><a href="http://php.net/support.php">Getting Help</a></li> - <li><a href="http://php.net/mailing-lists.php">Mailing Lists</a></li> - <li><a href="http://bugs.php.net">Reporting Bugs</a></li> - <li><a href="http://php.net/sites.php">PHP.net Sites</a></li> - <li><a href="http://php.net/links.php">Links</a></li> - <li><a href="http://php.net/conferences/">Conferences</a></li> - <li><a href="http://php.net/my.php">My PHP.net</a></li> - </ul> -<?php + include dirname(__FILE__) . "/header.inc"; } function site_footer() { -?> - <p id="copyright"> - <a href="http://php.net/copyright.php">Copyright © 2009-<?php echo date('Y');?> The PHP Group</a><br /> - All rights reserved. - </p> -</body> -</html> -<?php + include dirname(__FILE__) . "/footer.inc"; } +function site_panel($data) { + include dirname(__FILE__) . "/sidebar.inc"; +} + + // vim: set expandtab shiftwidth=4 softtabstop=4 tabstop=4 : diff --git a/include/misc.php b/include/misc.php index 9da9ecd..d9359da 100644 --- a/include/misc.php +++ b/include/misc.php @@ -117,7 +117,7 @@ function findPHPUserProfile($username) function error($errormsg) { - echo '<p class="warning error">', $errormsg, "</p>"; + echo '<p class="warning error">', $errormsg, "</p></section>"; site_footer(); exit; } diff --git a/include/sidebar.inc b/include/sidebar.inc new file mode 100644 index 0000000..43015e0 --- /dev/null +++ b/include/sidebar.inc @@ -0,0 +1,3 @@ +<aside class="secondscreen"> +<?=$data?> +</aside> diff --git a/index.php b/index.php index e87d17b..e1202b4 100644 --- a/index.php +++ b/index.php @@ -12,8 +12,10 @@ if ($USERNAME) { site_header("PHP: Developers Profile Pages"); ?> - <p class="warning smaller"><strong>WARNING</strong>: This is obviously work in progress :)</p> - <p>Use the searchbox to search for usernames/names</p> +<section class="fullscreen"> + <p class="warning smaller"><strong>WARNING</strong>: This is obviously work in progress :)</p> + <p>Use the searchbox to search for usernames/names</p> +</section> <?php site_footer(); diff --git a/js/search.js b/js/search.js index 9be8adc..ecbd310 100644 --- a/js/search.js +++ b/js/search.js @@ -7,10 +7,9 @@ var fnFormatSearchResult = function(value, data, currentValue) { return '<img src="http://www.gravatar.com/avatar/' + users[value]["email"] + '.jpg?s=25" /> ' + listing; }; -$('#search').autocomplete({ +$('input.search').autocomplete({ minChars:2, maxHeight:400, - width:300, fnFormatResult: fnFormatSearchResult, onSelect: function(value, data){ window.location = "user.php?username=" + users[value]["username"]; }, lookup: lookup diff --git a/styles.css b/styles.css index 2f93193..0a2d8d9 100644 --- a/styles.css +++ b/styles.css @@ -1,124 +1,148 @@ -/* $Id$ */ - -body { - margin: 0; - font-family: Tahoma, Arial, sans-serif, serif, monospace; - background-color: #f8f8f8; -} -h2 { - margin: 0; - font-size: 1em; -} - -#header { - margin: 0; - background: url(/images/php.gif) #5a5993 no-repeat; - padding: 20px 0 10px 150px; - height: 37px; - font-style: italic; - font-size: 1em; - color: #B5B5E9; -} -#header a { - color: #B5B5E9; -} - -#mainmenu { - margin: 0; - background-color: #f3f3f3; - font-size: 0.9em; - padding: 8px 10px; - text-align: center; - border-top: 1px solid #000000; - border-bottom: 1px solid #D0D0D0; -} -#mainmenu li { - display: inline; - padding: 0 1%; - border-right: 1px solid #CDCDCD; -} -#mainmenu li a { - color: #6181B7; -} -#mainmenu li:last-child { - border: 0px; -} +/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */ -#searchbox { - color: #B5B5E9; - position: absolute; - top: 20px; - right: 200px; +/* {{{ widths blatantly stolen from bootstrap */ +.fullscreen { + width: 940px; +} +.fullscreen { + margin-right: auto; + margin-left: auto; + *zoom: 1; +} +.mainscreen, .secondscreen { + display: inline-block; +} +.mainscreen { + width: 700px; +} +.secondscreen { + width: 220px; +} +@media (max-width: 767px) { + .fullscreen { + width: auto; + padding: 0px 10px 0px 10px; + } +} +@media (min-width: 768px) and (max-width: 979px) { + .fullscreen { + width: 724px; + } + .mainscreen { + width: 538px; + } + .secondscreen { + width: 166px; + } +} +@media (min-width: 1200px) { + .fullscreen { + width: 1170px; + } + .mainscreen { + width: 870px; + } + .secondscreen { + width: 270px; + } } -#copyright { - margin: 0; - background-color: #f3f3f3; - font-size: 0.9em; - padding: 8px 10px; - text-align: left; - border-top: 1px solid #000000; - border-bottom: 1px solid #D0D0D0; +@media (min-width: 1500px) { + .fullscreen { + width: 1440px; + } } +/* }}} */ -#profile { - margin: 10px 100px 0 100px; - padding-bottom: 20px; +body { + background-color: #eeeef6; + color: #444; + font-family: Tahoma, Arial, sans-serif, serif, monospace; + background-color: #fff; + margin: 50px 0 0 0; } +header { + top: 0px; + left: 0px; + position: fixed; + width: 100%; -#profile dl { - padding-bottom: 20px; - margin: 0; + border-bottom: 0.25em solid #669; + background-color: #99c; + box-shadow: 0 .25em .25em rgba(0,0,0,.1); + z-index: 1; } -#profile dd { - line-height: 20px; - margin-left: 150px; -} -#profile dt { - float: left; - line-height: 20px; - color: #5A5993; +footer { + width: 100%; + position: absolute; + border-top: .25em solid #99C; + background-color: #262626; } -#blurb, -#karma, -#notes { - color: #5A5993; +nav { + line-height: 2.5; } - -.blurb { - margin: 0 0 0 2em; - width: 600px; +nav img { + vertical-align: middle; } - -.warning { - padding: 1em; - margin: 0px; - border-bottom:1px solid #D0D0D0; - margin-bottom: 6px; - text-align: center; - font-weight: bold; - font-size:1.17em; - background:#ffffff; - color:#6F0000; -} -.error { - background: #FFEEEE; - border: 1px solid #666600; - color: #660000; -} -.smaller { - font-size: .9em; +nav ul { + display: inline-block; + list-style: none; + list-style-type: none; + margin: 0; } - -.note { - text-indent: 30px; - margin: 5px; - padding: 5px 0 0 0; - border-bottom:1px dashed #5A5993; - width: 600px; +nav li { + display: inline-block; } -.note:last-child { - border-bottom: 0; +nav a { + display: inline-block; + font-weight: normal; + padding: 0 0.75em; + color: #eef; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + text-decoration: none; + font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; +} +nav a:hover { + color: #fff; +} +nav form { + display: inline-block; + width: 100%; +} +nav input { + width: 100%; + color: #333; + font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; + font-size: 1em; + text-shadow: 0 1px 0 #ffffff; + border: 0; + border-radius: 2px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); + line-height: 1.5; +} +/* Pad the #fragment below the header */ +section *[id] { + margin-top: -50px; + padding-top: 50px; +} +section.fullscreen { + /* Force the content below the fixed header */ + display: block; +} +.secondscreen { + vertical-align: top; + display: inline-block; + margin-left: 10px; +} +.secondscreen .panel { + background: #f0f0f0; + border: 1px solid #e3e3e3; + border-radius: 2px; +} +.secondscreen a { + color: #333; + display: block; + padding: .75em 1em; } /* {{{ Stolen from http://www.devbridge.com/projects/autocomplete/jquery/ */ @@ -128,19 +152,16 @@ h2 { top: 0px; left: 0px; margin: 6px 0 0 6px; - /* IE6 fix: */ - _background:none; _margin:1px 0 0 0; + z-index: 1; } .autocomplete { border: 1px solid #999; background: #FFF; cursor: default; text-align: left; - max-height: 350px; + max-height: 270px; overflow: auto; margin: -6px 6px 6px -6px; - /* IE6 specific: */ - _height:350px; _margin:0; _overflow-x:hidden; } .autocomplete .selected { background:#F0F0F0; @@ -156,5 +177,18 @@ h2 { /* }}} */ -/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */ +/* Grab attention with a warning */ +.warning { + background: #f9ecf2; + border: 1px solid #eecdde; + + padding: 1em; + margin: 0px; + + text-align: center; + font-weight: bold; + font-size:1.17em; + + color: #660000; +} diff --git a/user.php b/user.php index 0a843e1..8d86e19 100644 --- a/user.php +++ b/user.php @@ -6,7 +6,7 @@ require "./include/misc.php"; require "./include/karma.php"; $USERNAME = filter_input(INPUT_GET, "username", FILTER_SANITIZE_ENCODED, FILTER_FLAG_STRIP_HIGH); -site_header("PHP: Developers Profile Pages; $USERNAME"); +site_header("Developers Profile Pages; $USERNAME"); $NFO = findPHPUser($USERNAME); $PEAR = findPEARUser($USERNAME); @@ -18,6 +18,7 @@ $email = $NFO["enable"] ? $NFO["username"].'@php.net' : ""; $location = isset($PEAR["long"], $PEAR["lat"]) ? $PEAR["lat"] . ", " . $PEAR["long"] : null; ?> +<section class="mainscreen"> <div about="#me" typeof="foaf:Person" id="profile"> <?php if ($email) { @@ -108,7 +109,13 @@ if (isset($GITHUB["location"])) { <?php } ?> </div> +</section> <?php +$SIDEBAR = <<< SIDEBAR + <p class="panel"><a href="https://master.php.net/manage/users.php?username=$USERNAME">Edit $USERNAME on master</a></p> +SIDEBAR; + +site_panel($SIDEBAR); site_footer(); // vim: set expandtab shiftwidth=4 softtabstop=4 tabstop=4 :