Slight layout changes to make 'more' links prominent

haydenmc · Aug 4, 2024 · 5507c7d · 5507c7d
1 parent 0fafe00
commit 5507c7d
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 24 deletions.
diff --git a/_includes/svg/doublechevron.svg b/_includes/svg/doublechevron.svg
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -12,6 +12,12 @@
     }
 }
 
+$fontSizeHuge: 72px;
+$fontSizeLarge: 32px;
+$fontSizeNormal: 16px;
+$fontSizeSmall: 12px;
+$mobileBreakpoint: 800px;
+
 // Declare dark theme first, just in case browser doesn't support
 // prefers-color-scheme media query
 :root {
@@ -64,7 +70,7 @@ video {
 
 time {
     display: block;
-    font-size: 12px;
+    font-size: $fontSizeSmall;
     font-weight: 400;
 }
 
@@ -114,18 +120,18 @@ body {
     flex-direction: column;
     align-items: center;
     font-family: "Inter var", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 16px;
+    font-size: $fontSizeNormal;
     color: var(--foreground-color);
     background-color: var(--background-color);
 
-    @media (min-width: 640px)
+    @media (min-width: $mobileBreakpoint)
     {
         margin: 32px;
     }
 
     > main {
         width: 100%;
-        max-width: 1024px;
+        max-width: 1200px;
         padding-bottom: 20vh;
 
         h2, h3 {
@@ -135,21 +141,22 @@ body {
         > header {
             > h2 {
                 margin: 0;
-                font-size: 14px;
+                font-size: $fontSizeNormal;
                 font-weight: 500;
             }
             > h1 {
                 margin: 0;
-                font-size: 72px;
+                font-size: $fontSizeHuge;
                 font-weight: 700;
             }
         }
 
         > section {
             &:first-child {
                 > header {
-                    font-size: 72px;
+                    font-size: $fontSizeHuge;
                     font-weight: 700;
+                    margin-bottom: 32px;
                 }
             }
 
@@ -158,7 +165,7 @@ body {
             }
 
             > header {
-                font-size: 22px;
+                font-size: $fontSizeLarge;
                 font-weight: 700;
             }
 
@@ -169,7 +176,7 @@ body {
                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
-                @media (max-width: 640px)
+                @media (max-width: $mobileBreakpoint)
                 {
                     flex-direction: column;
                 }
@@ -179,9 +186,9 @@ body {
                     width: calc(100% - 32px);
                     margin: 16px;
 
-                    @media (min-width: 640px)
+                    @media (min-width: $mobileBreakpoint)
                     {
-                        width: calc(33% - 32px);
+                        width: calc(29% - 32px);
                     }
 
                     > header {
@@ -203,6 +210,32 @@ body {
                         }
                     }
                 }
+
+                > li:last-child {
+                    display: flex;
+                    align-items: center;
+
+                    @media (min-width: $mobileBreakpoint)
+                    {
+                        width: calc(13% - 32px);
+                    }
+
+                    a {
+                        display: flex;
+                        flex-grow: 1;
+                        height: 100%;
+                        align-items: center;
+                        justify-content: center;
+                        text-align: center;
+                        font-size: 22px;
+                        flex-direction: column;
+
+                        @media (max-width: $mobileBreakpoint)
+                        {
+                            flex-direction: row-reverse;
+                        }
+                    }
+                }
             }
         }
 

diff --git a/assets/js/pageTransitions.js b/assets/js/pageTransitions.js
@@ -47,7 +47,7 @@ function loadPage(url, shouldPushState = false, scrollPosition = 0)
 function onLinkClicked(event)
 {
     event.preventDefault();
-    var target = event.target;
+    var target = event.currentTarget;
     var link = target.href;
     loadPage(link, true);
 }

diff --git a/index.html b/index.html
@@ -5,9 +5,8 @@
     <section>
         <header>Hayden McAfee</header>
         <p>Hello, I'm Hayden!</p>
-        <p>I love building all sorts of things, but I mainly create software.</p>
-        <p>Currently I am a Software Architect working on Automation Tooling at Ford.</p>
-        <p>In my spare time I tend to work on many different side projects.</p>
+        <p>I love learning and building all sorts of things, but I mainly create software.</p>
+        <p>Check out some of my work below!</p>
     </section>
 
     <section>
@@ -29,10 +28,13 @@
                 <p>{{ project.description }}</p>
             </li>
             {% endfor %}
+            <li>
+                <a href="{% link projects.html %}">
+                    {% include svg/doublechevron.svg %}
+                    <div>All Projects</div>
+                </a>
+            </li>
         </ul>
-        {% if site.projects.size > 3 %}
-            <a href="{% link projects.html %}">all projects</a>
-        {% endif %}
     </section>
 
     <section>
@@ -54,10 +56,13 @@
                 <p>{{ work.description }}</p>
             </li>
             {% endfor %}
+            <li>
+                <a href="{% link work.html %}">
+                    {% include svg/doublechevron.svg %}
+                    <div>All Work</div>
+                </a>
+            </li>
         </ul>
-        {% if site.work.size > 3 %}
-            <a href="{% link work.html %}">all work</a>
-        {% endif %}
     </section>
 
     <section>
@@ -70,9 +75,12 @@
                     {{ post.excerpt }}
                 </li>
             {% endfor %}
+            <li>
+                <a href="{% link posts.html %}">
+                    {% include svg/doublechevron.svg %}
+                    <div>All Posts</div>
+                </a>
+            </li>
         </ul>
-        {% if site.posts.size > 3 %}
-            <a href="{% link posts.html %}">all posts</a>
-        {% endif %}
     </section>
 </main>