fix: various fixes

assets/_components.scss

@@ -0,0 +1,238 @@
+$html5-elements: (
+  nav,
+  header,
+  main,
+  footer,
+  aside,
+  form,
+  article,
+  section,
+);
+
+@include selector(html) {
+  color: $text !important;
+  font-size: 16px !important;
+  line-height: 1.9 !important;
+}
+
+@include selector(body) {
+  padding: 1rem !important;
+  margin: 0 auto !important;
+  max-width: 800px !important;
+}
+
+@include selector(a) {
+  color: $primary !important;
+  font-weight: bold !important;
+}
+
+@include selector(button, 'input[type=submit]') {
+  padding: .125rem .75rem !important;
+  border: 2px solid $grey-light !important;
+  border-radius: .5rem !important;
+  margin-right: .5rem !important;
+  margin-bottom: .5rem !important;
+  align-self: flex-start !important;
+
+  &:hover {
+    background: $background-light !important;
+  }
+}
+
+@include selector('ul', 'ol') {
+  @extend %block;
+
+  li {
+    position: relative !important;
+    width: 100% !important;
+    padding-left: 1.5rem !important;
+
+    &:before {
+      content: "" !important;
+      display: inline-block !important;
+      position: absolute !important;
+      left: 0 !important;
+      color: $text !important;
+    }
+  }
+}
+
+@include selector(ul) {
+
+  li:before {
+    content: '●' !important; //•●⚫"\25CF" !important;
+  }
+}
+
+@include selector(ol) {
+
+  li:before {
+    content: '1.' !important;
+  }
+}
+
+[aria-hidden=true] {
+  display: none !important;
+}
+
+@each $element in $html5-elements {
+
+  @include selector($element) {
+    position: relative !important;
+    padding: 2rem 1rem 1rem 1rem !important;
+    border: 2px solid $grey-light !important;
+
+    @extend %block;
+
+    &:after {
+      content: '#{$element}' !important;
+      display: inline-block !important;
+      position: absolute !important;
+      left: 1rem !important;
+      top: .25rem !important;
+      color: $text-light !important;
+    }
+  }
+}
+
+@include selector('[role]') {
+  position: relative !important;
+  margin-bottom: 1rem !important;
+
+  &:not(iframe) {
+    padding: 2rem 1rem 1rem 1rem !important;
+  }
+
+  &:not(img):not(svg) {
+    min-width: 10rem !important;
+  }
+
+  &:not(table) {
+    border: 2px solid $grey-light !important;
+  }
+
+  &:after {
+    content: 'role=' attr(role) !important;
+    display: inline-block !important;
+    position: absolute !important;
+    left: 1rem !important;
+    top: .25rem !important;
+    color: $text-light !important;
+    font-weight: normal !important;
+  }
+}
+
+@for $index from 1 through 6 {
+
+  @include selector(h#{$index}) {
+    width: 100% !important;
+    flex-direction: row !important;
+    font-size: #{1 + (6 - $index) * .2}rem !important;
+    line-height: #{1.9 - (6 - $index) * .15} !important;
+    font-weight: bold !important;
+
+    &:before {
+      content: 'h#{$index}' !important;
+      display: inline-block !important;
+      margin-right: .25em !important;
+      color: $text-light !important;
+    }
+  }
+}
+
+@include selector('input[type=text]', 'input[type=email]', 'input[type=password]', 'input[type=search]', 'textarea') {
+  width: 100% !important;
+  padding: .125rem .75rem !important;
+  border: 2px solid $grey-light !important;
+  margin-bottom: .5rem !important;
+  border-radius: .5rem !important;
+}
+
+@include selector('select') {
+  width: 100% !important;
+  padding: .25rem .5rem !important;
+  border: 2px solid $grey-light !important;
+  margin-bottom: .5rem !important;
+  border-radius: .5rem !important;
+}
+
+@include selector('textarea') {
+  height: 8rem !important;
+}
+
+@include selector('table') {
+  border-collapse: collapse !important;
+
+  @extend %block;
+}
+
+@include selector('th', 'td') {
+  padding: 1rem !important;
+  border: 2px solid $grey-light !important;
+
+  table[role] tr:first-child &,
+  table[role] th:first-child &
+  {
+    padding-top: 1.5rem !important;
+  }
+}
+
+@include selector('th') {
+  background: $background-light !important;
+}
+
+@include selector('p') {
+  @extend %block;
+}
+
+@include selector('code') {
+  font-family: monospace !important;
+}
+
+@include selector('pre') {
+  padding: 1rem !important;
+  background: $background-light !important;
+  font-family: monospace !important;
+
+  @extend %block;
+}
+
+@include selector('blockquote') {
+  padding-left: 1rem !important;
+  border-left: 3px solid $grey-light !important;
+
+  @extend %block;
+}
+
+@include selector('address') {
+  font-style: italic !important;
+}
+
+@include selector('iframe') {
+  padding: 1rem !important;
+  border: 1px solid $grey-light !important;
+  box-shadow: inset 0 0 1rem 0 rgba(#000, .1) !important;
+
+  @extend %block;
+}
+
+@include selector('label') {
+  width: 100% !important;
+}
+
+@include selector('dl') {
+  @extend %block;
+}
+
+@include selector('dt') {
+  font-weight: bold !important;
+}
+
+@include selector('dd') {
+  padding-left: 2rem !important;
+}
+
+@include selector(img, svg) {
+  align-self: flex-start !important;
+  border: 1px solid $grey-light !important;
+}

assets/_hints.scss

@@ -0,0 +1,16 @@
+/*@include selector('[title]') {
+  position: relative !important;
+
+  &:before {
+    content: "title" !important;
+    display: inline-block !important;
+    color: #fff !important;
+    background: red !important;
+    padding: .25rem .5rem !important;
+    margin-right: .25rem !important;
+  }
+}*/
+
+/*@include selector('img:not([alt])', 'img[alt]:not([alt=""])') {
+  border: 4px dashed red !important;
+}*/

assets/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin selector($selectors...) {
+
+  @each $selector in $selectors {
+    html #{$selector}:not(##{$unique-id}), #{$selector}:not(##{$unique-id}) {
+      @content;
+    }
+  }
+}
+
+%block {
+  width: 100% !important;
+    margin-bottom: 1rem !important;
+}

assets/_reset.scss

@@ -0,0 +1,67 @@
+@include selector('*') {
+
+  &, &:before, &:after {
+    position: static !important;
+    background: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    color: inherit !important;
+    text-decoration: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    transform: none !important;
+    transition: none !important;
+    pointer-events: auto !important;
+    left: auto !important;
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    font-family: sans-serif !important;
+    font-size: inherit !important;
+    line-height: inherit !important;
+    text-align: left !important;
+    overflow: visible !important;
+    font-weight: inherit !important;
+    font-style: normal !important;
+    list-style: none !important;
+    border-radius: 0 !important;
+    clip: auto !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+    align-self: auto !important;
+    flex-basis: auto !important;
+    text-transform: none !important;
+    text-shadow: none !important;
+    float: none !important;
+    opacity: 1 !important;
+    text-indent: 0 !important;
+    box-sizing: border-box !important;
+    white-space: normal !important;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    gap: 0 !important;
+    grid-template-rows: none !important;
+    grid-template-columns: none !important;
+    grid-row: auto / auto;
+    grid-column: auto / auto !important;
+    vertical-align: baseline !important;
+    letter-spacing: normal !important;
+  }
+
+  &:before, &:after {
+    display: none !important;
+  }
+
+  &:focus {
+    outline: -webkit-focus-ring-color auto 5px !important;
+  }
+}
+
+svg, button, a, span {
+  display: inline-block;
+}

assets/_variables.scss

@@ -0,0 +1,6 @@
+$unique-id: 'ryHekhLTP6BzxJWvqUdqp4uHmU';
+$text: #111;
+$text-light: #686868;
+$background-light: rgba(#000, .07);
+$primary: desaturate(#191FCC, 5%);
+$grey-light: #ccc;