Css fix

.stylelintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "block-opening-brace-space-before":"never-multi-line"
   }
 }

docs/index.html

@@ -231,7 +231,7 @@ <h3 id="form-elements">Form elements</h3>
       <label for="remember">Remember me</label>
 
       <input type="submit" value="Submit" />
-      <input type="reset" value="Reset" />
+      <input id="reset" type="reset" value="Reset" />
     </form>
 
     <h3 id="code">Code</h3>

docs/style.css

@@ -1,65 +1,75 @@
-html {
+/* stylelint-disable no-eol-whitespace */
+html{
   scroll-behavior: smooth;
 }
 
-#product-hunt {
+#product-hunt{
   margin-top: 1rem;
 }
 
-#link-snippet-headline {
+#link-snippet-headline{
   margin: 1rem 2.5rem 1rem 0;
 }
 
 /* Make the feedback Emoji appear next to the button */
-#copy-button {
+#copy-button{
   position: relative;
   margin-right: 2px;
   overflow: visible;
 }
 
-#copy-button-feedback {
+#copy-button-feedback{
   position: absolute;
   left: -2rem;
   display: inline-block;
   transform: scale(1.3);
 }
 
-#link-snippet-container {
+#link-snippet-container{
   overflow: hidden;
   display: grid;
   display: -ms-grid;
   -ms-grid-columns: 1fr;
 }
 
-#link-snippet-container > pre {
+#link-snippet-container > pre{
   overflow: auto;
   grid-column: 1;
   grid-row: 1;
   transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms;
 }
 
-#link-snippet-container > pre[hidden] {
+#link-snippet-container > pre[hidden]{
   display: block;
   visibility: hidden;
   transform: scale(0);
   transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1), visibility 0ms 220ms;
 }
 
-#theme-form > label:not(:last-of-type) {
+#theme-form > label:not(:last-of-type){
   margin-right: 1rem;
 }
 
-#version-info th {
+#version-info th{
   width: 35%;
 }
 
-body > footer {
+body > footer{
   text-align: right;
 }
 
-.row {
+.row{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 }
+/* stylelint-disable-next-line rule-empty-line-before */
+label{
+  margin-bottom: 6px;
+}
+/* stylelint-disable-next-line rule-empty-line-before */
+#reset{
+  text-align: center;
+  padding: 10px 35px;
+}

src/parts/_base.css

@@ -1,9 +1,9 @@
-html {
+html{
   scrollbar-color: var(--scrollbar-thumb) var(--background-body);
   scrollbar-width: thin;
 }
 
-body {
+body{
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
   line-height: 1.4;
   max-width: 800px;
@@ -17,7 +17,7 @@ body {
 
 button,
 input,
-textarea {
+textarea{
   transition:
     background-color var(--animation-duration) linear,
     border-color var(--animation-duration) linear,

src/parts/_code.css

@@ -1,26 +1,26 @@
 code,
 samp,
-time {
+time{
   background: var(--background);
   color: var(--code);
   padding: 2.5px 5px;
   border-radius: 6px;
   font-size: 1em;
 }
 
-pre > code {
+pre > code{
   padding: 10px;
   display: block;
   overflow-x: auto;
 }
 
-var {
+var{
   color: var(--variable);
   font-style: normal;
   font-family: monospace;
 }
 
-kbd {
+kbd{
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: 2px;

src/parts/_forms.css

@@ -5,24 +5,24 @@ input[type='reset'],
 input[type='button'],
 input[type='checkbox'],
 input[type='range'],
-input[type='radio'] {
+input[type='radio']{
   cursor: pointer;
 }
 
 input,
-select {
+select{
   display: block;
 }
 
 [type='checkbox'],
-[type='radio'] {
+[type='radio']{
   display: initial;
 }
 
 input,
 button,
 textarea,
-select {
+select{
   color: var(--form-text);
   background-color: var(--background);
   font-family: inherit;
@@ -38,7 +38,7 @@ select {
 button,
 input[type='submit'],
 input[type='reset'],
-input[type='button'] {
+input[type='button']{
   background-color: var(--button-base);
   padding-right: 30px;
   padding-left: 30px;
@@ -47,31 +47,31 @@ input[type='button'] {
 button:hover,
 input[type='submit']:hover,
 input[type='reset']:hover,
-input[type='button']:hover {
+input[type='button']:hover{
   background: var(--button-hover);
 }
 
-input[type='color'] {
+input[type='color']{
   min-height: 2rem;
   padding: 8px;
   cursor: pointer;
 }
 
 input[type='checkbox'],
-input[type='radio'] {
+input[type='radio']{
   height: 1em;
   width: 1em;
 }
 
-input[type='radio'] {
+input[type='radio']{
   border-radius: 100%;
 }
 
-input {
+input{
   vertical-align: top;
 }
 
-label {
+label{
   vertical-align: middle;
   margin-bottom: 4px;
   display: inline-block;
@@ -81,36 +81,36 @@ input:not([type='checkbox']):not([type='radio']),
 input[type='range'],
 select,
 button,
-textarea {
+textarea{
   -webkit-appearance: none;
 }
 
-textarea {
+textarea{
   display: block;
   margin-right: 0;
   box-sizing: border-box;
   resize: vertical;
 }
 
-textarea:not([cols]) {
+textarea:not([cols]){
   width: 100%;
 }
 
-textarea:not([rows]) {
+textarea:not([rows]){
   min-height: 40px;
   height: 140px;
 }
 
-select {
+select{
   background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
   padding-right: 35px;
 }
 
-select::-ms-expand {
+select::-ms-expand{
   display: none;
 }
 
-select[multiple] {
+select[multiple]{
   padding-right: 10px;
   background-image: none;
   overflow-y: auto;
@@ -119,7 +119,7 @@ select[multiple] {
 input:focus,
 select:focus,
 button:focus,
-textarea:focus {
+textarea:focus{
   box-shadow: 0 0 0 2px var(--focus);
 }
 
@@ -129,31 +129,31 @@ input[type='submit']:active,
 input[type='reset']:active,
 input[type='button']:active,
 input[type='range']:active,
-button:active {
+button:active{
   transform: translateY(2px);
 }
 
 input:disabled,
 select:disabled,
 button:disabled,
-textarea:disabled {
+textarea:disabled{
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-::placeholder {
+::placeholder{
   color: var(--form-placeholder);
 }
 
-fieldset {
+fieldset{
   border: 1px var(--focus) solid;
   border-radius: 6px;
   margin: 0;
   margin-bottom: 12px;
   padding: 10px;
 }
 
-legend {
+legend{
   font-size: 0.9em;
   font-weight: 600;
 }

src/parts/_links.css

@@ -1,8 +1,8 @@
-a {
+a{
   text-decoration: none;
   color: var(--links);
 }
 
-a:hover {
+a:hover{
   text-decoration: underline;
 }