Refactoring site components a bit.

Sources/Site/Config.swift

@@ -0,0 +1,6 @@
+import Slipstream
+
+extension Condition {
+  static var mobileOnly: Condition { Condition.within(Breakpoint.small..<Breakpoint.medium) }
+  static var desktop: Condition { Condition.startingAt(.medium) }
+}

Sources/Site/Home/HomeLink.swift

@@ -0,0 +1,31 @@
+import Foundation
+
+import Slipstream
+
+struct HomeLink: View {
+  private let text: String
+  private let destination: URL?
+
+  init(_ text: String, destination: URL?) {
+    self.text = text
+    self.destination = destination
+  }
+
+  var body: some View {
+    Link(text, destination: destination)
+      .padding(4)
+      .padding(.horizontal, 16, condition: .desktop)
+      .padding(.vertical, 8, condition: .desktop)
+      .margin(.top, 8, condition: .desktop)
+      .border(
+        .init(.zinc, darkness: 300),
+        edges: .right,
+        condition: .mobileOnly + .hover
+      )
+      .border(
+        .init(.zinc, darkness: 300),
+        edges: .bottom,
+        condition: .desktop + .hover
+      )
+  }
+}

Sources/Site/main.swift

@@ -1,34 +1,7 @@
 import Foundation
 import Slipstream
 
-struct SiteLink: View {
-  let text: String
-  let destination: URL?
-
-  init(_ text: String, destination: URL?) {
-    self.text = text
-    self.destination = destination
-  }
-
-  var body: some View {
-    Link(text, destination: destination)
-      .padding(4)
-      .padding(16, condition: .startingAt(.medium))
-      .border(
-        .init(.zinc, darkness: 300),
-        edges: .right,
-        condition: .init(within: Breakpoint.small..<Breakpoint.medium, state: .hover)
-      )
-      .border(
-        .init(.zinc, darkness: 300),
-        edges: .bottom,
-        condition: .init(startingAt: .medium, state: .hover)
-      )
-  }
-}
-
 struct Site: View {
-  let desktop = Condition.startingAt(.medium)
   var body: some View {
     HTML {
       Head {
@@ -51,8 +24,8 @@ struct Site: View {
             }
             .textAlignment(.right)
             .padding(.bottom, 16)
-            .padding(.bottom, 0, condition: desktop)
-            .margin(.horizontal, .auto, condition: desktop)
+            .padding(.bottom, 0, condition: .desktop)
+            .margin(.horizontal, .auto, condition: .desktop)
             .fontWeight(300)
 
             .fontSize(40)
@@ -64,34 +37,34 @@ struct Site: View {
               repeat: .no
             )
 
-            .fontSize(48, condition: desktop)
-            .padding(.top, 125, condition: desktop)
-            .padding(.left, 150, condition: desktop)
-            .padding(.right, 48, condition: desktop)
+            .fontSize(48, condition: .desktop)
+            .padding(.top, 125, condition: .desktop)
+            .padding(.left, 150, condition: .desktop)
+            .padding(.right, 48, condition: .desktop)
             .backgroundImage(
               URL(string: "/gfx/feather.svg"),
               size: .size(width: 256, height: 256),
-              condition: desktop
+              condition: .desktop
             )
 
             Div {
-              SiteLink("portfolio", destination: URL(string: "/portfolio"))
-              SiteLink("blog", destination: URL(string: "http://blog.jeffverkoeyen.com/"))
-              SiteLink("contact", destination: URL(string: "/contact"))
-              SiteLink("about", destination: URL(string: "/about"))
+              HomeLink("portfolio", destination: URL(string: "/portfolio"))
+              HomeLink("blog", destination: URL(string: "http://blog.jeffverkoeyen.com/"))
+              HomeLink("contact", destination: URL(string: "/contact"))
+              HomeLink("about", destination: URL(string: "/about"))
             }
             .fontSize(32)
             .fontWeight(300)
             .textAlignment(.right)
             .display(.flex)
             .flexDirection(.y)
             .flexGap(.y, width: 8)
-            .textAlignment(.center, condition: desktop)
-            .flexDirection(.x, condition: desktop)
-            .flexGap(.x, width: 8, condition: desktop)
+            .textAlignment(.center, condition: .desktop)
+            .flexDirection(.x, condition: .desktop)
+            .flexGap(.x, width: 8, condition: .desktop)
             .justifyContent(.center)
             .alignItems(.end)
-            .alignItems(.start, condition: desktop)
+            .alignItems(.start, condition: .desktop)
           }
         }
         .textColor(.zinc, darkness: 950)

site/index.html

@@ -15,10 +15,10 @@
    <div class="flex flex-col gap-y-2">
     <h1 class="text-right pb-4 md:pb-0 md:mx-auto font-light text-4xl pt-20 ml-11 bg-[length:184px_184px] bg-[url('/gfx/feather.svg')] bg-no-repeat md:text-5xl md:pt-32 md:pl-36 md:pr-12 md:bg-[length:256px_256px] md:bg-[url('/gfx/feather.svg')]">featherless<br />software design</h1>
     <div class="text-3xl font-light text-right flex flex-col gap-y-2 md:text-center md:flex-row md:gap-x-2 justify-center items-end md:items-start">
-     <a href="/portfolio" class="p-1 md:p-4 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">portfolio</a>
-     <a href="http://blog.jeffverkoeyen.com/" class="p-1 md:p-4 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">blog</a>
-     <a href="/contact" class="p-1 md:p-4 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">contact</a>
-     <a href="/about" class="p-1 md:p-4 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">about</a>
+     <a href="/portfolio" class="p-1 md:px-4 md:py-2 md:mt-2 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">portfolio</a>
+     <a href="http://blog.jeffverkoeyen.com/" class="p-1 md:px-4 md:py-2 md:mt-2 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">blog</a>
+     <a href="/contact" class="p-1 md:px-4 md:py-2 md:mt-2 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">contact</a>
+     <a href="/about" class="p-1 md:px-4 md:py-2 md:mt-2 sm:max-md:hover:border-r sm:max-md:hover:border-zinc-300 md:hover:border-b md:hover:border-zinc-300">about</a>
     </div>
    </div>
   </div>