Journal Web Design Tasks

[SavannahRicks]

As of 8/29/23

• Sticky the Day links
• Increase paragraph/heading font (experiment all together)
• Make consistant font sizes
• Narrow Gloss section
• Change color palette that's consistent with main page
• Fix May 1820 popup redirection (use only https links)
• Change how links appear, avoid buttons but maybe a hover element
• Get rid of blurb above mitford nav bar?
• Ease up on the layering of div blocking
• Fix any excessive spacing
• For later (glosses): Link previews instead of iframes (research JS and/or OpenGraph for this)
• XSLT output of plants and animals should put genus and species on same line. This will require some XSLT finessing.
• Edit links inside of entries, make sure to not effect nav bar.
• !! BIG IDEA !! Just like issolating gloss entries after clicking a link from an entry, maybe make a link from the gloss section and only show entries mentioning the specific gloss entry.
• Think about/model a color scheme for the different kinds of SI context markup (persons, places, events). The colors should the same across the Mitford project. The style for Letters is a bit outdated and we can rethink this from the POV of the journal. Examples:

• Letter: https://digitalmitford.org/getLetterText.php?uri=1821-01-07-BRHaydon.xml
• Poems (most recent styling experiment before the journal): https://digitalmitford.github.io/DM_poetry/xslt/1827Sonnets.html

[SavannahRicks]

Some new ideas, 5/28/23:

• Add a footer?

• Includes copyright

• Runs by info

• last updated info

• contact info

• github link?

• get rid of border radius

• bring down calender days sticky from touching the top

• close spacing between entry days and paragraphs

• Change entry days font color

• Why is paragraph font size different in entries and gloss?

• Sticky the Month/Year Heading

[ebeshero]

18 July 2023:

Refactoring CSS (and JS)

• Do we want to allow for changes to font-size triggered by JS? (We can do this):

     for (var i = 0; i < entries.length; i++) {
     entries[i].style.fontSize = 'smaller';
     /* Maybe we don't need to change the size with JS. Just change it to be smaller across the site in CSS. */
     entries[i].classList.toggle("on");
    }

But is it necessary? Try reducing font-size for all the gloss entries in CSS

• Can we simplify the way we're controlling font-size and proportional units across the site.

• This starts with the flex containers on the top-level structural elements
• Note how font-size and spacing are inherited ("cascade") from high-level to "deep-nested" elements. Can we simplify how to control the size by reducing the number of places where font-size is referenced.
• What other simplifications can we make to proportions / units across the CSS?

• Read up on best practices for units on fonts vs. units on other kinds of spacing in websites:

• https://www.w3.org/Style/Examples/007/units.en.html (explains what's good about em units in particular and how to work with em and rem
• https://fullscale.io/blog/best-css-unit-for-responsive-web-design/

[ebeshero]

@SavannahRicks Here's something we should check at our next meeting: Are we transforming the <gap> elements in our HTML output to indicate where things are crossed out or illegible?