improve visual hierarchy by refining bold text use

This commit is contained in:
Alexander Cobleigh 2020-10-12 09:55:42 +02:00 committed by Henry
parent 423c0c11f4
commit b101472767
2 changed files with 24 additions and 7 deletions

View File

@ -126,11 +126,14 @@ section header a {
display: flex;
color: var(--fg-status);
text-decoration: none;
font-weight: bold;
margin-right: var(--size--2);
margin-left: var(--size--2);
}
section header a:hover {
text-decoration: underline;
}
/* For use with elements specific for
* rendering in a text browser and intended
* to be hidden in a graphical browser. */
@ -141,9 +144,14 @@ section header a {
section > footer > div > a,
section > footer > div > form > button {
color: var(--fg-status);
font-weight: bold;
}
section > footer > div > a:hover,
section > footer > div > form > button:hover {
text-decoration: underline;
}
section > footer > div > form > button {
display: inline-block;
border: 0;
@ -319,11 +327,14 @@ nav {
nav > ul > li > a {
color: var(--fg);
text-decoration: none;
font-weight: bold;
}
nav > ul > li > a:hover {
text-decoration: underline;
}
nav > ul > li > a.current {
text-decoration: underline;
font-weight: bold;
}
section {
@ -352,6 +363,10 @@ section > header {
flex-grow: 1;
}
.author-action > a {
text-decoration: underline;
}
section > header > div {
display: flex;
justify-content: space-between;
@ -371,6 +386,7 @@ section header span {
section header .author > a:first-child {
margin-left: 0;
color: var(--fg-light);
font-weight: bold;
}
/*
@ -400,6 +416,7 @@ section > .centered-footer {
section > footer {
color: var(--fg-status);
margin-top: var(--size-0);
}
section > footer br {

View File

@ -73,10 +73,10 @@ const nbsp = "\xa0";
/**
* @param {{href: string, emoji: string, text: string }} input
*/
const navLink = ({ href, emoji, text }) =>
li(a({ href }, span({ class: "emoji" }, emoji), nbsp, text));
const template = (titlePrefix, ...elements) => {
const navLink = ({ href, emoji, text }, prefix) =>
li(a({ href, class: titlePrefix === text ? "current" : "" }, span({ class: "emoji" }, emoji), nbsp, text));
const nodes = html(
{ lang: "en" },
head(