This repository has been archived by the owner on Jul 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathrelease-notes.html
317 lines (293 loc) · 27.3 KB
/
release-notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!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>Release Notes · Designer · 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">
<script>
LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var j="LUX_start";var k=window.performance;var l=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(k&&k.timing&&k.timing.navigationStart){l=k.timing.navigationStart}function f(){if(k&&k.now){return k.now()}var o=Date.now?Date.now():+(new Date());return o-l}function b(n){if(k){if(k.mark){return k.mark(n)}else{if(k.webkitMark){return k.webkitMark(n)}}}a.push({name:n,entryType:"mark",startTime:f(),duration:0});return}function m(p,t,n){if("undefined"===typeof(t)&&h(j)){t=j}if(k){if(k.measure){if(t){if(n){return k.measure(p,t,n)}else{return k.measure(p,t)}}else{return k.measure(p)}}else{if(k.webkitMeasure){return k.webkitMeasure(p,t,n)}}}var r=0,o=f();if(t){var s=h(t);if(s){r=s.startTime}else{if(k&&k.timing&&k.timing[t]){r=k.timing[t]-k.timing.navigationStart}else{return}}}if(n){var q=h(n);if(q){o=q.startTime}else{if(k&&k.timing&&k.timing[n]){o=k.timing[n]-k.timing.navigationStart}else{return}}}d.push({name:p,entryType:"measure",startTime:r,duration:(o-r)});return}function h(n){return c(n,g())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function g(){if(k){if(k.getEntriesByType){return k.getEntriesByType("mark")}else{if(k.webkitGetEntriesByType){return k.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:m,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};LUX.init=function(){LUX.cmd(["init"])};LUX.send=function(){LUX.cmd(["send"])};LUX.addData=function(a,b){LUX.cmd(["addData",a,b])};LUX_ae=[];window.addEventListener("error",function(a){LUX_ae.push(a)});LUX_al=[];if("function"===typeof(PerformanceObserver)){var LongTaskObserver=new PerformanceObserver(function(c){var b=c.getEntries();for(var a=0;a<b.length;a++){var d=b[a];LUX_al.push(d)}});try{LongTaskObserver.observe({entryTypes:["longtask"],buffered:true})}catch(e){}};
</script>
<script src="https://cdn.speedcurve.com/js/lux.js?id=324891471" async defer crossorigin="anonymous"></script>
</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">
<div id="intro" class="container wrapper bg-black">
<section class="grid-whole@xxs grid-whole@xs grid-whole@s grid-third@m grid-third@l grid-third@xl t-white padding-thinn">
<h1
class="t-serifweight t-thiccfont@xs t-thiccfont@s t-chonkfont@m t-chonkfont@l t-chonkfont@xl t-height-tight">
Release Notes</h1>
<p class="t-white">Because without documentation, what even the fuck am I doing? A summary of bugs caught and released, accessibility and performance improvements, explorations and learnings in
markup.</p>
<p class="t-white">Catch something?<br /><a class="t-link-accent-pink"
href="https://github.com/tatianamac/TM11/issues/new" target="_blank"
rel="noreferrer noopener">File an issue on Github</a>
</section>
<section
class="grid-whole@xxs grid-whole@xs grid-whole@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl t-white padding-thinn">
<p class="t-white t-typeweight t-space-strip">5 July 2019</p>
<h2 id="1-2-3"
class="t-titlingfont t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-space-strip">
Version 1.2.3</h2>
<p class="t-white">I am tired as all get out bc fireworks kept me up all night and I kicked off a new streaming collab called <a class="t-link-accent-pink"href="https://www.thediff.website/" rel="noopener noreferrer">The Diff</a> with the incredible <a class="t-link-accent-pink"href="https://www.henry.codes/" rel="noopener noreferrer">Henry Desroches </a> (aka @xdesro). But I'm determined to get myself disciplined again and release small things every Friday. Help hold me accountable? Today's release was focused around minor content updates.</p>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Content</h3>
<ul class="longform">
<li>Added The Diff to the abridged work section.</li>
<li>Added NEJS Conf, Design+Diversity, Write/Speak/Code to my 2019 conference lineup.</li>
<li>Fixed a few fudged conference links thanks to an issue someone filed on my GitHub!</li>
<li>Added Erik Riedel as Lovers level sponsor. Thank you, Erik!</li>
<li>Added Amberley Romo, Debs, Henry Desroches, Oscar Braunert, Yura as Star sponsors! Thank you!</li>
<li>Added my Codepen (freshly minted PRO user, woop!) to the footer.</li>
<li>Added RSS feed (technically a few weeks ago). I hope I'm doing this right.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Systems</h3>
<ul class="longform">
<li>Broke out <code>_zigzag</code> into its own partial. Before, I kept it only in my <code>_home</code> partial, but as I start to create additional pages, feels like this allows it to be universally accessed and managed. It could use some <code>@mixin</code> usage to make it leaner and DRYer.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
DesOps</h3>
<ul class="longform">
<li>To improve my own workflow, I've started filing issues for myself on GitHub. My hope is this will hold me accountable.</li>
</ul>
<p class="t-white t-typeweight t-space-strip">17 May 2019</p>
<h2 id="1-2-2"
class="t-titlingfont t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-space-strip">
Version 1.2.2</h2>
<p class="t-white">Accepted a few conference gigs (!), broke my MBP2017 keyboard (after months of frustration with the hardware spacebar issue), and migrated to Netlify!</p>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Content</h3>
<ul class="longform">
<li>Added JSConfEU, Mozilla, CSSCamp, and #a11yTO to my conference lineup. Cue upside-down-face emoji. </li>
<li>Upgraded Webflow to Empress sponsorship (thanks, y'all!), which meant adding an Empress area. Not feeling resolved about the design solution here.</li>
<li>Added Amanda Johnson, Heidi Olsen, and Vanessa Wang as Star sponsors! Thank you!</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Systems</h3>
<ul class="longform">
<li>Found that using a super-condensed font was hard to read for longer talk titles. Instead opted to use serif for my speaking section; feels cleaner and less dense.</li>
<li>Took new linking strategy for talks, so I can share both videos and slides as separate links. Triggered by <a class="t-link-accent-pink" href="https://www.youtube.com/watch?v=nQq_gZiZ-jg/" target="_blank" rel="noopener noreferrer">PerfMatters talk</a> being added!</li>
<li>Added a <code>span-row-three</code> for use at larger screen sizes (triggered by the Empress addition to sponsors section), though this time I remembered to write it for my full screen-size range, bc I will need it later.</li>
<li>When validating my HTML, I realised a few SVG <code>textPaths</code> had duplicate <code>ids</code> and <code>hrefs</code>. Whoops.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Performance</h3>
<ul class="longform">
<li>Installed <a class="t-link-accent-pink" href="https://speedcurve.com/" target="_blank" rel="noreferrer noopener">Speedcurve</a>. I'm still very new to this whole performance bit, but I like the way it visualises the filmstrips and ties performance to user-engagement.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Accessibility</h3>
<ul class="longform">
<li>Changed a few <code>divs</code> to more meaningful semantic tags here and there.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Backend</h3>
<ul class="longform">
<li>Migrated to <a class="t-link-accent-pink" href="https://netlify.com/" target="_blank" rel="noreferrer noopener">Netlify</a>, which feels like it spoils developers compared to what we had to go through before. I'm still very new to it, but I love that SSL certificates are built in, that there's a compiler/minifier, and RIP FTP! All performance and developer experience wins all around.</li>
</ul>
<p class="t-white t-typeweight t-space-strip">26 April 2019</p>
<h2 id="1-2-1"
class="t-titlingfont t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-space-strip">
Version 1.2.1</h2>
<p class="t-white">Launched my <a class="t-link-accent-pink" href="https://www.patreon.com/tatianamac/"
target="_blank" rel="noreferrer noopener">Patreon</a>, so this update was fueled by adding a
sponsorship section to reflect that. Adding a section visually impacted flow, which gave me a chance
to explore the extended colour palette.</p>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Content</h3>
<ul class="longform">
<li>Added section for sponsorship to both encourage new patronage and to thank current ones.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Systems</h3>
<ul class="longform">
<li>In some CSS explorations, I learned that <code>filter</code> can't be compounded. But, because
it has overlap qualities with <code>box-shadow</code>, I doubled them up for this fun 8-bit effect to highlight top-level sponsors. It's a progressive enhancement, so I'm less concerned about the fact that its browser support isn't across the board.</li>
<li>A friendly reminder to myself that I should always just write my full <code>@mixins</code>.
Because I structured my CSS to media-query at the component level (in markup), I always end up
needing that flexibility. I get lazy sometimes and always regret it. I really enjoyed
refactoring my CSS this way.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Performance</h3>
<ul class="longform">
<li>Broke up with Typekit. It was too heavy. I purchased font licences and localised all my typography. I found this <a class="t-link-accent-pink" href="https://css-tricks.com/understanding-web-fonts-getting/" target="_blank" rel="noreferrer noopener">webfonts article by Thierry Blancpain</a> to be extra helpful.</li>
<li>Applied <code>font-display: swap</code> to my <code>@font-face</code> declarations. What <code>font-display: swap</code> does is it tells the browser to use your fallback fonts while your custom fonts are being downloaded, so the user isn't waiting for fonts to load to read. Support is not ubiquitous yet, and hosted fonts like Typekit and Google Fonts don't support it, so you have to self host (see above).</li>
<li>Added <code>prefetch</code> as a support for <code>font-display: swap</code>. Together, this the dynamic font-loading duo we need.</li>
<li>Friend <a class="t-link-accent-pink" href="https://www.zachleat.com/web/comprehensive-webfonts/#font-display" target="_blank" rel="noreferrer noopener">Zach Leatherman's article on comprehensive webfonts</a> is one of the best resources. Zach is so good at explaining technical things in an accessible way.
<li>Also, friend <a class="t-link-accent-pink" href="https://noti.st/mandy/AzhOpz/performance-benefits-of-variable-fonts" target="_blank" rel="noreferrer noopener">Mandy Michael's talk on variable fonts</a> inspires me as a next step.</li>
<li>Oh, and because of these improvements, I kicked my PageSpeed score up from 98 to 100 for mobile. Now, I'm rocking double 100s! I'm super proud of this. Have you checked your <a class="t-link-accent-pink" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noreferrer noopener">PageSpeed Insights</a>?</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Security</h3>
<ul class="longform">
<li>Added <code>noreferrer</code> and <code>noopener</code> to all my external links. Lots of nuance
here, but tl;dr is that in doing so, it does not allow browsing data to be passed forward to the
site being opened and closes vulnerabilities of opening a new browser window when using
<code>target="_blank"</code>, respectively. Because I don't care to invade my users' privacy,
this has no impact on my analytics. People who want to steal information about their users by
way of Google Analytics and other tracking should avoid this. Also, I learned that this doesn't
have a negative SEO impact, which many misunderstand it to.</li>
</ul>
<p class="t-white t-typeweight t-space-strip">15 April 2019</p>
<h2 id="1-1-1"
class="t-titlingfont t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-space-strip">
Version 1.1.1</h2>
<p class="t-white">Tax day release (why should I pay taxes to a corrupt government with a president who
doesn't pay taxes?) made some substantial improvements to accessibility and performance. Inspired
what I learned at <a class="t-link-accent-pink" href="https://perfmattersconf.com/" target="_blank"
rel="noreferrer noopener">PerfMatters</a>, I implemented some major performance improvements.
</p> I also learned a lot about semantic HTML, which improved the site's accessibility.</p>
<p class="t-white">From a content strategy perspective, I reframed myself for job hunting and speaking
events.</p>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Content</h3>
<ul class="longform">
<li>Added Canary in a Coal Mine to writing section.</li>
<li>Built out speaking section into its own tier for past and future gigs! Very proud of the fun use
of CSS <code>radial-gradients()</code> and <code>outline</code> to get the stamp effect. In
unsupported browsers, it has more of a puzzle piece feel, which I dig.</li>
<li>Added city stamps to show first (!) international speaking gigs! First time experimenting with
SVG <code>textPaths</code>. The semantics are odd to me; will need to read more. Also, when
running standard accessibility tests, it can get confused about contrast checking, so I had to
manually check.</li>
<li>Built out about section into its own tier. Rewrote it to be a more coherent bio.</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Systems</h3>
<ul class="longform">
<li>Added third titling style typeface</li>
<li>Renamed zigzag dividers to be more intuitive and reusable (colours as opposed to arbitrary
sequence numbers).</li>
</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Performance</h3>
<ul class="longform">
<li>Changed all raster <code><imgs></code> from JPGs to WEBPs. In order to make sure browsers
that don't support WEBP, I used to <code><picture></code> with <code><source></code>
to build in appropriate fallbacks. Building all those image stacks was a bitch, but online image
generators helped me out there.</li>
<li>Added <code>srcsets</code> so that the appropriate image size is served up. <a
class="t-link-accent-pink" href="https://css-tricks.com/responsive-images-css/"
target="_blank" rel="noreferrer noopener">Chris Coyier's article on responsive images</a>
was so helpful!</li>
<li>Replaced the heavy-ass Taco Bell gif with a cute SVG. Ultimately from a content perspective, it
wasn't offering its performance weight. Bye boi, bye.</li>
<li>Minified all my code: SVGs (using Jake Archibald's <a class="t-link-accent-pink"
href="https://jakearchibald.github.io/svgomg/" target="_blank"
rel="noreferrer noopener">SVGOMG</a>) and CSS file using a VSCode extension.</li>
<li>Subsetted Typekit fonts to dispaly only Roman characters.</li>
<li>Implemented cachine. Holy hell was this hard to figure out. I presumed that I'd append it to my
<code>.htaccess</code> file, but none of the tutorials explicitly mentioned this.</li>
<li>Started the day with PageSpeed scores of 91 (mobile) and 94 (desktop). Ended at 98 and 100,
respectively!</li>
</ul>
<h3
class="t-serifweight t-normiefont@xs t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-space-strip t-light-green">
Accessibility</h3>
<ul class="longform">
<li>Created <code><nav></code> area with anchor links to help access information more fluidly. Reminder: If you are about to use an <code>aria-label</code>, first ask yourself: Is there a semantic tag that intrinsically provides that landmark role? (The answer is almost always yes). I see a lot of navigations that are made with <code>divs</code> and this makes me cry a little bit.
</li>
<li>Replaced seasonless <code><divs></code> with semantic HTML. What a joy for screenreader
users to know the sections! I also had a revelation that <code><divs></code> should only
be used for things that have no content consequence. Said another way, if a section has meaning
from an information architecture perspective, it likely has a relevant semantic HTML tag. Taking
this approach, I think that <code><divs></code> should only have computational meaning; to
aid in making something look a certain way.</li>
<li>Rearranged and removed h tags that didn't make sense. Thanks to my super-smart friend <a
href="https://www.twitter.com/MarcySutton" class="t-link-accent-pink" target="_blank"
rel="noreferrer noopener">Marcy Sutton</a> for pointing this out. Remember kids, h tag order
is separate from your visual hierarchy. Don't use h tags to represent sizing; make that
agnostic.</li>
<li>Added Skip to content link with the help of my brilliant friend <a
href="https://www.twitter.com/ZoeBijl" class="t-link-accent-pink" target="_blank"
rel="noreferrer noopener">Zoë Bijl</a>.</li>
<li>Rewrote <code>alt</code> tags to be more about the content, and less formal analysis. We have a
tendency to overdescribe. Conciseness and clarity over comprehensiveness.</li>
</ul>
</section>
</div>
</main>
<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-quarter@s grid-quarter@m grid-quarter@l grid-quarter@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:inquiry@tatianamac.com">Email</a>
</div>
<div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@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/" rel="noopener noreferrer">Twitter</a>
</div>
<div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@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://codepen.io/tatianamac/" rel="noopener noreferrer">Codepen</a>
</div>
<div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@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/" 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 2019 © Tatiana Mac. Built with HTML & CSS with SASS and sass. Read my <a class="t-link-accent-green t-white" href="release-notes.html">release notes</a>. Subscribe to my <a class="t-link-accent-green t-white" href="rss.xml">RSS feed</a></p>
</div>
</div>
</footer>
</body>
</html>