Support project previews

2 files changed, 24 insertions, 20 deletions

diff --git a/templates/base.html b/templates/base.html
index 794f83f..4ebd507 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -63,18 +63,17 @@ ${layouts/categorized_list()}
 ${layouts/page()}
         $endif$
 
-        <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
-            <span class="c-outer-button__icon">
-                <svg class="c-outer-button__icon-symbol o-icon">
-                    <use href="#icon-arrow-up"></use>
-                </svg>
-            </span>
-        </a>
-
         <footer class="c-footer">
             <div class="c-footer__content">
                 9thPK7O3xn
             </div>
+            <a class="c-outer-button" href="#" title="To the top">
+                <span class="c-outer-button__icon">
+                    <svg class="c-outer-button__icon-symbol o-icon">
+                        <use href="#icon-arrow-up"></use>
+                    </svg>
+                </span>
+            </a>
         </footer>
     </main>
 
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index f97588d..d1821f2 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -50,9 +50,9 @@ $body$
     </section>
 </section>
 
-<section class="l-section">
+<section class="l-section" id="projects">
     <header class="l-section__head">
-        <a class="c-outer-button" href="#projects" id="projects">
+        <a class="c-outer-button" href="#projects">
             <span class="c-outer-button__icon">
                 <svg class="c-outer-button__icon-symbol o-icon">
                     <use href="#icon-arrow-down-right"></use>
@@ -64,17 +64,22 @@ $body$
         </a>
     </header>
 
-    <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
+    <div class="l-container l-container--pad-x l-container--pad-y l-project-grid">
         $for(subsections.projects.pages)$
-            <a class="l-card-grid__card c-card" href="$it.url.rel$">
-                <div class="c-card__content">
-                    <small class="u-db">$it.category.name$</small>
-                    <strong class="u-db">$it.title$</strong>
-                </div>
-                <svg class="c-card__icon o-icon">
-                    <use href="#icon-arrow-right"></use>
-                </svg>
-            </a>
+            <div class="c-project">
+                $if(it.preview)$
+                    <img class="c-project__picture" src="$it.preview.rel$" />
+                $endif$
+                <a class="c-project__card c-card" href="$it.url.rel$">
+                    <div class="c-card__content">
+                        <small class="u-db">$it.category.name$</small>
+                        <strong class="u-db">$it.title$</strong>
+                    </div>
+                    <svg class="c-card__icon o-icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </a>
+            </div>
         $endfor$
     </div>
 </section>