Skip to content

Instantly share code, notes, and snippets.

@poritsky
Created January 26, 2015 19:56
Show Gist options
  • Save poritsky/30ded2eeb4fea13862e1 to your computer and use it in GitHub Desktop.
Save poritsky/30ded2eeb4fea13862e1 to your computer and use it in GitHub Desktop.
Just a modification for Pinboard.in, inspired by Brett Terpstra. Works best on OS X.
@font-face{font-family:'FontAwesome';src:url('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');src:url('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
#tag_cloud{display:none}
#timer{display:none;}
#logo{margin-left:120px;}
#pinboard{width:100%;padding:0 !important;margin:0 !important;background-color:#f9f9f9 !important;}
#banner{background:rgb(15,128,255) !important;width:100% !important;min-width:1100px;position:fixed;left:0;padding:15px 0 16px 0 !important;z-index:10;font-family:"Avenir Next Condensed";}
#banner #top_menu a{// opacity:0.2;}
#banner #logo{padding:0 10px;}
#banner #logo span{position:relative;top:-2px;color:rgba(255,255,255,0.3);}
#banner #logo span a{color:rgba(245,245,245,0.8) !important;}
#banner #pinboard_name{font-weight:bold;font-style:italic;text-transform:uppercase;visibility:none;}
//#banner #pinboard_name:before{font-family:"FontAwesome";font-style:normal!important;content:" \f08d ";}
#banner #logo img{display:none;}
#banner #top_menu{padding-right:236px;color:#fff!important;text-transform:capitalize;}
#banner a{color:#fff !important;}
#main_column,#right_bar,#search_right_bar,#profile_main_column{margin-top:80px;font-family:"Avenir Next Condensed";}
#main_column b{display:none;}
#bookmarks{font-family:"Avenir Next Condensed";font-size:1.1em;}
#bookmarks div.display a.bookmark_title.unread{font-weight:bold;color:rgba(37,204,32,1) !important;}
#bookmarks div.display a.bookmark_title{font-weight:bold;display:inline-block;color:rgba(15,128,255,1) !important;width:580px;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;padding:0;line-height:1.4em;}
#bookmarks a.cached{color:rgba(15,128,255,0.7) !important;}
div.private{border:0!important;background:rgba(15,128,255,0.1) !important;}
.user_navbar{font-family:"Avenir Next Condensed";position:relative;height:15px;margin:0;width:630px;}
.user_navbar>div{line-height:.5em;}
.user_navbar a{color:rgb(15,128,255) !important;}
.bookmark_count_box{position:absolute;width:70px;padding:0;left:-75px;}
.bookmark_count{float:right;color:rgb(15,128,255) !important;font-size:14px!important;padding:5px;font-style:italic;font-weight:bold;position:relative;top:-5px;}
.private .display a.tag,.display .tag{color:rgba(255,132,40,1)!important;font-weight:bold;font-style:italic;}
a.edit:after{font-family:"FontAwesome";font-size:.8em;content:" \f044"}
a.delete:after{font-family:"FontAwesome";font-size:.9em;content:" \f014"}
a.mark_read:after{font-family:"FontAwesome";font-size:.8em;content:" \f02d";}
#right_bar,#search_right_bar{font-family:"Avenir Next Condensed"!important;}
#searchbox input{font-weight:400;font-size:1.3em;border-radius:0em;font-family:"Avenir Next Condensed"!important;border:1px solid rgba(15,128,255,1);color:rgba(15,128,255,1);width:70%;}
#searchbox .search_button{margin-top:0!important;}
#searchbox input[type=submit]{font-weight:500;font-size:1.1em;border-radius:0;border:1px solid rgba(15,128,255,1);background:#fff;width:35.35%;}
#searchbox #search_field{width:280px;background:#fff;padding:4px;color:rgba(15,128,255,1);}
@poritsky
Copy link
Author

Here's Brett Terpstra's 2011 CSS I based this on. http://brettterpstra.com/2011/03/13/pinboard-redesign-experiment/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment