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

@@ -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;
 }

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. <span hidden>blah</span>)
  * 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;
   }
 }

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 {

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;

app/views/layouts/default.html.erb

@@ -59,7 +59,7 @@
 <%= tag.body **body_attributes(CurrentUser.user, params, @current_item) do %>
   <%= render "news_updates/listing" %>
 
-  <header id="top">
+  <header id="top" class="mb-4">
     <%= link_to Danbooru.config.app_name, root_path, id: "app-name-header", class: "heading" %>
 
     <div id="maintoggle" class="mobile-only">