Created
July 24, 2012 09:24
-
-
Save moebiuseye/3169047 to your computer and use it in GitHub Desktop.
NeatBlog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * NeatBlog | |
| */ | |
| /* BEGIN CSS RESET */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, font, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| outline: 0; | |
| font-weight: inherit; | |
| font-style: inherit; | |
| /* | |
| font-size: 100%; | |
| */ | |
| font-family: sans-serif; | |
| vertical-align: baseline; | |
| } | |
| pre { | |
| font-family: monospace; | |
| } | |
| /* remember to define focus styles! */ | |
| :focus { | |
| outline: 0; | |
| } | |
| body { | |
| line-height: 1; | |
| color: black; | |
| background: white; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| /* tables still need 'cellspacing="0"' in the markup */ | |
| table { | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| } | |
| caption, th, td { | |
| text-align: left; | |
| font-weight: normal; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ""; | |
| } | |
| blockquote, q { | |
| quotes: "" ""; | |
| } | |
| hr{ | |
| border: none; | |
| border-bottom: solid 1px #DCDCDC; | |
| height: 1em; | |
| margin-top: -0.4em; | |
| margin-bottom: 1em; | |
| box-shadow: 0em 0.5em 0.5em -0.3em #DCDCDC; | |
| border-radius: 0em 0em 50% 0 / 0em 0em 50% 0; | |
| clear: both; | |
| } | |
| /* END CSS RESET */ | |
| /* BEGIN GENERAL PURPOSE STYLE */ | |
| a { | |
| color : #435966; | |
| text-decoration: none; | |
| background-color: #DCDCDC; | |
| line-height: 1.3; | |
| } | |
| /* END GENERAL PURPOSE STYLE */ | |
| /* the main container style */ | |
| .main_container { | |
| pass; | |
| } | |
| /* BEGIN LEFT PANEL STYLE */ | |
| .left_panel { | |
| /* | |
| background-color: grey; | |
| */ | |
| display: block; | |
| position: fixed; | |
| float: left; | |
| width: 20%; | |
| height: 100%; | |
| padding: 0 30px; | |
| border-radius: 0% 0% 10% 0% / 0% 0% 70% 1%; | |
| box-shadow: -0.5em 0em 1em #DCDCDC inset; | |
| } | |
| .logo { | |
| width: 60%; | |
| margin: 0; | |
| padding: -1em; | |
| } | |
| .login_form * { | |
| margin: 0 auto; | |
| } | |
| .login_form input { | |
| font-size: 0.7em; | |
| display: block; | |
| clear: left; | |
| } | |
| .login_form label { | |
| font-size: 0.5em; | |
| } | |
| .dates { | |
| overflow-y: auto; | |
| } | |
| /* END LEFT PANEL STYLE */ | |
| /* BEGIN MAIN CONTENT STYLE */ | |
| .main_content { | |
| padding: 2em; | |
| width: 70%; | |
| float: right; | |
| } | |
| .article { | |
| padding: 1em 0 1em 0; | |
| -moz-transform-origin: 0 0; | |
| -moz-transform: skew(-2deg); | |
| } | |
| .article_foot { | |
| float: right; | |
| clear: both; | |
| color : grey; | |
| } | |
| /* END MAIN CONTENT STYLE */ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- BEGIN MAIN CONTENT --> | |
| <div class='main_container'> | |
| <!-- BEGIN LEFT PANEL --> | |
| <div class='left_panel'> | |
| <img class='logo' src='https://si0.twimg.com/profile_images/2205962776/cs_logo_drop.png' /> | |
| <hr /> | |
| <!-- BEGIN LOGIN FORM --> | |
| <form class='login_form'> | |
| <input name='user_name'></input> | |
| <label for='user_name'>Nom d'utilisateur</label> | |
| <br/> | |
| <input name='password'></input> | |
| <label for='password'>Mot de passe</label> | |
| </form> | |
| <!-- END LOGIN FORM --> | |
| <!-- BEGIN SEARCH FORM --> | |
| <form class='search_form'> | |
| </form> | |
| <!-- END SEARCH FORM --> | |
| <hr /> | |
| <!-- BEGIN BREVES --> | |
| <div class='dates'> | |
| <a href="?day=day">Some Article</a><br /> | |
| <a href="?day=day">Some other Article</a><br /> | |
| <a href="?day=day">Some third Article</a><br /> | |
| <a href="?day=day">Some fourth Article</a><br /> | |
| </div> | |
| <!-- END BREVES --> | |
| <hr /> | |
| </div> | |
| <!-- END LEFT PANEL --> | |
| <div class='main_content'> | |
| <div class='article'> | |
| <h2>Article : A</h2> | |
| <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consete</p> | |
| <small class='article_foot'>Le <a href="">jj mmmmmm aaaa</a> - par <a href='#'>moebius_eye</a> </small> | |
| </div> | |
| <hr /> | |
| <div class='article'> | |
| <h2>Article : A</h2> | |
| <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consete</p> | |
| <small class='article_foot'>Le <a href="">jj mmmmmm aaaa</a> - par <a href='#'>moebius_eye</a> </small> | |
| </div> | |
| <hr /> | |
| <div class='article'> | |
| <h2>Article : A</h2> | |
| <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consete</p> | |
| <small class='article_foot'>Le <a href="">jj mmmmmm aaaa</a> - par <a href='#'>moebius_eye</a> </small> | |
| </div> | |
| <hr /> | |
| </div> | |
| </div> | |
| <!-- END MAIN CONTENT --> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment