Fixes #51 & fixes #52 - `/tweets` redirects & popup styling

background.js

@@ -232,6 +232,8 @@ function redirectTwitter(url, initiator) {
     return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
   } else if (url.host.split('.')[0] === 'video') {
     return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
+  } else if (url.pathname.includes('tweets')) {
+    return `${nitterInstance}${url.pathname.replace('/tweets', '')}${url.search}`;
   } else {
     return `${nitterInstance}${url.pathname}${url.search}`;
   }

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Privacy Redirect",
   "description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
-  "version": "1.1.28",
+  "version": "1.1.29",
   "manifest_version": 2,
   "background": {
     "scripts": [

pages/popup/popup.html

@@ -14,9 +14,9 @@
       <img src="../../images/icon128.png" alt="Privacy Redirect logo">
       <h1><span class="privacy">Privacy</span><br>Redirect</h1>
     </div>
-    <small>
+    <div class="version">
       <span>Version:&nbsp;<span id="version"></span></span>
-    </small>
+    </div>
   </header>
 
   <section class="options settings_block">

pages/styles.css

@@ -61,14 +61,16 @@ header .logo-container h1 {
   font-weight: normal;
 }
 
-.privacy {
+header .privacy {
   letter-spacing: 0.13em;
 }
 
-header small {
+header .version {
   font-size: 8.5px;
   font-weight: bold;
-  float: right;
+  position: absolute;
+  top: var(--space);
+  right: var(--space);
 }
 
 h1 {
@@ -109,7 +111,7 @@ footer a.button {
 input[type=url], input[type=text], select {
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: 5px;
+  margin-bottom: var(--space);
 }
 
 input[type=url] {
@@ -139,9 +141,9 @@ input[type=checkbox] {
   border-radius: 90px;
   content: '';
   height: 20px;
-  left: 5px;
+  left: var(--space);
   position: absolute;
-  top: 5px;
+  top: var(--space);
   transition: 0.3s; /* Acts on transform below */
   width: 20px;
 }
@@ -150,7 +152,7 @@ input:checked+label {
 }
 /* position  when active*/
 input:checked+label:after {
-  left: calc(100% - 5px);
+  left: calc(100% - var(--space));
   transform: translateX(-100%);
 }
 
@@ -189,7 +191,7 @@ input:checked+label:after {
 
 .button:active {
   background-color: var(--active);
-  box-shadow: 0 5px var(--dark);
+  box-shadow: 0 var(--space) var(--dark);
   transform: translateY(4px);
 }