1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-29 11:32:11 +00:00
Commit graph

52 commits

Author SHA1 Message Date
Rohan Kumar
5741154155
Indieweb: more h-entry metadata
Should have all the basic elements of an h-entry now.
2020-12-28 20:11:43 -08:00
Rohan Kumar
35642e698a
Add Indieweb/RDFa structured data 2020-12-28 16:56:52 -08:00
Rohan Kumar
3471df7ab3
Remove unneeded CSS 2020-12-26 21:04:25 -08:00
Rohan Kumar
ed13aeb13f
Save Hugo version in bottom of <head>
I previously removed this from <head> because the first piece of
metadata should be setting the charset to utf-8. This commit adds it
back, but to the bottom of <head>.
2020-12-23 21:48:27 -08:00
Rohan Kumar
b48bd871a7
Increase padding/tap-targets
- Adding more detail to the bulleted list in /about.html makes it easier
  to tap links since they're further apart
- Pad code frames a bit
2020-12-23 17:04:40 -08:00
Rohan Kumar
51a6d4edde
CI: test with lighthouse, webhint in staging 2020-12-23 17:04:28 -08:00
Rohan Kumar
758460f258
Add date last updated (gitinfo)
Add the date last updated to articles, if articles have been updated
since initial publication. Incldue a link to the article changelog.
2020-12-21 16:39:23 -08:00
Rohan Kumar
ed4aee63b9
Chore: CSS re-org
Because csslint wants CSS to be in ascending specificity.
2020-12-19 18:01:50 -08:00
Rohan Kumar
b9e4be50f5
Metadata: description + cache-bust manifest icons
- Add a cache-busting fingerprint to all the icons in the webmanifest
- Add a <meta> and open graph tag for a description.
- Include a 512px icon in the manifest
2020-12-19 17:50:55 -08:00
Rohan Kumar
68a0528db2
Declare supported color schemes in <head>
State that both dark and light color schemes are supported in the
document <head> to inform browsers before CSS is loaded and parsed.

Also added a bunch of comments.
2020-12-18 18:33:46 -08:00
Rohan Kumar
03da61c393
Remove redundant CSS selectors
Thanks to YellowLabTools for pointing that out
2020-12-18 18:30:34 -08:00
rohan kumar
347b2c189b
Greatly simplify CSS, dark theme fixes
- Changed: Make all color codes 3-char. Shave off a few bytes.
- Removed: all responsive layout besides the navigation links.
  Everything else should work well at all window sizes without making
  allowances for special cases.
- Removed: redundant CSS rules
- Added: centered images. Left-aligned images in a center-aligned column
  of text break flow.
- Added: dark mode link colors for visited/active. Active link colors
  give better a11y.
- Fix: don't show unnecessary scrollbar for <pre> blocks

Also put more comments in the source to explain why each rule is
important.

All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
2020-12-17 21:27:11 -08:00
rohan kumar
e8f31f9f08
Adjust text width/responsiveness
- Text width was too wide on wide screens; reduce it.
- Make the nav-links' responsive layout for narrow viewports trigger at
  a narrower window size. It used to trigger at 600px, but I made it
  trigger at 32rem instead since the nav links aren't too wide. This
  also handles cases where users' default sans-serif fonts are very
  wide: rem measures by character width instead of pixels.
- Make the narrow-optimized multiline-navlinks the default, and make
  widescreens a special case detected with a CSS media query.
  Previously, widescreens were the default; however, this meant that
  browsers that didn't support media queries (like dillo and netsurf)
  couldn't switch to the multi-line navigation at narrow widths. This is
  a good example of progressive enhancement; modern browsers will get
  the same behavior as before, but the lowest common denominator will
  see a better experience.
- Don't further reduce the max-width for narrow screens; narrow screens
  are already narrow. We now have one less CSS rule.
2020-12-17 11:23:37 -08:00
rohan kumar
59bc793152
Asset organization
- Use the recommended resolution for the open graph image
- Since the mask-icon is onl served as a cache-busted asset and never
  served as a plain link from the site root, move it to assets/
- Cache-bust the webmanifest and put it in assets/
2020-12-16 13:19:32 -08:00
rohan kumar
d45926c0f4
CLS: Declare original image dimensions in HTML
Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
during loading.

More info: https://web.dev/optimize-cls/
2020-12-15 23:09:45 -08:00
rohan kumar
af6ece0e10
Add some more metadata for widgets + indieweb
- Add open graph metadata for other apps to display link previews
- Add more rel="me" metadata for the Indieweb. Getting on the Indieweb
  will take some time, but this is a good first step.
