Created
November 19, 2012 18:52
-
-
Save jwdallas/4112831 to your computer and use it in GitHub Desktop.
Topic rack
This file contains hidden or 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
| /** | |
| * Topic rack | |
| */ | |
| * { margin:0; padding:0 } | |
| body { background:#ddd } | |
| #module { margin:40px; } | |
| a:hover { text-decoration:underline } | |
| #module { font-family:'proxima nova', helvetica; color:#f2f2f2; | |
| width:600px; border-radius:2px; overflow:hidden; position:relative; | |
| background:#666; background:linear-gradient(to bottom,#696969,#4c4c4c); | |
| box-shadow:inset 0 0 4px 0 rgba(0,0,0,.2), 0 1px 0 0 #fff } | |
| #module h1,h2 { font-weight:600; line-height:1.2 } | |
| #module h1 { font-size:18px } | |
| #module h2 { font-size:12px; color:#bbb; display:block } | |
| #module header, | |
| #module footer { font-size:17px; font-weight:600; text-shadow:0 -1px 0 #000; | |
| line-height:50px; background:#555; padding-left:10px; | |
| background:linear-gradient(to bottom,#696969,#4c4c4c); position:relative; | |
| border-radius:2px 2px 0 0; box-shadow:0 1px 4px 0 rgba(0,0,0,.6) } | |
| #module footer { padding:5px 10px; border-radius:0 0 2px 2px } | |
| #module header span { display:inline-block; line-height:16px; vertical-align:middle } | |
| #module header span + span { position:absolute; top:10%; right:6px; margin:6px } | |
| #module header button[name=embed] { border:none; width:24px; height:24px; | |
| vertical-align:middle; background:linear-gradient(to bottom, #6a6a6a, #494949); | |
| border:1px solid #3e3e3e; border-radius:4px; box-shadow:0 1px 1px #666 } | |
| #module header button[name=embed]:hover { cursor:pointer; background:linear-gradient(to bottom, #707070, #4a4a4a); | |
| border-color:#444 } | |
| #module header button[name=embed]:active { cursor:pointer; background:linear-gradient(to bottom, #4c4c4c, #555) } | |
| #module header button[name=embed]:after { content:''; width:14px; height:14px; | |
| display:inline-block; margin-top:2px; | |
| background:url('http://f.cl.ly/items/1m1J3E1j3A3w270f0a35/embed_icon.png') no-repeat; } | |
| #module header img { vertical-align:middle; margin-left:10px } | |
| #module #content { height:236px; width:800px; overflow:hidden; position:relative } | |
| #module .column { width:110px; display:inline-block; | |
| overflow:hidden; vertical-align:top; padding-top:25px } | |
| #module .column > img { border:1px solid #454545; | |
| position:relative; top:0; transition:all ease-out 100ms } | |
| #module .column > img + img { box-shadow:0 0 4px 2px rgba(0,0,0,0.5) } | |
| /* interactions */ | |
| #module .column > img:hover { top:-20px; cursor:pointer } | |
| #module .column .rollover:hover .bubble { display:block } | |
| /* randomish positioning. should be js */ | |
| #module .column.one { margin-top:10px } | |
| #module .column.one img:nth-child(2) { margin-top:-150px } | |
| #module .column.one img:nth-child(3) { margin-top:-140px } | |
| #module .column.one img:nth-child(4) { margin-top:-130px } | |
| #module .column.one img:nth-child(5) { margin-top:-150px } | |
| #module .column.two { margin-top:-2px } | |
| #module .column.two img:nth-child(2) { margin-top:-144px } | |
| #module .column.two img:nth-child(3) { margin-top:-140px } | |
| #module .column.two img:nth-child(4) { margin-top:-142px } | |
| #module .column.two img:nth-child(5) { margin-top:-148px } | |
| #module .column.three { margin-top:8px } | |
| #module .column.three img:nth-child(2) { margin-top:-144px } | |
| #module .column.three img:nth-child(3) { margin-top:-140px } | |
| #module .column.three img:nth-child(4) { margin-top:-150px } | |
| #module .column.three img:nth-child(5) { margin-top:-144px } | |
| #module .column.four { margin-top:12px } | |
| #module .column.four img:nth-child(2) { margin-top:-140px } | |
| #module .column.four img:nth-child(3) { margin-top:-144px } | |
| #module .column.four img:nth-child(4) { margin-top:-150px } | |
| #module .column.four img:nth-child(5) { margin-top:-144px } | |
| #module .column.five { margin-top:4px } | |
| #module .column.five img:nth-child(2) { margin-top:-144px } | |
| #module .column.five img:nth-child(3) { margin-top:-150px } | |
| #module .column.five img:nth-child(4) { margin-top:-138px } | |
| #module .column.five img:nth-child(5) { margin-top:-147px } | |
| #module .column.six { margin-top:0px } | |
| #module .column.six img:nth-child(2) { margin-top:-140px } | |
| #module .column.six img:nth-child(3) { margin-top:-144px } | |
| #module .column.six img:nth-child(4) { margin-top:-140px } | |
| #module .column.six img:nth-child(5) { margin-top:-135px } | |
| /* bubble */ | |
| a { text-decoration:none; color:#fff } | |
| .bubble { padding:14px; position:absolute; border-radius:9px; | |
| box-shadow:0 2px 5px 0 rgba(0, 0, 0,.3); font-family:helvetica } | |
| .bubble:after { content:''; height:0; width:0; | |
| position:absolute; border:14px solid transparent; | |
| border-bottom-color:#000; bottom:100%; left:50%; | |
| margin-left:-14px } | |
| /* .detail */ | |
| .bubble.detail { background-color:#222; background:rgba(0,0,0,0.9); | |
| font:11px/.5 'proxima nova'; color:#fff; | |
| top:0px; left:60px } | |
| .bubble.detail:after { border-bottom-color:#000; } | |
| .bubble.detail img { padding-right:12px; border-right:1px solid #3b3b3b; | |
| margin-right:8px } | |
| .bubble.detail p { font-family:helvetica; color:#cfcfcf; display:inline-block; | |
| vertical-align:top; margin-top:17px } | |
| .bubble.detail p a { font-size:22px; text-transform:none; display:block; | |
| margin-bottom:13px } | |
| /* pagination */ | |
| menu.pagination { text-align:center; padding:10px 0; cursor:default } | |
| .pagination button { border:none; width:7px; height:7px; | |
| background:#626262; border-radius:50%; margin:0 3px; | |
| box-shadow:0 1px 2px 0 #333; transition:all 100ms; | |
| vertical-align:middle } | |
| .pagination button:after { content:''; display:block; position:absolute; | |
| width:20px; height:20px; margin:-10px 0 0 -5px } | |
| .pagination button:hover { cursor:pointer; width:12px; height:12px; margin:0 } | |
| .pagination button.current { background:#acacac } |
This file contains hidden or 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
| <section id="module"> | |
| <header><span><h1><a href="">Books I'd like to Hold Down and Read</a></h1> | |
| <h2>by <a href="">Jack Kerouac</a></h2></span> | |
| <span><button name="embed"></button> | |
| <img alt="sd-logo" src="http://cl.ly/image/3o0L2s2I1Q29/sd_logo_w_med.png"></span> | |
| </header> | |
| <div id="content"> | |
| <span class="column one"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/14391821.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7862966.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7863022.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7812920.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7861349.jpg"> | |
| </span><span class="column two"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7860879.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/63120.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/23347777.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/33330535.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/99568.jpg"> | |
| </span><span class="column three"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/304537.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7871962.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7868605.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/32132123.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/44565.jpg"> | |
| </span><span class="column four"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7863165.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/2946184.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7863301.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7863405.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7855549.jpg"> | |
| </span><span class="column five"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/44959.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7860237.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/32132243.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/21231159.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/44969.jpg"> | |
| </span><span class="column six"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7879252.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/239954.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7856122.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7873215.jpg"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/7782572.jpg"> | |
| </span> | |
| </div> | |
| <!--aside class="bubble detail"> | |
| <img src="https://d2etacs2shbz4y.cloudfront.net/23347779.jpg"> | |
| <p><a href="">Zombie Mommy</a>By M.T. Anderson</p> | |
| </aside>--> | |
| <menu class="pagination"> | |
| <button class="current"></button> | |
| <button></button> | |
| <button></button> | |
| </menu> | |
| <footer></footer> | |
| </section> |
This file contains hidden or 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":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment