com web/shared: Initial commit of shared CSS and header/footers: styles/defaults.css templates/footer.inc templates/header.inc

Commit: cb50855ff2cc106bbdbd99ff98b265ad945ae632 Author: Hannes Magnusson <bjori@mongodb.com> Thu, 12 Dec 2013 16:31:48 -0800 Parents: 96ea4f7ee16e833e011afb9b00a83a9f00bdcc7d Branches: master Link: http://git.php.net/?p=web/shared.git;a=commitdiff;h=cb50855ff2cc106bbdbd99ff98b265ad945ae632 Log: Initial commit of shared CSS and header/footers Changed paths: A styles/defaults.css A templates/footer.inc A templates/header.inc Diff: diff --git a/styles/defaults.css b/styles/defaults.css new file mode 100644 index 0000000..1b7c519 --- /dev/null +++ b/styles/defaults.css @@ -0,0 +1,234 @@ +/* + * Basic navigation, header and footer layout + * This stylesheet should grow to include default content look&feel + * + * The normal .php.net website has two columns, "main" and "second" + * Please use the following classes for those: + * class="secondscreen" is for "sidebar content" + * class="mainscreen" for "main content" + * + * When only one column is needed, or a full width wrapper is needed use: + * class="fullscreen" for container/full width + * + * + * Search boxes and main menu navigation is automatically hidden on + * small devices, with a "menu icon" which toggles those items. + * When toggled, each menu item plus the searchbox are printed + * on its own line (rather then inline-block, as is the default). + * + * This stylesheet also includes the anchor fix, so #fragment + * does not get hidden by the fixed header. + */ + +body { + color: #444; + font-family: Tahoma, Arial, sans-serif, serif, monospace; + background-color: #fff; + height: 100%; +} +header { + top: 0px; + left: 0px; + position: fixed; + width: 100%; + + border-bottom: 0.25em solid #669; + background-color: #99c; + box-shadow: 0 .25em .25em rgba(0,0,0,.1); + z-index: 1; +} +footer { + width: 100%; + border-top: .25em solid #99C; + background-color: #262626; +} +nav { + line-height: 2.5; +} +nav img { + vertical-align: middle; +} +nav ul { + display: inline-block; + list-style: none; + list-style-type: none; + margin: 0; +} +nav li { + display: inline-block; +} +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; + height: 100%; +} +.secondscreen { + vertical-align: top; + display: inline-block; +} +.secondscreen .panel { + background: #f0f0f0; + border: 1px solid #e3e3e3; + border-radius: 2px; +} +.secondscreen a { + color: #333; + display: block; + padding: .75em 1em; +} + +/* 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; +} + +/* {{{ Responsive styles */ +.fullscreen { + width: 940px; + margin-right: auto; + margin-left: auto; + *zoom: 1; +} +.mainscreen, .secondscreen { + display: inline-block; +} +.mainscreen { + width: 700px; +} +.secondscreen { + width: 220px; +} +body { + margin: 50px 0 0 0; +} +#mainmenu-toggle-overlay, #mainmenu-toggle { + display: none; +} +#mainmenu-toggle:checked + nav { + /* This just has to be big enough to cover whatever's in nav. */ + max-height: 50em; +} +@media (max-width:465px) { + + #mainmenu-toggle-overlay { + background: #669 url(http://php.net/images/mobile-menu.png) no-repeat center center; + float: right; + display: block; + height: 32px; + width: 34px; + margin-top: 10px; + margin-right: 10px; + border-radius: 5px; + } + #mainmenu-toggle { + height: 32px; + width: 34px; + line-height: 32px; + margin-top: 10px; + margin-right: -34px; + float: right; + border-bottom: 0 none; + display: inline-block; + opacity: 0; + } + nav { + max-height: 0; + overflow: hidden; + } + nav ul, nav li, nav a { + display: block; + padding: 0; + } + header { + position: absolute; + } +} +@media (max-width: 767px) { + .fullscreen { + width: auto; + padding: 0px 10px 0px 10px; + } + section.mainscreen { + width: auto; + } + .secondscreen { + width: 100%; + } + body { + margin: 100px 0 0 0; + } +} +@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 { + margin-left: 10px; + width: 270px; + } +} + +@media (min-width: 1500px) { + .fullscreen { + width: 1440px; + } +} +/* }}} */ + +/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */ diff --git a/templates/footer.inc b/templates/footer.inc new file mode 100644 index 0000000..068e235 --- /dev/null +++ b/templates/footer.inc @@ -0,0 +1,26 @@ +<?php +/** + * Typical footer + * + * Required variables: + * + * $JS = array("//example.com/external.js", "/shared/js/local.js"); + */ +?> +</section><!-- .fullscreen --> +<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> + +<?php foreach($JS as $script) :?> +<script type="text/javascript" src="<?=$script?>"></script> +<?php endforeach ?> +</body> +</html> +<?php /* vim: set ft=html et ts=2 sw=2: : */ ?> diff --git a/templates/header.inc b/templates/header.inc new file mode 100644 index 0000000..277acd9 --- /dev/null +++ b/templates/header.inc @@ -0,0 +1,60 @@ +<?php +/** + * Typical header + * + * Required variables: + * + * $TITLE = "Awesome Website"; // Page title + * $SUBDOMAIN = "people"; // Subdomain/Project + * $LINKS = array( + * array("href" => "/link.php", "text" => "Link text") + * ); // Menu menu links + * $SEARCH = array( + * "method" => "get", + * "action" => "/search.php", + * "placeholder" => "Placeholder text", + * "name" => "input-name", + * ); // Search box, if any + */ +?> +<!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="/shared/styles/defaults.css"> + <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 id="<?=$SUBDOMAIN?>"> + +<header> + <div id="mainmenu-toggle-overlay"></div> + <input type="checkbox" id="mainmenu-toggle"> + <nav class="fullscreen"> + <div class="mainscreen"> + <a href="/" class="home"><img src="//php.net/images/logo.php?<?=$SUBDOMAIN?>" width="48" height="24" alt="php"><span class="subdomain"><?=$SUBDOMAIN?></span></a> + <ul> +<?php foreach($LINKS as $link): ?> + <li><a href="<?=$link["href"]?>"><?=$link["text"]?></a></li> +<?php endforeach ?> + </ul> + </div> +<?php if ($SEARCH): ?> + <div class="secondscreen"> + <form method="<?=$SEARCH["method"]?>" action="<?=$SEARCH["action"]?>"> + <input type="search" placeholder="<?=$SEARCH["placeholder"]?>" name="<?=$SEARCH["name"]?>" class="search"> + </form> + </div> +<?php endif ?> + </nav> +</header> + +<section class="fullscreen"> + + +<?php /* vim: set ft=html et ts=2 sw=2: : */ ?> +