arbales/comments.html

## comments.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="shortcut icon" href="icon.png">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
  <script src="https://raw.github.com/satyr/coco/master/extras/coco.js"></script>
  <script src="http://documentcloud.github.com/underscore/underscore.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>

  <style type='text/css'>

    html, body {
      background-color: #EAEAEA;
    }
    body {
      margin: 4ex;
      width: 425px;
    }
    .comment {
      position: relative;
      display: inline-block
    }
    .comment svg {
      shape-rendering: crisp-edges;
    }
    .comment .content {
      position: absolute;
      top: 0;
      left: 0;
      margin: 10px 20px 20px 20px;
      padding: 12px;
    }
    .comment h4 {
      font-weight: 500;
      font-family: "Helvetica Neue";
      font-size: 12px;
      margin-bottom: 12px;
      color: #666;
      text-shadow: #fff 0 1px 1px;
    }
    .comment p {
      font-family: "Helvetica Neue";
      font-weight: 500;
      font-size: 2.5ex;
      line-height: 2.75ex;
    }
    .comment img {
      vertical-align: middle;
      margin-top: -2px;
    }

  </style>

</head>
<body>

  <div class='comment' style="width:400px">
    <div class='image'></div>
    <div class='content'>
      <h4>Austin Bales wrote&hellip;</h4>
      <p>
      I think that's pretty <img src="https://do.com/assets/emoji/20x20/E214-676efa3307afa671ec8db74285291606.png" />.
      </p>
    </div>
  </div>

  <div class='comment' style="width:400px">
    <div class='image'></div>
    <div class='content'>
      <h4>Jon Appleseed wrote&hellip;</h4>
      <p>
        Wow, we don't even support some of those. That's prety neat.
      </p>
    </div>
  </div>

  <div class='comment' style="width:400px">
    <div class='image'></div>
    <div class='content'>
      <h4>Austin Bales wrote&hellip;</h4>
      <p>
       Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
      </p>
    </div>
  </div>
  <div class='comment' style="width:400px">
    <div class='image'></div>
    <div class='content'>
      <h4>Jon Appleseed wrote&hellip;</h4>
      <p>
        What Browsers does this support?
      </p>
    </div>
  </div>


  <div class='comment' style="width:400px">
      <div class='image'></div>
      <div class='content'>
        <h4>Austin Bales wrote&hellip;</h4>
        <p>
          This comment box is rendered by Raphael,
          the drawing library. The text is rendered
          in an accompanying content div.
        </p>
      </div>
    </div>
  </div>

</body>


<script type="text/coffeescript">
  # Creates canvas 320 × 200 at 10, 50
  $('.comment').each (index, el) ->
    tel = $(el).find('.image')[0]

    width = $(el).width()
    height = $(el).find('.content').height()
    padding =
      top: 20.5
      right: 0
      bottom:0
      left: 10.5

    paper = Raphael(tel, width, height + 2 * padding.top)
    paper.safari()

    set = paper.set()
    # Creates circle at x = 50, y = 40, with radius 10
    console.log height
    $(el).height (height + 2 * padding.top)
    background = set.push paper.rect(
        padding.top,
        padding.left,
        width - (padding.left * 4),
        height + padding.top + 0.5,
        2
      ),
      paper.rect(13.5, 25.5, 13, 13).rotate(45)

      # Sets the fill attribute of the circle to red (#f00)

    background.glow
      width: 2
      opacity: 0.12
      offsety: 1

    outline = set.push paper.rect(
        padding.top,
        padding.left,
        width - (padding.left * 4),
        height + padding.top + 0.5,
        2
      ),
      paper.rect(13.5, 25.5, 13, 13)
        .rotate(45)
        .attr("fill", "#fafafa")
        .attr('stroke', '#fafafa')

    if false
      stripe = paper.rect(24.5, 14.5, 253, 2, 2)
      stripe.attr("fill", "#3B9BEB")
      stripe.attr("stroke", "#3B9BEB")

      # Sets the fill attribute of the circle to red (#f00)


    outline.attr("fill", "#fafafa")
    # Sets the stroke attribute of the circle to white
    outline.attr("stroke", "#fafafa")

</script>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Title</title>
	<link rel="shortcut icon" href="icon.png">
	<link rel="stylesheet" href="css/style.css">
	<script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
	<script src="https://raw.github.com/satyr/coco/master/extras/coco.js"></script>
	<script src="http://documentcloud.github.com/underscore/underscore.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>

	<style type='text/css'>

	html, body {
	background-color: #EAEAEA;
	}
	body {
	margin: 4ex;
	width: 425px;
	}
	.comment {
	position: relative;
	display: inline-block
	}
	.comment svg {
	shape-rendering: crisp-edges;
	}
	.comment .content {
	position: absolute;
	top: 0;
	left: 0;
	margin: 10px 20px 20px 20px;
	padding: 12px;
	}
	.comment h4 {
	font-weight: 500;
	font-family: "Helvetica Neue";
	font-size: 12px;
	margin-bottom: 12px;
	color: #666;
	text-shadow: #fff 0 1px 1px;
	}
	.comment p {
	font-family: "Helvetica Neue";
	font-weight: 500;
	font-size: 2.5ex;
	line-height: 2.75ex;
	}
	.comment img {
	vertical-align: middle;
	margin-top: -2px;
	}

	</style>

	</head>
	<body>

	<div class='comment' style="width:400px">
	<div class='image'></div>
	<div class='content'>
	<h4>Austin Bales wrote…</h4>
	<p>
	I think that's pretty <img src="https://do.com/assets/emoji/20x20/E214-676efa3307afa671ec8db74285291606.png" />.
	</p>
	</div>
	</div>

	<div class='comment' style="width:400px">
	<div class='image'></div>
	<div class='content'>
	<h4>Jon Appleseed wrote…</h4>
	<p>
	Wow, we don't even support some of those. That's prety neat.
	</p>
	</div>
	</div>

	<div class='comment' style="width:400px">
	<div class='image'></div>
	<div class='content'>
	<h4>Austin Bales wrote…</h4>
	<p>
	Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
	</p>
	</div>
	</div>
	<div class='comment' style="width:400px">
	<div class='image'></div>
	<div class='content'>
	<h4>Jon Appleseed wrote…</h4>
	<p>
	What Browsers does this support?
	</p>
	</div>
	</div>


	<div class='comment' style="width:400px">
	<div class='image'></div>
	<div class='content'>
	<h4>Austin Bales wrote…</h4>
	<p>
	This comment box is rendered by Raphael,
	the drawing library. The text is rendered
	in an accompanying content div.
	</p>
	</div>
	</div>
	</div>

	</body>


	<script type="text/coffeescript">
	# Creates canvas 320 × 200 at 10, 50
	$('.comment').each (index, el) ->
	tel = $(el).find('.image')[0]

	width = $(el).width()
	height = $(el).find('.content').height()
	padding =
	top: 20.5
	right: 0
	bottom:0
	left: 10.5

	paper = Raphael(tel, width, height + 2 * padding.top)
	paper.safari()

	set = paper.set()
	# Creates circle at x = 50, y = 40, with radius 10
	console.log height
	$(el).height (height + 2 * padding.top)
	background = set.push paper.rect(
	padding.top,
	padding.left,
	width - (padding.left * 4),
	height + padding.top + 0.5,
	2
	),
	paper.rect(13.5, 25.5, 13, 13).rotate(45)

	# Sets the fill attribute of the circle to red (#f00)

	background.glow
	width: 2
	opacity: 0.12
	offsety: 1

	outline = set.push paper.rect(
	padding.top,
	padding.left,
	width - (padding.left * 4),
	height + padding.top + 0.5,
	2
	),
	paper.rect(13.5, 25.5, 13, 13)
	.rotate(45)
	.attr("fill", "#fafafa")
	.attr('stroke', '#fafafa')

	if false
	stripe = paper.rect(24.5, 14.5, 253, 2, 2)
	stripe.attr("fill", "#3B9BEB")
	stripe.attr("stroke", "#3B9BEB")

	# Sets the fill attribute of the circle to red (#f00)


	outline.attr("fill", "#fafafa")
	# Sets the stroke attribute of the circle to white
	outline.attr("stroke", "#fafafa")

	</script>

	</html>