lining.js/assets/index.css

An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.

html {
    min-width: 960px;
}
body {
    margin: 0;
    padding: 0;
    line-height: 2;
    font-size: 24px;
    font-family: 'Roboto Slab', serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
    color: #666;
}
code {
    font-family: 'Inconsolata', monospace;
}
a {
    color: #FF4136;
}

.center {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 960px;
    height: 100%;
    overflow-y: hidden;
    box-sizing: border-box;
}


.main {
    height: 100%;
    line-height: 1.5;
    overflow-y: hidden;
    font-size: 18px;
    color: #222;
    background-color: #FFF;
}
.main strong {
    text-transform: uppercase;
}
.main h1 {
    margin: 0;
    color: #222;
    font-size: 4em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: #666 -1px 3px 0;
    font-family: 'Allerta Stencil', sans-serif;
}
.main p {
    margin: 1em 0;
}
.main blockquote {
    margin: 0;
}
.main img {
    vertical-align: middle;
}
.main a {
    text-decoration: none;
}
.main a:hover {
    text-decoration: underline;
}
.main pre {
    margin: 0;
    font-size: 14px;
}


/* tip */
.tip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    font-size: 24px;
    color: #FFF;
    background-color: #ED5565;
}
.tip::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    border-top: 10px solid #ED5565;
    border-bottom: 10px dotted transparent;
    border-right: 10px dotted transparent;
    border-left: 10px dotted transparent;
}
a.tip:hover {
    text-decoration: none;
    background-color: #DA4453;
}
.tip:hover::after {
    border-top-color: #DA4453;
}

/* switcher */
.switcher {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 0 0 -100px ;
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    font-size: 24px;
    color: #fff;
    border: 0;
    border-bottom: 3px solid rgba(73,134,18,0.3);
    background: #69c773;
}

/* flip css animation: http://davidwalsh.name/css-flip */
.v-center {
    position: relative;
    top: 50%;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.demo .v-center[show-code] .preview {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.demo .v-center[show-code] .code {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.demo .v-center .preview,
.demo .v-center .code {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: .5s ease-in -webkit-transform;
    -webkit-transition: .5s ease-in transform;
    transition: .5s ease-in -webkit-transform;
    transition: .5s ease-in transform;
}
.demo .v-center .code {
    overflow: auto;
    box-sizing: border-box;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.demo .v-center .code pre {
    margin: 0 !important;
}



/* demos */
.demo {
    height: 100%;
    overflow-y: hidden;
    font-size: 16px;
}
.demo .center {
    position: relative;
}
.demo pre {
    font-size: 14px;
}

/* demo-1 poem */
.demo-1 {
    background-color: #FFFBE7;
}
.demo-1 .v-center {
    height: 350px;
}
.demo-1 .switcher {
    margin-top: 200px;
}
.poem {
    line-height: 40px;
    font-size: 32px;
    font-family: 'Dancing Script', serif;
}
.poem .line:nth-of-type(-n+2) {
    font-size: 42px;
    color: #DA4453;
}

/* demo-2 fadeout */
.demo-2 {
    background-color: #F6BB42;
}
.demo-2 .v-center {
    height: 350px;
}
.demo-2 .switcher {
    margin-top: 190px;
}
.fadeout {
    font-size: 36px;
    line-height: 36px;
    color: hsla(354, 67%, 46%, 1);
    font-family: 'Handlee', serif;
}
.fadeout .line:nth-last-of-type(3) {
   color: hsla(354, 67%, 55%, 1);
   font-size: 80%;
}
.fadeout .line:nth-last-of-type(2) {
   color: hsla(354, 67%, 60%, 1);
   font-size: 70%;
}
.fadeout .line:nth-last-of-type(1) {
   color: hsla(354, 67%, 65%, 1);
   font-size: 60%
}



/* demo-3 linenumber */
.demo-3 {
    background-color: #2f3c45;
}
.demo-3 .v-center {
    height: 320px;
}
.demo-3 .switcher {
    margin-top: 180px;
}
.linenumber {
    color: #f4f1de;
    line-height: 24px;
    font-size: 16px;
}
.linenumber h3 {
    line-height: 24px;
    font-size: 20px;
}
.linenumber p {
    margin: 24px 0 0;
}
.linenumber p a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f4f1de;
}
.linenumber .line {
    position: relative;
    margin-left: 32px; /* 16 * 2*/
}
.linenumber .line:before {
    content: attr(index) '.';
    position: absolute;
    right: 10px;
    margin-right: 100%;
    width: 1em;
    font-size: 16px;
    text-align: center;
    color: #999;
}

/* demo-4 vtxt */
.demo-4 {
    background-color: #FFFEE2;
}
.demo-4 .v-center {
    height: 460px;
}
.demo-4 .switcher {
    margin-top: 180px;

}
.vtxt {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 24px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", sans-serif, "Apple Color Emoji";
    color: #333;
}
.vtxt .line:first-of-type {
    font-size: 1.5em;
    color: #D0496A;
}
.vtxt .line:first-of-type small {
    color: #333;
    font-size: .6666666em;
}


/* demo-5 effects */
.demo-5 {
    background-color: #5978FB;
}
.demo-5 .v-center {
    height: 560px;
}
.demo-5 .switcher {
    float: left;
    position: static;
    margin: 1em 0 0 0;
    width: 150px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
.effects {
    overflow: hidden;
    line-height: 24px;
    font-size: 16px;
    color: #FFF;
}
.effects-do {
    float: left;
    width: 50%;
}
.effects-do button {
    width: 60px;
}
.effects-do button:active {
    position: relative;
    top: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.effects-do select {
    width: 200px;
}
.effects-text {
    float: left;
    width: 50%;
}
.effects-text h3,
.effects-text h4 {
    margin: 0;
    font-size: 18px;
}
.effects-text h4 {
    font-weight: normal;
    font-size: 12px;
}
.effects-text p {
    margin: 1em 0;
}
.effects-text p:last-child {
    margin-bottom: 0;
}

/* usage */
.usage {
    height: auto;
    min-height: 100%;
}
.usage .center {
    margin: 3em auto;
    height: auto;
}
.usage h2 {
    margin: 18px 0;
    line-height: 1;
    text-align: left;
    font-size: 1.5em;
}

/* top */
.top {
    position: fixed;
    right: 10px;
    bottom: 20px;
    display: block;
    padding: .5em 0;
    width: 3em;
    height: 2em;
    line-height: 2;
}
.top:hover {
    background-color: #FF4136;
}
.top::before {
    content: '';
    display: block;
    margin: -1em auto 0;
    width: 0;
    height: 0;
    border: 1.25em dashed transparent;
    border-top-width: 1em;
    border-bottom-width: 1em;
    border-bottom-style: solid;
    border-bottom-color: #FF4136;
}
.top:hover::before {
    border-bottom-color: #FFF;
}
.top::after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 1em;
    height: 1em;
    background-color: #FF4136;
}
.top:hover::after {
    background-color: #FFF;
}

/* download */
.download {
    display: block;
    margin: 2em auto;
    padding: 0 1em;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-family: 'Allerta Stencil', sans-serif;
    font-size: 1.5em;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    background-color: #4584be;
}
a.download:hover {
    text-decoration: none;
}

/* share-info */
.main .share-info {
    margin: 0 0 6em 0;
    text-align: center;
}

/**
 * select style
 * Copy from http://cssdeck.com/labs/styling-select-box-with-css3
 */
.effects-do button,
select {
    padding: 3px 10px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}
label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}