diff options
Diffstat (limited to 'templates/layouts/index.html')
-rw-r--r-- | templates/layouts/index.html | 88 |
1 files changed, 10 insertions, 78 deletions
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> |