Created
November 28, 2010 19:18
-
-
Save rickhull/719217 to your computer and use it in GitHub Desktop.
Hacker News redux using CSS and semantic markup
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
| index.html looks for custom.css, grayarrow.gif, and y18.gif locally in the same folder as index.html | |
| index.html and custom.css are provided by this gist | |
| get the images from: | |
| http://ycombinator.com/images/grayarrow.gif | |
| http://ycombinator.com/images/y18.gif | |
| Current issues: | |
| * getting the correct margin on the logo in the header | |
| * user nav missing in the header (e.g. pg (14375) | logout) | |
| * no blank space for the nonexistent down-arrow | |
| * fixed width container | |
| * some pixel-level concerns here and there | |
| I think all of these are easily solvable, but my CSS skills just aren't that great |
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
| body { | |
| font-family: verdana; | |
| font-size: 10pt; | |
| } | |
| div.container { | |
| width: 900px; | |
| margin: auto; | |
| } | |
| a { | |
| color: black; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| a img { | |
| border: 0; | |
| } | |
| h1.frontpage_header { | |
| background: #ff6600; | |
| margin: 0; | |
| padding-top: 4px; | |
| padding-bottom: 4px; | |
| font-size: 10pt; | |
| } | |
| h1.frontpage_header img.logo { | |
| float: left; | |
| border: 1px solid white; | |
| margin-right: 4px; | |
| margin-left: 2px; | |
| } | |
| h1.frontpage_header span.nav { | |
| font-size: 10pt; | |
| font-weight: normal; | |
| } | |
| ol.frontpage { | |
| margin-top: 0; | |
| background: #f6f6ef; | |
| color: gray; | |
| } | |
| ol.frontpage li { | |
| padding-top: 4px; | |
| } | |
| ol.frontpage a.article_title:hover { | |
| text-decoration: none; | |
| } | |
| ol.frontpage a:visited { | |
| color: gray; | |
| } | |
| ol.frontpage .domain { | |
| font-size: 8pt; | |
| color: gray; | |
| } | |
| ol.frontpage .byline { | |
| font-size: 7pt; | |
| color: gray; | |
| } |
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
| <html> | |
| <head> | |
| <link href="custom.css" media="screen" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="frontpage_header"><a href="#"><img class="logo" src="y18.gif"></a>Hacker News | |
| <span class="nav">new | threads | comments | ask | jobs | submit</span> | |
| </h1> | |
| <ol class="frontpage"> | |
| <li> | |
| <a href="#"><img class="upvote" src="grayarrow.gif"></a> | |
| <a class="article_title" href="http://scraperwiki.com/get_involved/">Wiki for tools to scrape website data</a> | |
| <span class="domain">(scraperwiki.com)</span> | |
| <br> | |
| <span class="byline"> | |
| 37 points by <a href="#">araneae</a> 1 hour ago | <a href="#">4 comments</a> | |
| </span> | |
| </li> | |
| <li> | |
| <a href="#"><img class="upvote" src="grayarrow.gif"></a> | |
| <a class="article_title" href="http://www.bbc.co.uk/news/world-us-canada-11858637">Wikileaks says it is under attack</a> | |
| <span class="domain">(bbc.co.uk)</span> | |
| <br> | |
| <span class="byline"> | |
| 19 points by <a href="#">colinprince</a> 30 minutes ago | <a href="#">5 comments</a> | |
| </span> | |
| </li> | |
| <li> | |
| <a href="#"><img class="upvote" src="grayarrow.gif"></a> | |
| <a class="article_title" href="#">$TITLE</a> | |
| <span class="domain">($DOMAIN)</span> | |
| <br> | |
| <span class="byline"> | |
| $NUM_POINTS points by <a href="#">$SUBMITTER</a> $NUM_TIME_UNITS $TIME_UNITS ago | <a href="#">$NUM_COMMENTS comments</a> | |
| </span> | |
| </li> | |
| </ol> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment