Adds new list template for case studies, optimizes document page styles
This commit is contained in:
parent
0a1ee16653
commit
cbe9771c6b
GPG Key ID:
FC09694A000800C8
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 <span color="blue">**design process**</span>, <span color="yellow">**thinking**</span>, <span color="red">**collaboration style**</span>, and <span color="green">**skills**</span>. You can also read about my [design philosophy and values](/values) in more detail.
|
||||
@ -2,6 +2,8 @@
|
||||
title: "Design philosophy"
|
||||
layout: "document"
|
||||
slug: "values"
|
||||
body:
|
||||
class: "simple"
|
||||
summary: "<span color=\"blue\"><strong>How I think about design</strong></span>, particularly for the browser, and the values I hold close. Good design can't happen without <span color=\"red\"><strong>respect for the user</strong></span> and their device. <span color=\"yellow\"><strong>Taste and personality matter</strong></span> quite a bit."
|
||||
header:
|
||||
page:
|
||||
@ -34,4 +36,4 @@ I am not opposed to frameworks or complex client-side applications when they're
|
||||
|
||||
<em>Finally: design benefits from collaboration, but not from design by committee.</em> 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 <em>does</em> matter**‡ and I will rely on it.
|
||||
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 <em>does</em> matter**‡ and I will rely on it.
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</head>
|
||||
<body id='{{ with .Slug }}{{ . }}{{ else }}default{{ end }}'>
|
||||
<body id='{{ with .Params.body.id }}{{ . }}{{ else }}{{ with .Slug }}{{ . }}{{ else }}default{{ end }}{{ end }}'{{ with .Params.body.class }} class='{{ . }}'{{ end }}>
|
||||
{{- $pageLabel := "" -}}
|
||||
{{- $pageHref := "" -}}
|
||||
{{- if and .IsPage (eq .Section "studies") -}}
|
||||
@ -61,7 +61,7 @@
|
||||
</div>
|
||||
<menu aria-label="Primary">
|
||||
<li>
|
||||
<a href='{{ "/#studies" | relURL }}'>
|
||||
<a href='{{ "/studies" | relURL }}'>
|
||||
<span>Case studies</span>
|
||||
{{ partial "icon.html" (dict "name" "book") }}
|
||||
</a>
|
||||
@ -87,4 +87,4 @@
|
||||
{{ partial "footer.html" . }}
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -1,16 +1,14 @@
|
||||
{{ define "main" }}
|
||||
<article class="document">
|
||||
<header>
|
||||
{{ with .Params.eyebrow }}
|
||||
<p class="eyebrow">{{ . }}</p>
|
||||
{{ end }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ with .Summary }}
|
||||
<p class="lede">{{ . | markdownify }}</p>
|
||||
{{ end }}
|
||||
</header>
|
||||
<section>
|
||||
{{ .Content }}
|
||||
</section>
|
||||
</article>
|
||||
<header>
|
||||
{{ with .Params.eyebrow }}
|
||||
<p class="eyebrow">{{ . }}</p>
|
||||
{{ end }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ with .Summary }}
|
||||
<p class="lede">{{ . | markdownify }}</p>
|
||||
{{ end }}
|
||||
</header>
|
||||
<section>
|
||||
{{ .Content }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@ -1,23 +1,57 @@
|
||||
{{ define "main" }}
|
||||
<section class="page-hero page-hero-compact">
|
||||
<p class="eyebrow">{{ .Section }}</p>
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ with .Content }}
|
||||
<div class="lede">{{ . }}</div>
|
||||
{{ with .Summary }}
|
||||
<p class="lede">{{ . | markdownify }}</p>
|
||||
{{ end }}
|
||||
</section>
|
||||
</header>
|
||||
<section id="studies">
|
||||
|
||||
<section class="page-section">
|
||||
<div class="study-list">
|
||||
{{ range .Pages.ByWeight }}
|
||||
<article>
|
||||
<p class="study-card-meta">{{ .Section | title }}</p>
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<p>{{ .Summary }}</p>
|
||||
</article>
|
||||
{{ else }}
|
||||
<p>No entries yet.</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ range where .Site.RegularPages "Section" "studies" }}
|
||||
{{- $page := . -}}
|
||||
{{- $image := "" -}}
|
||||
{{- $color := "" -}}
|
||||
{{- $cardID := .Slug | default .File.ContentBaseName -}}
|
||||
{{- with .Params.list.img -}}
|
||||
{{- $match := $page.Resources.GetMatch . -}}
|
||||
{{- if not $match -}}
|
||||
{{- $match = $page.Resources.GetMatch (printf "%s" .) -}}
|
||||
{{- end -}}
|
||||
{{- with $match -}}
|
||||
{{- $image = .RelPermalink -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- with .Params.list.color -}}
|
||||
{{- $color = . -}}
|
||||
{{- end -}}
|
||||
<article id="{{ $cardID }}"{{ with $color }} color="{{ . }}"{{ end }}{{ with $image }} style="--card-bg: url('{{ . }}');"{{ end }}>
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<h2>{{ .Title }}</h2>
|
||||
<p>{{ .Summary }}</p>
|
||||
{{ with .Params.list.more }}<p>{{ . }}</p>{{ end }}
|
||||
{{- with .Params.study.facts -}}
|
||||
<div>
|
||||
{{- range . -}}
|
||||
{{- if or (eq .label "Role") (eq .label "Tools") (eq .label "Industry") -}}
|
||||
{{- $fact := . -}}
|
||||
{{- $iconColor := "" -}}
|
||||
{{- range $page.Params.list.facts -}}
|
||||
{{- if eq (lower .key) (lower $fact.label) -}}
|
||||
{{- $iconColor = .color -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<figure>
|
||||
{{- with $fact.icon -}}
|
||||
{{ partial "icon.html" (dict "name" . "color" $iconColor) }}
|
||||
{{- end -}}
|
||||
<figcaption {{ with $fact.class }}class='{{ . }}'{{ end }}>{{ $fact.value | markdownify }}</figcaption>
|
||||
</figure>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
</a>
|
||||
</article>
|
||||
{{- end -}}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@ -11,4 +11,4 @@
|
||||
{{ .Content }}
|
||||
</section>
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{- $target := "/#studies" | relURL -}}
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="refresh" content='0; url={{ $target }}'>
|
||||
<link rel="canonical" href='{{ "/" | absURL }}'>
|
||||
<script>
|
||||
window.location.replace('{{ $target }}');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Redirecting to <a href='{{ $target }}'>case studies</a>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user