commit: 4c72837106432aafaa68d0bfec4b96d96a9f21e0
parent b777e699bc5694147dd9ba1862f655bc34a8c1b1
Author: microlith57 <microlith57@gmail.com>
Date: Mon, 9 Dec 2019 16:21:51 +1300
Better accessibility with links etc.
Signed-off-by: microlith57 <microlith57@gmail.com>
Diffstat:
6 files changed, 38 insertions(+), 27 deletions(-)
diff --git a/links/main.css b/links/main.css
@@ -13,20 +13,20 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view.ready { opacity: 1; transition: opacity 250ms }
#view.ready #header #photo { opacity: 1 }
-#view #header { }
#view #header #logo a { cursor: pointer; transition: all 250ms; }
#view #header #logo a:hover { opacity: 0.7 }
+#view #header #logo a:focus { opacity: 0.7 }
#view #header #logo a img { max-width: 240px; display: block; margin:0px auto; margin-bottom:30px; }
#view #header ul { display: block;line-height: 40px; border-bottom: 2px solid black; margin-bottom:30px; overflow: hidden;height: 40px; }
#view #header ul li { display: inline-block;border-top-left-radius: 3px;border-top-right-radius: 3px; margin-right:10px; margin-bottom: -2px; line-height: 40px}
-#view #header ul li:hover { }
#view #header ul li a { display: inline-block; font-family: 'alte_haas_grotesk_bold'; font-size:14px; line-height: 40px; border-bottom:2px solid transparent }
-#view #header ul li a:hover { opacity: 1 !important; }
#view #header ul li.right { float: right;margin-right:0px;margin-left:10px }
#view #header #search { display: none }
-#view.home #header ul a.home { color:#ccc;}
-#view.about #header ul a.about { color:#ccc;}
-#view.tools #header ul a.tools { color:#ccc;}
+#view.home #header ul a.home,
+#view.about #header ul a.about,
+#view.tools #header ul a.tools,
+#view.gallery #header ul a.gallery,
+#view.nutrition #header ul a.nutrition { color: #333; }
#view #core { margin-bottom:30px; }
@@ -41,6 +41,7 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #content p.bref { font-size:28px; margin-bottom: 45px; line-height: 34px }
#view #core #content p a { font-weight: bold; cursor: pointer; text-decoration: underline; }
#view #core #content p a:hover { text-decoration: none; }
+#view #core #content p a:focus { text-decoration: dotted underline; }
#view #core #content p a.external:after { content:"*"; color:#999; }
#view #core #content p b { font-weight: bold; }
#view #core #content img { margin-bottom: 30px; border-radius: 2px }
@@ -62,6 +63,7 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #content #instructions note { max-width:700px; margin-bottom:15px; font-size:18px; padding-left:30px; display: block; font-style: italic; font-size:14px; margin-bottom:30px; }
#view #core #content #instructions a { font-weight: bold; }
#view #core #content #instructions a:hover { text-decoration: underline; cursor: pointer }
+#view #core #content #instructions a:focus { text-decoration: underline; cursor: pointer }
#view #core #content #instructions i { background: #eee;font-size: 12px;text-transform: uppercase;padding: 5px 7.5px;display: inline-block;font-weight: bold;border-radius: 3px;color: #333;line-height: 15px }
#view #core #content #instructions code { font-size: 12px;text-transform: uppercase;padding: 3px 5.5px;display: inline-block;font-weight: bold;border-radius: 3px;border: 2px solid black;line-height: 15px}
@@ -71,7 +73,8 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #content ul.ingredients { display: inline-block; margin-right:15px; font-size:0; padding-left:20px; margin-bottom:30px; }
#view #core #content ul.ingredients h3 { margin-left:-20px; }
#view #core #content ul.ingredients li.ingredient { width: 100px;margin-left:-20px;min-height: 210px;display: inline-block;text-align: center;vertical-align: top;border: 2px dashed transparent;border-radius: 10px; }
-#view #core #content ul.ingredients li.ingredient:hover span.name { text-decoration: underline; }
+#view #core #content ul.ingredients li.ingredient a:hover span.name { text-decoration: underline; }
+#view #core #content ul.ingredients li.ingredient a:focus span.name { text-decoration: underline; border: 1px dotted black; }
#view #core #content ul.ingredients li.ingredient.missing span.name { font-style: italic }
#view #core #content ul.ingredients li.ingredient img { max-width: 100%; display: block }
#view #core #content ul.ingredients li.ingredient span.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:14px; margin-bottom: 5px;padding:0px 10px }
@@ -84,18 +87,22 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #related { width:100%;}
#view #core #related li { width: calc((100% / 3) - 10px); float:left; overflow: hidden;}
-#view #core #related li:nth-child(1), #view #core #related li:nth-child(2) { margin-right:15px;}
-#view #core #related li a.photo { border-radius: 2px; display: block; height:160px; background-size:cover; margin-bottom:15px; background-position: center }
-#view #core #related li span.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:16px; margin-bottom: 5px; text-transform: capitalize; line-height: 30px }
+#view #core #related li:nth-child(1), #view #core #related li:nth-child(2) { margin-right:15px;}
+#view #core #related li a .photo { border-radius: 2px; display: block; width:100%; height:160px; background-size:cover; margin-bottom:15px; background-position: center }
+#view #core #related li a span.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:16px; margin-bottom: 5px; text-transform: capitalize; line-height: 30px }
+#view #core #related li a:hover span.name { text-decoration: underline; cursor: pointer }
+#view #core #related li a:focus span.name { text-decoration: underline; cursor: pointer }
#view #core #related li span.details { display: block; font-family: 'alte_haas_grotesk_regular'; font-size:14px; text-transform: capitalize; line-height: 30px; line-height: 18px }
#view #core #content #recipes { columns:3; font-size:14px; font-weight: bold}
#view #core #content #recipes li { display: block }
-#view #core #content #recipes li a:hover { text-decoration: underline; cursor: pointer; }
+#view #core #content #recipes li a:hover { text-decoration: underline; cursor: pointer; opacity: 1; }
+#view #core #content #recipes li a:focus { text-decoration: underline; cursor: pointer; opacity: 1; }
#view #core #content #recipes h3 { margin-bottom:10px; }
#view #footer { display: block; padding:15px 0px;font-family: 'alte_haas_grotesk_bold'; font-size:14px; margin-top:60px; }
#view #footer a:hover { text-decoration: underline; cursor: pointer }
+#view #footer a:focus { text-decoration: underline; cursor: pointer }
@media (max-width: 850px) {
#view #core #content #recipes { columns:1; }
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -25,19 +25,19 @@ function graph () {
Ø('view').create({ x: 2, y: 6 }, DomNode),
Ø('header').create({ x: 2, y: 11 }, DomNode),
Ø('logo').create({ x: 2, y: 16 }, DomNode, 'wr', `
- <a href='index.html'><img src='media/interface/logo.png'/></a>
+ <a href='index.html'><img src='media/interface/logo.png' alt='Grimgrains'/></a>
<ul>
- <li><a class="local home" onclick="Ø('query').bang('Home')">Home</a></li>
- <li><a class="local about" onclick="Ø('query').bang('About')">About</a></li>
- <li><a class="local tools" onclick="Ø('query').bang('Tools')">Tools</a></li>
- <li><a class="local gallery" onclick="Ø('query').bang('gallery')">Gallery</a></li>
- <li><a class="local nutrition" onclick="Ø('query').bang('nutrition')">Nutrition</a></li>
+ <li><a class="local home" href="#home">Home</a></li>
+ <li><a class="local about" href="#about">About</a></li>
+ <li><a class="local tools" href="#tools">Tools</a></li>
+ <li><a class="local gallery" href="#gallery">Gallery</a></li>
+ <li><a class="local nutrition" href="#nutrition">Nutrition</a></li>
<li class='right'><a href='http://twitter.com/grimgrains' target='_blank'>Twitter</a></li>
</ul>`.to_markup()),
Ø('core').create({ x: 10, y: 11 }, DomNode),
Ø('content').create({ x: 10, y: 16 }, DomNode),
Ø('related').create({ x: 14, y: 16 }, DomNode, 'ul'),
- Ø('footer').create({ x: 6, y: 11 }, DomNode, 'wr', '<a onclick="Ø(\'query\').bang(\'about\')">Grimgrains</a> © 2014—2019<br/><a href=\'http://100r.co/\' target=\'_blank\'>Hundred Rabbits</a>')
+ Ø('footer').create({ x: 6, y: 11 }, DomNode, 'wr', '<a href="#about">Grimgrains</a> © 2014—2019<br/><a href="http://100r.co/" target="_blank">Hundred Rabbits</a>')
])
// Model
diff --git a/scripts/templates/home.js b/scripts/templates/home.js
@@ -60,7 +60,7 @@ function HomeTemplate (id, rect) {
const name = ingredients[id][0]
html += `
<li class='ingredient${!table[name] ? ' missing' : ''}'>
- <a href='#${name.to_url()}' onclick="Ø('query').bang('${name}')">
+ <a href='#${name.to_url()}'>
<img src='media/ingredients/${name.to_path()}.png'/>
<span class='name'>${name.capitalize()}</span>
</a>
diff --git a/scripts/templates/ingredient.js b/scripts/templates/ingredient.js
@@ -118,8 +118,10 @@ function IngredientTemplate (id, rect) {
const name = id
html += `
<li class='recipe'>
- <a onclick="Ø('query').bang('${name}')" class='photo' href='#${name.to_url()}' style='background-image:url(media/recipes/${name.to_path()}.jpg)'></a>
- <span class='name'>${name.capitalize()}</span>
+ <a href='#${name.to_url()}'>
+ <div class='photo' style='background-image:url(media/recipes/${name.to_path()}.jpg)'></div>
+ <span class='name'>${name.capitalize()}</span>
+ </a>
<span class='details'><b>${recipe.TIME} minutes</b><br />${count_ingredients(recipe)} ingredients<br />${recipe.INST.length} steps</span>
</li>`
if (count > 1) { break }
@@ -170,7 +172,7 @@ function IngredientTemplate (id, rect) {
function print_ingredient (name) {
return `
<li class='ingredient'>
- <a onclick="Ø('query').bang('${name}')" href='#${name.to_url()}'>
+ <a href='#${name.to_url()}'>
<img src='media/ingredients/${name.to_path()}.png'/>
<span class='name'>${name.capitalize()}</span>
</a>
diff --git a/scripts/templates/recipe.js b/scripts/templates/recipe.js
@@ -106,8 +106,10 @@ function RecipeTemplate (id, rect) {
const recipe = q.tables.recipes[name]
html += `
<li class='recipe'>
- <a class='photo' onclick="Ø('query').bang('${name}')" href='#${name.to_url()}' style='background-image:url(media/recipes/${name.to_path()}.jpg)'></a>
- <span class='name'>${name.capitalize()}</span>
+ <a href='#${name.to_url()}'>
+ <div class='photo' style='background-image:url(media/recipes/${name.to_path()}.jpg)'></div>
+ <span class='name'>${name.capitalize()}</span>
+ </a>
<span class='details'><b>${recipe.TIME} minutes</b><br />${count_ingredients(recipe)} ingredients<br />${Object.keys(recipe.INST).length} step${Object.keys(recipe.INST).length > 1 ? 's' : ''}</span>
</li>`
if (count > 1) { break }
@@ -152,10 +154,10 @@ function RecipeTemplate (id, rect) {
const element = elements[name]
html += `
<li class='ingredient'>
- <a onclick="Ø('query').bang('${name}')" href='#${name.to_url()}'>
+ <a href='#${name.to_url()}'>
<img src='media/ingredients/${name.to_path()}.png'/>
+ <span class='name'>${name.capitalize()}</span>
</a>
- <span class='name'>${name.capitalize()}</span>
<span class='quantity'>${element}</span>
</li>`
}
diff --git a/scripts/templates/service.js b/scripts/templates/service.js
@@ -97,7 +97,7 @@ function ServiceTemplate (id, rect) {
const name = ingredients[id][0]
html += `
<li class='ingredient${!table[name] ? ' missing' : ''}'>
- <a href='#${name.to_url()}' onclick="Ø('query').bang('${name}')">
+ <a href='#${name.to_url()}'>
<img src='media/ingredients/${name.to_path()}.png'/>
<span class='name'>${name.capitalize()}</span>
</a>
