Web Compatibility Support • Re: efsyn.gr: "modern" redesign = expected mess

Replace the previous style with this one - redefines the color variables and just sets a maximum image size.

CODE:

@namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("www.efsyn.gr") { .post .img { max-height: 300px; max-width: 450px; } .post-grid { grid-template-columns: repeat(4,.25fr) !important; } :root { --red: 356 77% 46%; --gray: 205 10% 50%; --primary: var(--red); --gray-l: 50%; --white: 205 10% 100%; --gray-100: 205 10% calc(var(--gray-l) * 1.92); --gray-200: 205 10% calc(var(--gray-l) * 1.84); --gray-300: 205 10% calc(var(--gray-l) * 1.5); --gray-400: 205 10% calc(var(--gray-l) * 1.25); --gray-500: 205 10% calc(var(--gray-l) * 1); --gray-600: 205 10% calc(var(--gray-l) * .75); --gray-700: 205 10% calc(var(--gray-l) * .5); --gray-800: 205 10% calc(var(--gray-l) * .26); --gray-900: 205 10% calc(var(--gray-l) * .15); --black: 205 10% calc(var(--gray-l) * 0); --red-l: 46%; --red-100: 356 77% calc(var(--red-l) * 2.15); --red-200: 356 77% calc(var(--red-l) * 1.96); --red-300: 356 77% calc(var(--red-l) * 1.7); --red-400: 356 77% calc(var(--red-l) * 1.5); --red-500: 356 77% calc(var(--red-l) * 1.2); --red-600: 356 77% calc(var(--red-l) * 1); --red-700: 356 77% calc(var(--red-l) * .75); --red-900: 356 77% calc(var(--red-l) * .25); --red-800: 356 77% calc(var(--red-l) * .5); --primary-l: 46%; --primary-50: 100 77% calc(var(--primary-l) * 2.13); --primary-100: 356 77% calc(var(--primary-l) * 2.068); --primary-200: 356 64% calc(var(--primary-l) * 1.82); --primary-300: 356 75% calc(var(--primary-l) * 1.45); --primary-400: 356 90% calc(var(--primary-l) * 1.39); --primary-450: 356 85% calc(var(--primary-l) * 1.20); --primary-500: 356 77% calc(var(--primary-l) * 1); --primary-600: 356 77% calc(var(--primary-l) * .8); --primary-700: 356 77% calc(var(--primary-l) * .6); --primary-800: 356 77% calc(var(--primary-l) * .4); --primary-900: 356 77% calc(var(--primary-l) * .2); }}

and use this Modify HTTP Response filter - replaces min/max/clamp and @media comparisons.

CODE:

[["www.efsyn.gr",["/style\\.css/",["/\\((.*?) < width < (.*?)\\)/g","(min-width: $1) and (max-width: $2)","/width > (.*?\\))/g","min-width: $1","/width < (.*?\\))/g","max-width: $1","/min\\((.*?),.*?\\)/g","$1","/\\bmax\\((.*?),.*?\\)/g","$1","/clamp\\(.*?,(.*?),.*?\\)/g","$1"]]]]

Still not ideal, but better than what it was.