├── .gitignore
├── README.md
├── chrome
    └── src
    │   ├── icon.svg
    │   ├── icon128.png
    │   ├── icon48.png
    │   ├── manifest.json
    │   └── twipster.css
├── dist
    ├── Twipster.safariextz
    ├── twipster-chrome-2.0.0.zip
    └── twipster-chrome-2.0.1.zip
├── google7a6ce854d6f18adc.html
├── gulpfile.js
├── index.html
├── package.json
├── safari
    ├── Twipster.safariextension
    │   ├── Icon.png
    │   ├── Info.plist
    │   └── twipster.css
    └── Update.plist
├── site
    ├── _basscss.scss
    ├── icon128.png
    ├── screenshot.png
    ├── style.css
    ├── style.scss
    └── twipster.svg
└── src
    └── twipster.css


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | .DS_Store
3 | _site
4 | 
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Twipster
2 | ========
3 | 
4 | **No longer maintained**
5 | 
6 | See these alternatives:
7 | - [Twitter Lite](https://mobile.twitter.com)
8 | - [Refined Twitter](https://github.com/sindresorhus/refined-twitter)
9 | 


--------------------------------------------------------------------------------
/chrome/src/icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
 6 | <g>
 7 | 	<g>
 8 | 		<path fill="#34A9DE" d="M256,240c0,8.8-7.2,16-16,16H16c-8.8,0-16-7.2-16-16V16C0,7.2,7.2,0,16,0h224c8.8,0,16,7.2,16,16V240z"/>
 9 | 	</g>
10 | 	<g>
11 | 		<ellipse opacity="0.1" fill="#444444" cx="128" cy="212" rx="72" ry="12"/>
12 | 		<g>
13 | 			<path fill="#FFFFFF" d="M188,56c-1.001-6.75-5.373-12-12-12h-71.624c0,0,12-4.002,10.875-7.5
14 | 				c-1.434-4.463-14.5,1.125-25.251,5.625c2.875-3.126,5.125-6.252,4.75-10.125c-7.604,1.929-14.048,8.556-17.014,12.218
15 | 				c-0.041,0.009-0.083,0.012-0.123,0.019c0.891-1.73,3.091-6.176,2.512-8.487C75.375,38.25,69.75,42.876,68,56L56,158
16 | 				c0,12-12,18-24,6c6,18,18,24,36,24h26.509l-2.451,17.15c-0.469,3.279,1.811,6.319,5.09,6.788
17 | 				c0.289,0.041,0.574,0.062,0.857,0.062c2.937,0,5.505-2.16,5.933-5.153L106.631,188h40.683l4.863,19.453
18 | 				c0.683,2.728,3.129,4.547,5.817,4.547c0.481,0,0.971-0.059,1.459-0.18c3.215-0.805,5.169-4.062,4.366-7.276L159.683,188H188
19 | 				c6.627,0,12-6,12-12C200,155,188,56,188,56z"/>
20 | 			<circle fill="#34A9DE" cx="92" cy="92" r="12"/>
21 | 			<circle fill="#34A9DE" cx="164" cy="92" r="12"/>
22 | 			<path fill="#1A546F" d="M223.271,74.334c-0.373-1.491-1.379-2.742-2.751-3.431c-13.132-6.565-28.962-6.565-38.42-6.565
23 | 				c-2.728,0-34.044,1.811-39.786,7.55c-0.986,0.989-1.541,2.326-1.541,3.721c0,0.608,0.031,1.405,0.086,2.338
24 | 				c-3.793-0.797-8.617-1.585-12.859-1.585s-9.064,0.788-12.858,1.585c0.056-0.933,0.085-1.73,0.085-2.338
25 | 				c0-1.395-0.554-2.732-1.541-3.721c-5.741-5.739-37.059-7.55-39.785-7.55c-9.458,0-25.288,0-38.421,6.565
26 | 				c-1.371,0.688-2.377,1.939-2.75,3.431c-3.385,13.538,5.864,39.53,10.399,44.068c0.401,0.398,0.861,0.729,1.368,0.986
27 | 				c6.277,3.136,18.385,3.558,29.404,3.558c12.209,0,27.082-0.858,33.775-7.55c0.398-0.401,0.732-0.864,0.984-1.368
28 | 				c2.225-4.45,4.201-15.647,5.389-25.04c3.35-0.831,9.28-2.109,13.951-2.109c4.673,0,10.603,1.279,13.951,2.109
29 | 				c1.189,9.393,3.164,20.59,5.389,25.04c0.254,0.504,0.588,0.967,0.986,1.368c6.692,6.691,21.564,7.55,33.774,7.55
30 | 				c11.019,0,23.127-0.422,29.403-3.558c0.506-0.256,0.966-0.587,1.367-0.986C217.406,113.865,226.655,87.873,223.271,74.334z
31 | 				 M99.61,108.486c-2.301,1.673-8.583,3.94-25.709,3.94c-11.919,0-19.863-0.677-23.665-2.019
32 | 				c-2.503-4.289-8.553-21.312-7.68-31.175c10.538-4.374,23.421-4.374,31.345-4.374c8.164,0,24.406,2.225,30.649,4.02
33 | 				C103.93,87.02,101.59,103.221,99.61,108.486z M205.764,110.408c-3.8,1.342-11.745,2.019-23.663,2.019
34 | 				c-17.128,0-23.409-2.268-25.711-3.94c-1.979-5.265-4.319-21.466-4.939-29.607c6.243-1.794,22.485-4.02,30.65-4.02
35 | 				c7.923,0,20.806,0,31.345,4.374C214.316,89.096,208.269,106.119,205.764,110.408z"/>
36 | 		</g>
37 | 	</g>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/chrome/src/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/chrome/src/icon128.png


--------------------------------------------------------------------------------
/chrome/src/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/chrome/src/icon48.png


--------------------------------------------------------------------------------
/chrome/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "Twipster",
 4 |   "description": "Simpler, Readabler Twitter",
 5 |   "icons": { 
 6 |     "48": "icon48.png",
 7 |     "128": "icon128.png" },
 8 |   "version": "2.0.1",
 9 |   "homepage_url": "http://github.com/jxnblk/Twipster",
10 |   "content_scripts": [
11 |     {
12 |       "matches": ["*://*.twitter.com/*"],
13 |       "css": ["twipster.css"],
14 |       "run_at": "document_end"
15 |     }
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/chrome/src/twipster.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Twipster
  3 |  * Chrome and Safari extensions for a more readable Twitter experience
  4 |  *
  5 |  * http://jxnblk.com/Twipster
  6 |  *
  7 |  */
  8 | 
  9 | 
 10 | /* Tweet text styles */
 11 | .tweet-text,
 12 | .ProfileTweet-text {
 13 |   font-family: Georgia !important;
 14 |   font-size: 20px !important;
 15 |   line-height: 1.5 !important;
 16 |   color: #444 !important;
 17 |   margin-bottom: 0.25em !important;
 18 | }
 19 | 
 20 | 
 21 | /* Compose tweet field */
 22 | .tweet-box {
 23 |   font-size: 18px !important;
 24 |   line-height: 24px !important;
 25 | }
 26 | 
 27 | /* Hide modules and promotions */
 28 | .trends, /* Trends module */
 29 | .promptbird, /* Prompt above timeline */
 30 | .enhanced-media-thumbnails, /* Inline images */
 31 | .content-header, /* Tweets column header */
 32 | .promoted-tweet, /* Promoted tweets */
 33 | .Footer, /* Site footer */
 34 | .site-footer,
 35 | .DashboardProfileCard, /* Profile card on home */
 36 | .WhoToFollow, /* Who to follow module */
 37 | .wtf-module {
 38 |   display: none !important;
 39 | }
 40 | 
 41 | /* Hide inline media */
 42 | .cards-media-container,
 43 | .card2 {
 44 |   display: none !important;
 45 | }
 46 | 
 47 | /* Show media when expanded or in detail view */
 48 | .expanding-stream-item.open .cards-media-container,
 49 | .permalink-tweet .cards-media-container,
 50 | .expanding-stream-item.open .card2,
 51 | .permalink-tweet .card2 {
 52 |   display: block !important;
 53 | }
 54 | 
 55 |     
 56 | /* Remove Borders */
 57 | .stream-item,
 58 | .tweet,
 59 | .stream-loading,
 60 | .stream-end,
 61 | .new-tweets-bar,
 62 | .module {
 63 |   border: none !important;
 64 | }
 65 | 
 66 | .stream-item-activity-me {
 67 |   border-bottom: none !important;
 68 | }
 69 | 
 70 | .user-similarities-list {
 71 |   border: 1px solid rgba(0,0,0,.1) !important;
 72 |   overflow: hidden !important;
 73 | }
 74 | 
 75 | 
 76 | /* Single Column Layout */
 77 | 
 78 | .wrapper-settings .content-header {
 79 |   display: block !important;
 80 | }
 81 |  
 82 | .wrapper,
 83 | .wrapper-narrow,
 84 | .wrapper-permalink {
 85 |   background: none !important;
 86 |   width: 90% !important;
 87 |   max-width: 56em !important;
 88 | }
 89 |  
 90 | .dashboard,
 91 | .content-main {
 92 |   float: none !important;
 93 |   width: 100% !important;
 94 | }
 95 | 
 96 | /* Subnavigation */
 97 | .module ul li {
 98 |   display: inline-block !important;
 99 | }
100 | .module ul li .Icon--caretRight {
101 |   display: none !important;
102 | }
103 | .list-link {
104 |   border: 0 !important;
105 | }
106 | 
107 | /* White background */
108 | body,
109 | body.ProfilePage {
110 |   background-image: none !important;
111 |   background-color: #fff !important;
112 | }
113 | 
114 | 
115 | /* Compose Tweet Modal */
116 | 
117 | .tweet-box {
118 |   width: 95% !important;
119 |   height: auto !important;
120 |   min-height: 80px !important;
121 |   padding: 8px 2.5% !important;
122 | }
123 | 
124 | .tweet-form.has-preview.has-thumbnail .tweet-box {
125 |   padding-bottom: 80px !important;
126 | }
127 | 
128 | .tweet-form .thumbnail-container {
129 |   width: auto !important;
130 | }
131 | 
132 | 
133 | /* Modals */
134 | .modal {
135 |   width: 90% !important;
136 |   max-width: 56em !important;
137 |   left: 0 !important;
138 |   right: 0 !important;
139 |   margin: 0 auto !important;
140 | }
141 | 
142 | 


--------------------------------------------------------------------------------
/dist/Twipster.safariextz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/dist/Twipster.safariextz


--------------------------------------------------------------------------------
/dist/twipster-chrome-2.0.0.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/dist/twipster-chrome-2.0.0.zip


--------------------------------------------------------------------------------
/dist/twipster-chrome-2.0.1.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/dist/twipster-chrome-2.0.1.zip


--------------------------------------------------------------------------------
/google7a6ce854d6f18adc.html:
--------------------------------------------------------------------------------
1 | google-site-verification: google7a6ce854d6f18adc.html
2 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var gulp = require('gulp');
 3 | var rename = require('gulp-rename');
 4 | var zip = require('gulp-zip');
 5 | var chrome = require('./chrome/src/manifest');
 6 | 
 7 | gulp.task('css', function() {
 8 |   gulp.src('./src/twipster.css')
 9 |     .pipe(gulp.dest('./chrome/src'))
10 |     .pipe(gulp.dest('./safari/Twipster.safariextension'));
11 | });
12 | 
13 | gulp.task('chrome', function() {
14 |   gulp.src('./chrome/src/**/*')
15 |     .pipe(zip('twipster-chrome-' + chrome.version + '.zip'))
16 |     .pipe(gulp.dest('./dist'));
17 | });
18 | 
19 | gulp.task('default', ['css', 'chrome']);
20 | 
21 | gulp.task('watch', ['default'], function() {
22 |   gulp.watch(['./src/twipster.css'], ['default']);
23 | });
24 | 
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Twipster</title>
 6 |   <meta name="author" content="Jxnblk">
 7 |   <meta name="description" content="Chrome and Safari extensions for a simpler, more readable Twitter experience.">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" href="site/icon128.png" />
10 |   <link rel="apple-touch-icon-precomposed" href="site/icon128.png" />
11 |   <link href="http://d2v52k3cl9vedd.cloudfront.net/basscss/4.1.3/basscss.min.css" rel="stylesheet">
12 |   <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/cbenmnfldkbiojlebcpbacleookcpffo">
13 | </head>
14 | <body>
15 | 
16 |   <header class="px2 py4 white bg-blue">
17 |     <div class="container">
18 |       <img src="site/twipster.svg" class="" alt="Twipster" />
19 |       <h1 class="">Twipster</h1>
20 |       <p class="h3 bold">Simpler, Readabler Twitter</p>
21 |     </div>
22 |   </header>
23 | 
24 |   <section id="download" class="container px2 py4">
25 |     <h1 class="">Install now</h1>
26 |     <p class="h3 bold">Twipster is a browser extension that alters the styles for twitter.com.</p>
27 |     <a href="#!" onclick="chrome.webstore.install()" id="chrome-install-button" class="button button-blue">Add to Chrome</a>
28 |     <a href="http://jxnblk.com/Twipster/dist/Twipster.safariextz" class="button button-blue">Add to Safari</a>
29 |   </section>
30 | 
31 |   <footer class=" container px2 py4">
32 |     <p class="">
33 |       <a href="http://github.com/jxnblk/Twipster"
34 |         class="h5 button button-small button-blue-outline">
35 |         Github
36 |       </a>
37 |       <a href="https://twitter.com/intent/tweet?text=Simpler%20Readabler%20Twitter.%20%40horse_twipster&amp;url=http%3A%2F%2Fjxnblk.com%2FTwipster"
38 |         class="h5 button button-small button-blue-outline" target="_blank">
39 |         Tweet
40 |       </a>
41 |       Made with love by <a href="http://jxnblk.com">Jxnblk</a>
42 |     </p>
43 |   </footer>
44 | 
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Twipster",
 3 |   "version": "2.0.1",
 4 |   "description": "Chrome extension for a simpler, more readable Twitter experience",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git://github.com/jxnblk/Twipster.git"
 8 |   },
 9 |   "author": "Brent Jackson",
10 |   "license": "MIT",
11 |   "bugs": {
12 |     "url": "https://github.com/jxnblk/Twipster/issues"
13 |   },
14 |   "homepage": "https://github.com/jxnblk/Twipster",
15 |   "devDependencies": {
16 |     "gulp-rename": "^1.2.0",
17 |     "gulp": "^3.8.8",
18 |     "gulp-zip": "^2.0.2"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/safari/Twipster.safariextension/Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/safari/Twipster.safariextension/Icon.png


--------------------------------------------------------------------------------
/safari/Twipster.safariextension/Info.plist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 3 | <plist version="1.0">
 4 | <dict>
 5 | 	<key>Author</key>
 6 | 	<string>Brent Jackson</string>
 7 | 	<key>Builder Version</key>
 8 | 	<string>10600.1.25</string>
 9 | 	<key>CFBundleDisplayName</key>
10 | 	<string>Twipster</string>
11 | 	<key>CFBundleIdentifier</key>
12 | 	<string>com.jxnblk.twipster</string>
13 | 	<key>CFBundleInfoDictionaryVersion</key>
14 | 	<string>6.0</string>
15 | 	<key>CFBundleShortVersionString</key>
16 | 	<string>2.0</string>
17 | 	<key>CFBundleVersion</key>
18 | 	<string>2.0.1</string>
19 | 	<key>Chrome</key>
20 | 	<dict/>
21 | 	<key>Content</key>
22 | 	<dict>
23 | 		<key>Scripts</key>
24 | 		<dict/>
25 | 		<key>Stylesheets</key>
26 | 		<array>
27 | 			<string>twipster.css</string>
28 | 		</array>
29 | 	</dict>
30 | 	<key>Description</key>
31 | 	<string>Simpler, More Readable Styles for Twitter.com</string>
32 | 	<key>DeveloperIdentifier</key>
33 | 	<string>36T97MXRKC</string>
34 | 	<key>ExtensionInfoDictionaryVersion</key>
35 | 	<string>1.0</string>
36 | 	<key>Permissions</key>
37 | 	<dict>
38 | 		<key>Website Access</key>
39 | 		<dict>
40 | 			<key>Allowed Domains</key>
41 | 			<array>
42 | 				<string>twitter.com</string>
43 | 			</array>
44 | 			<key>Include Secure Pages</key>
45 | 			<true/>
46 | 			<key>Level</key>
47 | 			<string>Some</string>
48 | 		</dict>
49 | 	</dict>
50 | 	<key>Update Manifest URL</key>
51 | 	<string>http://jxnblk.com/Twipster/safari/Update.plist</string>
52 | 	<key>Website</key>
53 | 	<string>http://github.com/jxnblk/Twipster</string>
54 | </dict>
55 | </plist>
56 | 


--------------------------------------------------------------------------------
/safari/Twipster.safariextension/twipster.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Twipster
  3 |  * Chrome and Safari extensions for a more readable Twitter experience
  4 |  *
  5 |  * http://jxnblk.com/Twipster
  6 |  *
  7 |  */
  8 | 
  9 | 
 10 | /* Tweet text styles */
 11 | .tweet-text,
 12 | .ProfileTweet-text {
 13 |   font-family: Georgia !important;
 14 |   font-size: 20px !important;
 15 |   line-height: 1.5 !important;
 16 |   color: #444 !important;
 17 |   margin-bottom: 0.25em !important;
 18 | }
 19 | 
 20 | 
 21 | /* Compose tweet field */
 22 | .tweet-box {
 23 |   font-size: 18px !important;
 24 |   line-height: 24px !important;
 25 | }
 26 | 
 27 | /* Hide modules and promotions */
 28 | .trends, /* Trends module */
 29 | .promptbird, /* Prompt above timeline */
 30 | .enhanced-media-thumbnails, /* Inline images */
 31 | .content-header, /* Tweets column header */
 32 | .promoted-tweet, /* Promoted tweets */
 33 | .Footer, /* Site footer */
 34 | .site-footer,
 35 | .DashboardProfileCard, /* Profile card on home */
 36 | .WhoToFollow, /* Who to follow module */
 37 | .wtf-module {
 38 |   display: none !important;
 39 | }
 40 | 
 41 | /* Hide inline media */
 42 | .cards-media-container,
 43 | .card2 {
 44 |   display: none !important;
 45 | }
 46 | 
 47 | /* Show media when expanded or in detail view */
 48 | .expanding-stream-item.open .cards-media-container,
 49 | .permalink-tweet .cards-media-container,
 50 | .expanding-stream-item.open .card2,
 51 | .permalink-tweet .card2 {
 52 |   display: block !important;
 53 | }
 54 | 
 55 |     
 56 | /* Remove Borders */
 57 | .stream-item,
 58 | .tweet,
 59 | .stream-loading,
 60 | .stream-end,
 61 | .new-tweets-bar,
 62 | .module {
 63 |   border: none !important;
 64 | }
 65 | 
 66 | .stream-item-activity-me {
 67 |   border-bottom: none !important;
 68 | }
 69 | 
 70 | .user-similarities-list {
 71 |   border: 1px solid rgba(0,0,0,.1) !important;
 72 |   overflow: hidden !important;
 73 | }
 74 | 
 75 | 
 76 | /* Single Column Layout */
 77 | 
 78 | .wrapper-settings .content-header {
 79 |   display: block !important;
 80 | }
 81 |  
 82 | .wrapper,
 83 | .wrapper-narrow,
 84 | .wrapper-permalink {
 85 |   background: none !important;
 86 |   width: 90% !important;
 87 |   max-width: 56em !important;
 88 | }
 89 |  
 90 | .dashboard,
 91 | .content-main {
 92 |   float: none !important;
 93 |   width: 100% !important;
 94 | }
 95 | 
 96 | /* Subnavigation */
 97 | .module ul li {
 98 |   display: inline-block !important;
 99 | }
100 | .module ul li .Icon--caretRight {
101 |   display: none !important;
102 | }
103 | .list-link {
104 |   border: 0 !important;
105 | }
106 | 
107 | /* White background */
108 | body,
109 | body.ProfilePage {
110 |   background-image: none !important;
111 |   background-color: #fff !important;
112 | }
113 | 
114 | 
115 | /* Compose Tweet Modal */
116 | 
117 | .tweet-box {
118 |   width: 95% !important;
119 |   height: auto !important;
120 |   min-height: 80px !important;
121 |   padding: 8px 2.5% !important;
122 | }
123 | 
124 | .tweet-form.has-preview.has-thumbnail .tweet-box {
125 |   padding-bottom: 80px !important;
126 | }
127 | 
128 | .tweet-form .thumbnail-container {
129 |   width: auto !important;
130 | }
131 | 
132 | 
133 | /* Modals */
134 | .modal {
135 |   width: 90% !important;
136 |   max-width: 56em !important;
137 |   left: 0 !important;
138 |   right: 0 !important;
139 |   margin: 0 auto !important;
140 | }
141 | 
142 | 


--------------------------------------------------------------------------------
/safari/Update.plist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 3 | <plist version="1.0">
 4 | <dict>
 5 |    <key>Extension Updates</key>
 6 |    <array>
 7 |      <dict>
 8 |        <key>CFBundleIdentifier</key>
 9 |        <string>com.jxnblk.safari.twipster</string>
10 |        <key>Developer Identifier</key>
11 |        <string>36T97MXRKC</string>
12 |        <key>CFBundleVersion</key>
13 |        <string>2.0.1</string>
14 |        <key>CFBundleShortVersionString</key>
15 |        <string>2.0</string>
16 |        <key>URL</key>
17 |        <string>http://jxnblk.com/Twipster/dist/Twipster.safariextz</string>
18 |      </dict>
19 |    </array>
20 | </dict>
21 | </plist>
22 | 


--------------------------------------------------------------------------------
/site/_basscss.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   BASSCSS
  4 | 
  5 |   Part reset, part boilerplate, part framework, all minimal.
  6 | 
  7 |   BASSCSS is a small reset and collection of simple type and layout
  8 |   classes that can be used as the basis for any web project.
  9 |   Use it out of the box or as a base for a larger SASS project.
 10 | 
 11 | 
 12 |   Contents:
 13 |   1. Reset
 14 |   2. Typography
 15 |      a. Default Font Stack
 16 |      b. Base Type Scale
 17 |      c. Responsive Type Scale
 18 |      d. Utilities
 19 |   3. Layout
 20 |      a. Margins
 21 |      b. Padding
 22 |      c. Display
 23 |      d. Utilities
 24 | 
 25 | 
 26 |   Made with love by Jxnblk
 27 | 
 28 | */
 29 | 
 30 | 
 31 | 
 32 | 
 33 | // Settings
 34 | 
 35 | // Defines whether or not to reset margins to 0
 36 | // $reset-margins: true;
 37 | // Default font stack
 38 | // $font-primary: 'Helvetica Neue', Helvetica, sans-serif;
 39 | // Base spacing unit
 40 | // $space: 1rem;
 41 | 
 42 | 
 43 | 
 44 | 
 45 | // Reset
 46 | 
 47 | $reset-margins: true !default;
 48 | @if ($reset-margins == true) {
 49 |   body, h1, h2, h3, h4, h5, h6, dl, ol, ul, p,
 50 |   button, input, select, textarea { margin: 0; }
 51 | }
 52 | 
 53 | button, input, select, textarea { font-family: inherit; font-size: 100%; }
 54 | article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }
 55 | 
 56 | 
 57 | 
 58 | 
 59 | // Typography
 60 | 
 61 | // Default Font Stack
 62 | $font-primary: 'Helvetica Neue', Helvetica, sans-serif !default;
 63 | 
 64 | // Base spacing unit
 65 | $space: 1rem !default;
 66 | 
 67 | body {
 68 |   font-family: $font-primary;
 69 |   line-height: 1.5;
 70 |   font-weight: 400;
 71 | }
 72 | 
 73 | // Base Type Scale
 74 | h1, .h1 {
 75 |   font-size: 2rem;
 76 |   line-height: 1.25;
 77 | }
 78 | 
 79 | h2, .h2 {
 80 |   font-size: 1.5rem;
 81 |   line-height: 1.25;
 82 | }
 83 | 
 84 | h3, h4, h5, h6, dl, ol, ul, p, .p {
 85 |   font-size: 1.125em;
 86 | }
 87 | 
 88 | small, .small {
 89 |   font-size: .875em;
 90 | }
 91 | 
 92 | // Responsive Type Scale
 93 | // Apply the .responsive class directly to elements or their parents
 94 | .responsive {
 95 |   @media (min-width: 896px) {
 96 |     .h1, &.h1 { font-size: 4rem; }
 97 |     .h2, &.h2 { font-size: 2rem; }
 98 |     .p, &.p { font-size: 1.25rem; }
 99 |     .small, &.small { font-size: 1rem; }
100 |   }
101 |   @media (min-width: 1280px) {
102 |     .h1, &.h1 { font-size: 5rem; }
103 |     .h2, &.h2 { font-size: 3rem; }
104 |   }
105 | }
106 | 
107 | // Utilities
108 | strong, .bold { font-weight: bold; }
109 | .regular { font-weight: normal; }
110 | .caps { text-transform: uppercase; letter-spacing: .2em; }
111 | .center { text-align: center; }
112 | .right-align  { text-align: right; }
113 | 
114 | // Type Spacing
115 | // Apply the .type-margins class to parent elements for default type spacing
116 | .type-margins {
117 |   h1, .h1 { margin-bottom: $space; }
118 |   h2, .h2 { margin-bottom: $space; }
119 |   h3, h4, h5, h6, p, dl, ol, ul { margin-bottom: $space; }
120 | }
121 | 
122 | 
123 | 
124 | // Layout
125 | 
126 | // Margins
127 | .m1  { margin: $space; }
128 | .mt1 { margin-top: $space; }
129 | .mr1 { margin-right: $space; }
130 | .mb1 { margin-bottom: $space; }
131 | .ml1 { margin-left: $space; }
132 | 
133 | .m2  { margin: 2 * $space; }
134 | .mt2 { margin-top: 2 * $space; }
135 | .mr2 { margin-right: 2 * $space; }
136 | .mb2 { margin-bottom: 2 * $space; }
137 | .ml2 { margin-left: 2 * $space; }
138 | 
139 | .m3  { margin: 3 * $space; }
140 | .mt3 { margin-top: 3 * $space; }
141 | .mr3 { margin-right: 3 * $space; }
142 | .mb3 { margin-bottom: 3 * $space; }
143 | .ml3 { margin-left: 3 * $space; }
144 | 
145 | .m4  { margin: 4 * $space; }
146 | .mt4 { margin-top: 4 * $space; }
147 | .mr4 { margin-right: 4 * $space; }
148 | .mb4 { margin-bottom: 4 * $space; }
149 | .ml4 { margin-left: 4 * $space; }
150 | 
151 | // Useful for horizontally center elements with a fixed width
152 | .mxa { margin-right: auto; margin-left: auto; }
153 | 
154 | // Padding
155 | .p1  { padding: $space; }
156 | .px1 { padding-right: $space; padding-left: $space; }
157 | .py1 { padding-top: $space; padding-bottom: $space; }
158 | 
159 | .p2  { padding: 2 * $space; }
160 | .px2 { padding-right: 2 * $space; padding-left: 2 * $space; }
161 | .py2 { padding-top: 2 * $space; padding-bottom: 2 * $space; }
162 | 
163 | .p3  { padding: 3 * $space; }
164 | .px3 { padding-right: 3 * $space; padding-left: 3 * $space; }
165 | .py3 { padding-top: 3 * $space; padding-bottom: 3 * $space; }
166 | 
167 | .p4  { padding: 4 * $space; }
168 | .px4 { padding-right: 4 * $space; padding-left: 4 * $space; }
169 | .py4 { padding-top: 4 * $space; padding-bottom: 4 * $space; }
170 | 
171 | // Display
172 | .inline       { display: inline;}
173 | .block        { display: block; }
174 | .inline-block { display: inline-block; }
175 | .table        { display: table; }
176 | .table-cell   { display: table-cell; vertical-align: middle; }
177 | 
178 | // Utilities
179 | .clearfix { overflow: hidden; }
180 | // .clearfix {
181 | //   &:before, &:after { content: " "; display: table; }
182 | //   &:after { clear: both; }
183 | // }
184 | .left { float: left; }
185 | .right { float: right; }
186 | 
187 | .fit { max-width: 100%; }
188 | 


--------------------------------------------------------------------------------
/site/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/site/icon128.png


--------------------------------------------------------------------------------
/site/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/Twipster/97702e2ca3e9416cc43a80aa5de7aab6f94482f7/site/screenshot.png


--------------------------------------------------------------------------------
/site/style.css:
--------------------------------------------------------------------------------
1 | body,h1,h2,h3,h4,h5,h6,dl,ol,ul,p,button,input,select,textarea{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:"Helvetica Neue",Helvetica,sans-serif;line-height:1.5;font-weight:400}h1,.h1{font-size:2rem;line-height:1.25}h2,.h2{font-size:1.5rem;line-height:1.25}h3,h4,h5,h6,dl,ol,ul,p,.p{font-size:1.125em}small,.small{font-size:.875em}@media (min-width: 896px){.responsive .h1,.responsive.h1{font-size:4rem}.responsive .h2,.responsive.h2{font-size:2rem}.responsive .p,.responsive.p{font-size:1.25rem}.responsive .small,.responsive.small{font-size:1rem}}@media (min-width: 1280px){.responsive .h1,.responsive.h1{font-size:5rem}.responsive .h2,.responsive.h2{font-size:3rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.type-margins h1,.type-margins .h1{margin-bottom:1rem}.type-margins h2,.type-margins .h2{margin-bottom:1rem}.type-margins h3,.type-margins h4,.type-margins h5,.type-margins h6,.type-margins p,.type-margins dl,.type-margins ol,.type-margins ul{margin-bottom:1rem}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxa{margin-right:auto;margin-left:auto}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell;vertical-align:middle}.clearfix{overflow:hidden}.left{float:left}.right{float:right}.fit{max-width:100%}.helvetica{font-family:Helvetica, Arial, sans-serif}.georgia{font-family:Georgia, serif}.square2{width:2em;height:2em}.full-width{width:100%}@media (min-width: 896px){.p2{padding:4rem}.px2{padding-right:4rem;padding-left:4rem}}.btn{font-weight:bold;display:inline-block;line-height:3;padding-right:1rem;padding-left:1rem;border-radius:0.25rem}.tiles{overflow:hidden;margin-right:-1rem}.tile{float:left;width:100%;margin-right:1rem}@media (min-width: 512px){.tile{width:calc(50% - 1rem)}}a{color:#34a9de;text-decoration:none}a:hover{color:#13b5ff}.white{color:white}.blue{color:#34a9de}.dark-blue{color:#1a546f}.light-gray{color:#e0e6ef}.mid-gray{color:#aaa}.dark-gray{color:#444}.bg-white{background-color:white}.bg-blue{background-color:#34a9de}.bg-dark-blue{background-color:#1a546f}.bg-light-gray{background-color:#e0e6ef}.bg-dark-gray{background-color:#444}.btn-blue{color:white;background-color:#34a9de}.btn-blue:hover{color:white;background-color:#13b5ff}.rounded{border-radius:0.25rem}
2 | 


--------------------------------------------------------------------------------
/site/style.scss:
--------------------------------------------------------------------------------
 1 | // Twipster
 2 | 
 3 | @import "basscss";
 4 | 
 5 | .helvetica { font-family: Helvetica, Arial, sans-serif; }
 6 | .georgia { font-family: Georgia, serif; }
 7 | .square2 { width: 2em; height: 2em; }
 8 | .full-width { width: 100%; }
 9 | 
10 | // Partially responsive padding
11 | @media (min-width: 896px) {
12 |   .p2 { padding: 4*$space; }
13 |   .px2 { padding-right: 4*$space;  padding-left: 4*$space; }
14 | }
15 | 
16 | .btn {
17 |   font-weight: bold;
18 |   display: inline-block;
19 |   line-height: 3;
20 |   padding-right: $space;
21 |   padding-left: $space;
22 |   border-radius: .25*$space;
23 | }
24 | 
25 | .tiles {
26 |   overflow: hidden;
27 |   margin-right: -$space;
28 | }
29 | 
30 | .tile {
31 |   float: left;
32 |   width: 100%;
33 |   margin-right: $space;
34 |   @media (min-width: 512px) {
35 |     width: calc(50% - #{$space});
36 |   }
37 | }
38 | 
39 | // Theme
40 | 
41 | $blue: #34a9de;
42 | $dark-blue: #1a546f;
43 | $light-gray: #e0e6ef;
44 | $mid-gray: #aaa;
45 | $dark-gray: #444;
46 | 
47 | a {
48 |   color: $blue;
49 |   text-decoration: none;
50 |   &:hover {
51 |     color: saturate($blue, 30%);
52 |   }
53 | }
54 | 
55 | .white { color: white; }
56 | .blue { color: $blue; }
57 | .dark-blue { color: $dark-blue; }
58 | .light-gray { color: $light-gray; }
59 | .mid-gray { color: $mid-gray; }
60 | .dark-gray { color: $dark-gray; }
61 | 
62 | .bg-white { background-color: white; }
63 | .bg-blue { background-color: $blue; }
64 | .bg-dark-blue { background-color: $dark-blue; }
65 | .bg-light-gray { background-color: $light-gray; }
66 | .bg-dark-gray { background-color: $dark-gray; }
67 | 
68 | .btn-blue {
69 |   color: white;
70 |   background-color: $blue;
71 |   &:hover {
72 |     color: white;
73 |     background-color: saturate($blue, 40%);
74 |   }
75 | }
76 | 
77 | .rounded { border-radius: .25*$space; }
78 | 


--------------------------------------------------------------------------------
/site/twipster.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
 6 | <g>
 7 | 	<ellipse opacity="0.1" fill="#444444" cx="32" cy="60" rx="24" ry="4"/>
 8 | 	<g>
 9 | 		<path fill="#FFFFFF" d="M52,8c-0.334-2.25-1.791-4-4-4H24.125c0,0,4-1.334,3.625-2.5c-0.478-1.488-4.833,0.375-8.417,1.875
10 | 			C20.292,2.333,21.042,1.291,20.917,0c-2.535,0.643-4.683,2.852-5.671,4.073c-0.014,0.003-0.028,0.004-0.041,0.006
11 | 			c0.297-0.577,1.03-2.059,0.837-2.829C14.458,2.083,12.583,3.625,12,8L8,42c0,4-4,6-8,2c2,6,6,8,12,8h8.836l-0.817,5.717
12 | 			c-0.156,1.094,0.604,2.106,1.697,2.263C21.812,59.993,21.908,60,22.002,60c0.979,0,1.835-0.721,1.978-1.718L24.877,52h13.561
13 | 			l1.621,6.484C40.287,59.394,41.102,60,41.998,60c0.16,0,0.324-0.02,0.486-0.061c1.072-0.268,1.723-1.354,1.455-2.425L42.561,52H52
14 | 			c2.209,0,4-2,4-4C56,41,52,8,52,8z"/>
15 | 		<circle fill="#34A9DE" cx="20" cy="20" r="4"/>
16 | 		<circle fill="#34A9DE" cx="44" cy="20" r="4"/>
17 | 		<path fill="#1A546F" d="M63.758,14.111c-0.125-0.497-0.46-0.914-0.918-1.144c-4.377-2.188-9.653-2.188-12.807-2.188
18 | 			c-0.908,0-11.348,0.604-13.262,2.517c-0.328,0.33-0.514,0.775-0.514,1.24c0,0.203,0.01,0.468,0.029,0.779
19 | 			c-1.266-0.266-2.873-0.528-4.287-0.528s-3.021,0.263-4.286,0.528c0.019-0.311,0.028-0.577,0.028-0.779
20 | 			c0-0.465-0.185-0.911-0.514-1.24c-1.914-1.913-12.353-2.517-13.262-2.517c-3.153,0-8.429,0-12.807,2.188
21 | 			c-0.457,0.229-0.792,0.646-0.917,1.144c-1.128,4.513,1.955,13.177,3.466,14.689c0.134,0.133,0.287,0.243,0.456,0.329
22 | 			c2.092,1.045,6.128,1.186,9.801,1.186c4.07,0,9.027-0.286,11.258-2.517c0.133-0.134,0.244-0.288,0.328-0.456
23 | 			c0.742-1.483,1.4-5.216,1.796-8.347c1.117-0.277,3.093-0.703,4.65-0.703c1.558,0,3.534,0.426,4.65,0.703
24 | 			c0.396,3.131,1.055,6.863,1.797,8.347c0.084,0.168,0.195,0.322,0.328,0.456c2.23,2.23,7.188,2.517,11.258,2.517
25 | 			c3.674,0,7.709-0.141,9.802-1.186c0.169-0.085,0.321-0.196,0.456-0.329C61.803,27.288,64.885,18.624,63.758,14.111z
26 | 			 M22.537,25.495c-0.767,0.558-2.861,1.313-8.57,1.313c-3.973,0-6.621-0.226-7.888-0.673c-0.834-1.43-2.851-7.104-2.56-10.392
27 | 			c3.513-1.458,7.807-1.458,10.448-1.458c2.721,0,8.135,0.742,10.216,1.34C23.977,18.34,23.197,23.74,22.537,25.495z M57.922,26.136
28 | 			c-1.268,0.447-3.916,0.673-7.889,0.673c-5.709,0-7.803-0.756-8.57-1.313c-0.659-1.755-1.439-7.155-1.646-9.869
29 | 			c2.082-0.598,7.496-1.34,10.217-1.34c2.642,0,6.936,0,10.449,1.458C60.772,19.032,58.756,24.706,57.922,26.136z"/>
30 | 	</g>
31 | </g>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/src/twipster.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Twipster
  3 |  * Chrome and Safari extensions for a more readable Twitter experience
  4 |  *
  5 |  * http://jxnblk.com/Twipster
  6 |  *
  7 |  */
  8 | 
  9 | 
 10 | /* Tweet text styles */
 11 | .tweet-text,
 12 | .ProfileTweet-text {
 13 |   font-family: Georgia !important;
 14 |   font-size: 20px !important;
 15 |   line-height: 1.5 !important;
 16 |   color: #444 !important;
 17 |   margin-bottom: 0.25em !important;
 18 | }
 19 | 
 20 | 
 21 | /* Compose tweet field */
 22 | .tweet-box {
 23 |   font-size: 18px !important;
 24 |   line-height: 24px !important;
 25 | }
 26 | 
 27 | /* Hide modules and promotions */
 28 | .trends, /* Trends module */
 29 | .promptbird, /* Prompt above timeline */
 30 | .enhanced-media-thumbnails, /* Inline images */
 31 | .content-header, /* Tweets column header */
 32 | .promoted-tweet, /* Promoted tweets */
 33 | .Footer, /* Site footer */
 34 | .site-footer,
 35 | .DashboardProfileCard, /* Profile card on home */
 36 | .WhoToFollow, /* Who to follow module */
 37 | .wtf-module {
 38 |   display: none !important;
 39 | }
 40 | 
 41 | /* Hide inline media */
 42 | .cards-media-container,
 43 | .card2 {
 44 |   display: none !important;
 45 | }
 46 | 
 47 | /* Show media when expanded or in detail view */
 48 | .expanding-stream-item.open .cards-media-container,
 49 | .permalink-tweet .cards-media-container,
 50 | .expanding-stream-item.open .card2,
 51 | .permalink-tweet .card2 {
 52 |   display: block !important;
 53 | }
 54 | 
 55 |     
 56 | /* Remove Borders */
 57 | .stream-item,
 58 | .tweet,
 59 | .stream-loading,
 60 | .stream-end,
 61 | .new-tweets-bar,
 62 | .module {
 63 |   border: none !important;
 64 | }
 65 | 
 66 | .stream-item-activity-me {
 67 |   border-bottom: none !important;
 68 | }
 69 | 
 70 | .user-similarities-list {
 71 |   border: 1px solid rgba(0,0,0,.1) !important;
 72 |   overflow: hidden !important;
 73 | }
 74 | 
 75 | 
 76 | /* Single Column Layout */
 77 | 
 78 | .wrapper-settings .content-header {
 79 |   display: block !important;
 80 | }
 81 |  
 82 | .wrapper,
 83 | .wrapper-narrow,
 84 | .wrapper-permalink {
 85 |   background: none !important;
 86 |   width: 90% !important;
 87 |   max-width: 56em !important;
 88 | }
 89 |  
 90 | .dashboard,
 91 | .content-main {
 92 |   float: none !important;
 93 |   width: 100% !important;
 94 | }
 95 | 
 96 | /* Subnavigation */
 97 | .module ul li {
 98 |   display: inline-block !important;
 99 | }
100 | .module ul li .Icon--caretRight {
101 |   display: none !important;
102 | }
103 | .list-link {
104 |   border: 0 !important;
105 | }
106 | 
107 | /* White background */
108 | body,
109 | body.ProfilePage {
110 |   background-image: none !important;
111 |   background-color: #fff !important;
112 | }
113 | 
114 | 
115 | /* Compose Tweet Modal */
116 | 
117 | .tweet-box {
118 |   width: 95% !important;
119 |   height: auto !important;
120 |   min-height: 80px !important;
121 |   padding: 8px 2.5% !important;
122 | }
123 | 
124 | .tweet-form.has-preview.has-thumbnail .tweet-box {
125 |   padding-bottom: 80px !important;
126 | }
127 | 
128 | .tweet-form .thumbnail-container {
129 |   width: auto !important;
130 | }
131 | 
132 | 
133 | /* Modals */
134 | .modal {
135 |   width: 90% !important;
136 |   max-width: 56em !important;
137 |   left: 0 !important;
138 |   right: 0 !important;
139 |   margin: 0 auto !important;
140 | }
141 | 
142 | 


--------------------------------------------------------------------------------