Skip to content

DeAnnoy Telegraph [papo] wider, cleaner by papo

Details

Authorpapo

LicenseCC BY-NC-SA 4.0

Categorytelegraph

Created

Updated

Code size7.3 kB

Code checksum9cdb0b78

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

See @description in the Source Code.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           DeAnnoy Telegraph [papo] wider, cleaner
@namespace      github.com/paponius/userstyles
@version        1.2.0
@description    Updated: 2025 [m] Notes and feedback: https://github.com/paponius/userstyles/. Check what it does in style Options, or read @var descriptions on top of the code.
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   less

# --- END: common block ---


#    FORMAT A:                         { "OPTION_NAME:OPTION_LABEL": "VALUE" , ... }
@var select DeclutterHeaders       'Remove links and menus from headers on article pages. (When ON, Go to Home Page to access menu. Or use hamburger icon)' [
  "show_all:show all (Site's default)",
  'hide_sections:hide sections',
  'hide_sections_and_subsections:hide sections and subsections'
]
@var checkbox HideVanityLabel        'Hide Vanity Label' 0
@var checkbox HideWidgetsOnHP        'Hide top header widgets on Home Page' 0
@var checkbox HideLoginRegister      'Hide Login and Register, when you never plan to use it.' 0
@var checkbox HideComments           "Hide comments" 0
@var checkbox HideNewsletter         "Hide Newsletter subscription box" 1
@var checkbox HeroWider              "Wider and centered Article page hero (if you have ADs, they'll snap somewhere below)" 1
@var range ArticleWider              "Wider Article page content (if Distraction Free is off, more-ons will snap below article)" [1, 0, 3, 1, ""]
@var checkbox FooterRemove           "Footer: Remove items which are also in the header on all pages, remove other items from Article pages's footer (When ON, Go to Home Page to access these items.)" 0
@var checkbox NoRecycle              'Clean Article page - Distraction Free - no More Stories, no Related, ...' 0
@var checkbox fixFlashing            "Fix flashing and unclickable links. Happens when you tweak the page too much with other tools." 0


