diff --git a/config.yaml b/config.yaml new file mode 100644 index 0000000..d8bb4b7 --- /dev/null +++ b/config.yaml @@ -0,0 +1,9 @@ +--- +contentdir: "content" +layoutdir: "layouts" +publishdir: "public" +indexes: + category: "categories" +baseurl: "http://spencerlyon2.github.io/hugo_gh_blog" +title: "Hugo Blog Template for GitHub Pages" +... diff --git a/content/posts/middle.md b/content/posts/middle.md new file mode 100644 index 0000000..49c8f83 --- /dev/null +++ b/content/posts/middle.md @@ -0,0 +1,27 @@ +--- +title: "Second Post" +description: "Welcome to the second blog post." +date: "2014-03-28" +categories: + - "template" + - "second" + - "boring" +--- + +## Sample Post 1 + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +### Sub-heading + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, non, ratione, molestiae illo optio quia sequi id fuga natus nihil ad architecto dolor alias ex sunt iste aperiam eius itaque. + + +## foo + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, neque, eveniet voluptate eos debitis illum qui nostrum eius maxime ratione assumenda suscipit impedit deserunt voluptatibus odio ducimus non. Ex, ratione. diff --git a/content/posts/newest.md b/content/posts/newest.md new file mode 100644 index 0000000..d7f598e --- /dev/null +++ b/content/posts/newest.md @@ -0,0 +1,21 @@ +--- +title: "Just another sample post" +description: "This should be a more useful description" +date: "2014-03-29" +categories: + - "hugo" + - "fun" + - "test" +--- + +## First Heading + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, consequatur aspernatur omnis iste. Voluptates, id inventore ea natus ab sed amet ipsa ratione sunt dignissimos. Soluta illum aliquid repellendus recusandae. + +### Sub + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, perferendis saepe voluptatem a nesciunt architecto voluptas deleniti dolor tempora quasi quidem odit rem fugit magnam minima quam dolores vel id? + +## Conclusion + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, numquam ipsa ad! Quasi, deleniti quae sint consequatur error corporis dicta inventore alias soluta dignissimos? Molestias, quia ab deserunt repellat ut. diff --git a/content/posts/oldest.md b/content/posts/oldest.md new file mode 100644 index 0000000..4690a89 --- /dev/null +++ b/content/posts/oldest.md @@ -0,0 +1,28 @@ +--- +title: "First Post" +description: "Placeholder: voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +date: "2014-03-27" +categories: + - "test" + - "blah" +--- + +## Sample Post 1 + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +### Sub-heading + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, non, ratione, molestiae illo optio quia sequi id fuga natus nihil ad architecto dolor alias ex sunt iste aperiam eius itaque. + + +## foo + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, neque, eveniet voluptate eos debitis illum qui nostrum eius maxime ratione assumenda suscipit impedit deserunt voluptatibus odio ducimus non. Ex, ratione. diff --git a/layouts/chrome/categories.html b/layouts/chrome/categories.html new file mode 100644 index 0000000..d6c03c6 --- /dev/null +++ b/layouts/chrome/categories.html @@ -0,0 +1,9 @@ +{{ $baseurl := .Site.BaseUrl }} +
+ +
diff --git a/layouts/chrome/footer.html b/layouts/chrome/footer.html new file mode 100644 index 0000000..fe4d710 --- /dev/null +++ b/layouts/chrome/footer.html @@ -0,0 +1,12 @@ +
+ +
+ + + diff --git a/layouts/chrome/head_includes.html b/layouts/chrome/head_includes.html new file mode 100644 index 0000000..e12b64d --- /dev/null +++ b/layouts/chrome/head_includes.html @@ -0,0 +1,4 @@ + + + + diff --git a/layouts/chrome/header.html b/layouts/chrome/header.html new file mode 100644 index 0000000..08a1314 --- /dev/null +++ b/layouts/chrome/header.html @@ -0,0 +1,9 @@ + + + + + + {{ .Title }} + + {{ template "chrome/head_includes.html" . }} + diff --git a/layouts/chrome/prev_next.html b/layouts/chrome/prev_next.html new file mode 100644 index 0000000..c262653 --- /dev/null +++ b/layouts/chrome/prev_next.html @@ -0,0 +1,15 @@ +
+
+
+ + {{if .Prev}} +   « Previous: + {{end}} + + + + {{if .Next}} + Next: » + {{end}} + +
diff --git a/layouts/chrome/sidebar.html b/layouts/chrome/sidebar.html new file mode 100644 index 0000000..a43a9a9 --- /dev/null +++ b/layouts/chrome/sidebar.html @@ -0,0 +1,19 @@ + + + + + diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..d200629 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,57 @@ + + + + + + {{ .Site.Title }} + + + + {{ template "chrome/head_includes.html" . }} + + + + {{ template "chrome/sidebar.html" . }} + + +
+
+
+

