| html { | |
| font-family: 'Roboto Slab', serif; | |
| background: white; /*#C4D8E2*/ | |
| max-width: 600px; | |
| display: inline-block; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 75px; | |
| line-height: 5px; | |
| } | |
| h2 { | |
| font-size: 24px; | |
| line-height: 5px; | |
| } | |
| #title { | |
| display: inline-block; | |
| width: 600px; | |
| font-size: 24px; | |
| border-top-left-radius: 25px; | |
| border-top-right-radius: 25px; | |
| background: rgba(255, 255, 255, 1); | |
| margin: auto; | |
| text-align: center; | |
| line-height: 25px; | |
| color: gray; | |
| } | |
| .flow { | |
| height: 500px; | |
| width: 600px; | |
| margin: 0 auto; | |
| background: rgba(255, 255 , 255, 0.5); | |
| border-bottom-left-radius: 25px; | |
| border-bottom-right-radius: 25px; | |
| line-height: 25px; | |
| resize: none; | |
| overflow-y: hidden; | |
| } | |
| #fb-root { | |
| height: 1px; | |
| width: 1px; | |
| display: inline-block; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="style.css" rel="stylesheet" /> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> | |
| <title>Journal</title> | |
| </head> | |
| <body> | |
| <div id="fb-root"></div> | |
| <script> | |
| window.fbAsyncInit = function() { | |
| FB.init({ | |
| appId : '{207378082794881}', | |
| status : true, | |
| xfbml : true | |
| }); | |
| }; | |
| (function(d, s, id){ | |
| var js, fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)) {return;} | |
| js = d.createElement(s); js.id = id; | |
| js.src = "//connect.facebook.net/en_US/all.js"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk')); | |
| $(document).ready(function() { | |
| $.ajaxSetup({ cache: true }); | |
| $.getScript('//connect.facebook.net/en_UK/all.js', function(){ | |
| FB.init({ | |
| appId: '207378082794881', | |
| }); | |
| $('#loginbutton,#feedbutton').removeAttr('disabled'); | |
| FB.getLoginStatus(updateStatusCallback); | |
| }); | |
| }); | |
| $('div').mousedown(function(e){ | |
| e.preventDefault(); | |
| $(this).blur(); | |
| return false; | |
| }); | |
| </script> | |
| <h1> Journal. </h1> | |
| <h2> <em>your</em> stories. <em>your</em> voice. </h2> | |
| <fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button> | |
| <form action ="/autosave" method="post"> | |
| <div id="title" contenteditable> | |
| <p>#Current Date</p> </div> | |
| <div class="flow" contenteditable> </div> | |
| </form> | |
| </body> | |
| </html> |