search

bowman2001 / perplex

A Hugo theme to publish technical content (docs, news, blog, articles)
https://perplex.desider.at
Apache License 2.0
27 stars 11 forks source link

w3 nu validator complains about figure inside span #130

Closed danielfdickinson closed 9 months ago

danielfdickinson commented 9 months ago

With a feature image I am getting:

       <div class="card__footer"><ul class="author-list"><li><span title="Daniel F. Dickinson">
<figure class="fig fig--w-pt1 fig--portrait-tiny">

        <span 
         class="img__frame" style="display: flex; justify-content: center; align-items: center">
    <span 
     class="img__c" style="position: relative; width: 100%; height: 0; padding-bottom: 123.7624%;">    

<img alt="ASCII smiley face" class="img--ls" height="59" loading="lazy" src="data:image/webp;base64,UklGRroDAABXRUJQVlA4IK4DAAAQFACdASowADsAPsFKoEijoaGWqzSQOwwE9IAJ6Y+3/if1iHo72Hzin16+xfkj+UGoh/ru8EZA/vvGb3F/9A/MT1Vf8B40EaH/G9Mr/G/xH5O+0r6D/6HuE/y7+rf7n1qvWr+zvsmhGFcKekZKVps60WNngQgXbuGQcWoNXxqnmANUUgKRRIFRKCVY8zSyY6Srsyx4B3pI/AB7UTuPAOTLaVS/Y8flHOXYAOJ//HCPMxNLTaqlN0BqbV9jtkSRbkPNttlL/Gzl9dKl8HNNbg2o8PFGOzRMgObSDrv5Kso3aVBgpN85AJGu4SDZqqlgxRhaLIUmm9x8nzr210ROceQLCbAXFkl7mjS2BHb0luYtuIDhYGg28mo2iVvg2EirWbECL/QAkI+XsyAM/Xyu6mFh9rdk4Qjf1Gqxwn+GAmOGKQN7mHEuZ+iL3ao50j/7qu0yXPvThd5jtsgCtEYvYkHCBVB/7mLEBwgZLSNr9nFZkO/IwySBFmEpNWxdgYd4Nyp8ZX2oW4NFhsbpz6An5M+2CcxuF6Iq7cpU82Ed5cGGJ4iXYFR2D8XVWEdyy3gKHF0MlL/og+i8yfQwy99QyYh/UhB0ric54H83V0pGtf8zWK7/JbBXwBXBVPUKmFztmKv1zsR2RZblsL6d3PJMRhRNc/6hEumn/TH2WqAM4Ce3fz1nvOlVHeAzj0XCxnac+0fdcVXtZOM1mwojQY+mLRtn74j6oMyJ7Zf5tvMZv2GU2pJ6VQR+tM73VwTJaYznO/95cgAOGkJy0AbtohU4rqzUqDN1genkYvrvLIk8RlRZ+WTULVUNpmku4dNyDFSn3KxUGoBb2W/65FeuIt+kMYSc/G7MYjkTrwcjrlFcLWrZ0gg/TL2b0OiFEb3vhWI3M56yBDar/4gra9w+elnE4Ccnkv1zdUI60WF8a/ST8YcTGV3YjAdlXnowzFBpF6Im1D5/Im7c2A+/6u58bPDi9cPhNyMbqvYh1Rzd73gt/J6+h/dOzAVH8d/f+7xc+qV5KL7BMWmX/oePOt6CUAtzxjUv5mb0qPiVxM8Ce4t+AQCJSDtx1tAMp3nMa8+tv/827uvxelEfz3nH5kvXNyna/+vPqTjaufb1jIdc3qvTVW+Wn3xpjk8p/wFCMaDDf5WAC+h4tP/5al5/y9Xds9DJcvj29Y7qakGSePFV98K23dAo2X/5C4/3/Yqi9jyhZ+ATRJWQvKc572xzbHjW+QvtWJlLhcdQj74sPoGGLcgAAAA=" width="48"></span>

</span>

</figure></span></li>

which w3c's nu validator (https://github.com/validator/validator) flags as invalid HTML.

This image is the portrait image with width tiny in the resources for an author page:

resources:
- src: ascface.png
  name: portrait
  params:
    alt: "ASCII smiley face"
    width: tiny

I have no ideas how to workaround this one (except to ignore the message for now).

danielfdickinson commented 9 months ago

Like #129 this is an issue related to the 'cards' for taxonomies, recent contributions, and so on.

danielfdickinson commented 9 months ago

So, looking things up on Mozilla Developer Network, I see that \

  • can contain flow content like \
    and \
    and \
    likewise can hold flow content, but \ only accepts inline content, which does not include \
    . So it's matter of hunting all the places like https://github.com/bowman2001/perplex/blob/2de96ee032c4e58ad2ad248b6b1280f4d279b21a/layouts/partials/authors/portrait-tiny.html#L4 where \ needs to be \
    . There may be CSS implications as well, however.

    danielfdickinson commented 9 months ago

    There is another set of issues from around the same time. In https://github.com/bowman2001/perplex/commit/576720921da810090570208078fa71392c74c9e8 you modified a blog/nav/pages and doc/nav/pages to use span instead of div around menu-icon (sections like:

    https://github.com/bowman2001/perplex/blob/2de96ee032c4e58ad2ad248b6b1280f4d279b21a/layouts/partials/doc/nav/pages.html#L20-L22

    Either menu-icon needs to use span or these need to get changed back to div. I'm not sure why you made the change, but I'm include to go back to div.

    danielfdickinson commented 9 months ago

    I've decided to go with the menu-icon div to span after all. It looks good so far.

    bowman2001 commented 9 months ago

    The sole purpose of the <div> or the <span> was to place the "title" attribute with the author name. This was unnecessary because the enclosing <li> can also take the attribute.

    • © Githubissues.
    • Githubissues is a development platform for aggregating issues.