A Pen by Jesse Shawl on CodePen.
Created
January 20, 2017 21:59
-
-
Save anonymous/47be77ebdee5aad8e9badbe0af9efb31 to your computer and use it in GitHub Desktop.
kEsJe
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
| <div class='line-through'> | |
| <h1>Branchy</h1> | |
| </div> | |
| <a href='#'>About</a> | |
| <a href='#'>Contribute</a> | |
| <a href='#'>Archives</a> | |
| <div class='line-through' style='margin-top:10em;'> | |
| <h2>Study Shows: Connecting Lines Improve Readability</h2> | |
| </div> | |
| <p>I could write lorem ipsum in here. But I won't do that. Instead, I'll tell you all about how much I'd like to make some more Jekyll themes, like this one. | |
| <br><br> | |
| Oh yes. Baskerville is a lovely typeface. Look at this ampersand! <em style='font-size:6em;padding-left:30px;letter-spacing:-2px;'>j<span style='font-size:.61em;'>&</span>se shawl</em> | |
| </p> | |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| @import "compass/css3"; | |
| @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); | |
| @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic); | |
| body{ | |
| margin-top:5em; | |
| font-family:'Montserrat'; | |
| background:#333; | |
| } | |
| .line-through{ | |
| height:1px; | |
| width:100%; | |
| background:#DDD; | |
| } | |
| .line-through h1, .line-through h2{ | |
| display:inline-block; | |
| border:1px solid #DDD; | |
| padding:10px; | |
| margin-top:-.9em; | |
| border-radius:5px; | |
| position:absolute; | |
| background:#333; | |
| margin-left:1em; | |
| } | |
| h1{ | |
| font-weight:700; | |
| color:#fff; | |
| font-size:3em; | |
| } | |
| h2{ | |
| color:#fff; | |
| margin-left:2em !important; | |
| font-weight:400; | |
| } | |
| a{ | |
| border:1px solid #CCC; | |
| color:#fff; | |
| float:right; | |
| padding:.5em; | |
| border-radius:5px; | |
| margin-top:1em; | |
| margin-right:.9em; | |
| position:relative; | |
| text-decoration:none; | |
| &:before{ | |
| content:''; | |
| display:block; | |
| height:1em; | |
| width:1px; | |
| position:absolute; | |
| background:#ccc; | |
| top:-1.1em; | |
| left:48%; | |
| } | |
| } | |
| p{ | |
| border:1px solid #fff; | |
| padding:10px; | |
| width:650px; | |
| color:#fff; | |
| margin-top:3em; | |
| border-radius:5px; | |
| margin-left:5em; | |
| font-family:'Baskerville'; | |
| font-size:1.5em; | |
| position:relative; | |
| } | |
| p:before{ | |
| content:''; | |
| display:block; | |
| position:absolute; | |
| width:1px; | |
| height:45px; | |
| background:#CCC; | |
| top:-45px; | |
| left:30px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment