Keith Wyland keithwyland

## Spritz-Speed-Reading-V2.markdown

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              2 stars
            
          
                keithwyland
                / Spritz-Speed-Reading-V2.markdown
            
            
              Created
              March 10, 2014 15:26
            
              
                A Pen by Charlotte Dann.
              
          
    Spritz Speed Reading V2

Use Spritz right now! Options for speed, localStorage saving, jog forward/backward, text size and dark/light theme, also with keyboard controls and progress bar. You'll never need to read conventionally again.
localStorage implementation by Keith Wyland, thanks Keith!
A Pen by Charlotte Dann on CodePen.
License.

  
## gridmashup.html
<div class="page-wrap">

  <h1><span class="csstricks">CSS-Tricks</span> and <span class="csswizardry">CSSWizardry</span> Grids Mashup</h1>
  <p>Using floats and box-sizng: border-box (from <a href="http://css-tricks.com/dont-overthink-it-grids/">CSS-Tricks</a>) and .grid__item, ".one-half"-style size names, and margin/padding cancelling (from <a href="http://csswizardry.com/csswizardry-grids/">CSSWizardry</a>).</p>
  <p><em>(This is a work in progress)</em></p>

  <h2>Simple Sections</h2>
  <div class="grid">

    <div class="grid__item one-half">

## Ruby Notepad Bookmarklet
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

## Ruby Notepad Bookmarklet
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

## index.html


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

  <title>Ribbon Heading &middot; CodePen</title>

  <style>

## index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

  <title>Simple CSS Buttons &middot; CodePen</title>

  <style>
.btn {

## dabblet.css

/** CSS3 Hover Image
 * The first commented line is your dabblet’s title
 */
*{transition: all 0.5s ease;}
.container {
float: left;
border: 1px solid black;
width: 200px;
}

## dabblet.css
/**
 * Messing Around with Dabblet
 */
html {
background: #efefef;
background: linear-gradient(45deg, #efefef, #990000);
min-height: 100%;
}
p {
transition: all ease 0.5s;
	<div class="page-wrap">

	<h1><span class="csstricks">CSS-Tricks</span> and <span class="csswizardry">CSSWizardry</span> Grids Mashup</h1>
	<p>Using floats and box-sizng: border-box (from <a href="http://css-tricks.com/dont-overthink-it-grids/">CSS-Tricks</a>) and .grid__item, ".one-half"-style size names, and margin/padding cancelling (from <a href="http://csswizardry.com/csswizardry-grids/">CSSWizardry</a>).</p>
	<p><em>(This is a work in progress)</em></p>

	<h2>Simple Sections</h2>
	<div class="grid">

	<div class="grid__item one-half">


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>Ribbon Heading · CodePen</title>

	<style>

	/** CSS3 Hover Image
	* The first commented line is your dabblet’s title
	*/
	*{transition: all 0.5s ease;}
	.container {
	float: left;
	border: 1px solid black;
	width: 200px;
	}
	/**
	* Messing Around with Dabblet
	*/
	html {
	background: #efefef;
	background: linear-gradient(45deg, #efefef, #990000);
	min-height: 100%;
	}
	p {
	transition: all ease 0.5s;