diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/base.html | 24 | ||||
| -rw-r--r-- | templates/layouts/categorized_list.html | 84 | ||||
| -rw-r--r-- | templates/layouts/index.html | 88 | ||||
| -rw-r--r-- | templates/layouts/list.html | 68 | ||||
| -rw-r--r-- | templates/layouts/page.html | 16 |
5 files changed, 97 insertions, 183 deletions
diff --git a/templates/base.html b/templates/base.html index 5542401..554651d 100644 --- a/templates/base.html +++ b/templates/base.html | |||
| @@ -45,21 +45,17 @@ | |||
| 45 | 45 | ||
| 46 | <body> | 46 | <body> |
| 47 | <nav class="c-header"> | 47 | <nav class="c-header"> |
| 48 | <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$"> | 48 | <a class="c-header__item c-header__item--icon" href="/" title="$site.title$"> |
| 49 | <span class="c-outer-button__icon"> | 49 | <svg class="c-header__icon"> |
| 50 | <svg class="c-outer-button__icon-symbol"> | 50 | <use href="/symbols.svg#logo"></use> |
| 51 | <use href="/symbols.svg#logo"></use> | 51 | </svg> |
| 52 | </svg> | ||
| 53 | </span> | ||
| 54 | </a> | 52 | </a> |
| 55 | $if(namespace.root.is_index)$ | 53 | $if(namespace.root.is_index)$ |
| 56 | $else$ | 54 | $else$ |
| 57 | $for(menus.main.items)$ | 55 | $for(menus.main.items)$ |
| 58 | $if(it.active)$ | 56 | $if(it.active)$ |
| 59 | <a class="c-outer-button" href="$it.url$"> | 57 | <a class="c-header__item" href="$it.url$"> |
| 60 | <span class="c-outer-button__content"> | 58 | $it.label$ |
| 61 | $it.label$ | ||
| 62 | </span> | ||
| 63 | </a> | 59 | </a> |
| 64 | $endif$ | 60 | $endif$ |
| 65 | $endfor$ | 61 | $endfor$ |
| @@ -82,14 +78,6 @@ ${layouts/page()} | |||
| 82 | <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre> | 78 | <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre> |
| 83 | <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre> | 79 | <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre> |
| 84 | </div> | 80 | </div> |
| 85 | |||
| 86 | <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top"> | ||
| 87 | <span class="c-outer-button__icon"> | ||
| 88 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
| 89 | <use href="/symbols.svg#icon-arrow-up"></use> | ||
| 90 | </svg> | ||
| 91 | </span> | ||
| 92 | </a> | ||
| 93 | </footer> | 81 | </footer> |
| 94 | </main> | 82 | </main> |
| 95 | </body> | 83 | </body> |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index f841fff..d5dafaf 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
| @@ -1,49 +1,47 @@ | |||
| 1 | <section class="l-section l-section--no-header"> | 1 | <section class="l-container l-container--pad-x l-container--pad-y l-container--content"> |
| 2 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> | 2 | <div class="s-headlines s-body s-colored-links"> |
| 3 | <div class="s-headlines s-colored-links"> | 3 | <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> |
| 4 | <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> | ||
| 5 | 4 | ||
| 6 | $body$ | 5 | $body$ |
| 7 | </div> | 6 | </div> |
| 8 | 7 | ||
| 9 | <div class="c-post-list"> | 8 | <div class="c-post-list"> |
| 10 | $for(pages.asc_title)$ | 9 | $for(pages.asc_title)$ |
| 11 | $if(it.pages)$ | 10 | $if(it.pages)$ |
| 12 | <h2 class="c-post-list__category-header"> | 11 | <h2 class="c-post-list__category-header"> |
| 13 | <a href="$it.url.rel$">$it.title$</a> | 12 | <a href="$it.url.rel$">$it.title$</a> |
| 14 | </h2> | 13 | </h2> |
| 15 | <div class="c-post-list__category-content"> | 14 | <div class="c-post-list__category-content"> |
| 16 | $if(pages.asc_title.show_dates)$ | 15 | $if(pages.asc_title.show_dates)$ |
| 17 | $for(it.pages.desc_date)$ | 16 | $for(it.pages.desc_date)$ |
| 18 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 17 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
| 19 | <div class="c-card__block c-card__block--indicator"></div> | 18 | <div class="c-card__block c-card__block--indicator"></div> |
| 20 | <div class="c-card__block c-card__block--main"> | 19 | <div class="c-card__block c-card__block--main"> |
| 21 | $it.title$ | 20 | $it.title$ |
| 22 | </div> | 21 | </div> |
| 23 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> | 22 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> |
| 24 | <small class="u-dn@sm-hi"> | 23 | <small class="u-dn@sm-hi"> |
| 25 | $it.date.short$ | 24 | $it.date.short$ |
| 26 | </small> | 25 | </small> |
| 27 | <small class="u-dn@sm-lo"> | 26 | <small class="u-dn@sm-lo"> |
| 28 | $it.date.long$ | 27 | $it.date.long$ |
| 29 | </small> | 28 | </small> |
| 30 | </time> | 29 | </time> |
| 31 | </a> | 30 | </a> |
| 32 | $endfor$ | 31 | $endfor$ |
| 33 | $else$ | 32 | $else$ |
| 34 | $for(it.pages.asc_title)$ | 33 | $for(it.pages.asc_title)$ |
| 35 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 34 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
| 36 | <div class="c-card__block c-card__block--indicator"></div> | 35 | <div class="c-card__block c-card__block--indicator"></div> |
| 37 | <div class="c-card__block c-card__block--main"> | 36 | <div class="c-card__block c-card__block--main"> |
| 38 | $it.title$ | 37 | $it.title$ |
| 39 | </div> | 38 | </div> |
| 40 | </a> | 39 | </a> |
| 41 | $endfor$ | 40 | $endfor$ |
| 42 | $endif$ | 41 | $endif$ |
| 43 | </div> | 42 | </div> |
| 44 | $endif$ | 43 | $endif$ |
| 45 | $endfor$ | 44 | $endfor$ |
| 46 | </div> | ||
| 47 | </div> | 45 | </div> |
| 48 | </section> | 46 | </section> |
| 49 | 47 | ||
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 1f1a092..b76c606 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
| @@ -1,81 +1,13 @@ | |||
| 1 | <section class="l-section l-section--fullscreen l-section--no-header l-section--flex"> | 1 | <section class="l-container l-container--pad-x l-container--pad-y l-container--content"> |
| 2 | <div class="l-landing"> | 2 | <div class="s-headlines s-body"> |
| 3 | <header class="l-landing__banner"> | ||
| 4 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> | ||
| 5 | <h1 class="c-landing-banner__title"> | ||
| 6 | <span class="c-landing-banner__title-inner"> | ||
| 7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. | ||
| 8 | </span> | ||
| 9 | </h1> | ||
| 10 | <p class="c-landing-banner__text s-body"> | ||
| 11 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. | ||
| 12 | </p> | ||
| 13 | </div> | ||
| 14 | </header> | ||
| 15 | |||
| 16 | <section class="l-landing__content"> | ||
| 17 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo"> | ||
| 18 | <div class="l-card-grid"> | ||
| 19 | $for(profiles)$ | ||
| 20 | $if(it.featured)$ | ||
| 21 | $if(it.url)$ | ||
| 22 | <a class="l-card-grid__card c-card" href="$it.url$"> | ||
| 23 | $else$ | ||
| 24 | <div class="l-card-grid__card c-card"> | ||
| 25 | $endif$ | ||
| 26 | $if(it.icon)$ | ||
| 27 | <svg class="c-card__block o-icon"> | ||
| 28 | <use href="/symbols.svg#icon-$it.icon$"></use> | ||
| 29 | </svg> | ||
| 30 | $endif$ | ||
| 31 | <div class="c-card__block c-card__block--main"> | ||
| 32 | <strong class="u-db">$it.platform$</strong> | ||
| 33 | <small class="u-db">$it.username$</small> | ||
| 34 | </div> | ||
| 35 | $if(it.url)$ | ||
| 36 | <svg class="c-card__block o-icon"> | ||
| 37 | <use href="/symbols.svg#icon-arrow-up-right"></use> | ||
| 38 | </svg> | ||
| 39 | $endif$ | ||
| 40 | $if(it.url)$ | ||
| 41 | </a> | ||
| 42 | $else$ | ||
| 43 | </div> | ||
| 44 | $endif$ | ||
| 45 | $endif$ | ||
| 46 | $endfor$ | ||
| 47 | </div> | ||
| 48 | |||
| 49 | $body$ | 3 | $body$ |
| 50 | </div> | ||
| 51 | </section> | ||
| 52 | </div> | 4 | </div> |
| 53 | </section> | ||
| 54 | |||
| 55 | <section class="l-section" id="projects"> | ||
| 56 | <header class="l-section__header l-section__header--sticky"> | ||
| 57 | <a class="c-outer-button" href="#projects"> | ||
| 58 | <span class="c-outer-button__icon"> | ||
| 59 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
| 60 | <use href="/symbols.svg#icon-arrow-down-right"></use> | ||
| 61 | </svg> | ||
| 62 | </span> | ||
| 63 | <span class="c-outer-button__content"> | ||
| 64 | $pages.by_id.projects.title$ | ||
| 65 | </span> | ||
| 66 | </a> | ||
| 67 | |||
| 68 | <div class="l-section__header-separator"></div> | ||
| 69 | </header> | ||
| 70 | 5 | ||
| 71 | <div class="l-container l-container--pad-x l-container--pad-y l-project-grid"> | 6 | <div id="projects" class="c-post-list c-post-list--grid"> |
| 72 | $for(pages.by_id.projects.pages.all)$ | 7 | <div class="c-post-list__category-content"> |
| 73 | $for(it.pages.all)$ | 8 | $for(pages.by_id.projects.pages.all)$ |
| 74 | <a class="l-project-grid__project c-project" href="$it.url.rel$"> | 9 | $for(it.pages.all)$ |
| 75 | $if(it.preview)$ | 10 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
| 76 | <img class="c-project__picture" src="$it.preview.rel$" /> | ||
| 77 | $endif$ | ||
| 78 | <div class="c-project__card c-card"> | ||
| 79 | $if(pages.by_id.projects.pages.all.icon)$ | 11 | $if(pages.by_id.projects.pages.all.icon)$ |
| 80 | <svg class="c-card__block o-icon"> | 12 | <svg class="c-card__block o-icon"> |
| 81 | <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> | 13 | <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> |
| @@ -88,9 +20,9 @@ $body$ | |||
| 88 | <svg class="c-card__block o-icon"> | 20 | <svg class="c-card__block o-icon"> |
| 89 | <use href="/symbols.svg#icon-arrow-right"></use> | 21 | <use href="/symbols.svg#icon-arrow-right"></use> |
| 90 | </svg> | 22 | </svg> |
| 91 | </div> | 23 | </a> |
| 92 | </a> | 24 | $endfor$ |
| 93 | $endfor$ | 25 | $endfor$ |
| 94 | $endfor$ | 26 | </div> |
| 95 | </div> | 27 | </div> |
| 96 | </section> | 28 | </section> |
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index f269d10..4831228 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html | |||
| @@ -1,41 +1,39 @@ | |||
| 1 | <section class="l-section l-section--no-header"> | 1 | <section class="l-container l-container--pad-x l-container--pad-y l-container--content"> |
| 2 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> | 2 | <div class="s-headlines s-colored-links"> |
| 3 | <div class="s-headlines s-colored-links"> | 3 | <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> |
| 4 | <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> | ||
| 5 | 4 | ||
| 6 | $body$ | 5 | $body$ |
| 7 | </div> | 6 | </div> |
| 8 | 7 | ||
| 9 | <div class="c-post-list"> | 8 | <div class="c-post-list"> |
| 10 | <div class="c-post-list__category-content"> | 9 | <div class="c-post-list__category-content"> |
| 11 | $if(show_dates)$ | 10 | $if(show_dates)$ |
| 12 | $for(pages.desc_date)$ | 11 | $for(pages.desc_date)$ |
| 13 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 12 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
| 14 | <div class="c-card__block c-card__block--indicator"></div> | 13 | <div class="c-card__block c-card__block--indicator"></div> |
| 15 | <div class="c-card__block c-card__block--main"> | 14 | <div class="c-card__block c-card__block--main"> |
| 16 | $it.title$ | 15 | $it.title$ |
| 17 | </div> | 16 | </div> |
| 18 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> | 17 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> |
| 19 | <small class="u-dn@sm-hi"> | 18 | <small class="u-dn@sm-hi"> |
| 20 | $it.date.short$ | 19 | $it.date.short$ |
| 21 | </small> | 20 | </small> |
| 22 | <small class="u-dn@sm-lo"> | 21 | <small class="u-dn@sm-lo"> |
| 23 | $it.date.long$ | 22 | $it.date.long$ |
| 24 | </small> | 23 | </small> |
| 25 | </time> | 24 | </time> |
| 26 | </a> | 25 | </a> |
| 27 | $endfor$ | 26 | $endfor$ |
| 28 | $else$ | 27 | $else$ |
| 29 | $for(pages.asc_title)$ | 28 | $for(pages.asc_title)$ |
| 30 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 29 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
| 31 | <div class="c-card__block c-card__block--indicator"></div> | 30 | <div class="c-card__block c-card__block--indicator"></div> |
| 32 | <div class="c-card__block c-card__block--main"> | 31 | <div class="c-card__block c-card__block--main"> |
| 33 | $it.title$ | 32 | $it.title$ |
| 34 | </div> | 33 | </div> |
| 35 | </a> | 34 | </a> |
| 36 | $endfor$ | 35 | $endfor$ |
| 37 | $endif$ | 36 | $endif$ |
| 38 | </div> | ||
| 39 | </div> | 37 | </div> |
| 40 | </div> | 38 | </div> |
| 41 | </section> | 39 | </section> |
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 70f645b..978f7f6 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html | |||
| @@ -1,13 +1,11 @@ | |||
| 1 | <section class="l-section l-section--no-header l-section--body"> | 1 | <section class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body"> |
| 2 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body"> | 2 | $if(show_date)$ |
| 3 | $if(show_date)$ | 3 | <div class="s-body__meta"> |
| 4 | <div class="s-body__meta"> | 4 | $date.long$ |
| 5 | $date.long$ | 5 | </div> |
| 6 | </div> | 6 | $endif$ |
| 7 | $endif$ | ||
| 8 | 7 | ||
| 9 | <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> | 8 | <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> |
| 10 | 9 | ||
| 11 | $body$ | 10 | $body$ |
| 12 | </div> | ||
| 13 | </section> | 11 | </section> |
