summaryrefslogtreecommitdiffstats
path: root/templates/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'templates/layouts')
-rw-r--r--templates/layouts/categorized_list.html84
-rw-r--r--templates/layouts/index.html88
-rw-r--r--templates/layouts/list.html68
-rw-r--r--templates/layouts/page.html16
4 files changed, 91 insertions, 165 deletions
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>