Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty

AllThingsSmitty/index.css

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AllThingsSmitty/b2cf6ea5fede69d1d795 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/b2cf6ea5fede69d1d795 to your computer and use it in GitHub Desktop.
Download ZIP
Building a pull-quote custom element with Polymer
Raw
index.css
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400italic);
body {
font: 20px/20px 'Gentium Basic', Tahoma, Verdana, sans-serif;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 2em;
color: #eee;
background: #c1c2c3
}
pull-quote::before,
pull-quote::after {
font-size: 50px;
line-height: 48px;
display: inline-block;
height: 30px;
vertical-align: top;
opacity: .5;
color: #f00
}
pull-quote::before {
margin-right: 2px;
margin-left: 0;
content: '\201C'
}
pull-quote::after {
margin-right: 0;
margin-left: 4px;
content: '\201D'
}
p { display: inline }
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="stylesheet" href="index.css">
<link rel="import" href="pull-quote.html">
</head>
<body>
<pull-quote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</pull-quote>
<pull-quote>
<p>This one is actually within a paragraph tag!</p>
</pull-quote>
</body>
</html>
Raw
pull-quote.css
:host {
font-style: italic;
line-height: 30px;
display: inline-block;
box-sizing: border-box;
width: 325px;
margin: 2em 0;
padding: 1em;
text-align: justify;
color: #6a5f49;
border: 1px solid #c3baaa;
border-color: rgba(195, 186, 170, .9);
background-color: #f2f6c1;
background-image: radial-gradient(center, cover, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 90%), -o-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, .7) 29px, rgba(239, 207, 173, .7) 30px);
box-shadow: inset 0 1px rgba(255, 255, 255, .5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, .1), 0 2px rgba(0, 0, 0, .02);
text-shadow: 0 1px 1px #fff
}
Raw
pull-quote.html
<polymer-element name="pull-quote" noscript>
<template>
<link rel="stylesheet" href="pull-quote.css">
<content></content>
</template>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment