Skip to content

Commit 2621908

Browse files
joeshoopjoeshoop
committed
semi-weekly commit
working the new css into place
1 parent 8a14ae4 commit 2621908

19 files changed

Lines changed: 860 additions & 496 deletions

‎web/_includes/base.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
{{ content | safe }}
1010
</main>
1111
{% include 'partials/footer.njk' %}
12+
{% include 'partials/theme-control.njk' %}
1213
</body>
1314
</html>

‎web/_includes/partials/header.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ Desktop nav: Home | How to use this site | Disciplines | Methods | About
1313
#}
1414

1515

16-
<header>
16+
<header class="container --w-md">
1717
<nav>
18-
<button id="openMenu" class="open-menu" aria-label="Open site menu" aria-expanded="false" type="button"></button>
18+
{# <button id="openMenu" class="open-menu" aria-label="Open site menu" aria-expanded="false" type="button"></button> #}
1919
<ul>
2020
<li class="title">
2121
<a href="/" tabindex="0">{{ metadata.title }}</a>

‎web/_includes/partials/theme-control.njk‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="theme-control">
2+
<div class="theme-control-group">
3+
<label for="color-toggle">Color Mode</label>
4+
<button id="color-toggle" class="button --sm" aria-pressed="true">On</button>
5+
</div>
6+
<div class="theme-control-group" id="hue-control">
7+
<label for="hue-slider">Hue: <span id="hue-value">100</span>°</label>
8+
<input type="range" id="hue-slider" min="0" max="360" value="100" step="1">
9+
</div>
10+
11+
</div>
12+
13+
<script>
14+
const hueSlider = document.getElementById('hue-slider');
15+
const hueValue = document.getElementById('hue-value');
16+
const colorToggle = document.getElementById('color-toggle');
17+
const hueControl = document.getElementById('hue-control');
18+
19+
hueSlider.addEventListener('input', (e) => {
20+
const value = e.target.value;
21+
document.documentElement.style.setProperty('--hue', value);
22+
hueValue.textContent = value;
23+
});
24+
25+
colorToggle.addEventListener('click', (e) => {
26+
const isPressed = e.target.getAttribute('aria-pressed') === 'true';
27+
e.target.setAttribute('aria-pressed', !isPressed);
28+
e.target.textContent = isPressed ? 'Off' : 'On';
29+
document.documentElement.style.setProperty('--chroma', isPressed ? '0' : '0.075');
30+
hueControl.style.display = isPressed ? 'none' : 'flex';
31+
});
32+
</script>

‎web/_src/all-disciplines.njk‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ layout: base.njk
33
title: "UX Disciplines"
44
permalink: /disciplines/index.html
55
---
6-
<section class="resource-cards">
7-
<h1>UX Disciplines</h1>
8-
<ul class="grid">
9-
{% for discipline in disciplines %}
10-
{% resourceCard discipline, "full-card" %}
11-
{% endfor %}
12-
</ul>
13-
</section>
6+
<article class="disciplines container">
7+
<section class="resource-cards">
8+
<h1>UX Disciplines</h1>
9+
<ul class="grid">
10+
{% for discipline in disciplines %}
11+
{% resourceCard discipline, "full-card" %}
12+
{% endfor %}
13+
</ul>
14+
</section>
15+
</article>

‎web/_src/all-methods.njk‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@
22
layout: base.njk
33
title: "UX Methods A-Z"
44
---
5-
<section class="resource-cards">
6-
<h1>UX Methods A-Z</h1>
7-
<ul class="grid">
8-
{% for method in methods %}
9-
{% resourceCard method %}
10-
{% endfor %}
11-
</ul>
12-
</section>
5+
<article class="methods container">
6+
<section class="resource-cards">
7+
<h1>UX Methods A-Z</h1>
8+
<ul class="cards">
9+
{% for method in methods %}
10+
{% resourceCard method %}
11+
{% endfor %}
12+
</ul>
13+
<ul class="small-cards">
14+
{% for method in methods %}
15+
{% resourceCard method %}
16+
{% endfor %}
17+
</ul>
18+
</section>
19+
</article>

‎web/_src/article.njk‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,17 @@ pagination:
66
size: 1
77
permalink: /{{ resource.slug }}/index.html
88
---
9-
<article class="article">
10-
<div class="hero">
9+
<article class="article container">
10+
{# This image is currently not used in the article layout #}
11+
{# <div class="hero">
1112
{% responsiveHero resource.heroImage, 50, 0.5625 %}
12-
</div>
13+
</div> #}
1314

1415
<div class="header">
1516
<h1>{{ resource.title }}</h1>
1617
</div>
1718

18-
<div class="body">
19+
<div class="prose content">
1920
{{ resource.body | safe }}
2021
</div>
2122
</article>

‎web/_src/discipline.njk‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ pagination:
66
size: 1
77
permalink: /discipline/{{ resource.slug }}/index.html
88
---
9-
<article class="discipline">
10-
<section class="overview discipline">
9+
<article class="discipline container">
10+
<section class="overview">
1111
<div class="hero">
1212
{% responsiveHero resource.heroImage,
1313
50,
1414
0.5625 %}
1515
</div>
16-
<div class="discipline-summary">
16+
<div class="summary">
1717
<div class="header">
1818
<h1>
1919
<span>{{ resource.title }}</span>

‎web/_src/index.njk‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,54 @@ layout: base.njk
33
data:
44
class: index
55
---
6+
<article class="index container">
7+
<section class="headline">
8+
<h1>{{ metadata.tagline }}</h1>
9+
<p class="display">{{ metadata.description }}</p>
10+
</section>
611

7-
<section class="headline">
8-
<h1>{{ metadata.tagline }}</h1>
9-
<p class="display">{{ metadata.description }}</p>
10-
</section>
12+
<section id="site-search" class="search" aria-label="Site search">
13+
<form autoComplete="off">
14+
{# Hiding cancel button: https://stackoverflow.com/questions/20804016/editing-input-type-search-pseudo-element-button-x #}
15+
<input type="search"
16+
id="search-box"
17+
name="search"
18+
aria-expanded="false"
19+
aria-controls="search-results"
20+
aria-describedby="search-description"/>
21+
<label for="search-box">Search for a method by name, goal, or outcome.</label>
22+
<span id="search-description" class="visually-hidden">
23+
As you type, search results will appear below
24+
</span>
25+
</form>
26+
<div id="search-result-list">
27+
<h2 id="results-count"></h2>
28+
<ul id="result-details" role="listbox" aria-label="Search results"></ul>
29+
</div>
30+
</section>
1131

12-
<section id="site-search" class="search" aria-label="Site search">
13-
<form autoComplete="off">
14-
{# Hiding cancel button: https://stackoverflow.com/questions/20804016/editing-input-type-search-pseudo-element-button-x #}
15-
<input type="search"
16-
id="search-box"
17-
name="search"
18-
aria-expanded="false"
19-
aria-controls="search-results"
20-
aria-describedby="search-description"/>
21-
<label for="search-box">Search for a method by name, goal, or outcome.</label>
22-
<span id="search-description" class="visually-hidden">
23-
As you type, search results will appear below
24-
</span>
25-
</form>
26-
<div id="search-result-list">
27-
<h2 id="results-count"></h2>
28-
<ul id="result-details" role="listbox" aria-label="Search results"></ul>
29-
</div>
30-
</section>
31-
32-
<section class="resource-cards">
33-
<header>
34-
<h2>Top UX Methods</h2>
35-
<a href="/all-methods" class="header-link">All Methods A-Z</a>
36-
</header>
37-
<ul class="grid">
38-
{% for method in metadata.rankedMethods.slice(0, 6) %}
39-
{% resourceCard method, "full-card" %}
40-
{% endfor %}
41-
</ul>
42-
<header>
43-
<h2>UX Disciplines</h2>
44-
</header>
45-
<ul class="grid">
46-
{% for discipline in disciplines %}
47-
{% resourceCard discipline %}
48-
{% endfor %}
32+
<section class="resource-cards">
33+
<header>
34+
<h2>Top UX Methods</h2>
35+
<a href="/all-methods" class="header-link">All Methods A-Z</a>
36+
</header>
37+
<ul class="grid">
38+
{% for method in metadata.rankedMethods.slice(0, 6) %}
39+
{% resourceCard method, "full-card" %}
40+
{% endfor %}
41+
</ul>
42+
<header>
43+
<h2>UX Disciplines</h2>
44+
</header>
45+
<ul class="grid">
46+
{% for discipline in disciplines %}
47+
{% resourceCard discipline %}
48+
{% endfor %}
49+
</ul>
4950
</ul>
50-
</ul>
51-
</section>
51+
</section>
5252

53-
<script>
54-
{% include 'partials/searchScript.js' %}
55-
</script>
53+
<script>
54+
{% include 'partials/searchScript.js' %}
55+
</script>
56+
</article>

0 commit comments

Comments
 (0)