6.9 #Components.logo Logo
The logo is used to identify the website for branding purposes. It is made up of two parts: the Icon and the Wordmark. Both the Icon and the Wordmark are made out of inlined SVG.
The Icon is a standalone graphic that can be used for things like the website's favicon, or for social media avatars. The Wordmark is the name of the website, with a branded treatment. Both the Icon and the Wordmark can be used in isolation, depending on the context it is supposed to be used for.
On the website, the Wordmark is set to disappear when the viewport is narrow. This is to provide more room for the primary navigation, until the viewport is so narrow that a menu treatment must be used.
The Icon will always be displayed, so it has a title element applied to
its SVG. The Wordmark's presence is removed from assistive technology, so as
to avoid redundant announcements when both it and the Icon are present.
TODO: Add links
Markup
<div id="logo" class="c-logo">
<a class="c-logo__link" href="index.html">
<svg class="c-logo__icon" role="img" width="51" height="51" xmlns="http://www.w3.org/2000/svg">
<title>The A11Y Project</title>
<path d="M25.5 0C11.417 0 0 11.417 0 25.5S11.417 51 25.5 51 51 39.583 51 25.5 39.583 0 25.5 0zm-.385 5.064a3.3 3.3 0 0 1 3.307 3.291 3.304 3.304 0 0 1-3.307 3.306 3.3 3.3 0 0 1-3.29-3.306 3.29 3.29 0 0 1 3.29-3.291zm14.289 10.652l-9.809 1.24.005 9.817 4.755 15.867a1.85 1.85 0 0 1-1.344 2.252c-.989.25-2.003-.3-2.252-1.298l-4.87-14.443h-1.498l-4.48 14.742c-.374.964-1.448 1.404-2.407 1.03-.954-.37-1.533-1.454-1.158-2.418l4.115-15.572v-9.978l-9.04-1.228c-.928-.075-1.558-.89-1.483-1.818.07-.934.914-1.628 1.838-1.554l10.982.944h4.815l11.69-.963a1.68 1.68 0 0 1 1.749 1.623c.04.924-.68 1.718-1.608 1.758z" />
</svg>
<svg class="c-logo__wordmark" aria-hidden="true" focusable="false" width="180" height="20" xmlns="http://www.w3.org/2000/svg">
<path d="M6.973 15H3.945V3.242H.068V.722H10.85v2.52H6.973V15zM24.746 15H21.73V8.838h-5.655V15h-3.027V.723h3.027v5.595h5.654V.723h3.018V15zM36.582 15h-8.223V.723h8.223v2.48h-5.195v3.135h4.834v2.48h-4.834V12.5h5.195V15zM53.506 15l-1.035-3.398h-5.205L46.23 15h-3.262L48.008.664h3.701L56.768 15h-3.262zm-1.758-5.938c-.957-3.079-1.497-4.82-1.621-5.224a16.453 16.453 0 0 1-.254-.957c-.215.833-.83 2.894-1.846 6.181h3.721zM64.756 15h-3.018V6.738v-.605l.02-.742c.013-.26.023-.521.03-.782.012-.26.022-.498.028-.713-.032.04-.088.098-.166.176l-.263.264-.303.283a5.13 5.13 0 0 1-.303.264L59.141 6.2l-1.465-1.816 4.6-3.662h2.48V15zM75.772 15h-3.018V6.738v-.605l.02-.742c.013-.26.022-.521.029-.782.013-.26.023-.498.029-.713-.032.04-.088.098-.166.176l-.264.264-.302.283a5.162 5.162 0 0 1-.303.264L70.157 6.2 68.69 4.385l4.6-3.662h2.48V15zM85.049 6.602l2.978-5.88h3.262l-4.736 8.721V15h-3.008V9.541L78.809.723h3.28l2.96 5.879zM101.309 7.441h.996c.931 0 1.627-.182 2.09-.546.462-.372.693-.909.693-1.612 0-.71-.195-1.234-.586-1.572-.384-.339-.99-.508-1.816-.508h-1.377v4.238zm6.836-2.265c0 1.536-.482 2.711-1.446 3.525-.957.814-2.321 1.22-4.092 1.22h-1.298V15h-3.028V.723h4.561c1.732 0 3.047.374 3.945 1.123.905.742 1.358 1.852 1.358 3.33zM113.867 7.06h.977c.957 0 1.663-.159 2.119-.478.456-.319.683-.82.683-1.504 0-.677-.234-1.159-.703-1.445-.462-.287-1.181-.43-2.158-.43h-.918v3.858zm0 2.461V15h-3.027V.723H115c1.94 0 3.376.354 4.307 1.064.931.703 1.396 1.774 1.396 3.213 0 .84-.231 1.589-.693 2.246-.462.651-1.117 1.162-1.963 1.533L122.246 15h-3.359l-3.408-5.479h-1.612zM137.002 7.842c0 2.363-.586 4.18-1.758 5.449-1.172 1.27-2.851 1.904-5.039 1.904-2.187 0-3.867-.635-5.039-1.904-1.172-1.27-1.758-3.092-1.758-5.469 0-2.376.586-4.19 1.758-5.44 1.178-1.256 2.865-1.884 5.059-1.884s3.87.632 5.029 1.895c1.165 1.263 1.748 3.079 1.748 5.449zm-10.42 0c0 1.595.303 2.796.908 3.603.606.808 1.511 1.211 2.715 1.211 2.415 0 3.623-1.605 3.623-4.814 0-3.216-1.201-4.824-3.603-4.824-1.205 0-2.113.406-2.725 1.22-.612.808-.918 2.009-.918 3.604zM138.467 19.2c-.684 0-1.279-.072-1.787-.216v-2.52c.521.131.996.196 1.425.196.665 0 1.14-.208 1.426-.625.287-.41.43-1.055.43-1.933V.722h3.027v13.36c0 1.667-.381 2.936-1.142 3.809-.762.872-1.888 1.308-3.379 1.308zM154.805 15h-8.223V.723h8.223v2.48h-5.196v3.135h4.834v2.48h-4.834V12.5h5.196V15zM163.857 3.037c-1.139 0-2.021.43-2.646 1.29-.625.852-.938 2.043-.938 3.573 0 3.184 1.195 4.776 3.584 4.776 1.003 0 2.217-.25 3.643-.752v2.539c-1.172.488-2.48.732-3.926.732-2.077 0-3.665-.628-4.765-1.885-1.101-1.263-1.651-3.072-1.651-5.43 0-1.484.27-2.782.811-3.896.54-1.12 1.315-1.976 2.324-2.568 1.016-.599 2.204-.898 3.564-.898 1.387 0 2.78.335 4.18 1.005l-.976 2.461a16.127 16.127 0 0 0-1.612-.664 4.806 4.806 0 0 0-1.592-.283zM176.055 15h-3.028V3.242h-3.877V.722h10.782v2.52h-3.877V15z" />
</svg>
</a>
</div>
Source:
src/css/components/_c-logo.scss, line 1