From c12624c6e21d560e8744aa8a74ac9a6b4c25f398 Mon Sep 17 00:00:00 2001 From: Edis Leka Date: Sun, 7 Jan 2024 20:16:59 +0200 Subject: [PATCH] Improved the img and headings tags styles --- css/reset.css | 83 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 51 insertions(+), 32 deletions(-) diff --git a/css/reset.css b/css/reset.css index 8517455..1161474 100644 --- a/css/reset.css +++ b/css/reset.css @@ -8,102 +8,121 @@ - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ -*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { - all: unset; - display: revert; +*:where( + :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) + ) { + all: unset; + display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Balance out the text that is used for headlines */ +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; } /* Reapply the pointer cursor for anchor tags */ -a, button { - cursor: revert; +a, +button { + cursor: revert; } /* Remove list styles (bullets/numbers) */ -ol, ul, menu, summary { - list-style: none; +ol, +ul, +menu, +summary { + list-style: none; } /* For images to not be able to exceed their container */ img { - max-inline-size: 100%; - max-block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; + + font-style: italic; /* When the image doesn't load the alt text comes in as italic, as advantage we're setting it apart from the rest of content */ } /* removes spacing between cells in tables */ table { - border-collapse: collapse; + border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ -input, textarea { - -webkit-user-select: auto; +input, +textarea { + -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { - white-space: revert; + white-space: revert; } /* minimum style to allow to style meter element */ meter { - -webkit-appearance: revert; - appearance: revert; + -webkit-appearance: revert; + appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { - color: unset; + color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { - display: none; + display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { - -moz-user-modify: read-write; - -webkit-user-modify: read-write; - overflow-wrap: break-word; - -webkit-line-break: after-white-space; - -webkit-user-select: auto; + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { - -webkit-user-drag: element; + -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { - all: revert; - box-sizing: border-box; + all: revert; + box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { - display: none; + display: none; }