12 | {{ content }}
13 |
14 |
12 |
13 |
14 | {% endif %}
15 |
16 |
17 | {{ content }}
18 |
19 |
20 |
11 |
15 |
16 | {% include footer.html %}
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | # https://manojvivek.github.io/medium-unlimited/
2 | Static site for [MediumUnlimited](https://github.com/manojVivek/medium-unlimited) live at [https://manojvivek.github.io/medium-unlimited/](https://manojvivek.github.io/medium-unlimited/) using the minimalist theme [Gravity](http://github.com/hemangsk/Gravity) for jekyll.
3 |
4 | # Usage
5 | Run the `start.sh` file in the root to bootstrap the local development environment.
6 |
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | export const CONTENT_SECTION_CLASSNAME = 'section-content';
2 | export const MEMBERSHIP_PROMPT_CLASSNAME = 'postFade';
3 | export const MEMBERSHIP_PROMPT_ID = 'paywall-background-color';
4 | export const METERED_CONTENT_CLASSNAME = 'meteredContent';
5 |
6 | export const USER_ID_KEY = 'userId';
7 | export const READ_COUNT_KEY = 'readCount';
8 |
9 | export const FETCH_CONTENT_MESSAGE = 'fetchContent';
10 | export const FETCH_USER_ID = 'fetchUserId';
11 |
--------------------------------------------------------------------------------
/website/_layouts/page.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
3 |
4 |
5 | {{site.title}}
6 | {{site.description}}
7 |
8 |
9 |
19 |
20 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://paypal.me/manojvivek']
13 |
--------------------------------------------------------------------------------
/website/_layouts/archive.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | ---
4 |
5 |
6 | {% for post in site.posts %}
7 | {% for cat in post.categories %}
8 | {% if cat == page.category %}
9 |
10 |
11 |
12 |
13 |
19 |
26 | {% endif %}
27 | {% endfor %}
28 |
29 | {% endfor %}
30 |
--------------------------------------------------------------------------------
/website/_includes/icon-twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/sitemap.xml:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 | {{post.tag}}
17 |
18 | 19 |
20 | {{post.title}}
21 |
22 |
23 | {{post.excerpt}}
24 |
25 | 10 | 11 | 22 |
23 |
Please get in touch if you have any question or thoughts: p.manoj.vivek@gmail.com
24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "medium-unlimited", 3 | "version": "2.0.0", 4 | "description": "A chrome extension to unlock medium.com paywall", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode development --watch", 8 | "build": "webpack --mode production", 9 | "deploy-website": "gh-pages -d website/_site" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "amplitude": "^3.5.0", 15 | "classnames": "^2.2.6", 16 | "gh-pages": "^2.2.0", 17 | "react": "^16.4.2", 18 | "react-dom": "^16.4.2", 19 | "webext-domain-permission-toggle": "^2.1.0", 20 | "webext-dynamic-content-scripts": "^7.1.2" 21 | }, 22 | "devDependencies": { 23 | "babel-core": "^6.26.3", 24 | "babel-loader": "^7.1.4", 25 | "babel-polyfill": "^6.26.0", 26 | "babel-preset-env": "^1.7.0", 27 | "babel-preset-react": "^6.24.1", 28 | "babel-preset-stage-0": "^6.24.1", 29 | "babel-preset-stage-2": "^6.24.1", 30 | "copy-webpack-plugin": "^5.1.1", 31 | "css-loader": "^1.0.0", 32 | "style-loader": "^0.23.0", 33 | "webpack": "^4.41.5", 34 | "webpack-cli": "^3.1.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /website/LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | MIT License 4 | 5 | Copyright (c) 2019 Manoj Vivek 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 2 | 3 | module.exports = { 4 | entry: { 5 | background: ['babel-polyfill', './src/background.js'], 6 | main: './src/medium-unlocker.js', 7 | }, 8 | output: { 9 | filename: '[name].bundle.js', 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.jsx?$/, 15 | exclude: /node_modules/, 16 | use: { 17 | loader: 'babel-loader', 18 | }, 19 | }, 20 | { 21 | test: /\.css$/, 22 | use: [ 23 | { 24 | loader: 'style-loader', 25 | }, 26 | { 27 | loader: 'css-loader', 28 | options: { 29 | modules: true, 30 | importLoaders: 1, 31 | localIdentName: '[name]_[local]_[hash:base64]', 32 | sourceMap: true, 33 | minimize: true, 34 | }, 35 | }, 36 | ], 37 | }, 38 | ], 39 | }, 40 | plugins: [ 41 | new CopyWebpackPlugin( 42 | [ 43 | {from: 'static', to: 'static'}, 44 | {from: 'src/html', to: 'html'}, 45 | {from: 'manifest.json', to: 'manifest.json'}, 46 | ], 47 | {debug: true, context: '.'} 48 | ), 49 | ], 50 | }; 51 | -------------------------------------------------------------------------------- /website/_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |{{ page.title }}
8 |
11 |
15 | {% endif %}
16 | {{page.author}}
20 | {{ content }}
21 |
22 |
23 |
35 |
36 |
37 | Firefox Browser
Head over to the firefox addons store and install the Medium-Unlimited addon.
9 |Link - https://addons.mozilla.org/en-US/firefox/addon/medium-unlimited-read-for-free/
10 |11 |
Google Chrome Browser
Follow the below steps to add the extension to your Google Chrome browser:
13 |-
14 |
Open the Extension Manager by following:
Kebab menu(⋮) -> More Tools -> Extensions
15 | If the developer mode is not turned on, turn it on by clicking the toggle in the top right corner
16 | Download the extension file from here.
17 | Extract the downloaded .zip file and note the extracted path
18 | Now click on Load unpacked button on the top left and select the extracted folder
19 | You are all-set now, head over to medium.com and enjoy the articles!
20 |
Please get in touch if you need any help in installing the extension: p.manoj.vivek@gmail.com
24 | 25 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import config from './config'; 2 | import {setUserId, getUserId} from './storage'; 3 | import {track} from './analytics'; 4 | import {MEMBERSHIP_PROMPT_CLASSNAME, MEMBERSHIP_PROMPT_ID, METERED_CONTENT_CLASSNAME} from './constants'; 5 | 6 | export function log(...messages) { 7 | if (process.env.NODE_ENV === 'production') { 8 | return; 9 | } 10 | console.log(...messages); 11 | } 12 | 13 | export function amplitudeApiKey() { 14 | if (process.env.NODE_ENV === 'production') { 15 | return config.amplitude.api_key; 16 | } 17 | return 'test_api_key'; 18 | } 19 | 20 | export function init() { 21 | chrome.runtime.setUninstallURL('https://manojvivek.typeform.com/to/c0VaBs'); 22 | chrome.runtime.onInstalled.addListener(() => { 23 | if (!getUserId()) { 24 | setUserId(new Date().getTime().toString()); 25 | track('INSTALLED'); 26 | } 27 | }); 28 | } 29 | 30 | export function urlWithoutQueryParams(url) { 31 | if (!url) { 32 | return ''; 33 | } 34 | return url.split('?')[0]; 35 | } 36 | 37 | function hasMembershipPromptNew(document) { 38 | const article = document.getElementsByTagName('article')[0]; 39 | if (!article) { 40 | return false; 41 | } 42 | const computedStyles = (document.defaultView || window).getComputedStyle(article.nextSibling); 43 | if (!computedStyles.background) { 44 | return false; 45 | } 46 | return computedStyles.background.indexOf('linear-gradient') > -1; 47 | } 48 | 49 | export function hasMembershipPrompt(document) { 50 | return ( 51 | document.getElementById(MEMBERSHIP_PROMPT_ID) || 52 | hasMembershipPromptNew(document) 53 | ); 54 | } 55 | 56 | export function getTwitterReferer() { 57 | return `https://t.co/${Math.random().toString(36).slice(2)}`; 58 | } 59 | 60 | export function getMeteredContentElement(doc) { 61 | return (doc || document).getElementsByClassName(METERED_CONTENT_CLASSNAME)[0]; 62 | } 63 | -------------------------------------------------------------------------------- /website/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 |
45 |
54 | );
55 | }
56 |
57 | _getHeader = () => {
58 | return (
59 |
50 | {this._getHeader()}
51 |
52 | {this._getExpandedContent()}
53 |
60 |
91 | );
92 | };
93 |
94 | _getExpandedContent = () => {
95 | return (
96 | this.setState({expanded: false})}
66 | >
67 | ✕
68 |
69 | {
72 | if (!this.state.expanded) {
73 | track('FLOATING_BUTTON_CLICKED');
74 | }
75 | this.setState({expanded: !this.state.expanded});
76 | }}
77 | >
78 | 
79 |
80 |
86 |
87 | Medium-Unlimited
88 |
89 |
90 |
102 |
104 | );
105 | };
106 | }
107 |
108 | export default App;
109 |
--------------------------------------------------------------------------------
/static/loader.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/request_interceptors.js:
--------------------------------------------------------------------------------
1 | import {getTwitterReferer} from './utils';
2 |
3 | const urlsList = [
4 | 'https://medium.com/*',
5 | 'https://www.google.com/search/*',
6 | 'https://towardsdatascience.com/*',
7 | 'https://hackernoon.com/*',
8 | 'https://medium.freecodecamp.org/*',
9 | 'https://psiloveyou.xyz/*',
10 | 'https://betterhumans.coach.me/*',
11 | 'https://codeburst.io/*',
12 | 'https://theascent.pub/*',
13 | 'https://*.medium.com/*',
14 | 'https://medium.mybridge.co/*',
15 | 'https://uxdesign.cc/*',
16 | 'https://levelup.gitconnected.com/*',
17 | 'https://itnext.io/*',
18 | 'https://entrepreneurshandbook.co/*',
19 | 'https://proandroiddev.com/*',
20 | 'https://blog.prototypr.io/*',
21 | 'https://thebolditalic.com/*',
22 | 'https://blog.usejournal.com/*',
23 | 'https://blog.angularindepth.com/*',
24 | 'https://blog.bitsrc.io/*',
25 | 'https://blog.devartis.com/*',
26 | 'https://blog.maddevs.io/*',
27 | 'https://blog.getambassador.io/*',
28 | 'https://uxplanet.org/*',
29 | 'https://instagram-engineering.com/*',
30 | 'https://calia.me/*',
31 | 'https://productcoalition.com/*',
32 | 'https://engineering.opsgenie.com/*',
33 | 'https://android.jlelse.eu/*',
34 | 'https://robinhood.engineering/*',
35 | 'https://blog.hipolabs.com/*',
36 | 'https://ux.shopify.com/*',
37 | 'https://engineering.talkdesk.com/*',
38 | 'https://blog.codegiant.io/*',
39 | 'https://tech.olx.com/*',
40 | 'https://netflixtechblog.com/*',
41 | 'https://hackingandslacking.com/*',
42 | 'https://blog.kotlin-academy.com/*',
43 | 'https://blog.securityevaluators.com/*',
44 | 'https://blog.kubernauts.io/*',
45 | 'https://blog.coffeeapplied.com/*',
46 | 'https://unbounded.io/*',
47 | 'https://writingcooperative.com/*',
48 | 'https://*.plainenglish.io/*',
49 | 'https://*.betterprogramming.pub/*',
50 | 'https://blog.doit-intl.com/*',
51 | 'https://eand.co/*',
52 | 'https://techuisite.com/*',
53 | 'https://levelupprogramming.net/*',
54 | 'https://betterhumans.pub/*',
55 | 'https://betterprogramming.pub/*',
56 | 'https://pub.towardsai.net/*',
57 | 'https://bettermarketing.pub/*',
58 | 'https://themakingofamillionaire.com/*',
59 | 'https://medium.datadriveninvestor.com/*',
60 | 'https://bootcamp.uxdesign.cc/*',
61 | 'https://*.baos.pub/*',
62 | 'https://www.inbitcoinwetrust.net/*',
63 | 'https://blog.prototypr.io/*',
64 | 'https://blog.devgenius.io/*'
65 | ];
66 |
67 | export default function intercept() {
68 | function onBeforeSendHeaders(details) {
69 | if (details.requestHeaders) {
70 | let newHeaders = removeHeader(details.requestHeaders, 'referer');
71 | newHeaders = addHeader(newHeaders, 'Referer', getTwitterReferer());
72 |
73 | return {requestHeaders: newHeaders};
74 | }
75 | return {requestHeaders: details.requestHeaders};
76 | }
77 |
78 | chrome.webRequest.onBeforeSendHeaders.addListener(
79 | onBeforeSendHeaders,
80 | {
81 | urls: urlsList,
82 | },
83 | getBeforeSendExtraInfoSpec()
84 | );
85 |
86 | function getBeforeSendExtraInfoSpec() {
87 | const extraInfoSpec = ['blocking', 'requestHeaders'];
88 | if (
89 | chrome.webRequest.OnBeforeSendHeadersOptions.hasOwnProperty(
90 | 'EXTRA_HEADERS'
91 | )
92 | ) {
93 | extraInfoSpec.push('extraHeaders');
94 | }
95 | return extraInfoSpec;
96 | }
97 |
98 | function removeHeader(headers, headerToRemove) {
99 | return headers.filter(({name}) => name.toLowerCase() != headerToRemove);
100 | }
101 |
102 | function addHeader(headers, name, value) {
103 | headers.push({name, value});
104 | return headers;
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/src/medium-unlocker.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom';
2 | import React from 'react';
3 | import App from './components/App/App.jsx';
4 | import { getMeteredContentElement, hasMembershipPrompt, log } from './utils.js';
5 | import { MEMBERSHIP_PROMPT_ID } from './constants.js';
6 |
7 | let previousUrl = window.location.href;
8 | let loaderElement;
9 | const floatingContentDivId = 'mediumUnlimited';
10 | const floatingButtonParent = document.createElement('div');
11 | floatingButtonParent.setAttribute('id', floatingContentDivId);
12 | document.body.appendChild(floatingButtonParent);
13 | let yetToProcess = true;
14 | function registerListeners() {
15 | _attachFloatingButton();
16 | /* Not the best way to detect url change but wrapping "history.pushState" or
17 | "history.replaceState" is not working. Needs debugging.
18 | */
19 | setInterval(() => {
20 | if (window.location.href != previousUrl) {
21 | previousUrl = window.location.href;
22 | window.location.href = window.location.href;
23 | }
24 | unlockIfHidden();
25 | }, 1500);
26 | }
27 |
28 | function unlockIfHidden() {
29 | if (!hasMembershipPrompt(document)) {
30 | log('Content is open, nothing to do');
31 | return;
32 | }
33 | if (!yetToProcess) {
34 | return;
35 | }
36 | yetToProcess = false;
37 | log('Content is hidden');
38 | _showLoader();
39 | fetch(window.location.href).then(resp => resp.text()).then((resp) => {
40 | const html = getHTMLFromText(resp);
41 | const articleContent = getMeteredContentElement(html);
42 | if (articleContent) {
43 | const meteredContentElement = getMeteredContentElement();
44 | meteredContentElement.parentElement.replaceChild(articleContent, meteredContentElement);
45 | articleContent.style.marginBottom = '5rem';
46 | loadBrokenImages();
47 | removePaywallSection();
48 | _hideLoader();
49 | restoreScrollPosition();
50 | return;
51 | }
52 | });
53 | }
54 |
55 | function restoreScrollPosition() {
56 | setTimeout(() => document.getElementsByTagName('h1')[0].scrollIntoView({behavior: 'smooth'}), 100);
57 | }
58 |
59 | function getHTMLFromText(text) {
60 | const html = document.createElement('html');
61 | html.innerHTML = text;
62 | return html;
63 | }
64 |
65 | function removePaywallSection() {
66 | const paywallContainer = loaderElement.parentElement.parentElement;
67 | const fadeElement = paywallContainer.previousSibling;
68 | if (!fadeElement || fadeElement.parentElement.getAttribute('id') === 'root') {
69 | removePaywallSectionAlternative();
70 | return;
71 | }
72 | paywallContainer.remove();
73 | fadeElement.remove();
74 | }
75 |
76 | function removePaywallSectionAlternative() {
77 | const fadeElement = loaderElement.previousSibling;
78 | fadeElement.remove();
79 | }
80 |
81 | function loadBrokenImages() {
82 | Array.from(document.querySelectorAll('img'))
83 | .filter(i => !i.hasAttribute('src') && i.nextSibling.tagName === 'NOSCRIPT')
84 | .forEach(i => i.outerHTML = i.nextSibling.innerHTML);
85 | }
86 |
87 | function _attachFloatingButton() {
88 | ReactDOM.render(
104 | Unlocking content, please wait...
105 | 
108 |
109 | `;
110 | loaderElement.src = loaderUrl;
111 | let membershipPromtElement = document.getElementById(
112 | MEMBERSHIP_PROMPT_ID
113 | );
114 | if (!membershipPromtElement) {
115 | const article = document.getElementsByTagName('article')[0];
116 | membershipPromtElement = article.nextSibling.nextSibling;
117 | }
118 | membershipPromtElement.parentElement.replaceChild(
119 | loaderElement,
120 | membershipPromtElement
121 | );
122 | if (document.getElementsByTagName('footer')[0]) {
123 | document.getElementsByTagName('footer')[0].style = 'margin-top: 100px;';
124 | }
125 | return loaderElement;
126 | }
127 |
128 | registerListeners();
--------------------------------------------------------------------------------
/website/_sass/_color.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Website colors. Determine color palette for dark and light theme
3 | */
4 |
5 | @charset "utf-8";
6 |
7 | /**
8 | * Light color palette
9 | */
10 | $l-text-color: #111;
11 | $l-link-color: #909090;
12 | $l-background-color: #fdfdfd;
13 | $l-brand-color: #2a7ae2;
14 | $l-grey-color: #828282;
15 | $l-grey-color-light: lighten($l-grey-color, 40%);
16 | $l-grey-color-dark: darken($l-grey-color, 25%);
17 | $l-code: #EEF;
18 | $l-crimson: #DC143C;
19 | $l-nav: $l-link-color;
20 | $l-page: $l-link-color;
21 |
22 | /**
23 | * Dark color palette
24 | */
25 | $d-text-color: #e7e7e7;
26 | $d-link-color: #cccccc;
27 | $d-background-color: #191919;
28 | $d-brand-color: #2a7ae2;
29 | $d-grey-color: #A7A7A7;
30 | $d-grey-color-light: lighten($l-grey-color, 40%);
31 | $d-grey-color-dark: darken($l-grey-color, 25%);
32 | $d-code: #2f2f33;
33 | $d-crimson: #DC143C;
34 | $d-nav: $d-link-color;
35 | $d-page: $d-link-color;
36 |
37 | /**
38 | * Light theme color definitions
39 | */
40 | body.light {
41 | color: $l-text-color;
42 | background-color: $l-background-color;
43 |
44 | /**
45 | * Links
46 | */
47 | a {
48 | color: $l-link-color !important;
49 |
50 | &:visited {
51 | color: darken($l-brand-color, 50%);
52 | }
53 |
54 | &:hover {
55 | color: darken($l-link-color, 50%) !important;
56 | border-color: darken($l-link-color, 15%);
57 | }
58 |
59 | &.page-link{
60 | &:hover {
61 | color: $l-text-color;
62 | border-color: darken($l-link-color, 50%);
63 | }
64 | }
65 | &.postLink{
66 | color: darken($l-link-color, 50%) !important;
67 |
68 | &:visited {
69 | color: $l-crimson !important;
70 | border-color: $l-crimson;
71 | }
72 | }
73 | &.post-title-link{
74 | color: darken($l-link-color, 50%) !important;
75 |
76 | &:visited {
77 | color: $l-crimson !important;
78 | border-color: $l-crimson;
79 | }
80 | }
81 | }
82 |
83 | blockquote {
84 | color: $l-grey-color;
85 | border-left-color: $l-grey-color-light;
86 | }
87 |
88 | /**
89 | * Code formatting
90 | */
91 | pre,
92 | code {
93 | border-color: $l-grey-color-light;
94 | background-color: $l-code;
95 | }
96 |
97 | /**
98 | * Icons
99 | */
100 | .icon > svg path {
101 | fill: $l-grey-color;
102 | }
103 |
104 | /**
105 | * Site header
106 | */
107 | .site-header {
108 | border-top-color: $l-grey-color-dark;
109 | border-bottom-color: $l-grey-color-light;
110 | }
111 |
112 | .site-title,
113 | .site-title:visited {
114 | color: $l-grey-color-dark;
115 | }
116 |
117 | .site-navigation {
118 | color: $l-nav;
119 | }
120 |
121 | .page-tagline {
122 | color: $l-page;
123 | }
124 |
125 | .page-link {
126 | color: $l-page;
127 | }
128 |
129 | .site-nav .page-link {
130 | color: $l-text-color;
131 | }
132 |
133 | @include media-query($on-palm) {
134 | background-color: $l-background-color;
135 | border: 1px solid $l-grey-color-light;
136 |
137 | .menu-icon > svg path {
138 | fill: $l-grey-color-dark;
139 | }
140 | }
141 |
142 | /**
143 | * Site footer
144 | */
145 | .site-footer {
146 | border-top-color: $l-grey-color-light;
147 | }
148 |
149 | .footer-col-wrapper {
150 | color: $l-grey-color;
151 | }
152 | }
153 |
154 | /**
155 | * Dark theme color definitions
156 | */
157 | body.dark {
158 | color: $d-text-color;
159 | background-color: $d-background-color;
160 |
161 | /**
162 | * Links
163 | */
164 | a {
165 | color: $d-link-color !important;
166 |
167 | &:visited {
168 | color: darken($d-brand-color, 50%);
169 | }
170 |
171 | &:hover {
172 | color: darken($d-link-color, 50%) !important;
173 | border-color: darken($d-link-color, 15%);
174 | }
175 |
176 | &.page-link{
177 | &:hover {
178 | color: $d-text-color;
179 | border-color: darken($d-link-color, 50%);
180 | }
181 | }
182 | &.postLink{
183 | color: darken($d-link-color, 50%) !important;
184 |
185 | &:visited {
186 | color: $d-crimson !important;
187 | border-color: $d-crimson;
188 | }
189 | }
190 | &.post-title-link{
191 | color: darken($d-link-color, 50%) !important;
192 |
193 | &:visited {
194 | color: $d-crimson !important;
195 | border-color: $d-crimson;
196 | }
197 | }
198 | }
199 |
200 | blockquote {
201 | color: $d-grey-color;
202 | border-left-color: $d-grey-color-light;
203 | }
204 |
205 | /**
206 | * Code formatting
207 | */
208 | pre,
209 | code {
210 | border-color: $d-grey-color;
211 | background-color: $d-code;
212 | }
213 |
214 | /**
215 | * Icons
216 | */
217 | .icon > svg path {
218 | fill: $d-grey-color;
219 | }
220 |
221 | /**
222 | * Site header
223 | */
224 | .site-header {
225 | border-top-color: $d-grey-color-dark;
226 | border-bottom-color: $d-grey-color-light;
227 | }
228 |
229 | .site-title,
230 | .site-title:visited {
231 | color: $d-grey-color-light;
232 | }
233 |
234 | .site-navigation {
235 | color: $d-nav;
236 | }
237 |
238 | .page-tagline {
239 | color: $d-page;
240 | }
241 |
242 | .page-link {
243 | color: $d-page;
244 | }
245 |
246 | .site-nav .page-link {
247 | color: $d-text-color;
248 | }
249 |
250 | @include media-query($on-palm) {
251 | background-color: $d-background-color;
252 | border: 1px solid $d-grey-color-light;
253 |
254 | .menu-icon > svg path {
255 | fill: $d-grey-color-dark;
256 | }
257 | }
258 |
259 | /**
260 | * Page content
261 | */
262 | .post-meta {
263 | color: $d-grey-color;
264 | }
265 |
266 | /**
267 | * Site footer
268 | */
269 | .site-footer {
270 | border-top-color: $d-grey-color-light;
271 | }
272 |
273 | .footer-col-wrapper {
274 | color: $d-grey-color;
275 | }
276 | }
277 |
--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 |
6 |
7 |
8 | {% for post in paginator.posts%}
9 |
59 | 60 |
145 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Medium Unlimited: Read paid content for free!",
3 | "description": "Unlocks medium.com for unlimited reads, no membership required",
4 | "short_name": "Medium Unlimited",
5 | "version": "1.20.0",
6 | "manifest_version": 2,
7 | "optional_permissions": [
8 | "*://*/*"
9 | ],
10 | "background": {
11 | "scripts": [
12 | "background.bundle.js"
13 | ]
14 | },
15 | "browser_action": {
16 | "default_icon": "static/logo_128.png",
17 | "default_title": "Unlock Medium.com Article"
18 | },
19 | "content_scripts": [
20 | {
21 | "matches": [
22 | "https://medium.com/*",
23 | "https://*.medium.com/*",
24 | "https://towardsdatascience.com/*",
25 | "https://hackernoon.com/*",
26 | "https://medium.freecodecamp.org/*",
27 | "https://psiloveyou.xyz/*",
28 | "https://betterhumans.coach.me/*",
29 | "https://codeburst.io/*",
30 | "https://theascent.pub/*",
31 | "https://medium.mybridge.co/*",
32 | "https://uxdesign.cc/*",
33 | "https://levelup.gitconnected.com/*",
34 | "https://itnext.io/*",
35 | "https://entrepreneurshandbook.co/*",
36 | "https://proandroiddev.com/*",
37 | "https://blog.prototypr.io/*",
38 | "https://thebolditalic.com/*",
39 | "https://blog.usejournal.com/*",
40 | "https://blog.angularindepth.com/*",
41 | "https://blog.bitsrc.io/*",
42 | "https://blog.devartis.com/*",
43 | "https://blog.maddevs.io/*",
44 | "https://blog.getambassador.io/*",
45 | "https://uxplanet.org/*",
46 | "https://instagram-engineering.com/*",
47 | "https://calia.me/*",
48 | "https://productcoalition.com/*",
49 | "https://engineering.opsgenie.com/*",
50 | "https://android.jlelse.eu/*",
51 | "https://robinhood.engineering/*",
52 | "https://blog.hipolabs.com/*",
53 | "https://ux.shopify.com/*",
54 | "https://engineering.talkdesk.com/*",
55 | "https://blog.codegiant.io/*",
56 | "https://tech.olx.com/*",
57 | "https://netflixtechblog.com/*",
58 | "https://hackingandslacking.com/*",
59 | "https://blog.kotlin-academy.com/*",
60 | "https://blog.securityevaluators.com/*",
61 | "https://blog.kubernauts.io/*",
62 | "https://blog.coffeeapplied.com/*",
63 | "https://unbounded.io/*",
64 | "https://writingcooperative.com/*",
65 | "https://blog.echobind.com/*",
66 | "https://*.plainenglish.io/*",
67 | "https://*.betterprogramming.pub/*",
68 | "https://blog.doit-intl.com/*",
69 | "https://eand.co/*",
70 | "https://techuisite.com/*",
71 | "https://levelupprogramming.net/*",
72 | "https://betterhumans.pub/*",
73 | "https://betterprogramming.pub/*",
74 | "https://pub.towardsai.net/*",
75 | "https://bettermarketing.pub/*",
76 | "https://themakingofamillionaire.com/*",
77 | "https://medium.datadriveninvestor.com/*",
78 | "https://bootcamp.uxdesign.cc/*",
79 | "https://*.baos.pub/*",
80 | "https://www.inbitcoinwetrust.net/*",
81 | "https://blog.prototypr.io/*",
82 | "https://blog.devgenius.io/*"
83 | ],
84 | "js": ["main.bundle.js"]
85 | }
86 | ],
87 | "icons": {
88 | "16": "static/logo_16.png",
89 | "48": "static/logo_48.png",
90 | "128": "static/logo_128.png"
91 | },
92 | "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
93 | "permissions": [
94 | "webRequest",
95 | "webRequestBlocking",
96 | "contextMenus",
97 | "activeTab",
98 | "https://medium.com/*",
99 | "https://towardsdatascience.com/*",
100 | "https://hackernoon.com/*",
101 | "https://medium.freecodecamp.org/*",
102 | "https://psiloveyou.xyz/*",
103 | "https://betterhumans.coach.me/*",
104 | "https://codeburst.io/*",
105 | "https://theascent.pub/*",
106 | "https://*.medium.com/*",
107 | "https://medium.mybridge.co/*",
108 | "https://uxdesign.cc/*",
109 | "https://levelup.gitconnected.com/*",
110 | "https://itnext.io/*",
111 | "https://entrepreneurshandbook.co/*",
112 | "https://proandroiddev.com/*",
113 | "https://blog.prototypr.io/*",
114 | "https://thebolditalic.com/*",
115 | "https://blog.usejournal.com/*",
116 | "https://blog.angularindepth.com/*",
117 | "https://blog.bitsrc.io/*",
118 | "https://blog.devartis.com/*",
119 | "https://blog.maddevs.io/*",
120 | "https://blog.getambassador.io/*",
121 | "https://uxplanet.org/*",
122 | "https://instagram-engineering.com/*",
123 | "https://calia.me/*",
124 | "https://productcoalition.com/*",
125 | "https://engineering.opsgenie.com/*",
126 | "https://android.jlelse.eu/*",
127 | "https://robinhood.engineering/*",
128 | "https://blog.hipolabs.com/*",
129 | "https://ux.shopify.com/*",
130 | "https://engineering.talkdesk.com/*",
131 | "https://blog.codegiant.io/*",
132 | "https://tech.olx.com/*",
133 | "https://netflixtechblog.com/*",
134 | "https://hackingandslacking.com/*",
135 | "https://blog.kotlin-academy.com/*",
136 | "https://blog.securityevaluators.com/*",
137 | "https://blog.kubernauts.io/*",
138 | "https://blog.coffeeapplied.com/*",
139 | "https://unbounded.io/*",
140 | "https://writingcooperative.com/*",
141 | "https://blog.echobind.com/*",
142 | "https://*.plainenglish.io/*",
143 | "https://*.betterprogramming.pub/*",
144 | "https://blog.doit-intl.com/*",
145 | "https://eand.co/*",
146 | "https://techuisite.com/*",
147 | "https://levelupprogramming.net/*",
148 | "https://betterhumans.pub/*",
149 | "https://betterprogramming.pub/*",
150 | "https://pub.towardsai.net/*",
151 | "https://bettermarketing.pub/*",
152 | "https://themakingofamillionaire.com/*",
153 | "https://medium.datadriveninvestor.com/*",
154 | "https://bootcamp.uxdesign.cc/*",
155 | "https://*.baos.pub/*",
156 | "https://www.inbitcoinwetrust.net/*",
157 | "https://blog.prototypr.io/*",
158 | "https://blog.devgenius.io/*"
159 | ],
160 | "web_accessible_resources": ["static/*"]
161 | }
162 |
--------------------------------------------------------------------------------
/src/components/SpreadTheWord/SpreadTheWord.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import styles from './SpreadTheWord.css';
5 | import {track} from '../../analytics';
6 |
7 | class SpreadTheWord extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | }
11 |
12 | render() {
13 | return (
14 |
10 |
16 |
23 |
24 | {% endfor %}
25 | {% if paginator.total_pages > 1 %}
26 |
45 | {% endif %}
46 |
57 |
58 |
11 |
12 |
13 | {{post.tag}}
14 |
15 | 16 |
17 | {{post.title}}
18 |
19 |
20 | {{ post.content | strip_html | truncate:200}}
21 |
22 | 59 | 60 |
61 |
142 |
143 |
144 | The browser extension/addon to access the medium.com premium articles without membership subscription.
62 | 63 |This tool helps you overcome the 3 article/month limit on medium.com and allows you to read unlimited articles. Just install the extension, keep reading medium.com. No more action needed, everything is taken care for you! :)
64 | 65 |The extension now supports identifying articles of external publishers on medium.com by suggesting a link to read full content with the help of a Google search.
66 |***Permission to access google.com is required for the above use case***
67 | 68 |Custom domains supported are:
69 |-
70 |
- https://*.medium.com 71 |
- https://towardsdatascience.com 72 |
- https://hackernoon.com 73 |
- https://medium.freecodecamp.org 74 |
- https://psiloveyou.xyz 75 |
- https://betterhumans.coach.me 76 |
- https://codeburst.io 77 |
- https://theascent.pub 78 |
- https://medium.mybridge.co 79 |
- https://uxdesign.cc 80 |
- https://levelup.gitconnected.com 81 |
- https://itnext.io 82 |
- https://entrepreneurshandbook.co 83 |
- https://proandroiddev.com 84 |
- https://blog.prototypr.io 85 |
- https://thebolditalic.com 86 |
- https://blog.usejournal.com 87 |
- https://blog.angularindepth.com 88 |
- https://uxplanet.org 89 |
- https://instagram-engineering.com 90 |
- https://calia.me 91 |
- https://productcoalition.com 92 |
- https://engineering.opsgenie.com 93 |
- https://android.jlelse.eu 94 |
- https://blog.bitsrc.io 95 |
- https://blog.devartis.com 96 |
- https://blog.maddevs.io 97 |
- https://blog.getambassador.io 98 |
- https://uxplanet.org 99 |
- https://instagram-engineering.com 100 |
- https://calia.me 101 |
- https://productcoalition.com 102 |
- https://engineering.opsgenie.com 103 |
- https://android.jlelse.eu 104 |
- https://robinhood.engineering 105 |
- https://blog.hipolabs.com 106 |
- https://ux.shopify.com 107 |
- https://engineering.talkdesk.com 108 |
- https://blog.codegiant.io 109 |
- https://tech.olx.com 110 |
- https://netflixtechblog.com 111 |
- https://hackingandslacking.com 112 |
- https://blog.kotlin-academy.com 113 |
- https://blog.securityevaluators.com 114 |
- https://blog.kubernauts.io 115 |
- https://blog.coffeeapplied.com 116 |
- https://unbounded.io 117 |
- https://writingcooperative.com 118 |
- https://blog.echobind.com 119 |
- https://*.plainenglish.io 120 |
- https://*.betterprogramming.pub 121 |
- https://blog.doit-intl.com 122 |
- https://eand.co 123 |
- https://techuisite.com 124 |
- https://levelupprogramming.net 125 |
- https://betterhumans.pub 126 |
- https://betterprogramming.pub 127 |
- https://pub.towardsai.net 128 |
- https://bettermarketing.pub 129 |
- https://themakingofamillionaire.com 130 |
- https://medium.datadriveninvestor.com 131 |
- https://bootcamp.uxdesign.cc 132 |
- https://*.baos.pub 133 |
- https://www.inbitcoinwetrust.net 134 |
- https://blog.prototypr.io 135 |
- https://blog.devgenius.io/ 136 |
Please get in touch if you need any other custom medium domain supported.
138 | 139 |This extension is open sourced here - https://github.com/manojVivek/medium-unlimited
140 | 141 |
15 |
34 | );
35 | }
36 |
37 | _getShareContent = () => {
38 | return 'Read medium.com Membership articles for free. Use this browser extension - ';
39 | };
40 |
41 | _getShareUrl = source => {
42 | const url =
43 | 'https://github.com/manojVivek/medium-unlimited';
44 | if (source) {
45 | return url + '?source=' + source;
46 | }
47 | return url;
48 | };
49 |
50 | _getTwitterIcon = () => {
51 | return (
52 | {
55 | track('TWITTER_SHARE_CLICKED');
56 | window.open(
57 | 'https://twitter.com/intent/tweet?text=' +
58 | this._getShareContent() +
59 | this._getShareUrl('twitter'),
60 | '_blank'
61 | );
62 | }}
63 | >
64 |
83 |
84 | );
85 | };
86 |
87 | _getFacebookIcon = () => {
88 | return (
89 | {
92 | track('FB_SHARE_CLICKED');
93 | window.open(
94 | 'https://www.facebook.com/sharer/sharer.php?u=' +
95 | this._getShareUrl('facebook') +
96 | '"e=' +
97 | this._getShareContent(),
98 | '_blank'
99 | );
100 | }}
101 | >
102 |
121 |
122 | );
123 | };
124 |
125 | _getLinkedinIcon = () => {
126 | return (
127 | {
130 | track('LINKEDIN_SHARE_CLICKED');
131 | window.open(
132 | 'https://www.linkedin.com/shareArticle?mini=true&url=' +
133 | this._getShareUrl('linkedin') +
134 | '&summary=' +
135 | this._getShareContent(),
136 | '_blank'
137 | );
138 | }}
139 | >
140 |
159 |
160 | );
161 | };
162 |
163 | _getGplusIcon = () => {
164 | return (
165 | {
168 | track('GPLUS_SHARE_CLICKED');
169 | window.open(
170 | 'https://plus.google.com/share?url=' +
171 | this._getShareUrl('googleplus'),
172 | '_blank'
173 | );
174 | }}
175 | >
176 |
209 |
210 | );
211 | };
212 | }
213 |
214 | export default SpreadTheWord;
215 |
--------------------------------------------------------------------------------
/website/css/style.scss:
--------------------------------------------------------------------------------
1 | ---
2 | # Only the main Sass file needs front matter (the dashes are enough)
3 | ---
4 | @charset "utf-8";
5 |
6 |
7 |
8 | // Our variables
9 | $base-font-family: "PT Sans", Helvetica, Arial, sans-serif;
10 | $base-font-size: 16px;
11 | $base-font-weight: 400;
12 | $small-font-size: $base-font-size * 0.875;
13 | $base-line-height: 1.5;
14 |
15 | $spacing-unit: 30px;
16 | // Width of the content area
17 | $content-width: 800px;
18 |
19 | $on-palm: 600px;
20 | $on-laptop: 800px;
21 |
22 |
23 |
24 | // Use media queries like this:
25 | // @include media-query($on-palm) {
26 | // .wrapper {
27 | // padding-right: $spacing-unit / 2;
28 | // padding-left: $spacing-unit / 2;
29 | // }
30 | // }
31 | @mixin media-query($device) {
32 | @media screen and (max-width: $device) {
33 | @content;
34 | }
35 | }
36 |
37 |
38 |
39 | // Import partials from `sass_dir` (defaults to `_sass`)
40 | @import
41 | "base",
42 | "layout",
43 | "syntax-highlighting",
44 | "color"
45 | ;
46 |
47 |
48 | /**
49 | * Reset some basic elements
50 | */
51 | body, h1, h2, h3, h4, h5, h6,
52 | p, blockquote, pre, hr,
53 | dl, dd, ol, ul, figure {
54 | margin: 0;
55 | padding: 0;
56 | }
57 |
58 |
59 |
60 | /**
61 | * Basic styling
62 | */
63 | body {
64 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
65 | -webkit-text-size-adjust: 100%;
66 | -webkit-font-feature-settings: "kern" 1;
67 | -moz-font-feature-settings: "kern" 1;
68 | -o-font-feature-settings: "kern" 1;
69 | font-feature-settings: "kern" 1;
70 | font-kerning: normal;
71 | }
72 |
73 |
74 |
75 | /**
76 | * Set `margin-bottom` to maintain vertical rhythm
77 | */
78 | h1, h2, h3, h4, h5, h6,
79 | p, blockquote, pre,
80 | ul, ol, dl, figure,
81 | %vertical-rhythm {
82 | margin-bottom: $spacing-unit / 2;
83 | }
84 |
85 |
86 |
87 | /**
88 | * Images
89 | */
90 | img {
91 | max-width: 100%;
92 | vertical-align: middle;
93 | }
94 |
95 |
96 |
97 | /**
98 | * Figures
99 | */
100 | figure > img {
101 | display: block;
102 | }
103 |
104 | figcaption {
105 | font-size: $small-font-size;
106 | }
107 |
108 |
109 |
110 | /**
111 | * Lists
112 | */
113 | ul, ol {
114 | margin-left: $spacing-unit;
115 | }
116 |
117 | li {
118 | > ul,
119 | > ol {
120 | margin-bottom: 0;
121 | }
122 | }
123 |
124 |
125 |
126 | /**
127 | * Headings
128 | */
129 | h1, h2, h3, h4, h5, h6 {
130 | font-weight: $base-font-weight;
131 | }
132 |
133 |
134 |
135 | /**
136 | * Links
137 | */
138 | a {
139 | text-decoration: none;
140 |
141 | &:hover {
142 | border-bottom: 1px dotted;
143 | }
144 |
145 | &.page-link:hover {
146 | border-bottom: 1px dotted;
147 | }
148 | &.postLink:hover{
149 | border-bottom: 1px dotted;
150 | }
151 | &.post-title-link:hover{
152 | border-bottom: 1px dotted !important;
153 | }
154 | }
155 |
156 |
157 |
158 | /**
159 | * Blockquotes
160 | */
161 | blockquote {
162 | border-left: 4px solid;
163 | padding-left: $spacing-unit / 2;
164 | font-size: 18px;
165 | letter-spacing: -1px;
166 | font-style: italic;
167 |
168 | > :last-child {
169 | margin-bottom: 0;
170 | }
171 | }
172 |
173 |
174 |
175 | /**
176 | * Code formatting
177 | */
178 | pre,
179 | code {
180 | font-size: 15px;
181 | border: 1px solid;
182 | border-radius: 3px;
183 | }
184 |
185 | code {
186 | padding: 1px 5px;
187 | }
188 |
189 | pre {
190 | padding: 8px 12px;
191 | overflow-x: auto;
192 |
193 | > code {
194 | border: 0;
195 | padding-right: 0;
196 | padding-left: 0;
197 | }
198 | }
199 |
200 |
201 |
202 | /**
203 | * Wrapper
204 | */
205 | .wrapper {
206 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
207 | max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
208 | margin-right: auto;
209 | margin-left: auto;
210 | padding-right: $spacing-unit;
211 | padding-left: $spacing-unit;
212 | @extend %clearfix;
213 |
214 | @include media-query($on-laptop) {
215 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
216 | max-width: calc(#{$content-width} - (#{$spacing-unit}));
217 | padding-right: $spacing-unit / 2;
218 | padding-left: $spacing-unit / 2;
219 | }
220 | }
221 |
222 |
223 |
224 | /**
225 | * Clearfix
226 | */
227 | %clearfix {
228 |
229 | &:after {
230 | content: "";
231 | display: table;
232 | clear: both;
233 | }
234 | }
235 |
236 |
237 |
238 | /**
239 | * Icons
240 | */
241 | .icon {
242 |
243 | > svg {
244 | display: inline-block;
245 | width: 16px;
246 | height: 16px;
247 | vertical-align: middle;
248 | }
249 | }
250 |
251 | .post {
252 | font-family: "Source Sans Pro";
253 | font-size: 18px;
254 | font-weight: 300;
255 | padding-top: 0;
256 | }
257 | .home{
258 | padding-bottom: 5em;
259 | }
260 | .download {
261 | padding: 10px;
262 | }
263 | .authorKeyword {
264 | text-transform: uppercase;
265 | font-size: 16px;
266 | letter-spacing: 2px;
267 | text-indent: 2px;
268 | padding-top:0.5em;
269 | }
270 | .writtenBy {
271 | letter-spacing: 0;
272 | text-indent: 0;
273 | text-transform: uppercase;
274 | }
275 | .archive-intro {
276 | font-size: 14px;
277 | text-transform: uppercase;
278 | letter-spacing: 2px;
279 | text-indent: 2px;
280 | }
281 | .archiveIntro {
282 | text-align: center;
283 | }
284 | .hint {
285 | text-transform: uppercase;
286 | font-size: 11px;
287 | letter-spacing: 2px;
288 | text-indent: 2px;
289 | }
290 | .example {
291 | font-family: 'Menlo';
292 | padding: 10px;
293 | }
294 | .manual {
295 | text-transform: uppercase;
296 | font-size: 16px;
297 | letter-spacing: 2px;
298 | text-indent: 2px;
299 | }
300 | .postContent {
301 | padding-top: 3.5em;
302 | text-align: center;
303 | }
304 | .postDate {
305 | float: left;
306 | text-transform: uppercase;
307 | font-family: "Source Sans Pro";
308 | font-size: 16px;
309 | font-weight: 300;
310 | letter-spacing: 2px;
311 | text-indent: 2px;
312 | }
313 | .postTag {
314 | float: right;
315 | }
316 | .postTitle {
317 | font-weight: 400;
318 | text-align: center;
319 | text-transform: uppercase;
320 | letter-spacing: 3px;
321 | text-indent: 3px;
322 | }
323 | /**
324 | * Site header
325 | */
326 | .site-header {
327 | border-top: 5px solid;
328 | border-bottom: 1px solid;
329 | min-height: 56px;
330 | // Positioning context for the mobile navigation icon
331 | position: relative;
332 | }
333 | .site-title {
334 | font-size: 64px;
335 | font-weight: 100;
336 | font-family: 'PT Sans';
337 | text-transform: capitalize;
338 | font-weight: 500;
339 | margin-top: 0.5em;
340 | }
341 | .site-description {
342 | font-size: 14px;
343 | letter-spacing: 2px;
344 | text-indent: 6px;
345 | font-family: 'Josefin Sans';
346 | }
347 | .exclamationMark {
348 | padding-left: 2em;
349 | padding-right: 2em;
350 | }
351 | .site-navigation {
352 | text-transform: uppercase;
353 | font-size: 14px;
354 | letter-spacing: 2px;
355 | text-indent: 6px;
356 | font-family: 'Josefin Sans';
357 | font-weight: 500;
358 | padding-top: 5em;
359 | text-align: center;
360 | }
361 | .page-title {
362 | text-transform: uppercase;
363 | letter-spacing: 2px;
364 | text-indent: 2px;
365 | font-family: "PT Sans";
366 | font-size: 12px;
367 | text-align:center;
368 | }
369 | .page-tagline {
370 | font-size: 18px;
371 | font-family: "PT Sans";
372 | text-align: center;
373 | text-transform: lowercase;
374 | }
375 | .site-nav {
376 | .page-link {
377 | line-height: $base-line-height;
378 | // Gaps between nav items, but not on the last one
379 | &:not(:last-child) {
380 | margin-right: 20px;
381 | }
382 | }
383 | @include media-query($on-palm) {
384 | position: absolute;
385 | top: 9px;
386 | right: $spacing-unit / 2;
387 | border-radius: 5px;
388 | text-align: right;
389 | .menu-icon {
390 | display: block;
391 | float: right;
392 | width: 36px;
393 | height: 26px;
394 | line-height: 0;
395 | padding-top: 10px;
396 | text-align: center;
397 | > svg {
398 | width: 18px;
399 | height: 15px;
400 | }
401 | }
402 | .trigger {
403 | clear: both;
404 | display: none;
405 | }
406 | &:hover .trigger {
407 | display: block;
408 | padding-bottom: 5px;
409 | }
410 | .page-link {
411 | display: block;
412 | padding: 5px 10px;
413 | &:not(:last-child) {
414 | margin-right: 0;
415 | }
416 | margin-left: 20px;
417 | }
418 | }
419 | }
420 | /**
421 | * Site footer
422 | */
423 | .site-footer {
424 | border-top: 1px solid;
425 | padding: $spacing-unit / 3 0;
426 | }
427 | .footer-heading {
428 | font-size: 18px;
429 | margin-bottom: $spacing-unit / 2;
430 | }
431 | .contact-list,
432 | .social-media-list {
433 | list-style: none;
434 | margin-left: 0;
435 | }
436 | .small-site-title {
437 | font-family: "PT Sans";
438 | }
439 | .footer-col-wrapper {
440 | font-size: 15px;
441 | margin-left: -$spacing-unit / 2;
442 | @extend %clearfix;
443 | }
444 | .footer-content {
445 | font-family: "Josefin Sans";
446 | font-weight: 300;
447 | letter-spacing: 1px;
448 | }
449 | .footer-col {
450 | float: left;
451 | margin-bottom: $spacing-unit / 30;
452 | padding-left: $spacing-unit / 2;
453 | }
454 | .footer-col-1 {
455 | width: -webkit-calc(35% - (#{$spacing-unit} / 2));
456 | width: calc(35% - (#{$spacing-unit} / 2));
457 | }
458 | .footer-col-2 {
459 | width: -webkit-calc(20% - (#{$spacing-unit} / 2));
460 | width: calc(20% - (#{$spacing-unit} / 2));
461 | }
462 | .footer-col-3 {
463 | width: -webkit-calc(45% - (#{$spacing-unit} / 2));
464 | width: calc(45% - (#{$spacing-unit} / 2));
465 | }
466 | @include media-query($on-laptop) {
467 | .footer-col-1,
468 | .footer-col-2 {
469 | width: -webkit-calc(50% - (#{$spacing-unit} / 2));
470 | width: calc(50% - (#{$spacing-unit} / 2));
471 | }
472 | .footer-col-3 {
473 | width: -webkit-calc(100% - (#{$spacing-unit} / 2));
474 | width: calc(100% - (#{$spacing-unit} / 2));
475 | }
476 | }
477 | @include media-query($on-palm) {
478 | .footer-col {
479 | float: none;
480 | width: -webkit-calc(100% - (#{$spacing-unit} / 2));
481 | width: calc(100% - (#{$spacing-unit} / 2));
482 | }
483 | }
484 | /**
485 | * Page content
486 | */
487 | .page-content {
488 | padding: 0;
489 | min-height: 500px;
490 | }
491 | .page-heading {
492 | font-size: 20px;
493 | }
494 | .post-list {
495 | margin-left: 0;
496 | list-style: none;
497 | > li {
498 | margin-bottom: $spacing-unit;
499 | }
500 | }
501 | .post-meta {
502 | font-size: $small-font-size;
503 | text-transform: uppercase;
504 | font-size: 16px;
505 | }
506 | .post-link {
507 | display: block;
508 | font-size: 24px;
509 | }
510 | /**
511 | * Posts
512 | */
513 | .post-header {
514 | margin-bottom: $spacing-unit;
515 | }
516 | .post-title {
517 | font-size: 62px;
518 |
519 | text-align: center;
520 | font-family: "PT Sans";
521 | font-weight: 900;
522 | @include media-query($on-laptop) {
523 | font-size: 36px;
524 | }
525 | }
526 | .post-content {
527 | margin-bottom: $spacing-unit;
528 | padding-bottom: 3em !important;
529 | p {
530 | font-size: 1.5rem;
531 | }
532 | h2 {
533 | font-size: 32px;
534 | @include media-query($on-laptop) {
535 | font-size: 28px;
536 | }
537 | }
538 | h3 {
539 | font-size: 26px;
540 | @include media-query($on-laptop) {
541 | font-size: 22px;
542 | }
543 | }
544 | h4 {
545 | font-size: 20px;
546 | @include media-query($on-laptop) {
547 | font-size: 18px;
548 | }
549 | }
550 | }
551 |
552 | /**
553 | * Pagination
554 | */
555 | .pagination {
556 | padding-top: 3.5em;
557 | text-align: center;
558 | }
559 | .paginationLink {
560 | border: 0;
561 | display: inline-block;
562 | padding: 5px;
563 | text-decoration: none;
564 | transition: color 200ms ease-out;
565 |
566 | &:hover,
567 | &:active,
568 | &:focus {
569 | border: 0;
570 | }
571 | }
572 | .paginationLinkCurrent {
573 | font-style: normal;
574 | }
575 |
576 | .postNavigation {
577 | align-items: center;
578 | display: flex;
579 | justify-content: space-between;
580 | padding-bottom: 3em;
581 |
582 | a:only-child {
583 | width: 100%;
584 | }
585 | }
586 | .postPrev,
587 | .postNext {
588 | display: inline-block;
589 | width: 49%;
590 | &:hover,
591 | &:active,
592 | &:focus {
593 | border: 0;
594 | }
595 | }
596 | .postNext {
597 | text-align: right;
598 | }
599 |
600 | /**
601 | * Syntax highlighting styles
602 | */
603 | .highlight {
604 | @extend %vertical-rhythm;
605 |
606 | .c { color: #998; font-style: italic } // Comment
607 | .err { color: #a61717; background-color: #e3d2d2 } // Error
608 | .k { font-weight: bold } // Keyword
609 | .o { font-weight: bold } // Operator
610 | .cm { color: #998; font-style: italic } // Comment.Multiline
611 | .cp { color: #999; font-weight: bold } // Comment.Preproc
612 | .c1 { color: #998; font-style: italic } // Comment.Single
613 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
614 | .gd { color: #000; background-color: #fdd } // Generic.Deleted
615 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
616 | .ge { font-style: italic } // Generic.Emph
617 | .gr { color: #a00 } // Generic.Error
618 | .gh { color: #999 } // Generic.Heading
619 | .gi { color: #000; background-color: #dfd } // Generic.Inserted
620 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
621 | .go { color: #888 } // Generic.Output
622 | .gp { color: #555 } // Generic.Prompt
623 | .gs { font-weight: bold } // Generic.Strong
624 | .gu { color: #909090 } // Generic.Subheading
625 | .gt { color: #a00 } // Generic.Traceback
626 | .kc { font-weight: bold } // Keyword.Constant
627 | .kd { font-weight: bold } // Keyword.Declaration
628 | .kp { font-weight: bold } // Keyword.Pseudo
629 | .kr { font-weight: bold } // Keyword.Reserved
630 | .kt { color: #458; font-weight: bold } // Keyword.Type
631 | .m { color: #099 } // Literal.Number
632 | .s { color: #d14 } // Literal.String
633 | .na { color: #008080 } // Name.Attribute
634 | .nb { color: #0086B3 } // Name.Builtin
635 | .nc { color: #458; font-weight: bold } // Name.Class
636 | .no { color: #008080 } // Name.Constant
637 | .ni { color: #800080 } // Name.Entity
638 | .ne { color: #900; font-weight: bold } // Name.Exception
639 | .nf { color: #900; font-weight: bold } // Name.Function
640 | .nn { color: #555 } // Name.Namespace
641 | .nt { color: #000080 } // Name.Tag
642 | .nv { color: #008080 } // Name.Variable
643 | .ow { font-weight: bold } // Operator.Word
644 | .w { color: #bbb } // Text.Whitespace
645 | .mf { color: #099 } // Literal.Number.Float
646 | .mh { color: #099 } // Literal.Number.Hex
647 | .mi { color: #099 } // Literal.Number.Integer
648 | .mo { color: #099 } // Literal.Number.Oct
649 | .sb { color: #d14 } // Literal.String.Backtick
650 | .sc { color: #d14 } // Literal.String.Char
651 | .sd { color: #d14 } // Literal.String.Doc
652 | .s2 { color: #d14 } // Literal.String.Double
653 | .se { color: #d14 } // Literal.String.Escape
654 | .sh { color: #d14 } // Literal.String.Heredoc
655 | .si { color: #d14 } // Literal.String.Interpol
656 | .sx { color: #d14 } // Literal.String.Other
657 | .sr { color: #009926 } // Literal.String.Regex
658 | .s1 { color: #d14 } // Literal.String.Single
659 | .ss { color: #990073 } // Literal.String.Symbol
660 | .bp { color: #999 } // Name.Builtin.Pseudo
661 | .vc { color: #008080 } // Name.Variable.Class
662 | .vg { color: #008080 } // Name.Variable.Global
663 | .vi { color: #008080 } // Name.Variable.Instance
664 | .il { color: #099 } // Literal.Number.Integer.Long
665 | }
666 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 3, 29 June 2007
3 |
4 | Copyright (C) 2007 Free Software Foundation, Inc.
16 | Finding Medium-Unlimited extension helpful?
17 | Please help spread the word! 18 |
19 | 17 | Please help spread the word! 18 |
20 |
33 |
21 | {this._getTwitterIcon()}
22 |
23 |
24 | {this._getFacebookIcon()}
25 |
26 |
27 | {this._getLinkedinIcon()}
28 |
29 |
30 | {this._getGplusIcon()}
31 |
32 |