Skip to content

Global Normalize by baerbeisser

Screenshot of Global Normalize

Details

Authorbaerbeisser

LicenseCC-BY-SA-4.0

Categoryglobal

Created

Updated

Size5.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Ever been annoyed that one Webpage has text far too small, while the next is far too large? This style does it's best to fix that, without breaking the layout.

Notes

This style has font-size: 1rem as its base. Change your browser settings if it's too big or small for your taste.
Continuously tested and improved in the wild.

Source code

/*
==UserStyle==
@name             Global Normalize
@namespace        https://example.edu/
@description      Carefully balanced stylesheet to keep HTML elements consistent across the web. Works best with site-specific fonts disabled. (Change your browser settings if it's too big or small).
@version          2.2.1
@author           Baerbeisser
@license          CC-BY-SA-4.0
==/UserStyle==
*/
/* https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings */

/**
 * font
 */

/* always ugly, why people keep doing this? */
h1,h2,h3,h4,h5,h6 { text-shadow: none; }

/* setting baseline */
h1,h2,h3,h4,h5,h6,
:is(h1,h2,h3,h4,h5,h6) a {
    font-size: 1.3rem !important;
    line-height: 1.5rem !important;
    font-weight: bold !important;
}

/* show anchor tags *
article a::after {
    content: " (" attr(href) ") ";
    color: blue;
}*/

html, :root,
a, p, span,
blockquote, strong,
input, summary,
div, div > * {
    font-size: 1rem !important;
    font-size-adjust: 0.55 !important;
    line-height: 1.6rem !important;
}
a:hover { text-decoration: underline; }

h1, .h1 {font-size: 1.8rem  !important; line-height: 2rem    !important;}
h2, .h2 {font-size: 1.3rem  !important; line-height: 1.5rem  !important;}
h3, .h3 {font-size: 1.15rem !important; line-height: 1.4rem  !important;}
h4, .h4 {font-size: 1rem    !important; line-height: 1.2rem  !important;}
h5, .h5 {font-size: 0.85rem !important; line-height: 1rem    !important;}
h6, .h6 {font-size: 0.7rem  !important; line-height: 1rem    !important;}

a >:is(h1,h2,h3,h4,h5,h6) 
{ font-size: 1.4rem !important; line-height: 2rem !important; }

article, section,
[id*="blog"i],
[class*="blog"i],
[id*="content"i],
[class*="content"i] {
  font-size: 1rem !important;
  /*min-width: 45rem !important;*/
}/*
article, section {
  min-width: 45rem;
} breaks Galaxus */

/**
 * view
 *
main,
article,
article div {
    max-width: var(--content-max-width) !important;
}
article img { max-width: 40rem; }
#container, .container,
#content, .content,
.post-inner { min-width: 50vw !important; }
*/
/* unbreak *
#js-repo-pjax-container { max-width: unset !important; }
*/

/* pages with article *and* sidebar squeezed in content are small already *
:is(.container,#content):not(:has(.sidebar)) {
    min-width: 45rem;
}*/
.inner-wrap,
.mh-content,
:is(.container,#content):has(.sidebar):is(.inside-article,.entry-content,.post) {
    width: auto !important;
    max-width: var(--content-max-width) !important;
}

/**
 * lists
 */
dir, dd, dl, dt, menu, ol, ul {
    /*display: block !important;*/
    font-size: 1rem !important;
}
li, li:is(p,a) {
    text-align: match-parent;
    font-size: initial !important;
}

article, aside,
h1, h2, h3, h4, h5, h6,
hgroup, nav, section {
  display: block;
/*margin-block-start: 1rem;
  margin-block-end: 1rem;*/
}

/* side-navs */
aside, nav a,
.reference > a { font-size: 80% !important; }


/**
 * codeblocks
 */
span > samp,
span > code,
.s-prose :not(.s-code-block) > code,
[class^="code-"],[id^="code-"],
[class$="-code"],[id$="-code"],
[class^="code-"] *,[id^="code-"] *,
[class$="-code"] *,[id$="-code"] *,
code, pre,
code span,
#highlight,
.highlight,
.ace_editor {
    font-size: 0.9rem !important;
    font-family: monospace;
    overflow-x: scroll;
}

/* github... listen, there's a <code> tag for code */
.blob-code-content > table *,
.highlight-source-shell * {
    font-size: 0.8rem !important;
}


/**
 * tables
 */

/*td:empty { display: none; }*/

table { display: table; }
caption { display: table-caption; }
colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th { display: table-cell; }

colgroup[hidden], col[hidden],
thead[hidden], tbody[hidden], tfoot[hidden], tr[hidden] {
  visibility: collapse;
}

table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

thead, tbody, tfoot, table > tr { vertical-align: middle !important; }
tr, td, td:has(>:is(li,div,p)), th {
    vertical-align: inherit !important;
    line-height: 1.3em !important;
    font-size: 1rem !important;
}
thead {
    font-size: medium !important;
    line-height: 1.2em !important;
}

/*
* fixes for some frameworks
*/
:root {
    --wb-ds-size-scale: 1; /* meteoschweiz.admin.ch, Adobe Experience Manager? */
}

/*
* fixes for some big sites doing stupid things
*/
.article-hero__title {
    font-size: 1.8rem !important;
    line-height: 2rem !important;
}

h3.LC20lb,
h3 >a.l { /* Google search */
    font-size: 1rem !important;
    line-height: 1.2rem  !important;
}

Reviews

No reviews yet.