<div id="___gatsby">
<div style="outline:none" tabindex="-1" role="group">
<base target="_blank">
<div class="s-module--main--1XB_z">
<div class="s-module--bg--1FVQ9"></div>
<div id="toggle" class="s-module--toggle--2hd7F s-module--hasZIndex--1QkpC"></div>
<div class="s-module--blender--d9X_A" id="blender"></div>
<div class="s-module--header--2utkj">
<h1><a aria-current="page" class="" href="/">A Work in Progress</a></h1>
</div>
<div>
<div class="s-module--intro--1v3wl">
<div class="s-module--pre--3NC-2">developer's blog by </div>
<div class="s-module--links--ozFGS"><a href="http://wgao19.cc" class="s-module--author--1QT_I">Wei Gao</a><a href="https://twitter.com/wgao19" class="s-module--link--nIVjQ twitter-logo"><svg width="2500" height="2500" viewBox="126.444 2.281 589 589"><circle cx="420.944" cy="296.781" r="294.5" fill="#2daae1"></circle><path d="M609.773 179.634c-13.891 6.164-28.811 10.331-44.498 12.204 16.01-9.587 28.275-24.779 34.066-42.86a154.78 154.78 0 0 1-49.209 18.801c-14.125-15.056-34.267-24.456-56.551-24.456-42.773 0-77.462 34.675-77.462 77.473 0 6.064.683 11.98 1.996 17.66-64.389-3.236-121.474-34.079-159.684-80.945-6.672 11.446-10.491 24.754-10.491 38.953 0 26.875 13.679 50.587 34.464 64.477a77.122 77.122 0 0 1-35.097-9.686v.979c0 37.54 26.701 68.842 62.145 75.961-6.511 1.784-13.344 2.716-20.413 2.716-4.998 0-9.847-.473-14.584-1.364 9.859 30.769 38.471 53.166 72.363 53.799-26.515 20.785-59.925 33.175-96.212 33.175-6.25 0-12.427-.373-18.491-1.104 34.291 21.988 75.006 34.824 118.759 34.824 142.496 0 220.428-118.052 220.428-220.428 0-3.361-.074-6.697-.236-10.021a157.855 157.855 0 0 0 38.707-40.158z" fill="#fff"></path></svg></a>
<a
href="https://github.com/wgao19" class="s-module--link--nIVjQ"><svg version="1.2" baseProfile="tiny" x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve"><path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4 c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4 c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3 c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47 c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3 c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4 C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"></path></svg></a>
<a
href="https://codepen.io/wgao19" class="s-module--link--nIVjQ"><svg width="2500" height="2500" viewBox="0 0 256 256" preserveAspectRatio="xMinYMin meet"><path d="M255.807 87.087c-.059-.31-.11-.62-.193-.924-.052-.183-.114-.355-.172-.535a11.007 11.007 0 0 0-.283-.8c-.076-.182-.162-.358-.245-.534a9.74 9.74 0 0 0-.376-.73c-.096-.176-.207-.342-.313-.51a11.038 11.038 0 0 0-.842-1.142 11.166 11.166 0 0 0-.544-.596c-.145-.145-.29-.29-.442-.431a9.07 9.07 0 0 0-.624-.52c-.165-.128-.327-.26-.5-.377-.061-.044-.117-.096-.182-.138L134.099 1.85a10.989 10.989 0 0 0-12.201 0l-117 77.998c-.065.041-.116.093-.182.138-.172.12-.334.248-.5.376a15.52 15.52 0 0 0-.624.517 8.604 8.604 0 0 0-.438.43c-.193.194-.372.39-.548.597-.13.155-.255.31-.376.483-.165.217-.317.438-.465.669-.107.169-.214.334-.314.51a9.593 9.593 0 0 0-.372.724c-.083.176-.172.355-.245.534-.107.262-.2.531-.286.8-.058.18-.12.355-.169.517-.08.303-.138.61-.193.924-.03.159-.069.314-.09.476-.062.475-.096.951-.096 1.437v78.016c0 .482.034.965.103 1.437.025.173.07.31.104.476.055.31.103.62.207.931.048.172.103.345.172.534.086.276.172.552.276.804.072.172.172.344.241.517.114.241.242.482.38.734.096.172.206.345.31.503.148.242.31.449.482.655.121.173.242.31.38.476.175.207.344.414.551.597.141.137.276.31.448.413.2.173.414.345.62.524.166.138.346.242.483.376.066.034.104.103.173.134l116.968 78.04a10.815 10.815 0 0 0 6.102 1.851 11.06 11.06 0 0 0 6.102-1.85l117-78c.065-.04.12-.089.182-.134.172-.12.334-.248.5-.375.214-.17.424-.345.624-.524.151-.135.296-.283.441-.428a9.876 9.876 0 0 0 .92-1.072c.166-.217.318-.441.466-.669.107-.165.214-.334.314-.503.138-.242.258-.486.375-.734.083-.176.17-.352.245-.531.107-.266.197-.535.283-.804.058-.179.12-.355.172-.534.08-.303.135-.614.193-.924.028-.159.07-.314.086-.476.063-.475.097-.951.097-1.437V89c0-.486-.038-.962-.097-1.438-.027-.169-.079-.306-.113-.475h.017zm-127.81 66.935l-38.905-26.021 38.905-26.025 38.907 26.025-38.907 26.021zm-10.998-71.155l-47.692 31.9L30.81 89.013 117 31.555v51.312zm-67.477 45.13l-27.517 18.406v-36.811l27.517 18.405zm19.785 13.245L117 173.138v51.312l-86.19-57.465 38.498-25.75v.007zm69.69 31.89l47.692-31.896 38.501 25.749-86.193 57.458v-51.312zm67.477-45.128l27.521-18.409v36.815l-27.52-18.413v.007zm-19.785-13.238L138.997 82.87V31.555l86.193 57.459-38.5 25.752z" fill="currentColor"></path></svg></a>
<a
href="https://codesandbox.io/u/wgao19" class="s-module--link--nIVjQ"><svg x="0px" y="0px" class="Navigation__StyledLogo-klhtd0-2 hYzIzK" width="2500" height="2500" viewBox="0 0 1024 1024"><g><polyline fill="black" points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"></polyline><polyline fill="black" points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"></polyline><polyline fill="black" points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"></polyline></g><g id="Layer_2"><polyline fill="none" stroke="black" stroke-width="80" stroke-miterlimit="10" points="899,287.833 509,513 509,963"></polyline><line fill="none" stroke="black" stroke-width="80" stroke-miterlimit="10" x1="122.167" y1="289" x2="511.5" y2="513"></line><polygon fill="none" stroke="black" stroke-width="80" stroke-miterlimit="10" points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"></polygon></g></svg></a>
<a
href="https://dev.to/wgao19" class="s-module--link--nIVjQ"><svg role="img" viewBox="0 0 448 512"><path fill="#000000" d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path></svg></a>
</div>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-04-22__yarn-upgrade-not-updating-package-json-questionmark/" style="box-shadow: none;">Why Running `yarn upgrade` Does Not Update My `package.json`</a></h2><small>April 22, 2019</small>
<p class="excerpt"><span>Why Running Does Not Update My Today I wanted to upgrade the dependency of React of one of my projects. So I ran And it seems everyone…</span><a class="s-module--read--3t7Sj" href="/2019-04-22__yarn-upgrade-not-updating-package-json-questionmark/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-04-17__making-flow-happy-after-0.85/" style="box-shadow: none;">Making Flow Happy after 0.85</a></h2><small>April 17, 2019</small>
<p class="excerpt"><span>Making Flow Happy after 0.85 For the past few weeks I’ve filled my free hours to upgrade our codebase’s dependency of Flow to its latest…</span><a class="s-module--read--3t7Sj" href="/2019-04-17__making-flow-happy-after-0.85/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-04-07__reverse-engineering-the-blending-mode-of-gilbert-color/" style="box-shadow: none;">Reverse Engineering the Blending Mode of Gilbert Color</a></h2><small>April 07, 2019</small>
<p class="excerpt"><span>Reverse Engineering the Blending Mode of Gilbert Color, and Things Learned I’ve been preparing for my Talk.CSS talk about this week…</span><a class="s-module--read--3t7Sj" href="/2019-04-07__reverse-engineering-the-blending-mode-of-gilbert-color/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-03-25__back-to-html-css-javascript/" style="box-shadow: none;">Back to HTML, CSS, and JavaScript and Build My Speaker Site</a></h2><small>March 25, 2019</small>
<p class="excerpt"><span>Back to HTML, CSS, and JavaScript Building My Speaker Site Inspired by Global Diversity CFP Day , and due to an increasing involvement at…</span><a class="s-module--read--3t7Sj" href="/2019-03-25__back-to-html-css-javascript/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-03-21__do-you-spam-flex-box-also/" style="box-shadow: none;">Do You Spam Flex Box Also?</a></h2><small>March 21, 2019</small>
<p class="excerpt"><span>Do You Spam Flex Box Also? This is not a post about how to use flex box. For this aim, you may find the following posts (app) interesting…</span><a class="s-module--read--3t7Sj" href="/2019-03-21__do-you-spam-flex-box-also/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-03-10__content-width-determination-with-the-box-model/" style="box-shadow: none;">Content Width Determination with the Box Model</a></h2><small>March 10, 2019</small>
<p class="excerpt"><span>Content Width Determination with the Box Model I was working on a this design that contains a few badges aligned like this on a corner.
The…</span><a class="s-module--read--3t7Sj" href="/2019-03-10__content-width-determination-with-the-box-model/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-03-08__mix-blend-mode/" style="box-shadow: none;">How I Started Reading `mix-blend-mode` and What They Are Creating with It</a></h2><small>March 08, 2019</small>
<p class="excerpt"><span>How I Started Reading and What They Are Creating with It I was working on this Dribbble Design by Louie Mantia . At my first sight, all…</span><a class="s-module--read--3t7Sj" href="/2019-03-08__mix-blend-mode/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-03-07__fixing-connect-flowtype-annotation-after-flow-0.89/" style="box-shadow: none;">Fixing Connect FlowType Annotation after 0.89</a></h2><small>March 07, 2019</small>
<p class="excerpt"><span>This’ll be a quick post about how to fix most of the annotations. Upgrading Flow past 0.85 has been tough. Flow asks for more required…</span><a class="s-module--read--3t7Sj" href="/2019-03-07__fixing-connect-flowtype-annotation-after-flow-0.89/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/2019-03-02__transform-establishes-containing-block-for-descendants/" style="box-shadow: none;">Transform Establishes Containing Block for Descendants</a></h2><small>March 02, 2019</small>
<p class="excerpt"><span> Establishes Containing Block for Descendants A problem came up when I was trying to draw a heart using CSS following this guide . You draw…</span><a class="s-module--read--3t7Sj" href="/2019-03-02__transform-establishes-containing-block-for-descendants/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/react-redux-sharing-for-shopee/" style="box-shadow: none;">React Redux Sharing for Shopee</a></h2><small>January 25, 2019</small>
<p class="excerpt"><span>Motivation Last year between September and November, I’ve spent much of my time working on an open source project, React Redux , to help…</span><a class="s-module--read--3t7Sj" href="/react-redux-sharing-for-shopee/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/cubic-bezier/" style="box-shadow: none;">Understanding the Cubic Bézier Curves</a></h2><small>January 19, 2019</small>
<p class="excerpt"><span>Intuition Omitting the construction details, a cubic Bézier curve is a [ 0,1 ] curve with at most two smooth turns. With CSS, a cubic…</span><a class="s-module--read--3t7Sj" href="/cubic-bezier/">Read ⟶</a></p>
</div>
<div class="s-module--post--LdKLS">
<h2 class="title"><a href="/upgrading-react-redux-v6/" style="box-shadow: none;">Upgrading to React-Redux v6: Around the New Context API</a></h2><small>December 21, 2018</small>
<p class="excerpt"><span>So React-Redux upgraded to 6.0.0 . I’ve spent some time to migrate our codebase. Here’s a bit of what I’ve learned. In this writeup I…</span><a class="s-module--read--3t7Sj" href="/upgrading-react-redux-v6/">Read ⟶</a></p>
</div>
</div>
<footer class="s-module--footer--3LbWM">
<div><span>© 2019 built with ❤</span></div>
</footer>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Raleway:700');
.expand {
transform: scale(60);
}
#blender {
width: 3rem;
height: 3rem;
position: fixed;
border-radius: 50%;
right: calc(50% - 21.5rem);
bottom: 1rem;
pointer-events: none;
background: white;
transition: all 0.5s ease;
mix-blend-mode: difference;
}
.twitter-logo {
isolation: isolate;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
font: inherit;
margin: 0;
}
optgroup {
font-weight: 700;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
html {
font: 100%/1.5 "Libre Baskerville", serif;
box-sizing: border-box;
overflow-y: scroll;
}
* {
box-sizing: inherit;
}
*:before {
box-sizing: inherit;
}
*:after {
box-sizing: inherit;
}
body {
color: hsla(0, 0%, 0%, 0.8);
font-family: "Libre Baskerville", serif;
font-weight: 400;
word-wrap: break-word;
font-kerning: normal;
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
font-feature-settings: "kern", "liga", "clig", "calt";
}
img {
max-width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
h1 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 3rem;
color: hsla(0, 0%, 0%, 1);
font-family: "Raleway", sans-serif;
font-weight: 800;
text-rendering: optimizeLegibility;
font-size: 2rem;
line-height: 1.4;
}
h2 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
color: hsla(0, 0%, 0%, 1);
font-family: "Raleway", sans-serif;
font-weight: 800;
text-rendering: optimizeLegibility;
font-size: 1.51572rem;
line-height: 1.1;
}
h3 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
color: hsla(0, 0%, 0%, 1);
font-family: "Raleway", sans-serif;
font-weight: 800;
text-rendering: optimizeLegibility;
font-size: 1.31951rem;
line-height: 1.1;
}
h4 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
color: hsla(0, 0%, 0%, 1);
font-family: "Raleway", sans-serif;
font-weight: 800;
text-rendering: optimizeLegibility;
font-size: 1rem;
line-height: 1.1;
}
h5 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
color: hsla(0, 0%, 0%, 1);
font-family: "Raleway", sans-serif;
font-weight: 800;
text-rendering: optimizeLegibility;
font-size: 0.87055rem;
line-height: 1.1;
}
h6 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
color: hsla(0, 0%, 0%, 1);
font-family: "Raleway", sans-serif;
font-weight: 800;
text-rendering: optimizeLegibility;
font-size: 0.81225rem;
line-height: 1.1;
}
hgroup {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
ul {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
list-style-position: outside;
list-style-image: none;
}
ol {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
list-style-position: outside;
list-style-image: none;
}
dl {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
dd {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
figure {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
pre {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
font-size: 0.85rem;
line-height: 1.5rem;
overflow-x: auto;
}
table {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.5rem;
border-collapse: collapse;
width: 100%;
}
fieldset {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
blockquote {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
padding-bottom: 0;
padding-left: 1rem;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
color: hsla(0, 0%, 0%, 0.7340000000000001);
border-left: 4px solid #999;
}
form {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
noscript {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
iframe {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
hr {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: calc(1rem - 1px);
background: hsla(0, 0%, 0%, 0.2);
border: none;
height: 1px;
}
address {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1rem;
}
b {
font-weight: 700;
}
strong {
font-weight: 700;
}
dt {
font-weight: 700;
}
th {
font-weight: 700;
}
li {
margin-bottom: calc(1rem / 2);
}
ol li {
padding-left: 0;
}
ul li {
padding-left: 0;
}
li > ol {
margin-left: 1.5rem;
margin-bottom: calc(1rem / 2);
margin-top: calc(1rem / 2);
}
li > ul {
margin-left: 1.5rem;
margin-bottom: calc(1rem / 2);
margin-top: calc(1rem / 2);
}
blockquote *:last-child {
margin-bottom: 0;
}
li *:last-child {
margin-bottom: 0;
}
p *:last-child {
margin-bottom: 0;
}
li > p {
margin-bottom: calc(1rem / 2);
}
code {
font-size: 1rem;
line-height: 1.5rem;
font-family: Dank Mono, monospace;
}
kbd {
font-size: 0.85rem;
line-height: 1.5rem;
}
samp {
font-size: 0.85rem;
line-height: 1.5rem;
}
abbr {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
}
acronym {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
}
abbr[title] {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
text-decoration: none;
}
thead {
text-align: left;
}
td,
th {
text-align: left;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: calc(0.75rem - 1px);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
@media only screen and (max-width: 480px) {
html {
font-size: 80%;
line-height: 19.2px;
}
}
a {
font-weight: bold;
color: #00f;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #222;
}
h2,
h3 {
margin-top: 1.5rem;
line-height: 1.4;
}
h1 code,
h2 code,
h3 code {
font-size: unset;
}
p + h2,
p + h3 {
margin-top: 3rem;
}
.s-module--author--1QT_I {
border-bottom: none;
white-space: nowrap;
margin-right: 0.5rem;
}
.s-module--intro--1v3wl {
margin: -2rem auto 2rem;
font-size: 1.2rem;
display: -webkit-flex;
display: flex;
min-height: 2rem;
-webkit-align-items: baseline;
align-items: baseline;
padding: 0 1rem;
}
@media screen and (max-width: 380px) {
.s-module--intro--1v3wl {
display: block;
}
}
.s-module--pre--3NC-2 {
white-space: nowrap;
}
@media screen and (max-width: 800px) {
.s-module--pre--3NC-2 {
font-size: 0.75rem;
}
}
.s-module--links--ozFGS {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
}
@media screen and (max-width: 380px) {
.s-module--links--ozFGS {
margin-top: 0.5rem;
}
}
@media screen and (min-width: 380px) {
.s-module--links--ozFGS {
margin-left: 0.5rem;
text-align: right;
}
}
.s-module--link--nIVjQ {
padding: 0;
margin-bottom: 0;
border-bottom: 0;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.s-module--link--nIVjQ:not(:first-child) {
margin-left: 0.2rem;
}
.s-module--link--nIVjQ > img,
.s-module--link--nIVjQ > svg {
width: 1rem;
height: 1rem;
}
.s-module--link--nIVjQ > svg {
color: #000;
}
.s-module--header--2utkj {
margin: 4rem auto 3rem;
padding: 0 1rem;
}
.s-module--footer--3LbWM {
font-family: Raleway, sans-serif;
margin: 3rem 0 1rem;
font-size: medium;
color: #aaa;
padding: 1rem;
text-shadow: #fff 0 2px, #ccc 0 3px;
}
:root {
font-size: 112.5%;
}
img {
isolation: isolate;
}
.s-module--main--1XB_z {
max-width: 35rem;
margin: 0 auto;
}
@media screen and (max-width: 380px) {
.s-module--blender--d9X_A {
right: 1rem;
}
}
.s-module--expanded--Qz3rQ {
-webkit-transform: scale(60);
transform: scale(60);
}
.s-module--toggle--2hd7F {
background: #100f2c;
width: 3rem;
height: 3rem;
position: fixed;
border-radius: 50%;
right: calc(50% - 21.5rem);
bottom: 1rem;
cursor: pointer;
transition: all 0.5s ease;
}
@media screen and (max-width: 380px) {
.s-module--toggle--2hd7F {
right: 1rem;
opacity: 0.8;
}
}
.s-module--hasZIndex--1QkpC {
z-index: 1;
}
@media screen and (max-width: 380px) {
.s-module--hasZIndex--1QkpC {
opacity: 0.2;
}
}
.s-module--bg--1FVQ9 {
position: fixed;
background: #efefef;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
.blog-post-module--post--3laZV {
background: #fff;
padding: 1rem;
}
.blog-post-module--post--3laZV > blockquote {
margin-left: -1rem;
margin-right: 0;
border-left: 7px solid #444;
}
.blog-post-module--date--_pArM {
padding: 1rem;
margin-bottom: 0;
background: #fff;
}
small {
font-family: Open Sans, sans-serif;
font-size: 0.8rem;
font-weight: 200;
color: rgba(0, 0, 0, 0.44);
display: block;
}
.s-module--title--2J6ew {
margin-bottom: 0.5rem;
}
.s-module--excerpt--3m4JY {
margin-top: 0.5rem;
}
p {
line-height: 2rem;
}
ul {
padding: 0;
}
body {
margin: 0;
background: #efefef;
}
.s-module--read--3t7Sj {
margin-left: 0.3rem;
white-space: nowrap;
}
.s-module--post--LdKLS {
background: #fff;
border-radius: 2px;
padding: 1rem;
margin: 1rem auto;
}
document.getElementById('toggle').addEventListener('click', () => {
document.getElementById('blender').classList.toggle('expand');
document.getElementById('toggle').classList.toggle('s-module--hasZIndex--1QkpC');
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.