diff options
-rw-r--r-- | sass/style.scss | 158 | ||||
-rw-r--r-- | templates/index.html | 8 | ||||
-rw-r--r-- | templates/macros.html | 39 | ||||
-rw-r--r-- | templates/page.html | 6 | ||||
-rw-r--r-- | templates/post.html | 12 | ||||
-rw-r--r-- | templates/section.html | 28 |
6 files changed, 150 insertions, 101 deletions
diff --git a/sass/style.scss b/sass/style.scss index 1645ee2..c6004b8 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -16,6 +16,34 @@ html { background-color: var(--fg); } +ul.simple { + list-style: none; +} + +a { + color: var(--aqua); + + &:visited { + color: var(--aqua-dim); + } + + &:hover { + text-decoration: none; + } + + &:active { + background: var(--orange-dim); + } +} + +nav a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + body { height: 100%; width: 100%; @@ -25,86 +53,88 @@ body { margin: 0 auto 1; line-height: 1.4; align-self: center; -} - -body > header > nav { - display: flex; - - h1 { - display: flex; - } - ul { + & > header > nav { display: flex; - margin-left: auto; - column-gap: 1rem; - list-style: none; - - li { + & > * { display: flex; align-items: center; } - } - - a, - a:visited { - font-size: 1.2rem; - color: var(--gray); - font-weight: bold; - text-decoration: none; - } - - a.active { - color: var(--orange-dim); - } - a:hover { - text-decoration: underline; - } -} + & > ul { + margin-left: auto; + column-gap: 1rem; + list-style: none; -article, -aside, -main, -nav, -section { - header { - h1 { - color: var(--orange); - margin-bottom: 0; - + * { - color: var(--gray-dim); - margin-top: 0; + & > li { + display: flex; + align-items: center; } } - nav { - text-align: left; - font-size: 0.9rem; - margin-bottom: 2rem; + a, + a:visited { + font-size: 1.2rem; + color: var(--gray); + font-weight: bold; + + &.active { + color: var(--orange-dim); + } } } -} -footer { - text-align: center; - font-size: 0.8rem; - margin-top: auto; -} + article, + aside, + main, + nav, + section { + & > header { + & > hgroup > { + :first-child { + color: var(--orange); + margin-bottom: 0; + } + + :not(:first-child) { + color: var(--gray-dim); + margin-top: 0; + margin-bottom: 0; + } + } -a { - color: var(--aqua); -} + & > footer { + color: var(--gray); + font-size: 0.8rem; -a:visited { - color: var(--aqua-dim); -} + & > * { + display: inline; + } -a:hover { - text-decoration: none; -} + & > time { + text-decoration: underline; + } + } + + & > nav { + text-align: left; + font-size: 0.9rem; + } + } + + & > ul > li > article a { + color: var(--blue); -a:active { - background: var(--orange-dim); + a:visited { + color: var(--blue-dim); + } + } + } + + & > footer { + text-align: center; + font-size: 0.8rem; + margin-top: auto; + } } diff --git a/templates/index.html b/templates/index.html index 1f2d933..9e61436 100644 --- a/templates/index.html +++ b/templates/index.html @@ -26,7 +26,7 @@ <body> <header> <nav> - <h1>{{ macros::nav_item(name=config.title, url=config.base_url) }}</h1> + <span>{{ macros::nav_item(name=config.title, url=config.base_url) }}</span> <ul> <li>{{ macros::nav_item(name="Projects",url=get_url(path="@/projects.md") ) }}</li> <li>{{ macros::nav_item(name="Posts",url=get_url(path="@/posts/_index.md") ) }}</li> @@ -37,8 +37,10 @@ <main> {% block content %} <header> - <h1>{{ section.title | safe }}</h1> - <h3>{{ section.description | default(value="") | markdown(inline=true) | safe }}</h3> + <hgroup> + <h1>{{ section.title | safe }}</h1> + <p>{{ section.description | default(value="") | markdown(inline=true) | safe }}</p> + </hgroup> </header> {{ section.content | safe }} {% endblock content %} diff --git a/templates/macros.html b/templates/macros.html index 12591b5..a2376ca 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -18,15 +18,44 @@ {% endif %} </li> {% endmacro %} -{% macro toc(page) %} - {% if page.toc %} - {%- set len = page.toc | length -%} - {% endif %} +{% macro toc(toc) %} + {%- set len = toc | length -%} {% if len > 1 %} - <nav class="toc"> + <nav> <ul> {% for child in page.toc %}{{ self::toc_item(item=child) }}{% endfor %} </ul> </nav> {% endif %} {% endmacro %} +{% if page.summary %} + <p>{{ page.summary | safe }}</p> + <a href="{{ page.permalink }}#continue-reading">...</a> +{% endif %} +{% macro post_header(page_ref=false) %} + {% set page = page_ref | default(value=page) %} + <header> + <hgroup> + <h1> + {%- if page_ref -%} + <a href="{{ page.permalink }}">{{ page.title | safe }}</a> + {% else %} + {{ page.title | safe }} + {%- endif -%} + </h1> + <p>{{ page.description | default(value="") | markdown(inline=true) | safe }}</p> + </hgroup> + <footer> + Posted on + <time pubdate datetime="{{ page.date | date(format="%Y-%m-%d") }}">{{ page.date | date(format="%d %b %Y") }}</time> + by + <address class="author"> <a rel="author" href="{{ config.base_url }}">{{ config.extra.author }}</a></address> + </footer> + </header> + {% if page_ref and page.summary %} + <p>{{ page.summary | safe }}</p> + <a href="{{ page.permalink }}#continue-reading">...</a> + {% else %} + {{ self::toc(toc=page.toc) }} + {% endif %} +{% endmacro %} diff --git a/templates/page.html b/templates/page.html index 350652a..3920e5e 100644 --- a/templates/page.html +++ b/templates/page.html @@ -2,8 +2,10 @@ {% extends "index.html" %} {% block content %} <header> - <h1>{{ page.title | safe }}</h1> - <h3>{{ page.description | default(value="") | markdown(inline=true) | safe }}</h3> + <hgroup> + <h1>{{ page.title | safe }}</h1> + <p>{{ page.description | default(value="") | markdown(inline=true) | safe }}</p> + </hgroup> </header> {{ page.content | safe }} {% endblock content %} diff --git a/templates/post.html b/templates/post.html index 0dd3bbb..bda1e03 100644 --- a/templates/post.html +++ b/templates/post.html @@ -1,14 +1,6 @@ -{% import "macros.html" as macros -%} +{% import "macros.html" as macros %} {% extends "index.html" %} {% block content %} - <header> - <h1 id="title">{{ page.title }}</h1> - {% if page.date %} - <time datetime="{{ page.date | date(format="%Y-%m-%d") }}"> - {{ page.date | date(format="%d %b %Y") }} - </time> - {% endif %} - </header> - {{ macros::toc(page=page) }} + {{ macros::post_header() }} {{ page.content | safe }} {% endblock content %} diff --git a/templates/section.html b/templates/section.html index 57fe0aa..880f421 100644 --- a/templates/section.html +++ b/templates/section.html @@ -1,23 +1,17 @@ {% extends "index.html" %} {% block content %} {{ super() }} - <div> + <ul class="simple"> {% for page in section.pages %} - <article> - <div> - <h2> - <a href="{{ page.permalink }}">{{ page.title }}</a> - - - <time datetime="{{ page.date | date(format="%Y-%m-%d") }}"> - {{ page.date | date(format="%d %b %Y") }} - </time> - </h2> - </div> - {% if page.summary %} - <p>{{ page.summary | safe }}</p> - <a href="{{ page.permalink }}#continue-reading">...</a> - {% endif %} - </article> + <li> + <article> + {{ macros::post_header(page_ref=page) }} + {% if page.summary %} + <p>{{ page.summary | safe }}</p> + <a href="{{ page.permalink }}#continue-reading">...</a> + {% endif %} + </article> + </li> {% endfor %} - </div> + </ul> {% endblock content %} |