diff options
Diffstat (limited to 'templates')
-rw-r--r-- | templates/base.html | 61 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 37 | ||||
-rw-r--r-- | templates/layouts/index.html | 165 | ||||
-rw-r--r-- | templates/layouts/page.html | 18 | ||||
-rw-r--r-- | templates/symbols.svg | 6 |
5 files changed, 144 insertions, 143 deletions
diff --git a/templates/base.html b/templates/base.html index c7f641c..625b025 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -32,32 +32,51 @@ | |||
32 | </head> | 32 | </head> |
33 | 33 | ||
34 | <body> | 34 | <body> |
35 | <!--<nav class="c-nav"> | 35 | <nav class="c-header"> |
36 | <a class="c-nav__logo" href="/" title="$site.title$"> | 36 | <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$"> |
37 | <svg class="c-nav__logo-symbol"> | 37 | <span class="c-outer-button__icon"> |
38 | <use href="#logo"></use> | 38 | <svg class="c-outer-button__icon-symbol"> |
39 | </svg> | 39 | <use href="#logo"></use> |
40 | </svg> | ||
41 | </span> | ||
40 | </a> | 42 | </a> |
41 | $for(menus.main.items)$ | 43 | $if(section.is_index)$ |
42 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> | 44 | $else$ |
43 | $endfor$ | 45 | $for(menus.main.items)$ |
44 | </nav>--> | 46 | $if(it.active)$ |
45 | 47 | <a class="c-outer-button" href="$it.url$"> | |
46 | <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$"> | 48 | <span class="c-outer-button__content"> |
47 | <span class="c-outer-button__icon"> | 49 | $it.label$ |
48 | <svg class="c-outer-button__icon-symbol"> | 50 | </span> |
49 | <use href="#logo"></use> | 51 | </a> |
50 | </svg> | 52 | $endif$ |
51 | </span> | 53 | $endfor$ |
52 | </a> | 54 | $endif$ |
55 | </nav> | ||
53 | 56 | ||
54 | $if(section.is_index)$ | 57 | <main> |
58 | $if(section.is_index)$ | ||
55 | ${layouts/index()} | 59 | ${layouts/index()} |
56 | $elseif(layout.is_categorized_list)$ | 60 | $elseif(layout.is_categorized_list)$ |
57 | ${layouts/categorized_list()} | 61 | ${layouts/categorized_list()} |
58 | $else$ | 62 | $else$ |
59 | ${layouts/page()} | 63 | ${layouts/page()} |
60 | $endif$ | 64 | $endif$ |
65 | |||
66 | <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top"> | ||
67 | <span class="c-outer-button__icon"> | ||
68 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
69 | <use href="#icon-arrow-up"></use> | ||
70 | </svg> | ||
71 | </span> | ||
72 | </a> | ||
73 | |||
74 | <footer class="c-footer"> | ||
75 | <div class="c-footer__content"> | ||
76 | 9thPK7O3xn | ||
77 | </div> | ||
78 | </footer> | ||
79 | </main> | ||
61 | 80 | ||
62 | ${symbols.svg()} | 81 | ${symbols.svg()} |
63 | </body> | 82 | </body> |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 8c25ec0..0e9142f 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -1,23 +1,22 @@ | |||
1 | <main> | 1 | <section class="l-section l-section--no-head"> |
2 | <div class="c-page s-page l-container l-container--content l-container--pad-x l-container--pad-y"> | 2 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> |
3 | <div class="c-page__content s-page-content"> | ||
4 | $body$ | 3 | $body$ |
5 | 4 | ||
6 | $for(pages.by_category)$ | 5 | $for(pages.by_category)$ |
7 | <h2 class="c-page__prefixed c-page__prefixed--h2"> | 6 | <h2> |
8 | $for(it.value/first)$ | 7 | $for(it.value/first)$ |
9 | $it.category.name$ | 8 | $it.category.name$ |
10 | $endfor$ | 9 | $endfor$ |
11 | </h2> | 10 | </h2> |
12 | <ul> | 11 | <ul> |
13 | $for(it.value)$ | 12 | $for(it.value)$ |
14 | <li class="c-page__prefixed c-page__prefixed--ref"> | 13 | <li> |
15 | <a href="$it.url.rel$">$it.title$</a> | 14 | <a href="$it.url.rel$">$it.title$</a> |
16 | </li> | 15 | </li> |
17 | $endfor$ | 16 | $endfor$ |
18 | </ul> | 17 | </ul> |
19 | $endfor$ | 18 | $endfor$ |
20 | </div> | ||
21 | </div> | 19 | </div> |
22 | </main> | 20 | </section> |
21 | |||
23 | 22 | ||
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 4163093..327f9f5 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -1,95 +1,80 @@ | |||
1 | <main> | 1 | <section class="l-section l-section--no-head l-landing"> |
2 | <section class="l-section l-section--no-head l-landing"> | 2 | <header class="l-landing__banner"> |
3 | <header class="l-landing__banner"> | 3 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> |
4 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> | 4 | <h1 class="c-landing-banner__title"> |
5 | <h1 class="c-landing-banner__title"> | 5 | <span class="c-landing-banner__title-inner"> |
6 | <span class="c-landing-banner__title-inner"> | 6 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. |
7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. | 7 | </span> |
8 | </span> | 8 | </h1> |
9 | </h1> | 9 | <p class="c-landing-banner__text"> |
10 | <p class="c-landing-banner__text"> | 10 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. |
11 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. | 11 | </p> |
12 | </p> | 12 | </div> |
13 | </div> | 13 | </header> |
14 | </header> | ||
15 | 14 | ||
16 | <section class="l-landing__content"> | 15 | <section class="l-landing__content"> |
17 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo"> | 16 | <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"> | 17 | <div class="l-card-grid"> |
19 | $for(profiles)$ | 18 | $for(profiles)$ |
20 | $if(it.featured)$ | 19 | $if(it.featured)$ |
21 | $if(it.url)$ | 20 | $if(it.url)$ |
22 | <a class="l-card-grid__card c-card" href="$it.url$"> | 21 | <a class="l-card-grid__card c-card" href="$it.url$"> |
23 | $else$ | 22 | $else$ |
24 | <div class="l-card-grid__card c-card"> | 23 | <div class="l-card-grid__card c-card"> |
25 | $endif$ | 24 | $endif$ |
26 | $if(it.icon)$ | 25 | $if(it.icon)$ |
27 | <svg class="c-card__icon o-icon"> | 26 | <svg class="c-card__icon o-icon"> |
28 | <use href="#icon-$it.icon$"></use> | 27 | <use href="#icon-$it.icon$"></use> |
29 | </svg> | 28 | </svg> |
30 | $endif$ | 29 | $endif$ |
31 | <div class="c-card__content"> | 30 | <div class="c-card__content"> |
32 | <strong class="u-db">$it.platform$</strong> | 31 | <strong class="u-db">$it.platform$</strong> |
33 | <small class="u-db">$it.username$</small> | 32 | <small class="u-db">$it.username$</small> |
34 | </div> | 33 | </div> |
35 | $if(it.url)$ | 34 | $if(it.url)$ |
36 | <svg class="c-card__icon o-icon"> | 35 | <svg class="c-card__icon o-icon"> |
37 | <use href="#icon-arrow-up-right"></use> | 36 | <use href="#icon-arrow-up-right"></use> |
38 | </svg> | 37 | </svg> |
39 | $endif$ | 38 | $endif$ |
40 | $if(it.url)$ | 39 | $if(it.url)$ |
41 | </a> | 40 | </a> |
42 | $else$ | 41 | $else$ |
43 | </div> | 42 | </div> |
44 | $endif$ | 43 | $endif$ |
45 | $endif$ | 44 | $endif$ |
46 | $endfor$ | 45 | $endfor$ |
47 | </div> | 46 | </div> |
48 | 47 | ||
49 | $body$ | 48 | $body$ |
50 | </div> | 49 | </div> |
51 | </section> | 50 | </section> |
52 | </section> | 51 | </section> |
53 | 52 | ||
54 | <section class="l-section"> | 53 | <section class="l-section"> |
55 | <header class="l-section__head"> | 54 | <header class="l-section__head"> |
56 | <a class="c-outer-button" href="#projects" id="projects"> | 55 | <a class="c-outer-button" href="#projects" id="projects"> |
57 | <span class="c-outer-button__icon"> | 56 | <span class="c-outer-button__icon"> |
58 | <svg class="c-outer-button__icon-symbol o-icon"> | 57 | <svg class="c-outer-button__icon-symbol o-icon"> |
59 | <use href="#icon-arrow-down-right"></use> | 58 | <use href="#icon-arrow-down-right"></use> |
60 | </svg> | 59 | </svg> |
61 | </span> | 60 | </span> |
62 | <span class="c-outer-button__content"> | 61 | <span class="c-outer-button__content"> |
63 | $sections.projects.title$ | 62 | $subsections.projects.title$ |
64 | </span> | 63 | </span> |
65 | </a> | 64 | </a> |
66 | </header> | 65 | </header> |
67 | 66 | ||
68 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid"> | 67 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid"> |
69 | $for(sections.projects.pages)$ | 68 | $for(subsections.projects.pages)$ |
70 | <a class="l-card-grid__card c-card" href="$it.url.rel$"> | 69 | <a class="l-card-grid__card c-card" href="$it.url.rel$"> |
71 | <div class="c-card__content"> | 70 | <div class="c-card__content"> |
72 | <small class="u-db">$it.category.name$</small> | 71 | <small class="u-db">$it.category.name$</small> |
73 | <strong class="u-db">$it.title$</strong> | 72 | <strong class="u-db">$it.title$</strong> |
74 | </div> | 73 | </div> |
75 | <svg class="c-card__icon o-icon"> | 74 | <svg class="c-card__icon o-icon"> |
76 | <use href="#icon-arrow-right"></use> | 75 | <use href="#icon-arrow-right"></use> |
77 | </svg> | 76 | </svg> |
78 | </a> | 77 | </a> |
79 | $endfor$ | 78 | $endfor$ |
80 | </div> | 79 | </div> |
81 | </section> | 80 | </section> |
82 | |||
83 | <footer class="c-footer"> | ||
84 | <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top"> | ||
85 | <span class="c-outer-button__icon"> | ||
86 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
87 | <use href="#icon-arrow-up"></use> | ||
88 | </svg> | ||
89 | </span> | ||
90 | </a> | ||
91 | <div class="c-footer__content u-ar"> | ||
92 | 9thPK7O3xn | ||
93 | </div> | ||
94 | </footer> | ||
95 | </main> | ||
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 9e7d85a..e006ddc 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html | |||
@@ -1,15 +1,7 @@ | |||
1 | <main> | 1 | <section class="l-section l-section--no-head"> |
2 | <div class="c-page l-container l-container--content l-container--pad-x l-container--pad-y"> | 2 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body"> |
3 | <div class="c-page__content s-page-content"> | 3 | <h1>$title$</h1> |
4 | <header class="c-page__header"> | ||
5 | <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1> | ||
6 | $if(category)$ | ||
7 | <h2 class="c-page__header__meta">in $category.name$</h2> | ||
8 | $endif$ | ||
9 | </header> | ||
10 | 4 | ||
11 | $body$ | 5 | $body$ |
12 | </div> | ||
13 | </div> | 6 | </div> |
14 | </main> | 7 | </section> |
15 | |||
diff --git a/templates/symbols.svg b/templates/symbols.svg index d884bc0..958e271 100644 --- a/templates/symbols.svg +++ b/templates/symbols.svg | |||
@@ -55,5 +55,11 @@ | |||
55 | d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015" | 55 | d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015" |
56 | fill="none" stroke="currentColor" /> | 56 | fill="none" stroke="currentColor" /> |
57 | </symbol> | 57 | </symbol> |
58 | |||
59 | <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
60 | <path | ||
61 | d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998" | ||
62 | fill="none" stroke="currentColor" /> | ||
63 | </symbol> | ||
58 | </defs> | 64 | </defs> |
59 | </svg> | 65 | </svg> |