| Age | Commit message (Collapse) | Author |
|---|
|
I'm flinging random CSS attributes at this beast about as gracefully
as Aloy trying to pin down a Thunderjaw.
Someone needs to make a GIF of firing a ropecaster with "position:
absolute", "self-align: center", "justify-content: center", "height:
100%", "display: grid" etc. zooming past with each bolt; it ends with
the giant roaring robot dinosaur breaking free, of course.
|
|
|
|
Mostly copied from the news page.
|
|
|
|
|
|
|
|
Shoo.
|
|
- Space things a bit.
- Add borders.
- Make sure borders stay "grid-like" when zooming, e.g. a 2-line
cell's box should have the same height as a 1-line cell's box.
|
|
|
|
|
|
|
|
Don't know why, but the text stops being centered then.
Of course, the real issue is that the current cell dimensions are
inane and not responsive. Will need to make them saner.
|
|
|
|
I'm just digging my own grave aren't I.
|
|
|
|
FSM help me, I'm writing JS now.
|
|
- Fixup #photos height: no sense using viewport units when the header
and the footer can grow big enough to overlap on this absolute
length.
- Fixup #photos img height: with the above fix to #photos, 100% of a
grid element now takes roughly half the div, modulo padding.
- Displace portraits symmetrically around the grid's center; this
helps maintain the fourth portrait high enough that it does not go
below the div.
Otherwise, when the portrait *does* get below the div, Firefox
glitches: it shows a scrollbar, presumably to allow me to see the rest
of the portrait, except that for some reason (#photos's sticky
position? 🤷), scrolling never happens, and I can scroll infinitely
downward.
|
|
Clicking on summary buttons no longer scrolls the summary div.
|
|
Don't write display:none into regular stylesheets, otherwise people
who disable JS will be screwed.
|
|
|
|
|
|
|
|
This is not going to cut it.
|
|
|
|
Also add the boilerplate.
|
|
|
|
|
|
|
|
|
|
|
|
Since photos now have bounded widths, #bio can naturally take the rest
of the space.
|
|
Hey guys, have you heard of this *grid* thing? It's actually pretty
cool!
|
|
Make "footers" less prominent.
|
|
Note sure I want to leave it in that standalone div. Either tuck it
in the header (and figure how to set grid columns properly) or move it
to the first footer.
|
|
- 1680×1050
- half-window
- 200% zoom
⇒
le <blank>
quatuor actualités
programmes
médias
This commits centers "actualités" vertically.
|
|
IIUC, CSS starts by computing block dimensions; when "Quatuor XXXX"
becomes too big, it picks the max-width; *then* CSS barfs the text
into the block, and finally notices that the text will wrap. Cue ugly
blank space on the right.
https://old.reddit.com/r/css/comments/2y1d6w/fit_block_width_to_content_when_text_wraps_due_to/
|
|
|
|
|
|
Bio also.
|
|
|
|
|
|
|
|
|
|
couldn't find a way to make #photos and #bio backgrounds extend to the
bottom of .main, for some reason.
flex-grow is necessary on .main, otherwise the footer will pick up
excess height when zoomed out.
use flex: 1/2 for #photos/#bio, instead of percentages with
flex-shrink: 0.
|
|
|
|
Use as many character-width-independent units as possible, to make
sure nothing moves too much when zooming.
Move some body CSS to common stylesheet. Probably broke events page,
ah well. All in due time.
Fix "transition" property: apply only to "filter". Otherwise when
zooming images are resized with a slow 1s transition.
|
|
"align-" ⇒ "along the cross-axis"
can get rid of that superstitious "margin: auto" now.
- add quatuor name
- allow nav items to wrap
- make background color less garish
|
|
|
|
Also add footer
|
|
radio buttons cannot be unset, so this might not be The Way.
take the plunge, learn some js, and use <input type="button">?
|
