writing.html

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A personal site for Tatiana Mac, an American designer who builds inclusive, accessible, and ethical products with thoughtful practices.">
    <title>Designer &middot; Tatiana Mac</title>
    <link rel="preload" href="../fonts/05-brother1816-book-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="../fonts/freigdisproboo-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="../fonts/leaguegothic-condensed-regular-webfont.woff" as="font" type="font/woff" crossorigin>
    <link rel="stylesheet" href="css/main.css">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0e4bff">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#ffffff">
</head>

<body>
    <div id="skip">
        <a href="#content">Skip Content</a>
    </div>
    <div class="container bg-black">
        <header class="site-header wrapper">
            <div class="logo grid-whole@xxs grid-whole@xs grid-half@s grid-third@m grid-third@l grid-third@xl">
                <a href="index.html"><img src="images/tatianamac_logo.svg" alt="Geometric logo with two parallel lines on top and bottom, then a backwards 11 in the middle." /></a>
            </div>
            <nav class="main-navigation grid-whole@xxs grid-whole@xs grid-half@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl">
                <ul class="navi linklist">
                    <li><a href="#work" class="t-white t-link-accent-white t-ltr-stretch t-height-medium">Work</a></li>
                    <li><a href="#writing" class="t-white t-link-accent-white t-ltr-stretch t-height-medium">Writing</a></li>
                    <li><a href="#speaking" class="t-white t-link-accent-white t-ltr-stretch">Speaking</a></li>
                    <li><a href="#sponsor" class="t-white t-link-accent-white t-ltr-stretch">Sponsor</a></li>
                    <li><a href="#about" class="t-white t-link-accent-white t-ltr-stretch">About</a></li>
                    <li><a href="#contact" class="t-white t-link-accent-white t-ltr-stretch">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <main id="content">
<section id="writing" class="container bg-black">
    <div class="wrapper">
        <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl span-row-two@m span-row-two@l span-row-two@xl padding-thinn">
            <h2 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-white">Writing</h2>
            <h3 class="t-thiccfont@xs t-thiccfont@s t-chonkfont@m t-chonkfont@l t-chonkfont@xl t-height-tight t-serifweight t-white t-height-tight">Bah-hum-blog.</h3>
            <p><a class="t-white t-link-accent-white t-ltr-stretch" href="https://medium.com/@tatianatmac/" target="_blank" rel="noopener noreferrer">Medium</a></p>
        </div>
        <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
            <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                The question to answer isn't, &ldquo;Have I made a place where people have the freedom to express themselves?&rdquo; Instead we have to ask, &ldquo;Have I made a place where everyone has the safety to exist?&rdquo;
            </p>
            <p><a class="t-link-accent-pink" href="https://alistapart.com/article/canary-in-a-coal-mine-how-tech-provides-platforms-for-hate" target="_blank" rel="noopener noreferrer">Canary in a coal mine: How tech provides platforms for hate</a></p>
        </div>
        <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
            <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                I think we can forget what we are capable of and what we deserve when we’re sad. We end up dodging failure instead of reaching for radical success.
            </p>
            <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/trust-the-process-how-to-present-your-best-when-youre-at-your-worst-166dad8cc4" target="_blank" rel="noopener noreferrer">TRUST the Process: How to present your best, when you’re at your worst</a></p>
        </div>
        <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
            <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                But what if we were more okay accepting imperfect, in-progress, new things? Perhaps imposter syndrome would be less pervasive and there’d be less shame.
            </p>
            <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/why-we-need-more-beginners-teaching-7b8982eb6a4e" target="_blank" rel="noopener noreferrer">Why we need more beginners teaching</a></p>
        </div>
        <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
            <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                True vulnerability is a powerful tool for developing trust. It represents strength and security in who you are and what you bring to your work.
            </p>
            <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/creative-leadership-you-lead-like-a-girl-defying-the-patriarchy-with-feminist-leadership-e5845e966967" target="_blank" rel="noopener noreferrer">You lead like a girl: Defying the patriarchy with feminist leadership</a></p>
        </div>
        <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
            <p class="t-serifweight t-height-cozy t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                Perpetual motion is good, but not if it's directionless. Methodical decision-making is also good, but not if it means stagnation. We are told to dream big, but rarely are we told to do small.
            </p>
            <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/progress-over-perfection-something-now-over-everything-never-8af7608ba6c4" target="_blank" rel="noopener noreferrer">Progress over perfection: Something now over everything never</a></p>
        </div>
        <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
            <img src="images/spilled-glasses.svg" alt="Spilled glasses in neon green puddle.">
        </div>
    </div>
</section>
<div class="container clearspace">
    <div class="zigzag-black-green">
    </div>
    <div class="zigzag-green-fuschia">
    </div>
</div>
<footer id="contact" class="container">
    <div class="wrapper">
        <div class=" grid-whole@xs grid-whole@s grid-whole@m grid-whole@l grid-whole@xl">
            <h2 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-white">Contact</h2>
        </div>
        <div class="grid-half@xs grid-third@s grid-third@m grid-third@l grid-third@xl">
            <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="mailto:tatianatmac@gmail.com">Email</a>
        </div>
        <div class="grid-half@xs grid-third@s grid-third@m grid-third@l grid-third@xl">
            <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="https://www.twitter.com/tatianatmac/" target="_blank" rel="noopener noreferrer">Twitter</a>
        </div>
        <div class="grid-half@xs grid-third@s grid-third@m grid-third@l grid-third@xl">
            <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="https://www.dribbble.com/tatianatmac/" target="_blank" rel="noopener noreferrer">Dribbble</a>
        </div>
        <div class="grid-whole@xs grid-whole@s grid-whole@m grid-whole@l grid-whole@xl">
            <p class="t-white t-mini">Copyright &copy; Tatiana Mac, 2019. Built with HTML &amp; CSS with Sass and sass. Read my <a class="t-link-accent-green t-white" href="release-notes.html">release notes</a>.</p>
        </div>
    </div>
</footer>
</body>

</html>