Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

Added sprinkle of animation to "delightful" text #158

Open
daviddossett wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added sprinkle of animation to "delightful" text #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions docs/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,35 @@
}
}

@keyframes jello {
0%,
11.1%,
100% {
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

/* Common */

html {
Expand Down Expand Up @@ -202,6 +231,18 @@ h1 {
padding: var(--text-block-spacing) 0;
}

.animate-letter {
animation-duration: 1.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
display: inline-block;
}

.jello {
animation-name: jello;
transform-origin: center;
}

/* Container */

.container {
Expand Down
21 changes: 15 additions & 6 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,30 @@
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
Microsoft is looking for designers who code to help create the most compelling developer
tools&nbsp;&amp;&nbsp;services on
the planet.
</h1>
<p>
We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and
elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and
build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
We believe in diversity, openness, and building
<span class="jello animate-letter">d</span><span>e</span><span class="jello animate-letter">l</span><span>i</span><span
class="jello animate-letter">g</span><span>h</span><span class="jello animate-letter">t</span><span>f</span><span
class="jello animate-letter">u</span><span>l</span>
tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a>
or
<a href="mailto:mmuno@microsoft.com" title="Email address for mmuno@microsoft.com">email us</a>.
</p>
</main>
Expand Down Expand Up @@ -81,7 +89,8 @@ <h1>
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a>
contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
Expand Down