gist.me

by soulwire

HTML

<!doctype html>
<html>
    <head>
        <title></title>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
        <link href='fonts.css' rel='stylesheet' type='text/css'>
        <style>

            html, body {
                font-family: 'Roboto', sans-serif;
                background: #eaeaea;
                line-height: 1;
                margin: 0;
            }

            #template {
                display: none;
            }

            .header {
                overflow: hidden;
                padding: 5px 20px 0px 20px;
                height: 60px;
            }

            .header h1 {
                font-weight: 300;
                font-size: 24px;
                float: left;
            }

            .user {
                line-height: 60px;
                float: right;
            }

            .user .name {
                position: relative;
                font-weight: 100;
                line-height: 30px;
                display: inline-block;
                margin: 0 10px 0 0;
                top: -12px;
            }

            .user .avatar {
                display: inline-block;
                margin-top: 10px;
                height: 40px;
            }

            .gists {
                padding: 0;
                margin: 0;
            }

            .gist {
                -webkit-transition: -webkit-transform 0.2s ease;
                box-sizing: border-box;
                background: #fff;
                word-break: break-word;
                position: relative;
                display: block;
                padding: 20px;
                margin: 10px;
                height: 180px;
                width: 350px;
                float: left;
            }

            .gist:hover {
                -webkit-transform: scale( 1.05 );
                z-index: 9999;
            }

            .gist.add {
                background:...