lingo.lol is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for linguists, philologists, and other lovers of languages.

Server stats:

61
active users

#layout

0 posts0 participants0 posts today
Ana Tudor 🐯<p>Help? 😟</p><p>Stupid <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> question: why isn't my <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> respected?</p><p><a href="https://codepen.io/thebabydino/pen/xbGeReB" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/xbG</span><span class="invisible">eReB</span></a></p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
jfml - Jonas Laugs<p><span class="h-card" translate="no"><a href="https://mastodon.social/@belldotbz" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>belldotbz</span></a></span></p><p>Hi ^__^ ✨ I'm Jonas, living in <a href="https://mastodon.art/tags/Edinburgh" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Edinburgh</span></a>, <a href="https://mastodon.art/tags/Scotland" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Scotland</span></a> and <a href="https://mastodon.art/tags/L%C3%BCbeck" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lübeck</span></a>, <a href="https://mastodon.art/tags/Germany" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Germany</span></a>. </p><p>I switched to 100% <a href="https://mastodon.art/tags/Linux" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Linux</span></a> / <a href="https://mastodon.art/tags/FOSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FOSS</span></a> a few years back, so if you need anything from <a href="https://mastodon.art/tags/illustration" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>illustration</span></a> or <a href="https://mastodon.art/tags/logo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>logo</span></a> done in <a href="https://mastodon.art/tags/Inkscape" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Inkscape</span></a>, <a href="https://mastodon.art/tags/GraphicDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GraphicDesign</span></a> and <a href="https://mastodon.art/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> in <a href="https://mastodon.art/tags/Scribus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Scribus</span></a> to <a href="https://mastodon.art/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.art/tags/renderings" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>renderings</span></a> / <a href="https://mastodon.art/tags/animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>animation</span></a> ( <a href="https://mastodon.art/tags/fulldome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fulldome</span></a>) made in <a href="https://mastodon.art/tags/Blender3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Blender3d</span></a> (and <a href="https://mastodon.art/tags/Godot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Godot</span></a>) I'd love to work with you! </p><p>I love <a href="https://mastodon.art/tags/nature" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nature</span></a>, <a href="https://mastodon.art/tags/science" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>science</span></a> and progressive <a href="https://mastodon.art/tags/fantasy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fantasy</span></a>, as well as fighting <a href="https://mastodon.art/tags/capitalism" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>capitalism</span></a> and being <a href="https://mastodon.art/tags/AlwaysAntifascist" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AlwaysAntifascist</span></a>.</p><p><a href="https://mastodon.art/tags/FediHire" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FediHire</span></a> <a href="https://mastodon.art/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.art/tags/b3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>b3d</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Safe align your content · The CSS ‘safe’ keyword is worth knowing <a href="https://ilo.im/164jgu" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/164jgu</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Container" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Container</span></a> <a href="https://mastodon.social/tags/Alignment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Alignment</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssFlexbox</span></a></p>
Ana Tudor 🐯<p>Help an idiot who can't understand <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a>?</p><p>How can I make (cross-browser) the grid middle aligned vertically when it's shorter than the grid container &amp; top aligned when it's taller than the grid container?</p><p>Other than weirdness with nested containers + translate. 🤔 <a href="https://codepen.io/thebabydino/pen/LEVqOpZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEV</span><span class="invisible">qOpZ</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Guides</span></a><br>Figma’s new grid · How the shift to CSS Grid affects designers <a href="https://ilo.im/163twe" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163twe</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Figma</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ProductDesign</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Frontend Dogma<p>CSS Isn’t Broken—You Just Never Read the Docs, by (not found on Mastodon or Bluesky):</p><p><a href="https://archive.fo/0SbnS" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">archive.fo/0SbnS</span><span class="invisible"></span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/documentation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>documentation</span></a> <a href="https://mas.to/tags/cascade" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cascade</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mas.to/tags/presentationalcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>presentationalcss</span></a></p>
Ana Tudor 🐯<p>Irregular shaped image with both convex &amp; concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.</p><p>Because someone asked how to<br><a href="https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1k60</span><span class="invisible">u7w/comment/momcgkp/</span></a></p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/LEExpVg" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEE</span><span class="invisible">xpVg</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> magic.</p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a></p>
Ana Tudor 🐯<p>Help an idiot who is useless with layout? How can I get this result with flexbox and no media queries? If viewport wide enough, those small articles are on the side, one under the other. Otherwise, they're below, next to one another.</p><p><a href="https://codepen.io/thebabydino/pen/XJJpjzv" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJJ</span><span class="invisible">pjzv</span></a></p><p>Thanks!</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flexbox</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Here's a quick responsive clover layout on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/RNw</span><span class="invisible">mjEQ?editors=0100</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerQuery</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Little <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo: stacked avatars <a href="https://codepen.io/thebabydino/pen/ogNQryV" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/ogN</span><span class="invisible">QryV</span></a></p><p>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> and very little of it, just some <a href="https://mastodon.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flexbox</span></a> magic. 🪄</p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a></p>
clew<p>Computer printing history question: Why is imposition such a pain? At what level is “a page” so different from “this graphic” that imposition is still handled by different software than the rest of page layout?</p><p>Historical quirks and links to explanations, vague memories of subtle bugs, all welcome.</p><p><a href="https://ecoevo.social/tags/printing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>printing</span></a> <a href="https://ecoevo.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://ecoevo.social/tags/typesetting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typesetting</span></a> (not using imposition as a hashtag because it's a lively one with a different meaning)</p>
Strange Quark<p>Today is <a href="https://dice.camp/tags/DocumentFreedomDay" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DocumentFreedomDay</span></a>!</p><p>The first rule of Document <a href="https://dice.camp/tags/Freedom" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Freedom</span></a> Day is that we talk about open <a href="https://dice.camp/tags/document" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>document</span></a> formats and tools that allow documents to be accessed, edited and shared by anyone, without restrictions or reliance on specific software or vendor lock-in.</p><p>I wrote the post below to talk about the <a href="https://dice.camp/tags/free" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>free</span></a> and <a href="https://dice.camp/tags/open" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>open</span></a> formats and <a href="https://dice.camp/tags/opensource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opensource</span></a> tools that I am using for the <a href="https://dice.camp/tags/writing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>writing</span></a> <a href="https://dice.camp/tags/typesetting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typesetting</span></a> and <a href="https://dice.camp/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> of Return of the Ripper.</p><p><a href="https://www.kickstarter.com/projects/michaeldavisphd/return-of-the-ripper-a-l1-horror-adventure-for-dcc-rpg/posts/4345861" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">kickstarter.com/projects/micha</span><span class="invisible">eldavisphd/return-of-the-ripper-a-l1-horror-adventure-for-dcc-rpg/posts/4345861</span></a></p><p><a href="https://dice.camp/tags/latex" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>latex</span></a> <a href="https://dice.camp/tags/inkscape" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>inkscape</span></a> <a href="https://dice.camp/tags/gimp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gimp</span></a> <a href="https://dice.camp/tags/git" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>git</span></a></p>
Ana Tudor 🐯<p>Ever wanted to get the number of auto-fit columns in CSS?</p><p>```<br>--u: 5em;<br>grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))<br>```</p><p>It's now possible! Using registered <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> vars, the tan division hack and container query units! Here's a little test on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span>: <br> <a href="https://codepen.io/thebabydino/pen/JojpBJr" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Joj</span><span class="invisible">pBJr</span></a></p><p><a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Luke Dorny<p>Grid Systems</p><p>Book Review</p><p><a href="https://typo.social/tags/blog" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blog</span></a> <a href="https://typo.social/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://typo.social/tags/grids" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grids</span></a> <a href="https://typo.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://typo.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p><p><a href="https://youtu.be/MNMTjffhRcU" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">youtu.be/MNMTjffhRcU</span><span class="invisible"></span></a></p>
Lost In Droiteland<p>Je vais faire le visuel de la saison culturelle de la salle de spectacle où je bosse, je suis ultra hypé !! Voila déjà quelques réflexions, je mets des alt mais je m'excuse par avance les descriptions peineront un peu a rendre le coté visuel... </p><p><a href="https://eldritch.cafe/tags/graphicdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>graphicdesign</span></a> <a href="https://eldritch.cafe/tags/graphisme" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>graphisme</span></a> <a href="https://eldritch.cafe/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
Terry Hancock (Director/Producer)<p><span>I used the "gallery" option in Wordpress (Classic Editor) a lot.<br><br>But what it looks like in the pseudo-HTML source that Wordpress uses is this:<br><br>[gallery columns="4" link="file" ids="7910,7911,7912,7913,7920,7921,7922,7924"]<br><br>Which conversion/archiving tools don't know what to do with.<br><br>I assume Wordpress must generate the gallery HTML everytime the page is loaded? (I'm pretty sure the numbers are document numbers for the images, which also contain size and captions).<br><br>I've been manually converting them to HTML tables, which will work in exported Markdown (albeit just as quoted HTML -- because apparently Markdown doesn't support image tables or galleries).<br><br>Also, I have to open each image and then copy and paste the filename into the "Add Media" search bar in order to add the images to my article so I can put table tags around them.<br><br>Is there a better way to do this?<br><br>Maybe a way to explode the galleries into individual images, at least?<br><br>Also, do any of the static CMS/blog generators handle images and galleries better than this?<br><br>All the ones I know seem to view images as an afterthought, and galleries, let alone artistic layouts not even a tiny bit. Not everything of value is words, folks.<br><br>I'm thinking of migrating to something else -- but what?<br> </span><a href="https://m.filmfreedom.net/tags/Wordpress" rel="nofollow noopener" target="_blank">#Wordpress</a><span> </span><a href="https://m.filmfreedom.net/tags/CMS" rel="nofollow noopener" target="_blank">#CMS</a><span> </span><a href="https://m.filmfreedom.net/tags/Blog" rel="nofollow noopener" target="_blank">#Blog</a><span> </span><a href="https://m.filmfreedom.net/tags/Layout" rel="nofollow noopener" target="_blank">#Layout</a><span> </span><a href="https://m.filmfreedom.net/tags/Images" rel="nofollow noopener" target="_blank">#Images</a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Opportunities" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Opportunities</span></a><br>Revisiting CSS multi-column layout · “One of the most underused layout tools in CSS.” <a href="https://ilo.im/16222j" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/16222j</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CssColumn" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssColumn</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Approaches</span></a><br>CSS container queries unleashed · Where container queries outperform media queries <a href="https://ilo.im/1621uq" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1621uq</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/ContainerQueries" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContainerQueries</span></a> <a href="https://mastodon.social/tags/GracefulDegradation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GracefulDegradation</span></a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ResponsiveDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” <a href="https://ilo.im/161t0f" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/161t0f</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssNesting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssNesting</span></a> <a href="https://mastodon.social/tags/ContainerQueries" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContainerQueries</span></a> <a href="https://mastodon.social/tags/LogicalProperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>LogicalProperties</span></a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ResponsiveDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Buchralle<p>Hallo Selfpublisher*innen! Mit welcher Software layoutet ihr eure Bücher? <br>Wenn ihr ein Text- oder Satzprogramm nutzt, gerne im Kommentar die App nennen.<br><a href="https://literatur.social/tags/selfpublishing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>selfpublishing</span></a> <a href="https://literatur.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://literatur.social/tags/selfpublisher" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>selfpublisher</span></a> <a href="https://literatur.social/tags/buchsatz" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>buchsatz</span></a></p>