☰

Achewood Mobile-Optimized

Make achewood.com easier to use on a phone

As of 2022-12-17. See the latest version.

  1. // ==UserScript==
  2. // @name         Achewood Mobile-Optimized
  3. // @namespace    https://cliambrown.com/
  4. // @version      0.2.2
  5. // @description  Make achewood.com easier to use on a phone
  6. // @author       C. Liam Brown
  7. // @match        *://achewood.com
  8. // @match        *://www.achewood.com
  9. // @match        *://achewood.com/*
  10. // @match        *://www.achewood.com/*
  11. // @icon         https://www.google.com/s2/favicons?sz=64&domain=achewood.com
  12. // @grant        none
  13. // @license MIT
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     // Set viewport
  20.     var meta = document.createElement('meta');
  21.     meta.name = "viewport";
  22.     meta.content = "width=device-width, initial-scale=1";
  23.     document.getElementsByTagName('head')[0].appendChild(meta);
  24.  
  25.     // Add various styles
  26.     var styles = `
  27.         /* Comic */
  28.         #comic_body {
  29.             overflow-x: auto;
  30.         }
  31.  
  32.         /* Ads */
  33.         #banner {
  34.             height: auto;
  35.         }
  36.         #banner img,
  37.         #comic_footer img {
  38.             max-width: 100%;
  39.             height: auto;
  40.             vertical-align: bottom;
  41.         }
  42.         #comic_header {
  43.             width: 700px;
  44.             max-width: 100%;
  45.         }
  46.  
  47.         /* Navigation */
  48.         #comic_navigation {
  49.             width: 700px;
  50.             max-width: 100%;
  51.             display: flex;
  52.             justify-content: space-between;
  53.             align-items: center;
  54.             gap: 10px;
  55.             font-size: 12px;
  56.         }
  57.         #comic_navigation > * {
  58.             position: static !important;
  59.             margin: 0 !important;
  60.         }
  61.         #comic_navigation .left,
  62.         #comic_navigation .right,
  63.         #comic_navigation .dateNav {
  64.             width: 40px;
  65.             height: 40px;
  66.             text-align: center;
  67.             line-height: 40px;
  68.             font-size: 14px;
  69.         }
  70.         #comic_navigation .dateNav {
  71.             display: inline-block;
  72.             vertical-align: bottom;
  73.             background: #004400;
  74.             border-radius: 6px;
  75.             color: #FFF !important;
  76.         }
  77.         #comic_navigation .date {
  78.             flex-grow: 1;
  79.             min-width: 0;
  80.             color: #6e6e6e;
  81.         }
  82.         #alt-text {
  83.             padding: 10px 0 0;
  84.             width: 100%;
  85.             color: #000;
  86.             max-height: 150px;
  87.             overflow-y: auto;
  88.             white-space: normal;
  89.         }
  90.         @media (max-width: 1023px) {
  91.             #body {
  92.                 padding-left: 8px;
  93.                 padding-right: 8px;
  94.             }
  95.             #comic_navigation {
  96.                 position: fixed;
  97.                 bottom: 0;
  98.                 left: 0;
  99.                 right: 0;
  100.                 margin: 0;
  101.                 width: auto;
  102.                 padding: 10px 4px;
  103.                 background: white;
  104.                 box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
  105.                 z-index: 1000;
  106.             }
  107.             #footer {
  108.                 padding-bottom: 100px;
  109.             }
  110.         }
  111.  
  112.         /* Footer */
  113.         #home_footer {
  114.             box-sizing: border-box;
  115.             width: 700px;
  116.             max-width: 100%;
  117.             margin: 0 auto;
  118.             padding-left: 0;
  119.             padding-right: 0;
  120.             display: flex;
  121.             flex-wrap: wrap;
  122.             gap: 15px;
  123.             justify-content: center;
  124.             align-items: flex-start;
  125.         }
  126.         @media (max-width: 720px) {
  127.             #home_footer {
  128.                 padding-left: 10px;
  129.                 padding-right: 10px;
  130.             }
  131.         }
  132.         #home_footer .column {
  133.             float: none;
  134.             margin: 0;
  135.             max-width: 100%;
  136.         }
  137.         select[name="date"] {
  138.             max-width: 100%;
  139.         }
  140.     `;
  141.     var styleSheet = document.createElement("style");
  142.     styleSheet.innerText = styles;
  143.     document.head.appendChild(styleSheet);
  144.  
  145.     // Remove comic link
  146.     var cbEl = document.getElementById('comic_body');
  147.     var comicA = cbEl.getElementsByTagName('a').item(0);
  148.     comicA.replaceWith(...comicA.childNodes);
  149.  
  150.     // Add alt text
  151.     var comicImg = cbEl.getElementsByClassName('comic').item(0);
  152.     var altText = comicImg.getAttribute('title');
  153.     if (!altText.trim().length) {
  154.         altText = '[no alt text]';
  155.     }
  156.     var altTextEl = document.createElement('div');
  157.     altTextEl.id = 'alt-text';
  158.     var altTextNode = document.createTextNode(altText);
  159.     altTextEl.appendChild(altTextNode);
  160.     var dateSpanEl = document.querySelector('#comic_navigation .date');
  161.     dateSpanEl.append(altTextEl);
  162.  
  163. })();