2020-12-15 23:05:45 -08:00
rohan kumar
b9a307a8c1
Icons: add the final icon: maskable icon
I just found out that lots of Android devices will letterbox icons; the
latest version of Lighthouse will preview an icon in the safe clipping
range, and that range was way too small for my existing icons. I made a
new version that was mask-safe with the white foreground shrunk down a
bit so it would fit. See [0].

[0]: https://web.dev/maskable-icon-audit/

For consistency, I renamed the Apple mask icon as well.

Why are there so many extensions to the HTML standard for icons? This is
getting ridiculous.

It's time for a rant about icon standards. Let's recap! what icons do I
have so far?

- A 192px apple-touch-icon. Apple icons are supposed to be 180px, but
  192px gets re-sized down just fine. This used to be apple-specific but
  then Android and others started using it. I picked 192px instead of the
  standard 180px because we need...(next bullet)
- A 192px icon for Android devices. Rather than having a separate icon
  for this, I just re-used the existing Apple icon in case the user's
  browser wants both so it can just cache and re-use it.
- The original 32px favicon.png. I picked PNG instead of ICO because an
  ICO containing the optimized PNG was a whopping 2kb while the png was
  176 bytes. It looks fine when scaled down to 16px with a variety of
  automatic downscaling algos, so there was no need to include an extra
  16px version.
- A mask-icon. I was hesitant to implement this since it seemed very
  vendor-specific (desktop Safari only), but it somehow became an
  accepted registered extension to the spec [1] so I figured that it was
  only a matter of time before a bunch of other things started using it.
- A webmanifest file to describe even more icons. It re-defines the
  aforementioned 192px icons. I chose to re-use the icon for the same
  reason as before. It also describes the next two bullets:
- favicon.svg: used in the manifest in case the device wants something
  bigger than 192px.
- A maskable icon (svg), completely unrelated to the aforementioned
  mask-icon, with the focus of the image shrunk down to handle cropping
  e.g. on some Android devices.

[1]: https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes

What I SHOULD have, in an imaginary world where web standards make sense:

- A 32x32 raster icon. Probably PNG, but lossless-webp migth work
  too.
- A 16x16 raster icon, only if the 32x32 version doesn't downscale
  well.
- An svg icon for any other resolution.

What I don't, and probably never will have:

- A msapplication icon for IE 10 on Windows 8.0, for adding sites to the
  Windows 8 Start Screen.
- A browserconfig.xml in my site's root directory for adding sites to
  the Windows 8.1+ Start Screen/Menu with custom icons.

Since MS dumped IE and switched to Edge, documentation for the above was
never updated. I don't run proprietary operating systems, so I can't
test adding a website to the tiled Start Menu or Windows Task Bar.

Now that MS re-wrote Edge as a Chromium-based browser, I really have no
idea how it handles icons; I'd imagine it just does what Chrome does,
but it probably does some odd witchcraft to support adding sites to
Start or the taskbar. Docs don't seem to exist. Until they update the
docs, I'll assume that adding MS icons would mean supporting a
non-standard IE-specific feature.

Due to its simplicity, my site should render fine in browsers going as
far back as IE5; it even works in KHTML. But there are some lines I
won't cross: it'll probably *render* on IE5 but it won't *load* since
https://seirdy.one is TLS 1.2/1.3 only. And it won't support special
proprietary non-standard extensions.

WTF we're almost at 80 lines. I should've just written a blog post.
2020-12-15 14:34:32 -08:00
rohan kumar
8af072a0be
Remove SRI for icons
Apparently SRI is only valid for rel attrs with the value "stylesheet",
"preload", or "modulepreload".
2020-12-14 23:05:08 -08:00
rohan kumar
19520825bb
Icons 2: electric boogaloo
- More sizes
- webmanifest file for even more versions
- symlink icons instead of copying them; fewer binaries in the repo.
2020-12-14 22:11:33 -08:00
rohan kumar
74cb64baa1
CSS: clean up to match stylelint, csslint 2020-12-12 21:05:25 -08:00
rohan kumar
b9d22a1510
Update and cache-bust icons
- The old icon was too off-center; improve it.
- Add a mask icon
- Replace deprecated apple-touch-icon-precomposed.png with
  non-precomposed icon.
