Надоело мне, читая Пикабу, сводить глаза в кучку и щуриться одновременно, и сделал я себе расширитель. На скриншоте – вид сайта на экране 1920 пк шириной, адаптируемо под другие экраны:
Для скриптовой части требуется аддон Tampermonkey (Greasemonkey, вероятно, тоже сможет), для стилевой части требуется аддон Stylus. В рамках этой заметки я не вдаюсь в детали установки и применения.
Что они делают?
Стиль – расширяет поле чтения до максимума, адаптируется к экрану благодаря функции calc. Правый сайдбар тоже немного поджимается. Для картинок поставлены скругления и бордюр, решайте по своему вкусу
html { font-size: 20px; } /* крупнота */
.app__inner { /* ширина поля */
margin-left: 75px;
max-width: calc(100% - 80px);
}
.sidebar { width: 310px; } /* сайдбар в самое право */
.main { width: calc(100% - 310px); } /* подстыковываем поле */
.story-block_type_video { padding-left: 27px; } /* отбиваем видео слева */
.page-story__rating-pluses, .page-story__rating-minuses { height: 10px; } /* плюсы-минусы покрупнее */
/* картинки */
.story-image__content { position: inherit; }
.story-image__stretch { display: none; }
.story-image__content a { width: 100%; padding: 0 2px; }
.story-image__content img {
border: 6px solid #fafafa;
border-radius: 30px;
}
Скрипт – осматривает все картинки и заменяет их на их же более качественные версии. Если исходно картинка была больше заданного размера wdt (меняйте эту переменную сами), к ней применяется максимальная ширина, работающая в союзе со стилем. Если же картинка была крохотной, в кадре будет лютое "мыло", её нет смысла раздувать до гиганта.
// ==UserScript==
// @name Picabu Pic Beautifier
// @VERSION 2021.02.27
// @Author Rainbow-Spike
// @match https://pikabu.ru/*
// @GrAnt none
// @run-at document-end
// ==/UserScript==
var wdt = 500;
function action ( ) {
document.querySelectorAll ( '.story-image__content img' ).forEach ( function ( e ) {
var dli = e.getAttribute ( 'data-large-image' );
if ( dli != null && e.src != dli ) e.src = dli;
if ( e.width > wdt ) e.style.width = '100%';
} );
}
setInterval ( action, 100 );