+ Home +

+
+
+ +
+

This is a Blog

+ +

Welcome to my blog!

+ +

This is really just a barebones website to stand as a template for creating a blog that is statically generated by Hugo and hosted at on GitHub via GitHub Pages.

+ +

I am using a slightly modified version of the Lanyon Jekyll theme. I think it is very simple, clean, and elegant.

+ + +

About me

+ +

Sometimes people have an "About me" section on the homepage of their website.

+ +

It might even include a picture:

+ + +

Recent Posts

+
+
    + {{ range first 10 .Data.Pages }} + {{ .Render "summary"}} + {{ end }} +
+
+
+
+ + + +{{ template "chrome/footer.html" }} diff --git a/layouts/indexes/category.html b/layouts/indexes/category.html new file mode 100644 index 0000000..44bb731 --- /dev/null +++ b/layouts/indexes/category.html @@ -0,0 +1,36 @@ +{{ template "chrome/header.html" . }} + + + {{ template "chrome/sidebar.html" . }} + +
+
+
+

+ Blog Posts +

+
+
+ +
+

Recent Posts

+
+
+
Full Category Index
+

Posts in “{{ .Title }}”

+ {{ range .Data.Pages }} + {{ .Render "summary"}} + {{ end }} +
+
+ +
+
+ + + + + {{ template "chrome/footer.html" }} + + + diff --git a/layouts/indexes/indexes.html b/layouts/indexes/indexes.html new file mode 100644 index 0000000..6b0de06 --- /dev/null +++ b/layouts/indexes/indexes.html @@ -0,0 +1,37 @@ +{{ template "chrome/header.html" . }} + + + {{ template "chrome/sidebar.html" . }} + +
+
+
+

+ Blog Posts +

+
+
+ +
+

Recent Posts

+
+
+

Archive of Posts, by {{ .Data.Singular }}

+
    + {{ $data := .Data }} + {{ range $key,$value := .Data.Index.ByCount }} +
  • {{ $value.Name }} ({{ $value.Count }} entries)
    • + {{ end }} +
+
+
+
+
+ + + + + {{ template "chrome/footer.html" }} + + + diff --git a/layouts/indexes/posts.html b/layouts/indexes/posts.html new file mode 100644 index 0000000..b441a70 --- /dev/null +++ b/layouts/indexes/posts.html @@ -0,0 +1,35 @@ +{{ template "chrome/header.html" . }} + + + {{ template "chrome/sidebar.html" . }} + +
+
+
+

+ Blog Posts +

+
+
+ +
+ +

Here are all my blog posts, in descending order by creation date. If you would like to view them by topic, see the Categories page.

+

All Blog Posts (By Date)

+
+
    + {{ range .Data.Pages }} + {{ .Render "li"}} + {{ end }} +
+
+
+
+ + + + + {{ template "chrome/footer.html" }} + + + diff --git a/layouts/posts/li.html b/layouts/posts/li.html new file mode 100644 index 0000000..272b7c6 --- /dev/null +++ b/layouts/posts/li.html @@ -0,0 +1,16 @@ +{{ $baseurl := .Site.BaseUrl }} + +
  • +

    {{ .Title }}

    + {{ .Date.Format "Mon, Jan 2, 2006" }} + + + + +
    + {{ .Description }} +
    • diff --git a/layouts/posts/single.html b/layouts/posts/single.html new file mode 100644 index 0000000..1633afa --- /dev/null +++ b/layouts/posts/single.html @@ -0,0 +1,35 @@ +{{ template "chrome/header.html" . }} + + + {{ template "chrome/sidebar.html" . }} + +
    +
    +
    +

    + Blog Posts +

    +
    +
    + +
    +

    {{ .Title }}

    +
    +
    {{ .Date.Format "Mon Jan 2, 2006" }}
    +
    + {{ .Content }} +
    +
    + + + + {{ template "chrome/prev_next.html" . }} +
    + {{ template "chrome/categories.html" . }} + + + + {{ template "chrome/footer.html" }} + + + diff --git a/layouts/posts/summary.html b/layouts/posts/summary.html new file mode 100644 index 0000000..dfada6d --- /dev/null +++ b/layouts/posts/summary.html @@ -0,0 +1,11 @@ +
    +
    +

    {{ .Title }}

    +
    {{ .Date.Format "Mon, Jan 2, 2006" }}
    +
    + + {{ .Summary }} + +
    diff --git a/static/css/lanyon.css b/static/css/lanyon.css new file mode 100644 index 0000000..721c9d3 --- /dev/null +++ b/static/css/lanyon.css @@ -0,0 +1,527 @@ +/* + * ___ + * /\_ \ + * \//\ \ __ ___ __ __ ___ ___ + * \ \ \ /'__`\ /' _ `\/\ \/\ \ / __`\ /' _ `\ + * \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \ + * /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\ + * \/____/\/__/\/_/\/_/\/_/`/___/> \/___/ \/_/\/_/ + * /\___/ + * \/__/ + * + * 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, +.theme-base-08 .sidebar-toggle, +.theme-base-08 .related-posts li a:hover { + color: #ac4142; +} + +/* Orange */ +.theme-base-09 .sidebar, +.theme-base-09 .sidebar-toggle:active, +.theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #d28445; +} +.theme-base-09 .container a, +.theme-base-09 .sidebar-toggle, +.theme-base-09 .related-posts li a:hover { + color: #d28445; +} + +/* Yellow */ +.theme-base-0a .sidebar, +.theme-base-0a .sidebar-toggle:active, +.theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #f4bf75; +} +.theme-base-0a .container a, +.theme-base-0a .sidebar-toggle, +.theme-base-0a .related-posts li a:hover { + color: #f4bf75; +} + +/* Green */ +.theme-base-0b .sidebar, +.theme-base-0b .sidebar-toggle:active, +.theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #90a959; +} +.theme-base-0b .container a, +.theme-base-0b .sidebar-toggle, +.theme-base-0b .related-posts li a:hover { + color: #90a959; +} + +/* Cyan */ +.theme-base-0c .sidebar, +.theme-base-0c .sidebar-toggle:active, +.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #75b5aa; +} +.theme-base-0c .container a, +.theme-base-0c .sidebar-toggle, +.theme-base-0c .related-posts li a:hover { + color: #75b5aa; +} + +/* Blue */ +.theme-base-0d .sidebar, +.theme-base-0d .sidebar-toggle:active, +.theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #6a9fb5; +} +.theme-base-0d .container a, +.theme-base-0d .sidebar-toggle, +.theme-base-0d .related-posts li a:hover { + color: #6a9fb5; +} + +/* Magenta */ +.theme-base-0e .sidebar, +.theme-base-0e .sidebar-toggle:active, +.theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #aa759f; +} +.theme-base-0e .container a, +.theme-base-0e .sidebar-toggle, +.theme-base-0e .related-posts li a:hover { + color: #aa759f; +} + +/* Brown */ +.theme-base-0f .sidebar, +.theme-base-0f .sidebar-toggle:active, +.theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #8f5536; +} +.theme-base-0f .container a, +.theme-base-0f .sidebar-toggle, +.theme-base-0f .related-posts li a:hover { + color: #8f5536; +} diff --git a/static/css/poole.css b/static/css/poole.css new file mode 100644 index 0000000..5c362cb --- /dev/null +++ b/static/css/poole.css @@ -0,0 +1,396 @@ +/* + * ___ + * /\_ \ + * _____ ___ ___\//\ \ __ + * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ + * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ + * \ \ ,__/\ \____/\ \____//\____\ \____\ + * \ \ \/ \/___/ \/___/ \/____/\/____/ + * \ \_\ + * \/_/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/poole. + */ + + +/* + * Contents + * + * Body resets + * Custom type + * Messages + * Container + * Masthead + * Posts and pages + * Reverse layout + * Themes + */ + + +/* + * Body resets + * + * Update the foundational and global aspects of the page. + */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; +} +@media (min-width: 38rem) { + html { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* No `:visited` state is required by default (browsers will use `a`) */ +a { + color: #268bd2; + text-decoration: none; +} +/* `:focus` is linked to `:hover` for basic accessibility */ +a:hover, +a:focus { + text-decoration: underline; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-weight: bold; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; +} +h1 { + font-size: 2rem; +} +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} +h4, h5, h6 { + font-family: "ff-meta-web-pro", "Helvetica Neue", "Helvetica", Arial, sans-serif; + margin-top: 1rem; + font-size: 1rem; +} + +/* Body text */ +p { + margin-top: 0; + margin-bottom: 1rem; +} + +strong { + color: #303030; +} + +/* Lists */ +ul, ol, dl { + margin-top: 0; + padding-left: 0; + margin-bottom: 1rem; + list-style-type: none; +} + + + +dt { + font-weight: bold; +} +dd { + margin-bottom: .5rem; +} + +/* Misc */ +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; + text-transform: uppercase; +} +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + + +mono, tt, code, pre { + font-family: PragmataPro, Menlo, Monaco, "Andale Mono", "Lucida Console", "Courier New", monospace } +code { + padding: .25em .5em; + font-size: 85%; + color: #bf616a; + background-color: #f9f9f9; + border-radius: 3px; +} +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 1rem; + font-size: .8rem; + line-height: 1.4; + white-space: pre; + overflow: auto; + background-color: #f9f9f9; +} +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +/* Quotes */ +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; +} +blockquote p:last-child { + margin-bottom: 0; +} +@media (min-width: 30rem) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + border-radius: 5px; + height: auto; + width:100%; +} + +.fpimg { + padding-bottom: 2rem; +} + +.lbg { + display: inline; + width: auto; + padding-left: 1rem; +} + + +.right { + float: right; + margin-left: 1rem; +} + +.left { + float: left; + margin-right: 1rem; +} + +.center { + float: center; +} + +/* Tables */ +table { + margin-bottom: 1rem; + width: 100%; + border-top: 1px solid #e5e5e5; + border-bottom: 1px solid #e5e5e5; + border-collapse: collapse; +} +td, +th { + padding: .25rem .5rem; + /* border: 1px solid #e5e5e5; */ +} +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} + + +/* + * Custom type + * + * Extend paragraphs with `.lead` for larger introductory text. + */ + +.lead { + font-size: 1.25rem; + font-weight: 300; +} + +.front { + margin-bottom: 500px; +} + +.credit { + padding-top: 3rem; + font-size: small; +} + + +ul.category {text-transform: capitalize;} +ul.category li {margin-bottom: 1rem;} + +ul.catlist { list-style: none; margin: 0; padding: 0; } +ul.catlist li { display: inline; } +ul.catlist li:after { content: "・"; } +ul.catlist li:last-child:after { content: ""; } + +/* This gets Google to fall into place */ +.social { + font-size: 1px; + padding-bottom: 2rem; + padding-top: 0; +} + +/* From https://gist.github.com/thebigreason/1296097 */ +/* This gets Facebook to fall into place */ +.social iframe { + vertical-align: bottom; +} + +/* Set an optional width for your button wrappers */ +.social span { + display: inline-block; + width: 110px; +} + +/* + * Messages + * + * Show alert messages to users. You may add it to single elements like a `

    `, + * or to a parent if there are multiple elements to show. + */ + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: #f9f9f9; +} + + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 38rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; +} +.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; +} + + +/* + * 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; +} + +/* Archive list */ + +.archive h3 { + margin-top:0; + padding-bottom: 0; +} + diff --git a/static/css/syntax.css b/static/css/syntax.css new file mode 100644 index 0000000..1264b87 --- /dev/null +++ b/static/css/syntax.css @@ -0,0 +1,66 @@ +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; }