- Cache-bust all icons
2020-12-12 20:59:32 -08:00
rohan kumar
18812d6995
Fix touch icon placement 2020-12-12 02:51:38 -08:00
rohan kumar
3086df92eb
csslint compliance and simplification 2020-12-12 02:42:45 -08:00
rohan kumar
6cbe6cc5b1
Add apple-touch-icon-precomposed for phones
Android, iOS, and other browsers use the pseudo-standard
"apple-touch-icon-precomposed.png"; android recommends 192x192px and iOS
downscales to 180x180px.
2020-12-12 02:41:18 -08:00
rohan kumar
74e939f40b
Implement cache-busting and SRI for CSS
Use Hugo's fingerprinting pipes [0] to give external stylesheets an
identifier to enable cache-busting [1].
Since Hugo's fingerprinting automatically generates the information
needed for SRI [2], include an integrity attribute too.

I discovered this feature through webhint [3], and added the .hintrc
file I used to the repo root.

[0]: https://gohugo.io/hugo-pipes/fingerprint/
[1]: https://css-tricks.com/strategies-for-cache-busting-css/
[2]: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
[3]: https://webhint.io/
2020-12-11 17:33:38 -08:00
rohan kumar
6040dca75a
Switch from <section> to <footer>
Sections should have headings, while this is actually a footer.
2020-12-11 12:02:33 -08:00
rohan kumar
38433d16cb
Fix bad mailto: link 2020-11-30 18:41:42 -08:00
rohan kumar
9cae62eac8
Add info on plain-text emails to the footer. 2020-11-30 18:40:31 -08:00
rohan kumar
2776395a33
Improve <title> 2020-11-30 17:19:33 -08:00
rohan kumar
925b8960a8
Add missing <h1> tags 2020-11-30 17:19:33 -08:00
rohan kumar
6ede1a393f
Size: remove some unused styles 2020-11-30 13:17:15 -08:00
rohan kumar
40bd939456
Increase nav link spacing on mobile
Makes them easier to tap with my sausage fingers
2020-11-30 13:06:09 -08:00
rohan kumar
1e44855647
Only load syntax highlighting CSS if necessary..
Pages without highlighted code blocks don't need to load syntax.css; for
those that do, simply declare "highlight: true" in the front matter to
load the stylesheet separately.
2020-11-28 18:01:53 -08:00
rohan kumar
6fba7dbc9a
Reduced some unnecessary styles 2020-11-27 16:14:24 -08:00
rohan kumar
1c75fe501b
Renamed max770px.css -> narrow.css
I don't want to re-name this every time I change the pixel count
2020-11-25 22:31:28 -08:00
rohan kumar
131ad941d7
CSS: navbar tweaks (responsiveness + color)
- Dark mode: make navbar links the same color as regular links so as to
not hide the fact that they are links.
- Make navbar reflow at narrow window sizes
2020-11-25 22:19:52 -08:00
rohan kumar
25ffbd9bbb
Use a sane date format
ISO 8601 and RFC 3339 are the correct date formats.
The other date formats are incorrect.
2020-11-25 22:18:09 -08:00
rohan kumar
0d11909002
Formatting 2020-11-25 00:43:39 -08:00
rohan kumar
b9abb9090c
Only index the canonical location, seirdy.one
Don't index the staging version on my tilde.
2020-11-25 00:38:31 -08:00
rohan kumar
e919c83fd5
Add a canonical URL
Since there's another version of the site on my tilde serving as a
staging area, I should specify a canonical version of the site to avoid
duplicate entries in search results.
2020-11-25 00:24:45 -08:00
rohan kumar
f04f293bdc
Simplify/reduce custom colors
- Make default stylesheet use browser preferred colors
- Stop using css vars for better compatibility with old browsers
2020-11-24 17:09:26 -08:00
rohan kumar
a0cbba8a63
Template accessibility fixes
- Language code in <html> tag
- Make post list more easily clickable by splitting post URLs and
  timestamps.
2020-11-24 17:08:28 -08:00
rohan kumar
1e371f7cfe
Full-text RSS feeds 2020-11-24 17:08:02 -08:00
rohan kumar
a7bfc7fd32
CSS: improve h1 and entry list spacing 2020-11-24 02:08:58 -08:00
rohan kumar
e31cdd52ca
Explicitly set fb/bg colors 2020-11-23 18:19:18 -08:00
rohan kumar
712ca3737c
Simplify styling
Comply with the upcoming article on best practices for textual websites.
2020-11-23 15:47:27 -08:00
rohan kumar
00930bcbc5
Support comments via a Sourcehut mailing list 2020-11-18 22:20:30 -08:00
rohan kumar
359f115307
CSS: make preformatted text bigger 2020-11-18 18:28:51 -08:00
rohan kumar
e614497a36
Fix: fix relative links on different domains 2020-11-18 17:06:55 -08:00
rohan kumar
a4874efc07
Fix: expose RSS feed on all pages 2020-11-17 21:40:37 -08:00