<|start_filename|>templates/blog/articles.html<|end_filename|>
{% extends "base/base.html" %}



{# ===== Header style and image ===== #}

{% block header_class %}
    header-small
{% endblock %}

{% block header_background %}
    {{ url_for('static', filename='images/maciphone.jpg') }}
{% endblock %}



{# ===== Header content ===== #}

{% block header_content %}
    <h1 class="header-title">The Blog</h1>
    <h2 class="header-subtitle">All articles</h2>
{% endblock %}



{# ===== Content ===== #}

{% block page_content %}
    <h1>All articles by year</h1>
    {% for year, articles in pages %}
        <h2>{{year}}</h2>
        <ul>
        {% for article in articles %}
            <li><a href="{{ url_for('page', path=article.path) }}">{{ article.title }}</a></li>
        {% endfor %}
        </ul>
    {% else %}
        <h2>No content</h2>
    {% endfor %}
    <hr />
{% endblock %}


<|start_filename|>templates/base/404.html<|end_filename|>
{% extends "base/base.html" %}



{# ===== Header style and image ===== #}

{% block header_class %}
    header-small
{% endblock %}

{% block header_background %}
    {{ url_for('static', filename='images/pier_bw.jpg') }}
{% endblock %}



{# ===== Header content ===== #}

{% block header_content %}
    <h1 class="header-title">Oh oh</h1>
    <h2 class="header-subtitle">404</h2>
{% endblock %}



{# ===== Content ===== #}

{% block page_content %}
    <h1>The page you requested could not be found!</h1>
{% endblock %}


<|start_filename|>templates/pages/index.html<|end_filename|>
<!--

 This template is only called when the browser hits '/' (check 'def index()' in site.py)
 It includes two header buttons but you can safely remove them, and the other difference
 for a regular page template is the header_class which is set to 'header-large'.

-->

{% extends "base/base.html" %}



{# ===== Header style and image ===== #}

{% block header_class %}
    header-large
{% endblock %}

{% block header_background %}
    {{ page.image }}
{% endblock %}



{# ===== Header content ===== #}

{% block header_content %}
    <h1 class="header-title">{{ page.title }}</h1>
    <h2 class="header-subtitle">{{ page.subtitle }}</h2>

    <!-- You can add buttons, or any HTML content to the header -->
    <a class="button button-header" href="{{ url_for('page', path='about') }}">ABOUT</a>
    &nbsp;
    <a class="button button-header" href="{{ url_for('page', path='contact') }}">CONTACT</a>
{% endblock %}



{# ===== Page content ===== #}

{% block page_content %}
    {{ page.html|safe }}
{% endblock %}


<|start_filename|>templates/pages/page.html<|end_filename|>
<!--

 This is the regular page template which is called when accessing
 any web page. Check the implementation of 'def page(path)' in site.py

-->

{% extends "base/base.html" %}



{# ===== Header style and image ===== #}

{% block header_class %}
    header-small
{% endblock %}

{% block header_background %}
    {{ page.image }}
{% endblock %}



{# ===== Header content ===== #}

{% block header_content %}
    <h1 class="header-title">{{ page.title }}</h1>
    <h2 class="header-subtitle">{{ page.subtitle }}</h2>
{% endblock %}



{# ===== Page content ===== #}

{% block page_content %}
    {{ page.html|safe }}
{% endblock %}


<|start_filename|>templates/base/base.html<|end_filename|>
<!DOCTYPE html>
<html>
<head>
    <title>Flask-static-site</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">

    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/extras.css') }}">

    <!-- Remove pygments if you don't need to highlight source code -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('pygments_css') }}">

    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
</head>

<body>

    <!-- Navbar -->
    {% include 'base/navbar.html' %}

    <!-- Header -->
    {% with template = self %}
        {% include 'base/header.html' %}
    {% endwith %}

    <!-- Content -->
    {% with template = self %}
        {% include 'base/section.html' %}
    {% endwith %}

    <!-- Comment section -->
    {% if comments is defined %}
        {% include 'base/comments.html' %}
    {% endif %}

    <!-- Footer -->
    {% include 'base/footer.html' %}

</body>
</html>


<|start_filename|>static/styles/style.css<|end_filename|>
/******************************/
/*        PAGE LAYOUT         */
/******************************/

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    color: #000;
}

nav, header, section, footer {
    display: block;
}

hr {
    margin: 50px 0;
    border: none;
    height: 1px;
    background-color: #ccc;
}

h1, h2, h3 {
    font-weight: normal;
}

img {
    max-width: 100%;
}

* {
    box-sizing: border-box;
}



/******************************/
/*         CONTAINERS         */
/******************************/

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.center {
    text-align: center;
}

.isolated {
    margin: 50px 50px;
}



/******************************/
/*           NAVBAR           */
/******************************/

.navbar {
    position: absolute;
    width: 100%;
    margin: 0;
    min-height: 50px;
    border: 1px solid #ccc;
    border-width: 0 0 1px;
    background-color: rgba(255,255,255,0.95);
    font-size: 15px;
    z-index: 10;
}

.navbar a {
    color: #000;
}

/* Navbar containers */

.navbar-container {
    padding-left: 20px;
    padding-right: 20px;
}

.navbar-left {
    float: left;
    margin-top: 10px;
}

.navbar-right {
    margin-top: 0px;
    float: right;
}

/* Left-side content */

#logo-image {
    float: left;
    width: 30px;
    height: 30px;
}

#logo-image svg {
    stroke: orange;
}

#logo-name {
    float: right;
    font-size: 22px;
    margin-left: 14px;
    margin-top: -2px;
}

/* Right-side content */

.navbar-list {
 	list-style-type: none;
}

.navbar-list li {
    float: left;
 	margin-left: 30px;
}

.navbar-list a {
    text-decoration: none;
    padding-bottom: 1px;
}

.navbar-list a:hover {
    color: orange;
}

.menu-selected {
    border-bottom: solid 2px orange;
    color: orange;
}

/* Submenus */

.navbar-expand {

}

.navbar-sublist {
    display: none;
    position: absolute;
    background-color: rgba(255,255,255,0.95);
    list-style-type: none;
    margin-top: 0px;
    margin-left: -10px;
    border: 1px solid black;
}

.navbar-expand:hover > .navbar-sublist {
    display: inherit;
}

.navbar-sublist li {
    display: list-item;
    min-width: 170px;
    float:none;
    position: relative;
    margin-left: -20px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}



/******************************/
/*           HEADER           */
/******************************/

header {
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: black;
    width: 100%;
    color: white;
}

/* Header style and image */

.header-large {
    /*min-height: 100%;
    height: 100%;*/
    height: 650px;
}

.header-small {
    height: 550px;
}

.header-smaller {
    height: 500px;
}

.mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

/* Header content */

.header-content {
    position: absolute;
    width: 100%;
    top: 50%;
    padding: 0px 50px;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.header-content-inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px;
}

.header-title {
    font-size: 62px;
    line-height: 1.1;
}

.header-subtitle {
    font-size: 32px;
    color: #ffe0b2;
}

/* Media Modifiers */

@media all and (max-width: 750px) {
    .header-large {
        height: 450px;
    }

    .header-small {
        height: 350px;
    }

    .header-smaller {
        height: 300px;
    }

    .header-title {
        font-size: 42px;
    }
}



/******************************/
/*        PAGE CONTENT        */
/******************************/

section {
    height: auto;
    color: rgba(20,20,20,1);
    line-height: 1.6;
}

.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
}

@media all and (max-width: 500px) {
    .page-container {
        padding: 20px;
    }
}

section a {
    color: #000;
}

section h1 {
    text-align: center;
}



/******************************/
/*        BLOG SPECIFIC       */
/******************************/

.blog-image {
    text-align: center;
    margin: 50px 50px;
}

.blog-image p {
    font-style: italic;
}


.codehilite {
    line-height: 1.2;
    background-color: #efefef;
    padding: 5px;
    color: black;
    white-space: pre-wrap;  /* CSS3 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    word-wrap: break-word;   /* IE 5.5+ */
    font-size: 14px;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
        DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
        monospace,serif;
    width: 100%;
}



/******************************/
/*           FOOTER           */
/******************************/

footer {
    background-color: #1f1f1f;
    font-size: 13px;
    color: white;
    text-align: center;
    letter-spacing: 1px;
}

/* Footer message */

.footer-message {
    padding: 20px 0 0 0;
    margin: 0;
}

.footer-message li {
    list-style-type: none;
    margin: 5px 0px;
}

/* Social icons */

.social-link:hover .social-icon-background {
    fill: rgba(255,183,77,0.9);
}

.social-icon {
    width: 40px;
    height: 40px;
    margin: 0px 5px;
}

.social-icon-glyph {
    fill: black;
}

.social-icon-background {
    fill: white;
    transition: fill 0.3s ease;
}



/******************************/
/*          BUTTONS           */
/******************************/

.button {
    font-size: 13px;
    letter-spacing: 1px;
    border: 2px solid black;
    text-align: center;
    padding: 14px 36px;
    transition: background-color 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    background-color: rgba(255,183,77,0.3);
}

.button-header {
    font-size: 16px;
    border-color: white;
    color: white;
}


<|start_filename|>templates/blog/page.html<|end_filename|>
{% extends "base/base.html" %}



{# ===== Header style and image ===== #}

{% block header_class %}
    header-smaller
{% endblock %}

{% block header_background %}
    {{ page.image }}
{% endblock %}



{# ===== Header content ===== #}

{% block header_content %}
    <h1 class="header-title">The Blog</h1>
    <h2 class="header-subtitle"></h2>
{% endblock %}



{# ===== Page content ===== #}

{% block page_content %}
    <h1>{{ page.title }}</h1>
    {% if not page.static %}
        <p class="center isolated">
            Published {{ page.date.strftime('%B %d, %Y') }}
        </p>
    {% endif %}
    {{ page.html|safe }}
{% endblock %}



{# ===== Use comments ===== #}

{% if not page.static %}
    {% set comments = True %}
{% endif %}


<|start_filename|>templates/blog/index.html<|end_filename|>
{% extends "base/base.html" %}



{# ===== Header style and image ===== #}

{% block header_class %}
    header-small
{% endblock %}

{% block header_background %}
    {{ url_for('static', filename='images/maciphone.jpg') }}
{% endblock %}



{# ===== Header content ===== #}

{% block header_content %}
    <h1 class="header-title">The Blog</h1>
    <a class="button button-header" href="{{ url_for('page', path='blog/articles') }}">ALL ARTICLES</a>
{% endblock %}



{# ===== Content ===== #}

{% block page_content %}
    <br />

    {% for page in pages %}
        <h1><a href="{{ url_for('page', path=page.path) }}">{{ page.title }}</a></h1>
        <p class="center">{{ page.date.strftime('%B %d, %Y') }}</p>
        <p>{{page.summary}}</p>
        <br />
    {% else %}
        <h1>No content</h1>
    {% endfor %}

    <hr />
    <div class="center isolated">
        <a class="button" href="{{ url_for('page', path='blog/articles') }}">ALL ARTICLES</a>
    </div>
{% endblock %}


<|start_filename|>templates/base/footer.html<|end_filename|>
<!--

 This footer contains a list of social icons and a footer message.
 There's some icons in this example, but there are more. Check the
 contents of static/images/social-accounts.svg (with a Text Editor)
 to get the names of other icons.

 The url and links are rendered using a flask 'macro' to save a lot
 of manual labour.

-->

<!-- Social links macro -->

{% macro social_link(href, glyph) %}
    <a style="text-decoration: none" class="social-link" target="_blank" href="{{ href }}">
        <svg class="social-icon" viewBox="0 0 64 64">
            <use class="social-icon-background" xlink:href="/static/images/social-accounts.svg#background"></use>
            <use class="social-icon-glyph" xlink:href="/static/images/social-accounts.svg#{{ glyph }}"></use>
        </svg>
    </a>
{% endmacro %}



<!-- Footer -->

<footer>
    <div class="page-container">
        <div id="social-links">
            <!-- Email -->
            {{ social_link("mailto:<EMAIL>", "email-icon") }}
            <!-- Facebook -->
            {{ social_link("https://www.facebook.com/myfacebook", "facebook-icon") }}
            <!-- Github -->
            {{ social_link("https://github.com/myaccount", "github-icon") }}
        </div>
        <ul class="footer-message">
            <li>RENDERED GRACIOUSLY BY FLASK-STATIC-SITE</li>
        </ul>
    </div>
</footer>


<|start_filename|>static/styles/extras.css<|end_filename|>
/*****************************/
/*       CODE HILITE         */
/*****************************/

.codehilite pre {
    font-size: 1em;
    line-height: 1.4em;
    overflow-x: scroll;
}
