☰

Greasy Fork is available in English.

Achewood Mobile-Optimized

Make achewood.com easier to use on a phone

// ==UserScript==
// @name         Achewood Mobile-Optimized
// @namespace    https://cliambrown.com/
// @version      0.2.3
// @description  Make achewood.com easier to use on a phone
// @author       C. Liam Brown
// @match        *://achewood.com
// @match        *://www.achewood.com
// @match        *://achewood.com/*
// @match        *://www.achewood.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=achewood.com
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Set viewport
    var meta = document.createElement('meta');
    meta.name = "viewport";
    meta.content = "width=device-width, initial-scale=1";
    document.getElementsByTagName('head')[0].appendChild(meta);

    // Add various styles
    var styles = `
        /* Comic */
        #comic_body {
            overflow-x: auto;
        }

        /* Ads */
        #banner {
            height: auto;
        }
        #banner img,
        #comic_footer img {
            max-width: 100%;
            height: auto;
            vertical-align: bottom;
        }
        #comic_header {
            width: 700px;
            max-width: 100%;
        }

        /* Navigation */
        #comic_navigation {
            width: 700px;
            max-width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            font-size: 12px;
        }
        #comic_navigation > * {
            position: static !important;
            margin: 0 !important;
        }
        #comic_navigation .left,
        #comic_navigation .right,
        #comic_navigation .dateNav {
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
        }
        #comic_navigation .dateNav {
            display: inline-block;
            vertical-align: bottom;
            background: #004400;
            border-radius: 6px;
            color: #FFF !important;
        }
        #comic_navigation .date {
            flex-grow: 1;
            min-width: 0;
            color: #6e6e6e;
        }
        #alt-text {
            padding: 6px 0 0;
            width: 100%;
            color: #000;
            max-height: 150px;
            overflow-y: auto;
            white-space: normal;
        }
        @media (max-width: 1023px) {
            #body {
                padding-left: 8px;
                padding-right: 8px;
            }
            #comic_navigation {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0;
                width: auto;
                padding: 10px 4px;
                background: white;
                box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
                z-index: 1000;
            }
            #footer {
                padding-bottom: 100px;
            }
        }

        /* Footer */
        #home_footer {
            box-sizing: border-box;
            width: 700px;
            max-width: 100%;
            margin: 0 auto;
            padding-left: 0;
            padding-right: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            align-items: flex-start;
        }
        @media (max-width: 720px) {
            #home_footer {
                padding-left: 10px;
                padding-right: 10px;
            }
        }
        #home_footer .column {
            float: none;
            margin: 0;
            max-width: 100%;
        }
        select[name="date"] {
            max-width: 100%;
        }
    `;
    var styleSheet = document.createElement("style");
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // Remove comic link
    var cbEl = document.getElementById('comic_body');
    var comicA = cbEl.getElementsByTagName('a').item(0);
    comicA.replaceWith(...comicA.childNodes);

    // Add alt text
    var comicImg = cbEl.getElementsByClassName('comic').item(0);
    var altText = comicImg.getAttribute('title');
    if (!altText.trim().length) {
        altText = '[no alt text]';
    }
    var altTextEl = document.createElement('div');
    altTextEl.id = 'alt-text';
    var altTextNode = document.createTextNode(altText);
    altTextEl.appendChild(altTextNode);
    var dateSpanEl = document.querySelector('#comic_navigation .date');
    dateSpanEl.append(altTextEl);

})();