Skip to content

Instantly share code, notes, and snippets.

@Murphydbuffalo

Murphydbuffalo/comment_styles.css

Created May 19, 2014 22:30
Show Gist options
  • Save Murphydbuffalo/d3dd6e5facc01385bf1a to your computer and use it in GitHub Desktop.
Save Murphydbuffalo/d3dd6e5facc01385bf1a to your computer and use it in GitHub Desktop.
Download ZIP
Files for the Slacker News front end
Raw
comment_styles.css
body {font: 80% Verdana;}
.whole_page {background-color: #f6f6ef;
width: 85%;
margin: auto;}
header {background-color: #ff6600;
height: 1.80em;
position: relative;}
#login {margin-left: 40%;}
header nav,
header a {position: relative;
bottom: 40%;}
header h4,
header img {display: inline;}
header h4,
header a,
header ul li {font-size: 1.1em;}
header img {height: 1.4em;
width: 1.4em;
border: 1px solid white;
margin: 0 0 .5em .15em;}
header nav ul {position: relative;
right: 4%;}
header li a:visited {color: black;}
nav,
nav li {display: inline-block;}
.heading {margin: 1em 0 -.5em .5em;
font-size: 90%;
color: grey;}
.heading a {font-size: 115%;
color: black;}
.subheading {font-size: 75%;
padding-bottom: .4em;
position: relative;
margin-left: 2em;}
.subheading,
li a:visited {color: grey;}
.content a:hover {text-decoration: underline;}
form {margin-left: 2.5%;}
form textarea,
form button {margin-bottom: 2.5%;}
ul {margin-left: -1.5em;}
ul li {list-style-type: none;
font-size: 90%;}
a {text-decoration: none;
color: black;}
span {font-size: 65%;}
hr {border: .15em solid #ff6600;}
footer {text-align: center;}
footer form {color: grey;
font-size: 1.1em;}
footer nav li {font-size: 80%;}
Raw
comments.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slacker News</title>
<link rel="shortcut icon" href="http://charles.io/images/yc.png">
<link rel="stylesheet" href="comment_styles.css" type="text/css">
</head>
<body>
<div class='whole_page'>
<header>
<img src="http://vladizorov.info/static/images/favicons/ycombinator.ico" id="logo" />
<a href="index.html"> <h4> Slacker News </h4> </a>
<nav>
<ul>
<li> <a href=""> new </a> | </li>
<li> <a href=""> comments </a> | </li>
<li> <a href=""> ask </a> | </li>
<li> <a href=""> jobs </a> | </li>
<li> <a href=""> submit </a> </li>
</ul>
</nav>
<a id="login" href=""> login </a>
</header>
<div class="content">
<p class="heading"> <span> &#x25b2; </span> <a href="https://www.firebase.com/blog/2013-08-15-firebase-leaves-beta-today.html "> Firebase Leaves Beta Today </a> (firebase.com) </p>
<p class="subheading"> 63 points by <a href=""> adam </a> 56 minutes ago | <a href="./comments.html"> 3 comments </a> </p>
<form>
<textarea rows="7" cols="75"> </textarea> <br>
<button type="add_comment"> add comment </button>
</form>
<ul>
<li>
<span> &#x25b2; </span> <a href=""> faizan </a> 49 minutes ago | <a href="./index.html"> link </a>
<p> Bleep blarp bleep </p>
<a href=""> reply </a>
<ul>
<li>
<span> &#x25b2; </span> <a href=""> helen </a> 42 minutes ago | <a href="./index.html"> link </a>
<p> Mmm yes yes indeed </p>
<a href=""> reply </a>
<ul>
<li>
<span> &#x25b2; </span> <a href=""> eric </a> 34 minutes ago | <a href="./index.html"> link </a>
<p> Harfarblargh! </p>
<a href=""> reply </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<footer>
<hr/>
<nav>
<ul>
<li> <a href=""> Lists </a> | </li>
<li> <a href=""> RSS </a> | </li>
<li> <a href=""> Bookmarklet </a> | </li>
<li> <a href=""> Guidelines </a> | </li>
<li> <a href=""> FAQ </a> | </li>
<li> <a href=""> DMCA </a> | </li>
<li> <a href=""> News News </a> | </li>
<li> <a href=""> Feature Requests </a> | </li>
<li> <a href=""> Bugs </a> | </li>
<li> <a href=""> Y Combinator </a> | </li>
<li> <a href=""> Apply </a> | </li>
<li> <a href=""> Library </a> </li>
</ul>
<form>
Search:
<input type="text field" name="search_input">
</form>
</form>
</nav>
</footer>
</div>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slacker News</title>
<link rel="shortcut icon" href="http://charles.io/images/yc.png">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class='whole_page'>
<header>
<img src="http://vladizorov.info/static/images/favicons/ycombinator.ico" id="logo" />
<a href="index.html"> <h4> Slacker News </h4> </a>
<nav>
<ul>
<li> <a href=""> new </a> | </li>
<li> <a href=""> comments </a> | </li>
<li> <a href=""> ask </a> | </li>
<li> <a href=""> jobs </a> | </li>
<li> <a href=""> submit </a> </li>
</ul>
</nav>
<a id="login" href=""> login </a>
</header>
<div class="content">
<ol>
<li> <span> &#x25b2; </span> <a href="https://www.firebase.com/blog/2013-08-15-firebase-leaves-beta-today.html "> Firebase Leaves Beta Today </a> (firebase.com)
<ul>
<li> 63 points by <a href=""> lyime </a> 56 minutes ago | <a href="./comments.html"> 17 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://fitzgeraldnick.com/weblog/50/"> Destructuring Assignment in ECMAScript 6 </a> (fitzgeraldnick.com)
<ul>
<li> 40 points by <a href=""> mnemonik </a> 49 minutes ago | <a href="./comments.html"> 5 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="https://stripe.com/blog/introducing-stripe-uk"> Introducing Stripe UK </a> (stripe.com)
<ul>
<li> 230 points by <a href=""> woodrow </a> 4 hours ago | <a href="./comments.html"> 118 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://ragnard.github.io/2013/08/12/datomic-in-the-browser.html"> Datomic in the browser </a> (ragnard.github.io)
<ul>
<li> 47 points by <a href=""> brucehauman </a> 2 hours ago | <a href="./comments.html"> 1 comment </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="https://developers.facebook.com/blog/post/2013/08/15/summary-of-the-august-13th-app-outage/"> Facebook App Outage Postmortem </a> (facebook.com)
<ul>
<li> 15 points by <a href=""> lacker </a> 32 minutes ago | <a href="./comments.html"> 2 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://techcrunch.com/2013/08/15/inks-new-mobile-framework-lets-ios-apps-talk-to-each-other-share-data-you-know-like-on-android/"> Ink (YC S12) Releases New iOS Layer That Allows Apps to Interact, Share Data </a> (techcrunch.com)
<ul>
<li> 19 points by <a href=""> betojuareziii </a> 1 hour ago | <a href="./comments.html"> 13 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://www.lettersofnote.com/2013/07/its-real-thing.html?m=1"> It's the real thing </a> (lettersofnote.com)
<ul>
<li> 75 points by <a href=""> ezl </a> 3 hours ago | <a href="./comments.html"> 44 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://firstround.com/article/The-anatomy-of-the-perfect-technical-interview-from-a-former-Amazon-VP"> The anatomy of the perfect technical interview from a former Amazon VP </a> (firstround.com)
<ul>
<li> 55 points by <a href=""> jnazario </a> 3 hours ago | <a href="./comments.html"> 26 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://www.washingtonpost.com/blogs/ask-the-post/wp/2013/08/15/editors-note/"> The Washington Post Web site was hacked today </a> (washingtonpost.com)
<ul>
<li> 34 points by <a href=""> selamattidur </a> 2 hours ago | <a href="./comments.html"> 26 comments </a> </li>
</ul>
</li>
<li> <span> &#x25b2; </span> <a href="http://stackoverflow.com/questions/16159203/why-does-this-java-program-terminate-despite-that-appears-that-it-shouldt-and"> Why does this Java program terminate despite appearing that it shouldn't? </a> (stackoverflow.com)
<ul>
<li> 88 points by <a href=""> patmcguire </a> 3 hours ago | <a href="./comments.html"> 83 comments </a> </li>
</ul>
</li>
</ol>
<ul>
<li> <a href=""> More </a> </li>
</ul>
</div>
<footer>
<hr/>
<nav>
<ul>
<li> <a href=""> Lists </a> | </li>
<li> <a href=""> RSS </a> | </li>
<li> <a href=""> Bookmarklet </a> | </li>
<li> <a href=""> Guidelines </a> | </li>
<li> <a href=""> FAQ </a> | </li>
<li> <a href=""> DMCA </a> | </li>
<li> <a href=""> News News </a> | </li>
<li> <a href=""> Feature Requests </a> | </li>
<li> <a href=""> Bugs </a> | </li>
<li> <a href=""> Y Combinator </a> | </li>
<li> <a href=""> Apply </a> | </li>
<li> <a href=""> Library </a> </li>
</ul>
<form>
Search:
<input type="text field" name="search_input">
</form>
</form>
</nav>
</footer>
</div>
</body>
</html>
Raw
server.rb
require 'sinatra'
Raw
styles.css
body {font: 80% Verdana;}
.whole_page {background-color: #f6f6ef;
width: 85%;
margin: auto;}
header {background-color: #ff6600;
height: 1.80em;
position: relative;}
#login {margin-left: 40%;}
header nav,
header a {position: relative;
bottom: 40%;}
header h4,
header img {display: inline;}
header h4,
header a,
header ul li {font-size: 1.1em;}
header img {height: 1.4em;
width: 1.4em;
border: 1px solid white;
margin: 0 0 .5em .15em;}
header nav ul {position: relative;
right: 11%;}
header li a:visited {color: black;}
nav,
nav li {display: inline-block;}
ol li {font-size: 90%;}
ol ul li {font-size: 75%;
padding-bottom: .4em;
position: relative;
right: 5%;}
ol li,
ol ul li,
li a:visited {color: grey;}
ul li {list-style-type: none;}
a {text-decoration: none;
color: black;}
.content li a {font-size: 120%;}
.content li a:hover {text-decoration: underline;}
span {font-size: 65%;}
hr {border: .15em solid #ff6600;}
footer {text-align: center;}
footer form {color: grey;
font-size: 1.1em;}
footer nav li {font-size: 80%;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment