System update (HTML layout)
This commit is contained in:
parent
bf62544d8c
commit
6094966235
8 changed files with 99 additions and 94 deletions
Binary file not shown.
Binary file not shown.
|
@ -1,14 +1,14 @@
|
|||
/* Theme: Flatsite theme */
|
||||
/* Version: 0.6.9 */
|
||||
/* Version: 0.6.10 */
|
||||
/* Designer: Mark Mayberg */
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
|
||||
html, body, div, form, pre, span, tr, th, td { margin:0; padding:0; border:0; vertical-align:baseline; }
|
||||
html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
|
||||
body {
|
||||
margin:1em;
|
||||
background-color:#fff; color:#717171;
|
||||
font-family:'Open Sans',sans-serif;
|
||||
font-size:1.0em;
|
||||
font-family:'Open Sans',Helvetica,sans-serif;
|
||||
font-size:1em;
|
||||
font-weight:300;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
@ -17,22 +17,22 @@ h1 { font-size:2.0em; }
|
|||
hr { height:1px; background:#ddd; border:0; }
|
||||
strong { font-weight:bold; }
|
||||
code { font-size:1.1em; }
|
||||
a { color:#07d; }
|
||||
a { color:#07d; text-decoration:none; }
|
||||
a:hover { color:#07d; text-decoration:underline; }
|
||||
a, img { border:none; text-decoration:none; }
|
||||
.sitename { display:block; float:left; }
|
||||
.sitename h1 { margin:0; }
|
||||
.sitename h1 a { color:#111; text-decoration:none; }
|
||||
.with-sidebar .main { margin-right:17em; }
|
||||
.with-sidebar .sidebar { float:right; width:16em; margin-top:5em; padding:2px; overflow:hidden; font-size:0.9em; }
|
||||
.with-sidebar .sidebar .search-form input { width:100%; box-sizing:border-box; }
|
||||
.content h1:first-child, .content>*:first-child { margin-top:0; }
|
||||
.content h1 a:hover { text-decoration:none; }
|
||||
.content img { max-width:100%; height:auto; }
|
||||
.content form { margin:1em 0; }
|
||||
.content table { border-spacing:0; border-collapse:collapse; }
|
||||
.content th { text-align:left; padding:0.3em; border-bottom:1px solid #ddd;}
|
||||
.content td { text-align:left; padding:0.3em; border-top:1px solid #ddd;}
|
||||
.content th { text-align:left; padding:0.3em; border-bottom:1px solid #ddd; }
|
||||
.content td { text-align:left; padding:0.3em; border-top:1px solid #ddd; }
|
||||
.content blockquote { margin-left:0; padding-left:1em; border-left:.5em solid #0a0; }
|
||||
.content blockquote blockquote { margin-left:-1.5em; border-left:.5em solid #fb0; }
|
||||
.content blockquote blockquote blockquote { border-color:#d00; }
|
||||
.content code, pre { font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace; font-size:90%; }
|
||||
.content code { padding:0.15em 0.4em; margin:0; background-color:#f7f7f7; border-radius:3px; }
|
||||
.content pre>code { padding:0; margin:0; white-space:pre; background:transparent; border:0; font-size:inherit; }
|
||||
.content pre { padding:1em; overflow:auto; line-height:1.45; background-color:#f7f7f7; border-radius:3px; }
|
||||
.content .flexible { position:relative; padding-top:0; padding-bottom:56.25%; }
|
||||
.content .flexible iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
|
||||
.content .stretchable ul { margin:0 -0.5em; padding:0; list-style:none; text-align:center; }
|
||||
|
@ -40,45 +40,36 @@ a, img { border:none; text-decoration:none; }
|
|||
.content .stretchable a { color:#717171; text-decoration:none; }
|
||||
.content .toc { margin:0; padding:0; list-style:none; }
|
||||
.content .pagination { margin:1em 0; }
|
||||
.content blockquote { margin-left:0; padding-left:1em; border-left:.5em solid #0a0; }
|
||||
.content blockquote blockquote { margin-left:-1.5em; border-left:.5em solid #fb0; }
|
||||
.content blockquote blockquote blockquote { border-color:#d00; }
|
||||
.content code, pre { font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace; font-size:90%;}
|
||||
.content code { padding:0.15em 0.4em; margin:0; background-color:#f7f7f7; border-radius:3px; }
|
||||
.content pre>code { padding:0; margin:0; white-space:pre; background:transparent; border:0; font-size:inherit; }
|
||||
.content pre { padding:1em; overflow:auto; line-height:1.45; background-color:#f7f7f7; border-radius:3px; }
|
||||
.footer { margin-top:2em; clear:both; }
|
||||
.footer a { color:#07d; }
|
||||
.footer a:hover { color:#07d; text-decoration:underline; }
|
||||
.footer-left { float:left; }
|
||||
.footer-right { float:right; }
|
||||
.footer-right a {
|
||||
display:inline-block;
|
||||
box-sizing:border-box;
|
||||
border-radius:20px;
|
||||
width:25px;
|
||||
height:25px;
|
||||
margin-top:-20px;
|
||||
text-align:center;
|
||||
background-color:#07d;
|
||||
color:#fff;
|
||||
}
|
||||
.footer-right a:hover { background-color:#000; color:#fff; }
|
||||
.footer-banner { clear:both; }
|
||||
.left { float:left; margin:0 1em 0 0; }
|
||||
.center { display:block; margin:0 auto; }
|
||||
.right { float:right; margin:0 0 0 1em; }
|
||||
.rounded { border-radius: 4px; }
|
||||
.content .left { float:left; margin:0 1em 0 0; }
|
||||
.content .center { display:block; margin:0 auto; }
|
||||
.content .right { float:right; margin:0 0 0 1em; }
|
||||
.content .rounded { border-radius:4px; }
|
||||
|
||||
/* Header */
|
||||
|
||||
.header .sitename { display:block; float:left; }
|
||||
.header .sitename h1 { margin:0; }
|
||||
.header .sitename h1 a { color:#111; text-decoration:none; }
|
||||
.header .sitename h2 { margin-top:0; color:#717171; font-size:1.0em; font-weight:300; }
|
||||
|
||||
/* Navigation */
|
||||
|
||||
.navigation-banner { clear:both; }
|
||||
.navigation { display:block; float:right; }
|
||||
.navigation { margin-top:0.9em; margin-bottom:0.9em; line-height:2em; }
|
||||
.navigation { margin-top:0.9em; margin-bottom:0.9em; line-height:2; }
|
||||
.navigation a { padding:0 0.3em; }
|
||||
.navigation ul { margin:0 -0.3em; padding:0; list-style:none; }
|
||||
.navigation li { display:inline; }
|
||||
|
||||
.navigation-tree { display:block; float:right; }
|
||||
.navigation-tree { margin-top:0.9em; margin-bottom:0.9em; line-height:2; }
|
||||
.navigation-tree a { padding:0 0.3em; }
|
||||
.navigation-tree ul { margin:0 -0.3em; padding:0; list-style:none; }
|
||||
.navigation-tree li { display:inline; }
|
||||
.navigation-tree ul li { display:inline-block; position:relative; cursor:pointer; margin:0; }
|
||||
.navigation-tree ul li ul { padding:0.3em; position:absolute; width:13em; background:#fff; z-index:100; display:none; }
|
||||
.navigation-tree ul li ul { border:1px solid #bbb; border-radius:4px; box-shadow:2px 4px 10px rgba(0, 0, 0, 0.2); }
|
||||
.navigation-tree ul li ul li { display:block; }
|
||||
.navigation-tree>ul>li:hover>ul { display:block; }
|
||||
.navigation-banner { clear:both; }
|
||||
.navigation-search { padding-bottom:1em; }
|
||||
.navigation-search .search-form { position:relative; }
|
||||
.navigation-search .search-text { font-family:inherit; font-size:inherit; font-weight:inherit; }
|
||||
|
@ -88,26 +79,34 @@ a, img { border:none; text-decoration:none; }
|
|||
.navigation-search .search-button { font-family:inherit; font-size:inherit; font-weight:inherit; }
|
||||
.navigation-search .search-button { margin:5px; padding:0.3em; border:none; background-color:transparent; }
|
||||
|
||||
.navigation-sidebar ul { margin:0; }
|
||||
/* Footer */
|
||||
|
||||
.navigation-tree { display:block; float:right; }
|
||||
.navigation-tree { margin-top:0.9em; margin-bottom:0.9em; line-height:2em; }
|
||||
.navigation-tree a { padding:0 0.3em; }
|
||||
.navigation-tree ul { margin:0 -0.3em; padding:0; list-style:none; }
|
||||
.navigation-tree li { display:inline; }
|
||||
.navigation-tree ul li { display:inline-block; position:relative; cursor:pointer; margin:0; }
|
||||
.navigation-tree ul li:hover {}
|
||||
.navigation-tree ul li ul { padding:0.3em; position:absolute; width:13em; background:#fff; z-index:100; display:none; }
|
||||
.navigation-tree ul li ul { border:1px solid #bbb; border-radius:4px; box-shadow:2px 4px 10px rgba(0, 0, 0, 0.2); }
|
||||
.navigation-tree ul li ul li { display:block; }
|
||||
.navigation-tree ul li:hover ul { display:block; }
|
||||
.footer { margin-top:2em; }
|
||||
.footer .siteinfo a { color:#07d; }
|
||||
.footer .siteinfo a:hover { color:#07d; text-decoration:underline; }
|
||||
.footer .siteinfo a.socialmedia {
|
||||
display:inline-block;
|
||||
box-sizing:border-box;
|
||||
border-radius:13px;
|
||||
width:26px;
|
||||
height:26px;
|
||||
margin:-20px 0;
|
||||
padding:1px 0;
|
||||
text-align:center;
|
||||
background-color:#07d;
|
||||
color:#fff;
|
||||
}
|
||||
.footer .siteinfo a.socialmedia:hover { background-color:#039; color:#fff; }
|
||||
.footer .siteinfo-left { float:left; }
|
||||
.footer .siteinfo-right { float:right; }
|
||||
.footer .siteinfo-banner { clear:both; }
|
||||
|
||||
/* Syntax highlight */
|
||||
/* Sidebar */
|
||||
|
||||
.highlight .kw1, .highlight .kw2, .highlight .kw3, .highlight .kw4 { color:#b0b; }
|
||||
.highlight .st0, .highlight .st_h, .highlight .nu0 { color:#b0b; }
|
||||
.highlight .re0, .highlight .re1, .highlight .re2, .highlight .re3, .css .nu0 { color:inherit; }
|
||||
.highlight .co1, .highlight .coMULTI, .highlight .sc-1 { color:inherit; }
|
||||
.with-sidebar .main { margin-right:17em; }
|
||||
.with-sidebar .sidebar { float:right; width:16em; margin-top:3.9em; padding:2px; overflow:hidden; font-size:0.9em; }
|
||||
.with-sidebar .sidebar .search-form input { width:100%; box-sizing:border-box; }
|
||||
.with-sidebar .content:after { content:""; display:table; clear:both; }
|
||||
|
||||
/* Forms and buttons */
|
||||
|
||||
|
@ -139,25 +138,33 @@ a, img { border:none; text-decoration:none; }
|
|||
}
|
||||
.btn:active { box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
/* Misc */
|
||||
|
||||
.highlight .kw1, .highlight .kw2, .highlight .kw3, .highlight .kw4 { color:#b0b; }
|
||||
.highlight .st0, .highlight .st_h, .highlight .nu0 { color:#b0b; }
|
||||
.highlight .re0, .highlight .re1, .highlight .re2, .highlight .re3, .css .nu0 { color:inherit; }
|
||||
.highlight .co1, .highlight .coMULTI, .highlight .sc0, .highlight .sc-1 { color:inherit; }
|
||||
|
||||
/* Responsive and print */
|
||||
|
||||
.page { margin:0 auto; max-width:1000px; }
|
||||
|
||||
@media screen and (min-width:62em) {
|
||||
@media screen and (min-width:62em) {
|
||||
body { width:60em; margin:1em auto; }
|
||||
.page{ margin:0; max-width:none; }
|
||||
}
|
||||
@media screen and (max-width:30em) {
|
||||
@media screen and (max-width:32em) {
|
||||
body { margin:0.5em; font-size:0.9em; }
|
||||
.sitename h1, h1, h2 { font-size:1.2em; }
|
||||
.sitename h1, .header, .navigation, .footer, .page { margin:0; padding:0; }
|
||||
.sitename, .navigation, .navigation-tree { float:none; }
|
||||
.navigation-search { padding-top:0.5em; }
|
||||
.header .sitename h1, .content h1, .content h2 { font-size:1.3em; }
|
||||
.header .sitename h1, .header .sitename h2, .footer, .page { margin:0; padding:0; }
|
||||
.header .sitename, .navigation, .navigation-tree { float:none; }
|
||||
.navigation { margin-top:0.5em; margin-bottom:0.5em; }
|
||||
.navigation-search { padding-bottom:1em; }
|
||||
.footer .siteinfo-right { display:none; }
|
||||
.footer .siteinfo a.socialmedia { width:24px; height:24px; padding:1px 0; }
|
||||
.with-sidebar .main { margin-right:0; }
|
||||
.with-sidebar .sidebar { display:none; }
|
||||
.footer-right { display:none; }
|
||||
}
|
||||
@media print {
|
||||
body, h1, h2, h3, h4, h5, h6 { background-color:white; color:black; }
|
||||
.page { border:none !important; }
|
||||
}
|
|
@ -1,4 +1,7 @@
|
|||
<div class="content main">
|
||||
<div class="content">
|
||||
<?php $yellow->snippet("sidebar") ?>
|
||||
<div class="main">
|
||||
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
|
||||
<?php echo $yellow->page->getContent() ?>
|
||||
</div>
|
||||
</div>
|
|
@ -1,19 +1,16 @@
|
|||
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $yellow->page->getHtml("language") ?>">
|
||||
<!DOCTYPE html><html lang="<?php echo $yellow->page->getHtml("language") ?>">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="<?php echo $yellow->page->getHtml("description") ?>" />
|
||||
<meta name="keywords" content="<?php echo $yellow->page->getHtml("keywords") ?>" />
|
||||
<meta name="author" content="<?php echo $yellow->page->getHtml("author") ?>" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<?php if($yellow->page->isExisting("robots")): ?>
|
||||
<meta name="robots" content="<?php echo $yellow->page->getHtml("robots") ?>" />
|
||||
<?php endif ?>
|
||||
<title><?php echo $yellow->page->getHtml("titleHeader") ?></title>
|
||||
<?php echo $yellow->page->getExtra("header") ?>
|
||||
</head>
|
||||
<body>
|
||||
<?php $yellow->page->set("pageClass", "page") ?>
|
||||
<?php $yellow->page->set("pageClass", $yellow->page->get("pageClass")." ".$yellow->page->get("template")) ?>
|
||||
<?php $yellow->page->set("pageClass", $yellow->page->get("pageClass")." template-".$yellow->page->get("template")) ?>
|
||||
<?php if($yellow->page->get("navigation")=="navigation-sidebar") $yellow->page->setPage("sidebar", $yellow->page); ?>
|
||||
<?php if($page = $yellow->pages->find($yellow->lookup->getDirectoryLocation($yellow->page->location).$yellow->page->get("sidebar"))) $yellow->page->setPage("sidebar", $page) ?>
|
||||
<?php if($yellow->page->isPage("sidebar")) $yellow->page->set("pageClass", $yellow->page->get("pageClass")." with-sidebar") ?>
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<?php list($name, $pages, $sidebar) = $yellow->getSnippetArgs() ?>
|
||||
<?php if(!$pages) $pages = $yellow->pages->top() ?>
|
||||
<?php $pages = $yellow->pages->top() ?>
|
||||
<?php $yellow->page->setLastModified($pages->getModified()) ?>
|
||||
<?php if(!$sidebar): ?>
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<?php foreach($pages as $page): ?>
|
||||
|
@ -10,12 +8,3 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="navigation-banner"></div>
|
||||
<?php else: ?>
|
||||
<div class="navigation-sidebar">
|
||||
<ul>
|
||||
<?php foreach($pages as $page): ?>
|
||||
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif ?>
|
|
@ -1,14 +1,24 @@
|
|||
<?php if($yellow->page->isPage("sidebar")): ?>
|
||||
<div class="content sidebar">
|
||||
<?php if($yellow->page->get("navigation")=="navigation-sidebar"): ?>
|
||||
<?php $page = $yellow->page->getParentTop(false) ?>
|
||||
<?php $pages = $page ? $page->getChildren(!$page->isVisible()) : $yellow->pages->clean() ?>
|
||||
<?php $yellow->snippet("navigation-sidebar", $pages, true) ?>
|
||||
<?php $yellow->page->setLastModified($pages->getModified()) ?>
|
||||
<div class="sidebar">
|
||||
<div class="navigation-sidebar">
|
||||
<p><?php echo $page->getHtml("titleNavigation") ?></p>
|
||||
<ul>
|
||||
<?php foreach($pages as $page): ?>
|
||||
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php $page = $yellow->page->getPage("sidebar") ?>
|
||||
<?php $page->setPage("main", $yellow->page) ?>
|
||||
<?php $yellow->page->setLastModified($page->getModified()) ?>
|
||||
<div class="sidebar">
|
||||
<?php echo $page->getContent() ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
|
@ -1,4 +1,3 @@
|
|||
<?php $yellow->snippet("header") ?>
|
||||
<?php $yellow->snippet("content-sidebar") ?>
|
||||
<?php $yellow->snippet("content-main") ?>
|
||||
<?php $yellow->snippet("content-default") ?>
|
||||
<?php $yellow->snippet("footer") ?>
|
Loading…
Add table
Reference in a new issue