Journal Web Design Tasks

[SavannahRicks]

As of 8/29/23

• [x] Sticky the Day links
• [x] Increase paragraph/heading font (experiment all together)
• [x] Make consistant font sizes
• [ ] Narrow Gloss section
• [x] Change color palette that's consistent with main page
• [ ] Fix May 1820 popup redirection (use only https links)
• [x] Change how links appear, avoid buttons but maybe a hover element
• [ ] Get rid of blurb above mitford nav bar?
• [x] Ease up on the layering of div blocking
• [x] 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

• [x] bring down calender days sticky from touching the top

• [x] close spacing between entry days and paragraphs

• [x] Change entry days font color

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

• [x] 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?