From d6b1302e0b50570dd628dad8591539e090b1aeec Mon Sep 17 00:00:00 2001 From: evazion Date: Wed, 19 Jan 2022 16:46:47 -0600 Subject: [PATCH] css: clean up css reset stylesheet. Remove all unnecessary rules from our CSS reset stylesheet. Our CSS reset was based on a combination of Eric Meyer's CSS reset [1] and Nicholas Gallagher's normalize.css [2]. Neither had been updated in over 10 years, so they both contained a lot of unnecessary cruft. This included workarounds for bugs in ancient versions of IE, and rules for elements we don't use. Some of these rules had already been removed upstream, but we never synchronized our copy of normalize.css with it. This fixes some minor issues with vertical alignment of form inputs, caused by unnecessary `vertical-align: middle` rules. [1]: https://meyerweb.com/eric/tools/css/reset/ [2]: https://nicolasgallagher.com/about-normalize-css/ --- app/javascript/src/styles/base/010_reset.scss | 148 ++---------------- app/javascript/src/styles/base/020_base.scss | 19 +-- .../src/styles/common/simple_form.scss | 1 - app/javascript/src/styles/specific/notes.scss | 5 + app/views/layouts/default.html.erb | 2 +- 5 files changed, 18 insertions(+), 157 deletions(-) diff --git a/app/javascript/src/styles/base/010_reset.scss b/app/javascript/src/styles/base/010_reset.scss index e59af57c8..38d27a890 100644 --- a/app/javascript/src/styles/base/010_reset.scss +++ b/app/javascript/src/styles/base/010_reset.scss @@ -1,158 +1,28 @@ -// Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass - -// Reset.sass -// Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an -// adapted version here that cuts out some of the reset HTML elements we will -// never need here (i.e., dfn, samp, etc). - -// ERIC MEYER RESET -// ---------------- - -html, body { - margin: 0; - padding: 0; +*, ::before, ::after { + box-sizing: border-box; } -h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, -code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, -dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, -tfoot, thead, tr, th, td { +body, h1, h2, h3, h4, h5, h6, p, li, blockquote, dl, dd { margin: 0; - padding: 0; - border: 0; - font-size: 100%; +} + +p, a { line-height: 1.25em; - font-family: inherit; } table { border-collapse: collapse; - border-spacing: 0; } ol, ul { + padding: 0; list-style: none; } -q::before, q::after, blockquote::before, blockquote::after { - content: ""; -} - -// Normalize.css -// Pulling in select resets form the normalize.css project -// -------------------------------------------------- - -// Display in IE6-9 and FF3 -// ------------------------- -// Source: http://github.com/necolas/normalize.css -html { - overflow-y: scroll; - font-size: 100%; - text-size-adjust: 100%; -} - -// Focus states a:focus { outline: thin dotted; } -// Hover & Active - -a:hover, -a:active { - outline: 0; -} - -// Display in IE6-9 and FF3 -// ------------------------- -// Source: http://github.com/necolas/normalize.css - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section { - display: block; -} - -// Prevents sub and sup affecting line-height in all browsers -// ------------------------- -// Source: http://github.com/necolas/normalize.css - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -// Img border in a's and image quality -// ------------------------- -// Source: http://github.com/necolas/normalize.css -img { - border: 0; - image-rendering: smooth; -} - -// Forms -// ------------------------- -// Source: http://github.com/necolas/normalize.css - -// Font size in all browsers, margin changes, misc consistency - -button, -input, -select, -textarea { - font-size: 100%; - margin: 0; - vertical-align: middle; -} - -button, -input { - line-height: normal; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - // Inner padding and border oddities in FF3/4 - border: 0; - padding: 0; -} - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; // Cursors on all buttons applied consistently - appearance: button; // Style clickable inputs in iOS -} - -input[type="search"] { - appearance: textfield; - box-sizing: content-box; -} - -input[type="search"]::-webkit-search-decoration { - appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 -} - -textarea { - overflow: auto; // Remove vertical scrollbar in IE6-9 - vertical-align: top; // Readability and alignment cross-browser +button, input[type="button"], input[type="submit"] { + cursor: pointer; } diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss index 981590eff..6593d41d8 100644 --- a/app/javascript/src/styles/base/020_base.scss +++ b/app/javascript/src/styles/base/020_base.scss @@ -1,7 +1,3 @@ -*, ::before, ::after { - box-sizing: border-box; -} - /* * Make sure elements with the HTML5 [hidden] attribute (e.g. ) * really are hidden. Otherwise the `display` property can override the [hidden] attribute. @@ -18,10 +14,6 @@ body { line-height: 1.25em; } -abbr[title="required"] { - display: none; -} - dd { margin-bottom: 1em; } @@ -50,17 +42,15 @@ h3, h4, h5, h6 { } fieldset { - margin-bottom: 1em; -} - -header { - margin: 0 0 1em 0; + border: 0; padding: 0; + margin-bottom: 1em; } img { border: none; vertical-align: middle; + image-rendering: smooth; } input, select, textarea { @@ -89,16 +79,13 @@ textarea { } menu { - margin: 0; padding: 0; ul { - margin: 0; padding: 0; } > li { - margin: 0; display: inline; } } diff --git a/app/javascript/src/styles/common/simple_form.scss b/app/javascript/src/styles/common/simple_form.scss index 1e6ea81e7..f17155525 100644 --- a/app/javascript/src/styles/common/simple_form.scss +++ b/app/javascript/src/styles/common/simple_form.scss @@ -19,7 +19,6 @@ form.simple_form { label { display: inline; font-weight: normal; - vertical-align: middle; } input { diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss index d53753c03..aa0d35e3b 100644 --- a/app/javascript/src/styles/specific/notes.scss +++ b/app/javascript/src/styles/specific/notes.scss @@ -69,6 +69,11 @@ } } + sub, sup { + font-size: 0.75em; + line-height: 0; + } + ul { margin-left: 1em; margin-bottom: 1em; diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb index 2ba869f8c..2e99094a1 100644 --- a/app/views/layouts/default.html.erb +++ b/app/views/layouts/default.html.erb @@ -59,7 +59,7 @@ <%= tag.body **body_attributes(CurrentUser.user, params, @current_item) do %> <%= render "news_updates/listing" %> -
+
<%= link_to Danbooru.config.app_name, root_path, id: "app-name-header", class: "heading" %>