diff --git a/ejs/partials/motivation.html b/ejs/partials/motivation.html new file mode 100644 index 0000000..0e5fa83 --- /dev/null +++ b/ejs/partials/motivation.html @@ -0,0 +1,59 @@ +

Motivation

+

Why not PDF?

+

PDF (Portable Document Format) has arguably become the de facto + standard in academic publishing. There are many reasons one could + imagine that this became the case.

+ +

Considering each of these points in turn, however, may show you why PDF + is not necessarily the perfect choice for academic publishing.

+ diff --git a/ejs/partials/nav.html b/ejs/partials/nav.html index ff26700..a1a517f 100644 --- a/ejs/partials/nav.html +++ b/ejs/partials/nav.html @@ -9,6 +9,7 @@
  • Basic HTML syntax
  • Simple HTML skeleton
  • LaTeX to HTML cheatsheet
  • +
  • Resources
  • Toolbox diff --git a/ejs/tutorial/partials/cheatsheet.html b/ejs/tutorial/partials/cheatsheet.html index 236facc..d3dd3ba 100644 --- a/ejs/tutorial/partials/cheatsheet.html +++ b/ejs/tutorial/partials/cheatsheet.html @@ -171,6 +171,154 @@ +
    +
    +

    HTML5 changed the definitions of <b>, + <i>, <s>, + and <u> from the previous standard. + Before, those elements were only given a visual definition, so + <b> indicated bold text but did not + convey any particular intent. These elements now represent text that would + conventionally be typeset with each font variant. <em> + and <strong> still carry more + unambiguous intent, which allows styling to be specified independently.

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LaTeXHTML
    Emphasis +
    \emph{I really want to emphasize this!}
    +

    Text enclosed in \emph{...} is + usually typeset in italic font. The difference between + \emph{...} and + \textit{...} is subtle and seems + to be related to inter-character spacing when the font changes. Whether + the intent of emphasis makes it into the PDF is not clear (to me).

    +
    +
    <em>I really want to emphasize this!</em>
    +

    Text between <em> and + </em> tags may be shown to the + user in italic font, but <em> + more specifically indicates text with "emphatic stress." There is no + ambiguity about the intent, for example, if the document is being + rendered as audio.

    +
    Strong importance +

    LaTeX does not seem to have a standard way of typesetting strong + importance. If you roll your own macro, you might use bold or + bold-italic font, but that choice can easily vary from user to + user or even document to document.

    +
    +
    <strong>This is strongly important.</strong>
    +

    Text between <strong> and + </strong> tags may be shown to the + user in boldface, but <strong> + more specifically indicates text with "strong importance." There is no + ambiguity about the intent, for example, if the document is being + rendered as audio.

    +
    Boldface +
    \textbf{I think this looks nice in bold.}
    +

    Text enclosed in \textbf{...} will + always be typeset in boldface, but the significance of the formatting may + or may not be clear from context.

    +
    +
    <b>I think this looks nice in bold.<b>
    +

    Text between <b> and + </b> tags may be shown to the + user in boldface. The element itself does not indicate emphasis, just + that the conventional formatting would be boldface.

    +
    Italics +
    \textit{I think this looks nice in italic.}
    +

    Text enclosed in \textit{...} will + always be typeset in italic font, but the significance of the formatting may + or may not be clear from context.

    +
    +
    <i>I think this looks nice in italic.<i>
    +

    Text between <i> and + </i> tags may be shown to the + user in italic font. The element itself does not indicate emphasis, just + that the conventional formatting would be as italicized text.

    +
    Underline +
    \underline{I think this looks nice underlined.}
    +

    Text enclosed in \underline{...} will + always be typeset underlined, but the significance of the formatting may + or may not be clear from context.

    +
    +
    <u>I think this looks nice underlined.<u>
    +

    Text between <u> and + </u> tags may be shown to the + user underlined. The element itself does not indicate emphasis, just + that the conventional formatting would be as underlined text.

    +
    Strikethrough +

    LaTeX does not have a standard command for strikethrough text, though + additional packages may add that capability.

    +
    +
    <s>I think this looks nice struck out.<s>
    +

    Text between <s> and + </s> tags may be shown to the + user struck through with a horizontal line. It is used to indicate + content that is "no longer accurate or no longer relevant.".

    diff --git a/ejs/tutorial/partials/resources.html b/ejs/tutorial/partials/resources.html new file mode 100644 index 0000000..5af3029 --- /dev/null +++ b/ejs/tutorial/partials/resources.html @@ -0,0 +1,76 @@ +

    Further reading

    + +
    +
    + arXiv Accessibility Research Report +
    +
    +

    This is a more data-driven look at the current state of accessibility + in science publishing that makes several recommendations for how we + can improve things going forward, starting today.

    +
    +
    + arXiv Accessibility Forum 2023 +
    +
    +

    The forum took place on April 17, 2023. Even if you weren't there, + recordings of the speakers with ASL translation, presentations, and + discussion boards are all available on the arXiv site. +

    +
    + Accessibility for visual designers +
    +
    +

    The U.S. government has a website dedicated to best practices for accessible + content, geared towards teaching government employees who design federal + websites how to ensure that their content is accessible and inclusive.

    +
    +
    + U.S. Web Design System typography guide +
    +
    +

    These best practices for typography are of particular interest in + publishing. They give advice about font sizes, line height, and typefaces + best suited for accessible digital content.

    +
    +
    + +
    +
    + WCAG 3.0 draft guidelines for text alternatives +
    +
    +

    While WCAG 3.0 is still in the draft stage, you can consult the current + version for basic guidance.

    +
    +
    + Perkins School for the Blind, How to write image descriptions for the visually impaired +
    +
    +

    This is a practical primer on what should and should not appear in + alt-text. There are also links showing how to add alt-text in MS Office + software. +

    +
    +
    + "How to write an image description" by Alex Chen +
    +
    +

    This resource is particularly helpful for constructing alt-text with + an informative syntax. Alex gives additional advice on describing + race and gender in an inclusive and respectful way.

    +
    +
    + "Image descriptions and how to write them" by SotD and Zera +
    +
    +

    This resource in particular calls attention to the different "modes" of + writing that might be used to describe the same image. Your goal might be + to draw focus to a particular aspect of the image or to describe the entire + thing, and your image description should reflect that goal.

    +
    +
    diff --git a/scss/main.scss b/scss/main.scss index dd278ad..db4421b 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -65,4 +65,8 @@ p, li { } } +li p { + margin-bottom: 0.5rem; +} + // vim: set ft=scss: diff --git a/scss/theme/code/_hljs.scss b/scss/theme/code/_hljs.scss index 95bceb4..a826a4e 100644 --- a/scss/theme/code/_hljs.scss +++ b/scss/theme/code/_hljs.scss @@ -36,7 +36,7 @@ code, code.hljs { } } - .hljs-keyword, .hljs-tag { + .hljs-keyword, .hljs-name { font-weight: bold !important; } diff --git a/scss/tutorial.scss b/scss/tutorial.scss index 239547b..164e62d 100644 --- a/scss/tutorial.scss +++ b/scss/tutorial.scss @@ -32,20 +32,10 @@ $block-margin: 1rem; background-color: map.get($theme, "body-background"); } - [data-theme="#{$name}"] tr:hover { - background-color: color.mix(map.get($theme, "body-font-color"), - map.get($theme, "body-background"), 2.5%); - } - [data-theme="#{$name}"] tr:nth-child(2n) { background-color: color.mix(map.get($theme, "body-font-color"), map.get($theme, "body-background"), 5%); } - - [data-theme="#{$name}"] tr:nth-child(2n):hover { - background-color: color.mix(map.get($theme, "body-font-color"), - map.get($theme, "body-background"), 7.5%); - } } td { @@ -60,9 +50,14 @@ th { .permalink { display: inline-block; - &:hover::after { + & a::after { content: '\00b6'; margin-left: 0.5em; + visibility: hidden; + } + + &:hover a::after { + visibility: visible; } @each $name, $theme in $themes { @@ -99,6 +94,24 @@ p, li { } } +// definition lists +dt { + @each $name, $theme in $themes { + [data-theme="#{$name}"] & a { + color: color.mix(map.get($theme, "palette-primary"), + map.get($theme, "body-font-color"), $weight: 70%); + text-decoration: underline dotted; + } + + [data-theme="#{$name}"] & a:hover, + [data-theme="#{$name}"] & a:active { + color: color.mix(map.get($theme, "palette-primary"), + map.get($theme, "body-font-color"), $weight: 60%); + text-decoration: underline solid; + } + } +} + pre { @include breakpoint(medium up) { white-space: pre-wrap; diff --git a/webpack.config.js b/webpack.config.js index 24c19e4..5eab84b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const apps = [ { entry: 'main', - name: (e) => 'index', + name: (e) => e, title: 'elucidate', template: './ejs/main.ejs', script: './js/simple.js', @@ -19,6 +19,10 @@ const apps = [ './static/elucidate_light.svg', './static/elucidate_dark.svg', ], + pages: [ + 'index', + 'motivation', + ], partials: [ { name: 'nav', @@ -28,7 +32,7 @@ const apps = [ { name: 'body', filename: (e) => - path.resolve(__dirname, './ejs/partials/index.html'), + path.resolve(__dirname, './ejs/partials', `${e}.html`), }, ], }, @@ -103,6 +107,7 @@ const apps = [ 'basic', 'skeleton', 'cheatsheet', + 'resources', ], partials: [ {