WIP help layout (#4)

Moved css to docs folder; fleshing out English template, then will localize for Spanish overall
This commit is contained in:
Daniel J. Summers 2019-03-02 14:47:13 +00:00
parent 2183533fed
commit 5f8f46d948
2 changed files with 72 additions and 6 deletions

View File

@ -3,16 +3,39 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }} | PrayerTracker Help</title> <title>{{ page.title }} &#xab; PrayerTracker Help</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://prayer.bitbadger.solutions/css/app.css" rel="stylesheet"> <link href="https://prayer.bitbadger.solutions/css/app.css" rel="stylesheet">
<link href="https://prayer.bitbadger.solutions/css/help.css" rel="stylesheet"> <link href="/css/help.css" rel="stylesheet">
</head> </head>
<body> <body>
<header class="pt-title-bar"> <header class="pt-title-bar">
<section class="pt-title-bar-left"><span class="pt-title-bar-home"><a href="/" title="Home">PrayerTracker Help</a></span></section> <section class="pt-title-bar-left"><span class="pt-title-bar-home"><a href="/" title="Home">PrayerTracker</a></span></section>
<section class="pt-title-bar-right">Help</section>
</header> </header>
<article class="pt-content"> <div id="pt-body">
{{ content }} <header id="pt-language">
</article> <div>
Language: English &bull;
<a href="{{ page.url | replace_first: "/en", "/es" }}">Esta pagina en español</a>
</div>
</header>
<h2 id="pt-page-title">{{ page.title }}</h2>
<div class="pt-content">
{{ content }}
<div class="pt-close-window">
<p class="pt-center-text">
<a href="#" title="Click to Close This Window" onclick="window.close();return false">
<i class="material-icons">cancel</i> Close Window
</a>
</p>
</div>
<div class="pt-help-index">
<p class="pt-center-text">
<a href="/en/" title="Help Index">&#xab; Back to Help Index</a>
</p>
</div>
</div>
</div>
</body> </body>
</html> </html>

43
docs/css/help.css Normal file
View File

@ -0,0 +1,43 @@
/**
* PrayerTracker Help styling
*/
.pt-content {
background-color: white;
padding: 0 .25em;
}
.pt-title-bar-home {
height: 2rem;
}
.pt-title-bar-left {
color: white;
font-size: 1.25rem;
font-weight: bold;
margin-left: .5rem;
}
.pt-title-bar-right {
color: white;
color: rgba(255, 255, 255, .75);
font-size: 1.1rem;
font-variant: small-caps;
margin-right: 1rem;
align-self: center;
}
h2 {
margin-top: 0;
padding-left: .5rem;
border-bottom: solid 1px #444;
}
.pt-close-window, .pt-help-index {
font-size: 1.25rem;
}
.pt-help-index {
display: none;
}
@media screen and (min-width:451px) {
.pt-close-window {
display: none;
}
.pt-help-index {
display: block;
}
}