Commit 6832b2e6 authored by m5p3nc3r's avatar m5p3nc3r
Browse files

Update boilerplate website with code from Linaro

Replace theme with a SOAFEE specific one
Create initial index page with relevant content
parent a437b400
Pipeline #107 canceled with stage
<!--
This is the actual header for each page of the site except the homepage.
It simply shows the title of the page and includes the css/fonts found in
/layouts/chrome/header.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="{{ .Site.BaseURL }}">
<title> {{ .Title }} </title>
<link rel="canonical" href="{{ .Permalink }}">
{{ partial "head_includes.html" . }}
</head>
<!--
This is a helper file that adds previous and next links to the bottom of each
blog post. (below next and previous refer to chronological next and previous)
It will check to see if there is a previous blog post. If is, it will print
an arrow as well as the title of the previous post as a link as
left-justified text.
It will then check for a next blog post. If there is one it prints the title
of the next post with a right arrow as right justified text on the same line.
If there is ever not a next or previous post, it does nothing.
-->
<div class="container">
<hr />
<hr />
{{if .Prev}}
<span class="left">
&nbsp; <em>&laquo; Previous:</em> <a class="next" href="{{.Prev.Permalink}}">{{.Prev.Title}}</a>
</span>
{{end}}
{{if .Next}}
<span class="right">
<em>Next: </em><a class="next" href="{{.Next.Permalink}}"> &nbsp; {{ .Next.Title }}</a> &raquo;
</span>
{{end}}
</div>
<!--
This file defines the main sidebar that the user can toggle in and out of
view. This is included in every file.
Most of this was taken directly from the Lanyon example site.
Here we simply include a link to the homepage, a link to the blog posts,
and some copyright information.
-->
<!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
styles, `#sidebar-checkbox` for behavior. -->
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
<!-- Toggleable sidebar -->
<div class="sidebar" id="sidebar">
<nav class="sidebar-nav">
<a class="sidebar-nav-item" href="/">Home</a>
<a class="sidebar-nav-item" href="/posts">Blog</a>
</nav>
<div class="sidebar-item">
<p>
&copy; 2014 Spencer Lyon. Powered by <a href="https://gohugo.io">Hugo</a>. Design adapted from <a href="http://lanyon.getpoole.com">Lanyon</a>.
</p>
</div>
</div>
<!--
This file defines how a summary of a specifc post should be presented in a
list (hence the file name li.html for "list item"). This is used in the
template /layouts/indexes/posts.html
The lines of the displayed list item are as follows:
(1) The name of the post
(2) The date the post was written as left-justified text and a
right-justified horizontal list of categories for that post.
(3) The contents of the description field in the metadata of the actual
markdown source of the post.
-->
<li>
<span><h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2></span>
<span class="left">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
<span class="right">
<ul class="catlist">
{{ range .Params.categories }}
<li><a href="/categories/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
</span>
<br />
{{ .Description }}
</li>
<!--
This file is responsible for rendering a single blog post.
-->
{{ partial "header.html" . }}
<body class="theme-base-08">
{{ partial "sidebar.html" . }}
<!-- See /layouts/indexes/category.html for explanation of this section -->
<div class="wrap">
<div class="masthead">
<div class="container">
<h3 class="masthead-title">
<a href="/posts" title="Blog">Blog Posts</a>
</h3>
</div>
</div>
<!--
This is where the actual post is displayed.
We first access the title metadata field from the markdown source and
display it as a heading.
We then access the date the post was written (also in the markdown
metadata) and display a formated version of it
Finally we include the actual content of the post.
-->
<div class="container content">
<h1 class="post-title">{{ .Title }}</h1>
<section id="main">
<h5 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h5>
{{ .Content }}
</section>
</div>
</div>
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
{{ partial "prev_next.html" . }}
<br />
{{ partial "categories.html" . }}
<!-- Include footer (ends <body class="theme-base-08"> and <html>) -->
{{ partial "footer.html" }}
<!--
This file defines how a summary of a specifc post should be presented. This
is similar to the file /layouts/posts/li.html, but is meant have a bit longer
of a representation than the one in that file.
This template does the following:
(1) Shows the name of the post
(2) Shows the date the post was created (from metadata in post markdown
source)
(3) Displays a Hugo-generated summary of the post
(4) Provides a link with text Read More that points to the post
-->
<article class="post">
<header>
<h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</header>
{{ .Summary }}
<footer>
<a href='{{ .Permalink }}'><nobr>Read more →</nobr></a>
</footer>
</article>
/*
* ___
* /\_ \
* \//\ \ __ ___ __ __ ___ ___
* \ \ \ /'__`\ /' _ `\/\ \/\ \ / __`\ /' _ `\
* \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \
* /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\
* \/____/\/__/\/_/\/_/\/_/`/___/> \/___/ \/_/\/_/
* /\___/
* \/__/
*
* Designed, built, and released under MIT license by @mdo. Learn more at
* https://github.com/poole/lanyon.
*/
/*
* Contents
*
* Global resets
* Masthead
* Sidebar
* Slide effect
* Posts and pages
* Pagination
* Reverse layout
* Themes
*/
/*
* Global resets
*
* Update the foundational and global aspects of the page.
*/
/* Prevent scroll on narrow devices */
html,
body {
overflow-x: hidden;
}
html {
font-family: "PT Serif", Georgia, "Times New Roman", serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "PT Sans", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #313131;
letter-spacing: -.025rem;
}
/*
* Wrapper
*
* The wrapper is used to position site content when the sidebar is toggled. We
* use an outter wrap to position the sidebar without interferring with the
* regular page content.
*/
.wrap {
position: relative;
width: 100%;
}
/*
* Container
*
* Center the page content.
*/
.container {
max-width: 28rem;
}
@media (min-width: 38rem) {
.container {
max-width: 32rem;
}
}
@media (min-width: 56rem) {
.container {
max-width: 38rem;
}
}
/*
* Masthead
*
* Super small header above the content for site name and short description.
*/
.masthead {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 3rem;
border-bottom: 1px solid #eee;
}
.masthead-title {
margin-top: 0;
margin-bottom: 0;
color: #505050;
}
.masthead-title a {
color: #505050;
}
.masthead-title small {
font-size: 75%;
font-weight: 400;
color: #c0c0c0;
letter-spacing: 0;
}
@media (max-width: 48rem) {
.masthead-title {
text-align: center;
}
.masthead-title small {
display: none;
}
}
/*
* Sidebar
*
* The sidebar is the drawer, the item we are toggling with our handy hamburger
* button in the corner of the page.
*
* This particular sidebar implementation was inspired by Chris Coyier's
* "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
* comments by a reader. It modifies both implementations to continue using the
* checkbox (no change in URL means no polluted browser history), but this uses
* `position` for the menu to avoid some potential content reflow issues.
*
* Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
*/
/* Style and "hide" the sidebar */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: -14rem;
width: 14rem;
visibility: hidden;
overflow-y: auto;
font-family: "PT Sans", Helvetica, Arial, sans-serif;
font-size: .875rem; /* 15px */
color: rgba(255,255,255,.6);
background-color: #202020;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
@media (min-width: 30rem) {
.sidebar {
font-size: .75rem; /* 14px */
}
}
/* Sidebar content */
.sidebar a {
font-weight: normal;
color: #fff;
}
.sidebar-item {
padding: 1rem;
}
.sidebar-item p:last-child {
margin-bottom: 0;
}
/* Sidebar nav */
.sidebar-nav {
border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-nav-item {
display: block;
padding: .5rem 1rem;
border-top: 1px solid rgba(255,255,255,.1);
}
.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
text-decoration: none;
background-color: rgba(255,255,255,.1);
border-color: transparent;
}
@media (min-width: 48rem) {
.sidebar-item {
padding: 1.5rem;
}
.sidebar-nav-item {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
.sidebar-checkbox {
display: none;
}
/* Style the `label` that we use to target the `.sidebar-checkbox` */
.sidebar-toggle {
position: absolute;
top: 1rem;
left: 1rem;
display: block;
width: 2.2rem;
padding: .5rem .65rem;
color: #505050;
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.sidebar-toggle:before {
display: block;
content: "";
width: 100%;
padding-bottom: .125rem;
border-top: .375rem double;
border-bottom: .125rem solid;
/* Make the border inside the box */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sidebar-toggle:active,
#sidebar-checkbox:checked ~ .sidebar-toggle {
color: #fff;
background-color: #505050;
}
@media (min-width: 30.1rem) {
.sidebar-toggle {
position: fixed;
width: 2.25rem;
}
.sidebar-toggle:before {
padding-bottom: .15rem;
border-top-width: .45rem;
border-bottom-width: .15rem;
}
}
/* Slide effect
*
* Handle the sliding effects of the sidebar and content in one spot, seperate
* from the default styles.
*
* As an a heads up, we don't use `transform: translate3d()` here because when
* mixed with `position: fixed;` for the sidebar toggle, it creates a new
* containing block. Put simply, the fixed sidebar toggle behaves like
* `position: absolute;` when transformed.
*
* Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
*/
.wrap,
.sidebar,
.sidebar-toggle {
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.wrap,
.sidebar-toggle {
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
#sidebar-checkbox:checked + .sidebar {
visibility: visible;
}
#sidebar-checkbox:checked ~ .sidebar,
#sidebar-checkbox:checked ~ .wrap,
#sidebar-checkbox:checked ~ .sidebar-toggle {
-webkit-transform: translateX(14rem);
-ms-transform: translateX(14rem);
transform: translateX(14rem);
}
/*
* Posts and pages
*
* Each post is wrapped in `.post` and is used on default and post layouts. Each
* page is wrapped in `.page` and is only used on the page layout.
*/
.page,
.post {
margin-bottom: 4em;
}
/* Blog post or page title */
.page-title,
.post-title,
.post-title a {
color: #303030;
}
.page-title,
.post-title {
margin-top: 0;
}
/* Meta data line below post title */
.post-date {
display: block;
margin-top: -.5rem;
margin-bottom: 1rem;
color: #9a9a9a;
}
/* Related posts */
.related {
padding-top: 2rem;
padding-bottom: 2rem;
border-top: 1px solid #eee;
}
.related-posts {
padding-left: 0;
list-style: none;
}
.related-posts h3 {
margin-top: 0;
}
.related-posts li small {
font-size: 75%;
color: #999;
}
.related-posts li a:hover {
color: #268bd2;
text-decoration: none;
}
.related-posts li a:hover small {
color: inherit;
}
/*
* Pagination
*
* Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
* there are no more previous or next posts to show.
*/
.pagination {
overflow: hidden; /* clearfix */
margin-left: -1rem;
margin-right: -1rem;
font-family: "PT Sans", Helvetica, Arial, sans-serif;
color: #ccc;
text-align: center;
}
/* Pagination items can be `span`s or `a`s */
.pagination-item {
display: block;
padding: 1rem;
border: 1px solid #eee;
}
.pagination-item:first-child {
margin-bottom: -1px;
}
/* Only provide a hover state for linked pagination items */
a.pagination-item:hover {
background-color: #f5f5f5;
}
@media (min-width: 30rem) {
.pagination {
margin: 3rem 0;
}
.pagination-item {
float: left;
width: 50%;
}
.pagination-item:first-child {
margin-bottom: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination-item:last-child {
margin-left: -1px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
/*
* Reverse layout
*
* Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
* on the right side.
*/
.layout-reverse .sidebar {
left: auto;
right: -14rem;
}
.layout-reverse .sidebar-toggle {
left: auto;
right: 1rem;
}
.layout-reverse #sidebar-checkbox:checked ~ .sidebar,
.layout-reverse #sidebar-checkbox:checked ~ .wrap,
.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
-webkit-transform: translateX(-14rem);
-ms-transform: translateX(-14rem);
transform: translateX(-14rem);
}
/*
* Themes
*
* Apply custom color schemes by adding the appropriate class to the `body`.
* Based on colors from Base16: http://chriskempson.github.io/base16/#default.
*/
/* Red */
.theme-base-08 .sidebar,
.theme-base-08 .sidebar-toggle:active,
.theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
background-color: #ac4142;
}
.theme-base-08 .container a,