Commit 5d89dd0e authored by sajolida's avatar sajolida

Prototype of sidebar on top (#15112)

parent 80505b23
[[!pagetemplate template="topbar.tmpl"]]
[[!meta title="How Tails works"]]
[[!meta stylesheet="bootstrap.min" rel="stylesheet" title=""]]
[[!meta stylesheet="staging/about" rel="stylesheet" title=""]]
......
.sidebar {
display: none;
.pageheader #otherlanguages {
top: 0;
}
h1 {
......@@ -19,3 +19,96 @@ h3 {
padding-left: 0;
padding-right: 30px;
}
/* Topbar */
.searchform {
position: inherit;
}
form#searchform {
right: 170px;
}
.topbar {
background: #53b351;
max-width: 986px;
margin: 0 auto;
}
.topbar ul {
margin: 0;
max-width: 100%;
}
.topbar ul li {
display: inline-block;
}
.topbar a, .topbar .selflink {
display: block;
padding: 10px 15px 5px 15px;
font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
font-weight: bold;
font-size: 16px;
}
.topbar a {
color: black;
}
.topbar a:hover {
text-decoration: none;
border-bottom: 5px solid black !important;
}
.topbar .selflink {
background: #73d171;
color: black;
border-bottom: 5px solid #73d171;
}
/* Special links */
.topbar a.donate {
border-bottom: 5px solid yellow;
background: yellow;
}
/* Hide breadcrumbs on top pages */
.parentlinks, span.title {
display: none;
}
/* Only display actions on blueprints */
.actions {
display: none;
}
/* Overwrites to local.css */
.banner {
padding: 0;
}
.page {
padding: 0;
}
span.title {
margin-left: 0;
}
#crumbs {
margin: 0;
}
#pagebody {
margin: 0 15px;
}
#content {
padding: 0 !important;
}
@import url("common.css");
.parentlinks, span.title, .actions {
display: none;
}
.pageheader #otherlanguages {
top: 0;
}
.hero {
padding: 70px 0;
}
......
[[!pagetemplate template="topbar.tmpl"]]
[[!meta title="Home"]]
[[!meta stylesheet="bootstrap.min" rel="stylesheet" title=""]]
[[!meta stylesheet="staging/home" rel="stylesheet" title=""]]
......
<!DOCTYPE html>
<TMPL_IF HTML_LANG_CODE>
<html lang="<TMPL_VAR HTML_LANG_CODE>" dir="<TMPL_VAR HTML_LANG_DIR>" xmlns="http://www.w3.org/1999/xhtml">
<TMPL_ELSE>
<html xmlns="http://www.w3.org/1999/xhtml">
</TMPL_IF>
<head>
<TMPL_IF DYNAMIC>
<TMPL_IF FORCEBASEURL><base href="<TMPL_VAR FORCEBASEURL>" /><TMPL_ELSE>
<TMPL_IF BASEURL><base href="<TMPL_VAR BASEURL>" /></TMPL_IF>
</TMPL_IF>
</TMPL_IF>
<TMPL_IF HTML5><meta charset="utf-8" /><TMPL_ELSE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></TMPL_IF>
<title>Tails - <TMPL_VAR TITLE></title>
<TMPL_IF RESPONSIVE_LAYOUT><meta name="viewport" content="width=device-width, initial-scale=1" /></TMPL_IF>
<TMPL_IF FAVICON>
<link rel="icon" href="<TMPL_VAR BASEURL><TMPL_VAR FAVICON>" type="image/x-icon" />
</TMPL_IF>
<link rel="stylesheet" href="<TMPL_VAR BASEURL>style.css" type="text/css" />
<TMPL_IF LOCAL_CSS>
<link rel="stylesheet" href="<TMPL_VAR BASEURL><TMPL_VAR LOCAL_CSS>" type="text/css" />
<TMPL_ELSE>
<link rel="stylesheet" href="<TMPL_VAR BASEURL>local.css?reload-2020-01-12" type="text/css" />
</TMPL_IF>
<script src="<TMPL_VAR BASEURL>lib/js/mirror-dispatcher.js" type="text/javascript"></script>
<TMPL_UNLESS DYNAMIC>
<TMPL_IF EDITURL>
<link rel="alternate" type="application/x-wiki" title="Edit this page" href="<TMPL_VAR EDITURL>" />
</TMPL_IF>
<TMPL_IF FEEDLINKS><TMPL_VAR FEEDLINKS></TMPL_IF>
<TMPL_IF RELVCS><TMPL_VAR RELVCS></TMPL_IF>
<TMPL_IF META><TMPL_VAR META></TMPL_IF>
<TMPL_LOOP TRAILLOOP>
<TMPL_IF PREVPAGE>
<link rel="prev" href="<TMPL_VAR PREVURL>" title="<TMPL_VAR PREVTITLE>" />
</TMPL_IF>
<link rel="up" href="<TMPL_VAR TRAILURL>" title="<TMPL_VAR TRAILTITLE>" />
<TMPL_IF NEXTPAGE>
<link rel="next" href="<TMPL_VAR NEXTURL>" title="<TMPL_VAR NEXTTITLE>" />
</TMPL_IF>
</TMPL_LOOP>
</TMPL_UNLESS>
</head>
<TMPL_IF HTML_LANG_CODE>
<body class="<TMPL_VAR HTML_LANG_CODE>">
<TMPL_ELSE>
<body>
</TMPL_IF>
<div class="banner" role="banner">
<a class="tails" href="<TMPL_VAR HOMEPAGEURL>">
<span class="acronym">Tails</span><br/>
<span class="slogan">The Amnesic Incognito Live System</span>
</a>
</div>
<div class="searchform">
<TMPL_UNLESS DYNAMIC>
<TMPL_IF SEARCHFORM>
<TMPL_VAR SEARCHFORM>
</TMPL_IF>
</TMPL_UNLESS>
</div>
<TMPL_UNLESS DYNAMIC>
<TMPL_IF SIDEBAR>
<TMPL_IF HTML5><aside class="topbar" role="navigation"><TMPL_ELSE><div class="topbar" role="navigation"></TMPL_IF>
<ul><li><a href="home.en.html">Home</a></li><li><span class="selflink">How Tails works</span></li><li><a class="install" href="../../install.en.html">Get Tails</a></li><li><a href="../../doc.en.html">Documentation</a></li><li><a href="../../support.en.html">Help & Support</a></li><li><a href="../../contribute.en.html">Contribute</a></li><li><a href="../../news.en.html">News</a></li><li><a href="../../jobs.en.html">Jobs</a></li><li><a class="donate" href="https://tails.boum.org/donate/?r=sidebar">Donate</a></li></ul>
<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
</TMPL_UNLESS>
<TMPL_IF HTML5><article class="page"><TMPL_ELSE><div class="page"></TMPL_IF>
<TMPL_IF HTML5><section class="pageheader"><TMPL_ELSE><div class="pageheader"></TMPL_IF>
<TMPL_IF HTML5><header class="header"><TMPL_ELSE><div class="header"></TMPL_IF>
<span>
<span class="parentlinks">
<ul id="crumbs">
<li><a href="<TMPL_VAR HOMEPAGEURL>"><img src="<TMPL_VAR BASEURL>lib/home.png"></a></li>
<TMPL_LOOP PARENTLINKS>
<TMPL_IF DEPTH_0>
<TMPL_ELSE>
<li><a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a></li>
</TMPL_IF>
</TMPL_LOOP>
<li><TMPL_VAR TITLE></li>
</ul>
</span>
<span class="title">
<TMPL_VAR TITLE>
</span>
</span>
<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF HAVE_ACTIONS>
<TMPL_IF HTML5><nav class="actions"><TMPL_ELSE><div class="actions"></TMPL_IF>
<ul>
<TMPL_IF EDITURL>
<TMPL_IF NAME="ISTRANSLATION">
<TMPL_ELSE>
<li><a href="<TMPL_VAR EDITURL>" rel="nofollow">Edit</a></li>
</TMPL_IF>
</TMPL_IF>
<TMPL_IF RECENTCHANGESURL>
<li><a href="<TMPL_VAR RECENTCHANGESURL>">RecentChanges</a></li>
</TMPL_IF>
<TMPL_IF HISTORYURL>
<li><a href="<TMPL_VAR HISTORYURL>">History</a></li>
</TMPL_IF>
<TMPL_IF GETSOURCEURL>
<li><a href="<TMPL_VAR GETSOURCEURL>">Source</a></li>
</TMPL_IF>
<TMPL_IF PREFSURL>
<li><a href="<TMPL_VAR PREFSURL>">Preferences</a></li>
</TMPL_IF>
<TMPL_IF ACTIONS>
<TMPL_LOOP ACTIONS>
<li><TMPL_VAR ACTION></li>
</TMPL_LOOP>
</TMPL_IF>
<TMPL_IF COMMENTSLINK>
<li><TMPL_VAR COMMENTSLINK></li>
<TMPL_ELSE>
<TMPL_IF DISCUSSIONLINK>
<li><TMPL_VAR DISCUSSIONLINK></li>
</TMPL_IF>
</TMPL_IF>
</ul>
<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_IF OTHERLANGUAGES>
<TMPL_IF HTML5><nav id="otherlanguages"><TMPL_ELSE><div id="otherlanguages"></TMPL_IF>
<ul>
<TMPL_IF ISTRANSLATABLE>
<li class="current master">
<span ><TMPL_VAR LANG_NAME>
</span>
</li>
<TMPL_ELSE>
<li class="current">
<span class="visible"><TMPL_VAR LANG_NAME>
</span>
<span class="hidden"><TMPL_VAR LANG_NAME>
(<TMPL_IF HAVE_ACTIONS><a href="<TMPL_VAR BASEURL>contribute/how/translate/" rel="nofollow">Improve translation</a></TMPL_IF>)
</span>
</li>
</TMPL_IF>
<TMPL_LOOP OTHERLANGUAGES>
<li <TMPL_IF MASTER> class="master"<TMPL_ELSE></TMPL_IF>>
<span class="visible"><a href="<TMPL_VAR URL>"><TMPL_VAR CODE></a></span>
<span class="hidden"><a href="<TMPL_VAR URL>"><TMPL_VAR LANGUAGE></a></span>
</li>
</TMPL_LOOP>
</ul>
<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_UNLESS DYNAMIC>
<TMPL_VAR TRAILS>
</TMPL_UNLESS>
<TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
<div id="pagebody">
<TMPL_IF HTML5><section<TMPL_ELSE><div</TMPL_IF> id="content" role="main">
<TMPL_VAR CONTENT>
<TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF ENCLOSURE>
<TMPL_IF HTML5><section id="enclosure"><TMPL_ELSE><div id="enclosure"></TMPL_IF>
<a href="<TMPL_VAR ENCLOSURE>">Download</a>
<TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_UNLESS DYNAMIC>
<TMPL_IF COMMENTS>
<TMPL_IF HTML5><section<TMPL_ELSE><div</TMPL_IF> id="comments" role="complementary">
<TMPL_VAR COMMENTS>
<TMPL_IF ADDCOMMENTURL>
<div class="addcomment">
<a href="<TMPL_VAR ADDCOMMENTURL>">Add a comment</a>
</div>
<TMPL_ELSE>
<div class="addcomment">Comments on this page are closed.</div>
</TMPL_IF>
<TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
</TMPL_UNLESS>
</div>
<TMPL_IF HTML5><footer<TMPL_ELSE><div</TMPL_IF> id="footer" class="pagefooter" role="contentinfo">
<TMPL_UNLESS DYNAMIC>
<TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>
<TMPL_VAR TRAILS>
<TMPL_IF TAGS>
<TMPL_IF HTML5><nav class="tags"><TMPL_ELSE><div class="tags"></TMPL_IF>
Tags:
<TMPL_LOOP TAGS>
<TMPL_VAR LINK>
</TMPL_LOOP>
<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_IF BACKLINKS>
<TMPL_IF HTML5><nav id="backlinks"><TMPL_ELSE><div id="backlinks"></TMPL_IF>
Pages linking to this one:
<TMPL_LOOP BACKLINKS>
<a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>
</TMPL_LOOP>
<TMPL_IF MORE_BACKLINKS>
<span class="popup">...
<span class="balloon">
<TMPL_LOOP MORE_BACKLINKS>
<a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>
</TMPL_LOOP>
</span>
</span>
</TMPL_IF>
<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_IF COPYRIGHT>
<div class="pagecopyright">
<a name="pagecopyright"></a>
<TMPL_VAR COPYRIGHT>
</div>
</TMPL_IF>
<TMPL_IF LICENSE>
<div class="pagelicense">
<a name="pagelicense"></a>
License: <TMPL_VAR LICENSE>
</div>
</TMPL_IF>
<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF EXTRAFOOTER><TMPL_VAR EXTRAFOOTER></TMPL_IF>
</TMPL_UNLESS>
<!-- from <TMPL_VAR WIKINAME> -->
<TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF>
<script type="text/javascript">
var linkelements = document.querySelectorAll('.use-mirror-pool');
// Avoid a traceback if mirror-dispatcher.js is not available.
if (typeof replaceUrlPrefixWithRandomMirror !== "undefined" && linkelements.length > 0) {
replaceUrlPrefixWithRandomMirror(linkelements);
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment