~dricottone/blog

ref: 4c400159844b0bf539a9595907708781b2c61114 blog/static/css d---------
Linking to socials

A webring is added to the bottom of all blog posts and the home page.
This is powered by openring and stylized as a vertical list against a
light blue background (same blue as sent messages on Chat page).

My recent posts on bluesky are added to the home page. These are
stylized as received chat messages per the Chat page.

My most listened to songs (in alst 30 days) are listed on the home page.
This is an unstylized ordered list.

Minor change to the way width is applied to horizontal breaks.
UI Changes

The chat shortcode has been reworked. Rather than appearing as
paragraphs, the UI elements have been sorted into tabs that are hidden
by default and toggled by buttons.

IDs have been added+changed to accomodate this.

Button and input styling have been abstracted slightly. I am considering
moving these styles further out, to my blog CSS.
Fix to highlighted syntax
Styling chat bubbles

CSS for 'own' and 'other' chat bubbles. This is managed with some clever
positioning and rotation of borders. Colors and sizes are all TBD.

Minor tweaks to the JS to enable this. The message is now returned from
decrypt/verify functions as an object, where message.message contains
the content (which formerly was the entire return value) and
message.trust contains the MessageAuthenticated enum value.

I likely will add further styling for messages that could not be
decrypted, and for messages where the signature could not be verified.
Lightbox version bump; Added link to Upptime
Chat identity

The chat app now uses digital signatures for identify verification.

A new blog post discusses this implementation and what I've learned
about PGP and digital signature cryptography.

Also, minor typo fixes and adding an aspell recipe.
Redesigned layout

Replaced div.footer tag with footer tag. Also rewrote footer content.

Removed excessive div.navi tag.

Removed article tag from non-blog post pages.

Paragraphs are now only indented on blog posts.

Headers are smaller and have less white space below them.

Killed two references to cgit that lingered.

List pages now only show titles and dates, no summaries.

Added Creative Commons licensing for web site content.
Redesign of header/navigation

The header has been killed. Page titles will take its place.

The navigation has been redesigned entirely. For full-size web pages,
the sidebar has been killed in favor of a horizontal list. For mobile
web pages, that same list (i.e. there is only one list that is being
manipulated by CSS) is displayed as vertical blocks. A button that is
styled to look like list item blocks then toggles the visibility of the
list.

This is hopefully more accessible and more reliable than the previous
navigation, which utilized two lists that were dynamically swapped out.
The dropdown menu was also a recurring issue for visual consistency and
accessibility.
Multiple design changes

Refactored header and footer into distinct partials. Also centralized
the CSS for these sections.

Refactored blog post lists into a partial.

Refactored blog HTML and CSS to be more universally clear across my
domains.
Layout and CSS updates

Added a footer to the blog.

CSS for footers has been centralized in the common stylesheet.

CSS for headers has been relocated from the headers stylesheet to the
common stylesheet. A small styling patch was centralized out of the cgit
stylesheet. Links to the headers stylesheet are removed.

An inconsistency between the blog and git web has been fixed. The blog
has a small padding on the main element. Since cgit does not generate a
main element, this styling had to be applied to div#cgit.

An inconsistency in table layouts in git web has been fixed. Table cells
have a transparent border acting as a controlled table separation. Table
headers were lacking the same border and therefore appeared to peak out
over the column.
Complete rework of git CSS

The over-complicated color hierarchy of default cgit CSS is no more.

The navigation tab bar is simplified to plain text with brackets and
margins separating the page links. While not being responsive, this does
declutter the web page significantly.

Section headers are consistently styled like <h2>'s throughout (such as
repo section headers on the index page, and commit subject lines on
commit pages). For now I am leaving table header rows as-is, but I may
go through all pages and edit their appearance as well.

The commit/diff pages have been reworked. The diff options, diff stats,
commit metadata, and commit message components of the page are now shown
as panels with a distinct background and padding.

The colors for the diff page have been reconfigured entirely. As well,
related colors (such as the diff stats bar charts, or the log page
insertions/deletions counts) are brought in line with these colors.

More generally, all colors are now set by CSS variables.

The branch/tag decorations (on the summary, tree, commit, and diff
pages) now are simplified and appear as highlighted text instead of
floating buttons.

The log and plain links on the tree page are finally fixed.
Integrating latest version of gallery/image shortcodes
Fix navigation sidebar

On some platforms (i.e. Firefox for Windows), the scrollbar was shown
regardless of whether it was necessary.
Fix cgit CSS

Fix whitespace throughout

Fix selectors for table row highlighting

Fix commit message formatting
Complete rewrite of cgit CSS
Refactoring more whitespace
Adding resources not yet in use on public site
Next