diff options
Diffstat (limited to 'templates/layouts')
| -rw-r--r-- | templates/layouts/index.html | 192 |
1 files changed, 87 insertions, 105 deletions
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index d39e70a..4163093 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
| @@ -1,113 +1,95 @@ | |||
| 1 | <main> | 1 | <main> |
| 2 | <section class="l-section l-landing"> | 2 | <section class="l-section l-section--no-head l-landing"> |
| 3 | <header class="l-landing__banner"> | 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"> | 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"> | 5 | <h1 class="c-landing-banner__title"> |
| 6 | <span class="c-landing-banner__title-inner"> | 6 | <span class="c-landing-banner__title-inner"> |
| 7 | 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. |
| 8 | </span> | 8 | </span> |
| 9 | </h1> | 9 | </h1> |
| 10 | <p class="c-landing-banner__text"> | 10 | <p class="c-landing-banner__text"> |
| 11 | 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. |
| 12 | </p> | 12 | </p> |
| 13 | </div> | 13 | </div> |
| 14 | </header> | 14 | </header> |
| 15 | 15 | ||
| 16 | <section class="l-landing__content"> | 16 | <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"> | 17 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo"> |
| 18 | <div class="l-card-grid"> | 18 | <div class="l-card-grid"> |
| 19 | $for(profiles)$ | 19 | $for(profiles)$ |
| 20 | $if(it.featured)$ | 20 | $if(it.featured)$ |
| 21 | $if(it.url)$ | 21 | $if(it.url)$ |
| 22 | <a class="l-card-grid__card c-card" href="$it.url$"> | 22 | <a class="l-card-grid__card c-card" href="$it.url$"> |
| 23 | $else$ | 23 | $else$ |
| 24 | <div class="l-card-grid__card c-card"> | 24 | <div class="l-card-grid__card c-card"> |
| 25 | $endif$ | 25 | $endif$ |
| 26 | $if(it.icon)$ | 26 | $if(it.icon)$ |
| 27 | <svg class="c-card__icon o-icon"> | 27 | <svg class="c-card__icon o-icon"> |
| 28 | <use href="#icon-$it.icon$"></use> | 28 | <use href="#icon-$it.icon$"></use> |
| 29 | </svg> | 29 | </svg> |
| 30 | $endif$ | 30 | $endif$ |
| 31 | <div class="c-card__content"> | 31 | <div class="c-card__content"> |
| 32 | <strong class="u-db">$it.platform$</strong> | 32 | <strong class="u-db">$it.platform$</strong> |
| 33 | <small class="u-db">$it.username$</small> | 33 | <small class="u-db">$it.username$</small> |
| 34 | </div> | 34 | </div> |
| 35 | $if(it.url)$ | 35 | $if(it.url)$ |
| 36 | <svg class="c-card__icon o-icon"> | 36 | <svg class="c-card__icon o-icon"> |
| 37 | <use href="#icon-link-external"></use> | 37 | <use href="#icon-arrow-up-right"></use> |
| 38 | </svg> | 38 | </svg> |
| 39 | $endif$ | 39 | $endif$ |
| 40 | $if(it.url)$ | 40 | $if(it.url)$ |
| 41 | </a> | 41 | </a> |
| 42 | $else$ | 42 | $else$ |
| 43 | </div> | 43 | </div> |
| 44 | $endif$ | 44 | $endif$ |
| 45 | $endif$ | 45 | $endif$ |
| 46 | $endfor$ | 46 | $endfor$ |
| 47 | </div> | 47 | </div> |
| 48 | 48 | ||
| 49 | $body$ | 49 | $body$ |
| 50 | </div> | 50 | </div> |
| 51 | </section> | 51 | </section> |
| 52 | </section> | 52 | </section> |
| 53 | 53 | ||
| 54 | <section class="l-section"> | 54 | <section class="l-section"> |
| 55 | <header class="l-section__heading"> | 55 | <header class="l-section__head"> |
| 56 | <a class="c-outer-button" href="#projects" id="projects"> | 56 | <a class="c-outer-button" href="#projects" id="projects"> |
| 57 | <span class="c-outer-button__icon"> | 57 | <span class="c-outer-button__icon"> |
| 58 | <svg class="c-outer-button__icon-symbol o-icon"> | 58 | <svg class="c-outer-button__icon-symbol o-icon"> |
| 59 | <use href="#icon-arrow-down-right"></use> | 59 | <use href="#icon-arrow-down-right"></use> |
| 60 | </svg> | 60 | </svg> |
| 61 | </span> | 61 | </span> |
| 62 | <span class="c-outer-button__content"> | 62 | <span class="c-outer-button__content"> |
| 63 | Projects | 63 | $sections.projects.title$ |
| 64 | </span> | 64 | </span> |
| 65 | </a> | 65 | </a> |
| 66 | </header> | 66 | </header> |
| 67 | 67 | ||
| 68 | <div class="l-container l-container--pad-x l-container--pad-y l-card-grid u-my-auto"> | 68 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid"> |
| 69 | <a class="l-card-grid__card c-card" href="projects/blobfox-emojis/"> | 69 | $for(sections.projects.pages)$ |
| 70 | <div class="c-card__content"> | 70 | <a class="l-card-grid__card c-card" href="$it.url.rel$"> |
| 71 | <small class="u-db">Emojis</small> | 71 | <div class="c-card__content"> |
| 72 | <strong class="u-db">Blobfox</strong> | 72 | <small class="u-db">$it.category.name$</small> |
| 73 | </div> | 73 | <strong class="u-db">$it.title$</strong> |
| 74 | <svg class="c-card__icon o-icon"> | 74 | </div> |
| 75 | <use href="#icon-arrow-right"></use> | 75 | <svg class="c-card__icon o-icon"> |
| 76 | </svg> | 76 | <use href="#icon-arrow-right"></use> |
| 77 | </a> | 77 | </svg> |
| 78 | </a> | ||
| 79 | $endfor$ | ||
| 80 | </div> | ||
| 81 | </section> | ||
| 78 | 82 | ||
| 79 | <a class="l-card-grid__card c-card" href="projects/bunhd-emojis/"> | 83 | <footer class="c-footer"> |
| 80 | <div class="c-card__content"> | 84 | <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top"> |
| 81 | <small class="u-db">Emojis</small> | 85 | <span class="c-outer-button__icon"> |
| 82 | <strong class="u-db">BunHD</strong> | 86 | <svg class="c-outer-button__icon-symbol o-icon"> |
| 83 | </div> | 87 | <use href="#icon-arrow-up"></use> |
| 84 | <svg class="c-card__icon o-icon"> | 88 | </svg> |
| 85 | <use href="#icon-arrow-right"></use> | 89 | </span> |
| 86 | </svg> | 90 | </a> |
| 87 | </a> | 91 | <div class="c-footer__content u-ar"> |
| 88 | 92 | 9thPK7O3xn | |
| 89 | <!--<a class="l-card-grid__card c-card" href="#"> | 93 | </div> |
| 90 | <div class="c-card__content"> | 94 | </footer> |
| 91 | <small class="u-db">Icons</small> | ||
| 92 | <strong class="u-db">iro</strong> | ||
| 93 | </div> | ||
| 94 | <svg class="c-card__icon o-icon"> | ||
| 95 | <use href="#icon-arrow-right"></use> | ||
| 96 | </svg> | ||
| 97 | </a>--> | ||
| 98 | </div> | ||
| 99 | </section> | ||
| 100 | |||
| 101 | <footer class="c-footer"> | ||
| 102 | <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top"> | ||
| 103 | <span class="c-outer-button__icon"> | ||
| 104 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
| 105 | <use href="#icon-arrow-up"></use> | ||
| 106 | </svg> | ||
| 107 | </span> | ||
| 108 | </a> | ||
| 109 | <div class="c-footer__content u-ar"> | ||
| 110 | 9thPK7O3xn | ||
| 111 | </div> | ||
| 112 | </footer> | ||
| 113 | </main> | 95 | </main> |