diff --git a/assets/css/site.css b/assets/css/site.css
index 0515620..bb4dd54 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -806,6 +806,9 @@ span[color="red"] {
span[color="yellow"] {
color: var(--yellow-body);
}
+span[color="green"] {
+ color: var(--green);
+}
/**
@@ -1232,64 +1235,76 @@ body#honeycomb
}
/* single page documents */
-body#values {
- grid-template-rows: 5rem auto auto;
+body.simple {
+ grid-template-rows: var(--header-height) auto auto;
main {
- grid-template-rows: auto;
+ background: var(--bg);
+ border-top: none;
+ display: grid;
+ gap: var(--article-gap);
+ grid-template-rows: min-content auto;
+ grid-template-columns: var(--article-grid);
justify-content: center;
+ justify-items: center;
+ padding: var(--article-top) 1.5rem 3rem;
+ width: 100%;
- > article {
- background: var(--bg);
- border-top: none;
- display: grid;
- grid-template-rows: min-content auto;
- justify-items: center;
+ > header {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ display: block;
+ padding: 3rem 0 1.5rem 0;
width: 100%;
- > header {
- grid-column-start: 1;
- grid-column-end: 3;
- justify-self: start;
- padding: 3rem 0 1.5rem 0;
+ .lede {
+ margin: 2rem 0 0;
+ font-size: 1.6rem;
+ font-weight: 400;
+ line-height: 1.4;
+ }
+ }
- .lede {
- margin: 2rem 0 0;
- font-size: 1.6rem;
- font-weight: 400;
- line-height: 1.4;
- }
+ > section {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ font-size: 1.125rem;
+
+ > :first-child {
+ margin-top: 0;
}
- > section {
- grid-column-start: 1;
- grid-column-end: 3;
- font-size: 1.125rem;
+ p {
+ margin: 0 0 1.5rem;
- > :first-child {
- margin-top: 0;
+ > em:first-child {
+ color: var(--text);
+ display: block;
+ font-size: 1.25rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 1.3;
+ padding-bottom: 0.75rem;
}
- p {
- margin: 0 0 1.5rem;
-
- > em:first-child {
- color: var(--text);
- display: block;
- font-size: 1.25rem;
- font-style: normal;
- font-weight: 700;
- line-height: 1.3;
- padding-bottom: 0.75rem;
- }
-
- &:not(:has(> em:first-child)) {
- margin-top: -0.75rem;
- }
+ &:not(:has(> em:first-child)) {
+ margin-top: -0.75rem;
}
}
}
}
+
+ section {
+
+ &#studies {
+ background: var(--bg);
+ padding: 0 0 2rem;
+
+ article {
+ width: auto;
+ }
+ }
+ }
}
/**
@@ -1433,6 +1448,11 @@ body#values {
}
}
+ /* simple templates need the header fixed */
+ body.simple main > header {
+ min-height: auto;
+ }
+
/* honeycomb case study art changes */
body#honeycomb main > header #grid {
--shape-size: 10dvh;
@@ -1764,7 +1784,7 @@ body#values {
}
/* single page docs */
- body#values main > article {
+ body.simple main {
padding: 10dvh 0 5dvh;
> header {
@@ -1772,6 +1792,14 @@ body#values {
}
> section {
grid-column-start: 2;
+
+ p {
+ font-size: 1rem;
+ }
+
+ &#studies {
+ grid-column-start: 1;
+ }
}
}
@@ -1848,11 +1876,19 @@ body#values {
}
/* single page docs */
- body#values main > article
+ body.simple main
{
> header {
padding-bottom: 3rem;
}
+
+ section {
+ grid-column-end: 3;
+
+ &#studies {
+ grid-column-end: 4;
+ }
+ }
}
}
diff --git a/content/studies/_index.md b/content/studies/_index.md
index f97a04f..b0ea8f3 100644
--- a/content/studies/_index.md
+++ b/content/studies/_index.md
@@ -1,5 +1,8 @@
---
title: "Case Studies"
+body:
+ id: "list"
+ class: "simple"
---
-Selected product design and UX case studies.
+Selected product design and UX case studies highlighting different aspects of my **design process**, **thinking**, **collaboration style**, and **skills**. You can also read about my [design philosophy and values](/values) in more detail.
\ No newline at end of file
diff --git a/content/values.md b/content/values.md
index 7d20480..be8a210 100644
--- a/content/values.md
+++ b/content/values.md
@@ -2,6 +2,8 @@
title: "Design philosophy"
layout: "document"
slug: "values"
+body:
+ class: "simple"
summary: "How I think about design, particularly for the browser, and the values I hold close. Good design can't happen without respect for the user and their device. Taste and personality matter quite a bit."
header:
page:
@@ -34,4 +36,4 @@ I am not opposed to frameworks or complex client-side applications when they're
Finally: design benefits from collaboration, but not from design by committee. Everyone has opinions about interfaces because everyone uses them. That's normal and useful! **But not every opinion should carry the same weight**, and not every preference should become a product decision.
-Good design requires judgment: knowing when to listen, when to test, when to defend a choice, and when to change course. My job is not to just impose my taste by fiat—**my job is to make informed decisions in service of the user and the product—but my taste as the designer does matter**‡ and I will rely on it.
\ No newline at end of file
+Good design requires judgment: knowing when to listen, when to test, when to defend a choice, and when to change course. My job is not to just impose my taste by fiat—**my job is to make informed decisions in service of the user and the product—but my taste as the designer does matter**‡ and I will rely on it.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 808ec18..c1a69f0 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -28,7 +28,7 @@
{{ end }}
{{ end }}
-
+
{{- $pageLabel := "" -}}
{{- $pageHref := "" -}}
{{- if and .IsPage (eq .Section "studies") -}}
@@ -61,7 +61,7 @@