jcarrier-theme

commit 3886fd6f1f752d1f335e8fc26a833cfa81c241b5
parent bbdca2d762a67f3e0f0d8485cf60f7634f99f2d1
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat, 21 Nov 2020 21:17:57 -0500

Organize and style projects

Diffstat:
A
src/scss/modules/_project.scss
 | 
32
++++++++++++++++++++++++++++++++
M
templates/project.html.twig
 | 
15
+++++++++------
M
templates/projects.html.twig
 | 
37
++++++++++++++++++++-----------------

3 files changed, 61 insertions(+), 23 deletions(-)
diff --git a/src/scss/modules/_project.scss b/src/scss/modules/_project.scss
@@ -0,0 +1,32 @@
+// Project module
+.project-list {
+    &__item {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: flex-end;
+        position: relative;
+
+        & > * {
+            margin: 0;
+        }
+    }
+
+    &__title {
+        font-size: 1rem;
+
+        a {
+            all: inherit;
+
+            &:after {
+                bottom: 0;
+                content: '';
+                cursor: pointer;
+                display: block;
+                left: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
+        }
+    }
+}
diff --git a/templates/project.html.twig b/templates/project.html.twig
@@ -1,11 +1,14 @@
 {% extends 'partials/base.html.twig' %}
-
 {% block content %}
-  <h1 class="visuallyhidden">{{ page.title }}</h1>
+  <article>
+    <h1 class="visuallyhidden">{{ page.title }}</h1>
 
-  {{ page.content }}
+    {{ page.content }}
 
-  {% for image in page.media.images %}
-    {{ image.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }}
-  {% endfor %}
+    <section>
+      {% for image in page.media.images %}
+        {{ image.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }}
+      {% endfor %}
+    </section>
+  </article>
 {% endblock %}
diff --git a/templates/projects.html.twig b/templates/projects.html.twig
@@ -1,25 +1,28 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
-  <section class="projects">
-    {% if page.content or page.title %}
-      <header class="projects__content">
-        <h1 class="rte">{{ page.title }}</h1>
+  {% if page.content or page.title %}
+    <header>
+      <h1 class="rte visuallyhidden">{{ page.title }}</h1>
 
-        <div class="rte">
-          {{ page.content }}
-        </div>
-      </header>
-    {% endif %}
+      <div class="rte">
+        {{ page.content }}
+      </div>
+    </header>
+  {% endif %}
 
-    <ol class="projects__list">
-      {% for subpage in page.children.visible %}
-        <li class="projects__item">
-          <a href="{{ subpage.url }}">
-            {{ subpage.title }}
+  <section class="project-list grid">
+    {% for project in page.children.visible %}
+      {% set project_image = project.media.images|first %}
+      <article class="project-list__item">
+        <h2 class="project-list__title">
+          <a href="{{ project.url }}">
+            {{ project.title }}
           </a>
-        </li>
-      {% endfor %}
-    </ol>
+        </h2>
+
+        {{ project_image.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').cropZoom(380,240).html() }}
+      </article>
+    {% endfor %}
   </section>
 {% endblock %}