<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>#SheCoded 👩🏿‍💻👩‍💻👩🏾‍💻 - DEV Community</title>
    <%= favicon_link_tag %>
    <style>
      * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
            Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          color: #46286e;
        }

        html,
        body {
          background: url(<%= asset_path "SheCodedBackground.png" %>);
          background-color: #cabde6;
          background-repeat: repeat;
          width: 100%;
        }

        .mobile-only {
          display: none;
        }

        .content {
          width: 80%;
          max-width: 1000px;
          background-color: white;
          margin: 0 auto;
          padding: 90px 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        h1 {
          font-weight: 500;
          font-size: calc(1.7vw + 22px);
          text-align: center;
          padding-bottom: 10px;
        }

        img {
          width: 40%;
          margin: 0 auto;
          display: block;
        }

        .text {
          padding: 0 5% 30px 5%;
          max-width:650px;
          margin: 0px auto;
        }

        .text > * {
          padding-top: 20px;
          font-size: 16px;
        }

        .button {
          display: block;
          width: 400px;
          padding: 20px 30px;
          text-align: center;
          margin: 10px auto;
          text-decoration: none;
          font-weight: bold;
          box-shadow: 3px 3px 2px #bababa;
          border-radius: 3px;
        }

        .lavender {
          background-color: #cabde6;
        }

        .purple {
          background-color: #46286e;
          color: #cabde6;
        }

        .logo-link,
        .logo {
          margin: 0 auto;
          display: block;
        }

        .logo {
          width: 66px;
          height: 42px;
          padding: 7px 8px 6px 10px;
          fill: white;
          margin-top: 10px;
          border-radius: 3px;
          background: #cabde6;
        }
        .posts {
          width: 94%;
          margin: 50px auto 20px;
        }
        .single-post {
          width: 98%;
          margin: 0px 1% 10px;
          border: 1px solid #cabde6;
          box-sizing: border-box;
          padding: 40px 10px;
          border-radius: 3px;
          display: inline-block;
          text-align: center;
          text-decoration: none;
          box-shadow: 3px 3px 0px #cabde6;
          overflow: hidden;
          height: 320px;
          width: 31%;
        }
        @media only screen and (max-width: 1200px) {
          .single-post {
            width: 47.5%;
          }
        }
        @media only screen and (max-width: 750px) {
          .single-post {
            width: 100%;
          }
        }

        .single-post img {
          border-radius: 100px;
          border: 3px solid #cabde6;
          width: 96px;
          height: 96px;
          margin-bottom: 8px;
        }

        .single-post h4 {
          font-weight: 400;
          margin-top: 2px;
          font-size: 0.98em;
        }

        .single-post h5 {
          margin-top: 5px;
          font-size: 0.82em;
        }

        footer {
          text-align: center;
        }

        footer a {
          display: inline-block;
          margin-right: 8px;
          margin-top: 20px;
        }

        @media only screen and (max-width: 600px) {
          .content {
            width: 100%;
            padding-top: 40px;
            background-color: rgba(256, 256, 256, 0.8);
          }

          html,
          body {
            background: none;
          }

          .button {
            width: 80%;
          }
        }

        @media only screen and (max-height: 950px) {
          html,
          body {
            position: initial;
            height: initial;
            width: initial;
          }

          .content {
            height: 100%;
          }
        }

        @media only screen and (max-width: 400px) {
          html,
          body {
            position: initial;
            height: initial;
            width: initial;
          }
          .content {
            padding: 20px 10px;
          }
        }
    </style>
    <link rel="canonical" href="https://dev.to/shecoded" />
    <meta name="description" content="Nevertheless, She Coded.">
    <meta name="keywords" content="software development,engineering,rails,javascript,women in tech">

    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://dev.to/shecoded" />
    <meta property="og:title" content="#SheCoded 👩🏿‍💻👩‍💻👩🏾‍💻 - DEV Community" />
    <meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/uq9ixvhm30tlo1j2hj5v.png" />
    <meta property="og:description" content="Nevertheless, She Coded." />
    <meta property="og:site_name" content="DEV Community" />

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ThePracticalDev">
    <meta name="twitter:title" content="#SheCoded 👩🏿‍💻👩‍💻👩🏾‍💻 - DEV Community">
    <meta name="twitter:description" content="Nevertheless, She Coded.">
    <meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/uq9ixvhm30tlo1j2hj5v.png">
  </head>
  <body>
    <div class="content">
      <h1>Nevertheless, She Coded</h1>
      <img src="<%= asset_path "SheCodedLogo.png" %>" alt="shecoded logo">
      <div class="text">
        <b>
          It's International Women's Day!!
        </b>
        <p>
          Each year, "Nevertheless, She Coded" amplifies the journeys of women
          and non-binary people who code. We started this celebration two years
          ago and we're excited to share that #SheCoded has developed into a truly
          impressive collection of voices, with each voice full of insight and
          excellent advice. We hope you'll participate and celebrate this
          important day with us.
        </p>
        <p>
          Since 'Balance For Better' is the official 2019 theme for IWD, we're
          adding the opportunity for allies to participate as well. As they say,
          everyone has a part to play, and we want to hear from allies on how
          they'll support women and non-binary devs.
        </p>
      </div>
      <a href="/new/shecoded" class="button purple">WRITE A #SheCoded POST</a>
      <a href="/new/theycoded" class="button lavender">WRITE A #TheyCoded POST</a>
      <a href="/new/shecodedally" class="button purple">WRITE A #SheCodedAlly POST</a>
      <a href="/" class="logo-link" id="logo-link" aria-label="DEV Home">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          version="1"
          width="20%"
          height="20%"
          viewBox="0 0 132.000000 65.000000"
          class="logo">
          <path d="M0 33v32h11.3c12.5 0 17.7-1.6 21.5-6.5 3.8-4.8 4.4-9 4-28-.3-16.8-.5-18.2-2.7-21.8C30.3 2.5 26.1 1 12 1H0v32zm23.1-19.1c2.3 1.9 2.4 2.3 2.4 18.5 0 15.7-.1 16.7-2.2 18.8-1.7 1.6-3.5 2.2-7 2.2l-4.8.1-.3-20.8L11 12h4.9c3.3 0 5.6.6 7.2 1.9zM46.1 3.6c-2 2.6-2.1 3.9-2.1 29.6v26.9l2.5 2.4c2.3 2.4 2.9 2.5 16 2.5H76V54.1l-10.2-.3-10.3-.3v-15l6.3-.3 6.2-.3V27H55V12h21V1H62.1c-13.9 0-14 0-16 2.6zM87 15.2c2.1 7.9 5.5 20.8 7.6 28.8 3.2 12.3 4.3 15 7 17.7 1.9 2 4.2 3.3 5.7 3.3 3.1 0 7.1-3.1 8.5-6.7 1-2.6 15.2-55.6 15.2-56.8 0-.3-2.8-.5-6.2-.3l-6.3.3-5.6 21.5c-3.5 13.6-5.8 20.8-6.2 19.5C105.9 40 96 1.9 96 1.4c0-.2-2.9-.4-6.4-.4h-6.4L87 15.2z"></path>
        </svg>
      </a>
      <div class="posts">
        <% @top_articles.each do |article| %>
          <a href="<%= article.path %>" class="single-post">
            <img src="<%= ProfileImage.new(article.user).get(150) %>" alt="<%= article.user.name %> profile image">
            <h3>
              <%= article.title %>
            </h3>
            <h4>
              <%= article.user.name %>
            </h4>
            <h5>
              #<%= (article.cached_tag_list_array & %w[shecoded theycoded shecodedally]).first %>
            </h5>
          </a>
        <% end %>
        <% @articles.each do |article| %>
          <a href="<%= article.path %>" class="single-post">
            <img src="<%= ProfileImage.new(article.user).get(150) %>" alt="<%= article.user.name %> profile image">
            <h3>
              <%= article.title %>
            </h3>
            <h4>
              <%= article.user.name %>
            </h4>
            <h5>
              #<%= (article.cached_tag_list_array & %w[shecoded theycoded shecodedally]).first %>
            </h5>
          </a>
        <% end %>
      </div>
      <%= render "layouts/footer" %>
    </div>
  </body>
</html>
