summaryrefslogtreecommitdiffstats
path: root/templates/layouts/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'templates/layouts/index.html')
-rw-r--r--templates/layouts/index.html165
1 files changed, 75 insertions, 90 deletions
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>