==/UserStyle== */
@-moz-document domain("telegraph.co.uk") {

& when (@DeclutterHeaders = hide_sections) or (@DeclutterHeaders = hide_sections_and_subsections) {
	/* this would move hamburhger icon left */
	/* .site-header__primary-navigation-wrapper { */
	.site-header__navigation {
		display: none;
	}
}
& when (@DeclutterHeaders = hide_sections_and_subsections) {
	.site-header__secondary-wrapper {
		display: none;
	}
}

& when (@HideVanityLabel = 1) {
	.e-site-logo__award {
		display: none;
	}

	/* - center logo on HP - */
/* 	.homePageRendererHTML is only on HP's <html> */
	/* alt A */
	/* .site-header__logo {
	position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  } */
	/* alt */
	.homePageRendererHTML .site-header__logo {
	  display: flex;
	  align-items: center;
	}
	/* alt
	.site-header__logo {
		line-height: 106px;
	} */
	.homePageRendererHTML .e-site-logo:not(.salt) {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* when there is a badge for a special day remembrance, it's misplaced */
	.homePageRendererHTML #site-logo + div {
		top: 0;
	}
}

& when (@HideLoginRegister = 1) {
	.e-site-header-button--subscribe.e-site-header-button
	, .e-site-header-button--sign-in.e-site-header-button {
		display: none;
	}
}

& when (@HideWidgetsOnHP = 1) {
	.site-header__utilities {
		display: none;
	}
	/* when no widgets and section navi bar, move hamburger and search icons to upper header */
	& when (@DeclutterHeaders = hide_sections) or (@DeclutterHeaders = hide_sections_and_subsections) {
		.site-header--has-utilities .site-header__masthead {
			display: flex;
			/* --was-display: grid; */
			width: unset;
			/* --was-width: 100%; */
		}
		/* line only partial was shown, don't know why, 100vw should be 100 % of the viewport */
		@media only screen and (min-width: 1024px) {
			.site-header--has-utilities .site-header__masthead::after {
				width: 171vw;
			}
		}
	}
}


& when (@HideComments = 1) {
	/* there are tags and licence inside the #comment element */
	/* 	#comment { */
	.comment__header-container:not(.salt)
	, .comment__policy-container:not(.salt) {
		display: none;
	}
}


& when (@HideNewsletter = 1) {
	.html-embed:has(iframe[title="Daily digest sign up "]) {
		display: none !important;
	}
}


/* <article class="grid"> has 12 fr(agments) on any resolution
   .tpl-article__lead-asset is above .tpl-article__layout--content, despite being direct children of the grid
   lead-asset:
     .tpl-article__lead-asset below 768 spans till 14, despite end being 12 (ending on 13), this is to include the gap
     .u-full-bleed:
       to achieve full bleed, for all resolutions negative left margin is added and above 100% width
       but above 768 it's overruled by 0 and 100%
       weirdly from 480 to 768 padding is added, which negate the margin and width above 100%
 */
& when (@HeroWider = 1) {
	@supports (display:grid) {
		/* - headline - */
		/* sel as orig, but @media is above it */
		.tpl-article__layout--liveblog .tpl-article__layout--header,
		.tpl-article__layout--liveblog .tpl-live-blog__header,
		.tpl-article__layout--standard .tpl-article__layout--header,
		.tpl-article__layout--standard .tpl-live-blog__header {
			grid-column: 1/14;
			@media only screen and (min-width: 1280px) {
				grid-column: 2/12;
			}
			/* 375 - 768: set as orig above 768,
			   below 375: set as orig above 768 */

		}
		/* - hero pic - */
		.tpl-article__layout--liveblog .tpl-article__lead-asset, .tpl-article__layout--standard .tpl-article__lead-asset {
			@media only screen and (min-width: 1024px) {
				grid-column: 2/12;
			}
			@media only screen and (min-width: 1280px) {
				grid-column: 3/11;
			}
		}
	}
}


.tpl-article__layout--liveblog .tpl-article__layout--content, .tpl-article__layout--standard .tpl-article__layout--content {
	& when (@ArticleWider = 1) {
		@media only screen and (min-width: 1024px) {
			grid-column: 3/11;
		}
/* 		@media only screen and (min-width: 1280px) {
			grid-column: 3/11;
		} */
	}

	& when (@ArticleWider = 2) {
		@media only screen and (min-width: 1024px) {
			grid-column: 2/12;
		}
	}
	& when (@ArticleWider = 3) {
		@media only screen and (min-width: 768px) {
			grid-column: 1/13;
		}
	}
}
& when (@ArticleWider > 0) {
	/* wider more-ons, as they are now below the article */
	.tpl-article__layout--liveblog .tpl-article__layout--sidebar, .tpl-article__layout--standard .tpl-article__layout--sidebar {
		@media only screen and (min-width: 1024px) {
			grid-column: 4/10;
		}
/* 		@media only screen and (min-width: 1280px) {
			grid-column: 4/10;
		} */
	}
}


& when (@fixFlashing = 1) {
	.opinion__list.opinion__list--thick-rule {
		pointer-events: none;
		a {
			pointer-events: auto;
		}
	}
	.package__grid {
		pointer-events: none;
		a {
			pointer-events: auto;
		}	
	}
}
	
& when (@FooterRemove = 1) or (@NoRecycle = 1) {
	.site-footer__container--top {
		display: none;
	}
	.site-footer__navigation-list {
		display: none;
	}
	.site-footer__navigation {
		padding-bottom: 7px;
		padding-top: 7px;
		justify-content: center;
	}
}

& when (@NoRecycle = 1) {
	body > aside.onward-journey {
		display: none;
	}
	/* "Relatec Topics" block, mislaabeled element in orig */
	#comment {
		display: none;
	}
	article > aside.tpl-article__layout--sidebar {
		display: none;
	}
}



}

Reviews

No reviews yet.