tonydolan

Keybase proof

I hereby claim:

• I am tonydolan on github.
• I am tonydolan (https://keybase.io/tonydolan) on keybase.
• I have a public key ASBWBkWVQ1jc2A-kNRFHsUHMqcAFO5xqzelTXLf9XcrbBQo

To claim this, I am signing this object:

tonydolan

<div class='issue'>
  <p>Issue <span>01</span></p>
</div>

<main>
  <header>
  <h1>Playing with fine web typography.</h1>
  <p class='author'><span>by Jonathan A. Doe.</span></p>
  </header>
<p class='intro'>

tonydolan

<h1>Responsive Ratio-Based Typography SASS Mixin</h1>

<hr>
<h2>How it works:</h2>
<p>This SASS Mixin takes one parameter: font size. When the mixin is used in conjunction with media queries you can easily make intricate responsive typographical styles very quickly.</p>

<h3>How to use it:</h3>
<code>
  <pre>
//0px - first breakpoint:

tonydolan

<article role="article">
		<header>
			<h1>Web Type</h1>
			<h2>A Project by Adam Blum</h2>
			<time>August 27, 2013</time>
		</header>

		<p>Web Type is a simple project for semantic and readable typography to use on the web. You should <a href="https://github.com/AdamBlumMusic/Web-Type" role="link">Fork it on Github</a>.</p>

		<section role="group">

tonydolan

Fluid responsive typography with ModularScale, Vertical rhythm

In this pen, I'm going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using SCSS. 📝 Reference

A Pen by Siamak Mokhtari on CodePen.

License.

tonydolan

CSS Grid: Article with Breakout

A Pen by Geoff Graham on CodePen.

License.

tonydolan

#1580 - Image Hover

Image, title and position with hover effect

A Pen by Tony Dolan on CodePen.

License.

tonydolan

CSS Only Parallax

No JS here! Works great for large header images. The parallax depth effect is achieved with some 3D transforms and perspective properties.

A Pen by Tony Dolan on CodePen.

License.