# feather (v2) 2026-03-23 side margins - centered when wider than 800px/80ch/??? - align iframe/video and normal elements when "wide" - minimum side margin/padding when thinner than 800px/80ch/??? - note: `margin-inline: min( auto, 1ch )` does not work.. - iframe/video full width, zero margin/padding, even when thinner than 800px/80ch/??? - nice-to-have when slightly above 800px/80ch/???, incremental side margin/padding current strategy: - normal elements are 800px+2ch wide, with 1ch padding on either side, with margin-inline auto - iframe/video is 800px/80ch/??? with zero margin/padding .. single column with text padded on small screen, aligned on large. fullscreen on mobile landscape fullscreen button on mobile landscape ( for when orientation fullscreen fails ) de-fullscreen on mobile portrait considering: on portrait nothing 100vh, just block flow; image click triggers iframe, fullscreen on landscape image background text on transparent canvas.. how to activate iframe ? # design objective at mobile view, - image and video should be 100% of width, flush with edge of the screen - text and similar content should be x-padded at wide view, - image and video should be a set fixed width, max - text and similar content should be flush with the image and video content ---- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary https://en.wikipedia.org/wiki/Display_resolution _480p is a weird resolution for 16×9, dito 240p_ .. i think those are 4:3 instead.. ( note - 1080 in "1080p" is the *low*, height dimension ) https://en.wikipedia.org/wiki/480p https://en.wikipedia.org/wiki/Low-definition_television User Activity API https://developer.mozilla.org/en-US/docs/Web/Security/User_activation https://developer.mozilla.org/en-US/docs/Web/API/UserActivation https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userActivation https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API Picture / Source Elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set Wo3RRh8JC0k Media & Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries https://developer.mozilla.org/en-US/docs/Web/CSS/@media https://developer.mozilla.org/en-US/docs/Web/CSS/@container https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries https://developer.mozilla.org/en-US/docs/Web/CSS/container-type https://developer.mozilla.org/en-US/docs/Web/CSS/container-name Fullscreen https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allowfullscreen // # fullscreen // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide // https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen // https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allowfullscreen // # orientation // https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation // https://developer.mozilla.org/en-US/docs/Web/API/Screen // https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation // https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientationchange_event // https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type // https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event Orientation https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation https://developer.mozilla.org/en-US/docs/Web/API/Screen https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientationchange_event https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event color palette youtube pXS5sVSe5Kw color: #3f2357; color: #4b4164; color: #5f5c7b; color: #6760a4; color: #d5cdd7; color: #e3d4e7; color: #e4d0fc; color: #fbd8dc; color: #fefefe; TODO youtube images ( sd, hd, fhd, etc ) endpoints ( https://sanishtech.com/tools/youtube-thumbnail-grabber/ ) 1. 120 × 90 - https://img.youtube.com/vi/Wo3RRh8JC0k/default.jpg 2. 320 × 180 - https://img.youtube.com/vi/Wo3RRh8JC0k/mqdefault.jpg 3. 480 × 360 - https://img.youtube.com/vi/Wo3RRh8JC0k/hqdefault.jpg 4. 640 × 480 - https://img.youtube.com/vi/Wo3RRh8JC0k/sddefault.jpg 5. 1280 × 720 - https://img.youtube.com/vi/Wo3RRh8JC0k/maxresdefault.jpg .. + 480 × 360 - https://i.ytimg.com/vi/Wo3RRh8JC0k/hqdefault.jpg + 1280 × 720 - https://i.ytimg.com/vi/Wo3RRh8JC0k/maxresdefault.jpg .. + 480 × 360 - https://i.ytimg.com/vi_webp/Dk1JXlWJLNI/hqdefault.webp + 1280 × 720 - https://i.ytimg.com/vi_webp/Dk1JXlWJLNI/maxresdefault.webp