{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/blog/2020/201004-swoosh-underline-on-hover/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Reading, writing, rambling"}},"markdownRemark":{"id":"4f576dd8-d278-5228-966e-801b6b8485a2","excerpt":"As I mentioned in my last post, I’m finally working on reskinning my personal blog and using Gatsby to build the site. I am also taking Wes Bos’s Master Gatsby course and realized that menus don’t need to be as static and boring as they historically have been. Since you can do almost anything with…","html":"<p>As I mentioned in my last post, I’m finally working on reskinning my personal blog and using Gatsby to build the site. I am also taking <a href=\"https://mastergatsby.com/\">Wes Bos’s Master Gatsby course</a> and realized that menus don’t need to be as static and boring as they historically have been. Since you can do almost anything with CSS, I decided to attempt a swoosh underline on hover, and it was more challenging than I expected.</p>\n<p>Basic layout of the Nav is pretty dry markup:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&lt;ul>\n  &lt;li>\n    &lt;Link to=\"/about\">about&lt;/Link>\n  &lt;/li>\n  &lt;li>\n    &lt;Link to=\"/projects\">projects&lt;/Link>\n  &lt;/li>\n  &lt;li>\n    &lt;Link to=\"/contact\">contact&lt;/Link>\n  &lt;/li>\n&lt;/ul></code></pre></div>\n<p>Using styled-components, I could experiment with different colors and treatments on the fly. You can see the result on the page above, but here is how I landed on the swoosh:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">const StyledNav = styled.nav`\n  display: flex;\n  justify-content: flex-end;\n\n  ul {\n    list-style-type: none;\n    display: flex;\n\n    li {\n      margin-right: 1rem;\n      font-size: 1.25rem;\n\n      a {\n        padding: 0.5rem;\n        text-decoration: none;\n        border: solid transparent;\n        border-width: 0 0 thick 10px;\n      }\n\n      a:hover {\n        color: purple;\n        border: solid purple;\n        border-width: 0 0 thick 10px;\n        border-color: transparent purple purple transparent;\n        border-radius: 0 0 20px 0;\n      }\n    }\n  }\n`</code></pre></div>\n<p>Wrap the dry unordered list with the <StyledNav> component, and voila! The key to not having janky hover styles is to ensure that your padding, margin, and borders are consistent between hover and non-hover states. Using <code class=\"language-text\">transparent</code> as the color helps with the borders width.</p>","frontmatter":{"title":"Swoosh underline on hover (CSS)","date":"October 04, 2020","description":"I wanted a fancy way to indicate links with a hover state.. so I had some fun with border styles."}}},"pageContext":{"slug":"/blog/2020/201004-swoosh-underline-on-hover/","previousPost":{"fields":{"collection":"blog","slug":"/blog/2020/201003-background-images/"},"frontmatter":{"title":"Opaque background images"}},"nextPost":{"fields":{"collection":"blog","slug":"/blog/2020/201010-using_styled_components_with_gatsby/"},"frontmatter":{"title":"Using Styled Components With Gatsby"}}}},
    "staticQueryHashes": ["1065329315","3000541721","3527923327"]}