run prettier on html, css, and html files

backdrop/index.html

@@ -20,8 +20,7 @@
         controls
         src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
         poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
-        width="620"
-      >
+        width="620">
         Sorry, your browser doesn't support embedded videos. Time to upgrade!
       </video>
     </section>

css-cookbook/list-group-badges.html

@@ -72,7 +72,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 270px">
 <ul class="list-group">

css-text/hyphens.html

@@ -37,7 +37,8 @@
   inline-size: 150px;
   overflow-wrap: break-word;
   hyphens: manual;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 150px">
 <div class="box">

css-text/inline-overflow-hidden.html

@@ -35,9 +35,10 @@
 .box {
   inline-size: 150px;
   overflow: hidden;
-}</textarea>
+}</textarea
+    >
 
-    <textarea class="playable playable-html" style="height: 150px;">
+    <textarea class="playable playable-html" style="height: 150px">
 <div class="box">
     Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
 </div>

css-text/inline-overflow.html

@@ -33,7 +33,8 @@
     <textarea class="playable playable-css" style="height: 100px">
 .box {
   inline-size: 150px;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 150px">
 <div class="box">

css-text/min-content.html

@@ -33,7 +33,8 @@
     <textarea class="playable playable-css" style="height: 100px">
 .box {
   inline-size: min-content;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 150px">
 <div class="box">

css-text/overflow-wrap.html

@@ -35,7 +35,8 @@
 .box {
   inline-size: 150px;
   overflow-wrap: break-word;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 150px">
 <div class="box">

css-text/wbr.html

@@ -33,7 +33,8 @@
     <textarea class="playable playable-css" style="height: 100px">
 .box {
   inline-size: 150px;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 150px">
 <div class="box">

css-text/word-break-checkbox.html

@@ -46,7 +46,8 @@
     <textarea class="playable playable-css" style="height: 100px">
 .field-br {
   word-break: break-all;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 180px">
 <div class="field">

css-text/word-break.html

@@ -43,7 +43,8 @@
 
 .box2 {
   overflow-wrap: break-word;
-}</textarea>
+}</textarea
+    >
 
     <textarea class="playable playable-html" style="height: 180px">
 <div class="box box1">

editable-samples-2/css/editable.css

@@ -3,7 +3,7 @@
 }
 
 body {
-  background-color: #EAEFF2;
+  background-color: #eaeff2;
   padding: 0;
   margin: 0;
 }
@@ -13,7 +13,7 @@ body {
   height: 200px;
   background-color: white;
   padding: 1em 0;
-  box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1);
+  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
 }
 
 #example-element {
@@ -29,12 +29,12 @@ body {
 
 #example-element {
   display: block;
-  color: #C13832;
+  color: #c13832;
 }
 
 .example-choice {
   font-size: 14px;
-  transition: background-color .2s ease-out;
+  transition: background-color 0.2s ease-out;
   cursor: pointer;
   padding: 0.25em;
   display: inline-block;
@@ -48,31 +48,31 @@ body {
 
 .example-choice.selected {
   background-color: white;
-  transition: background-color .2s ease-in;
-  box-shadow: inset 0px 2px 2px -2px rgba(0,0,0,0.2);
+  transition: background-color 0.2s ease-in;
+  box-shadow: inset 0px 2px 2px -2px rgba(0, 0, 0, 0.2);
   cursor: text;
 }
 
-.example-choice>code {
+.example-choice > code {
   width: 90%;
   display: inline-block;
 }
 
 .reset {
   display: none;
   position: absolute;
-  top: .75em;
+  top: 0.75em;
   right: 1em;
 }
 
-.example-choice.selected>.reset {
+.example-choice.selected > .reset {
   display: unset;
 }
 
 .error {
   max-height: 1em;
   position: absolute;
-  top: .75em;
+  top: 0.75em;
   right: 5.5em;
   cursor: pointer;
 }

editable-samples-2/css/prism.css

@@ -7,39 +7,39 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-	color: black;
-	background: none;
-	text-shadow: 0 1px white;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 }
 
 @media print {
-	code[class*="language-"],
-	pre[class*="language-"] {
-		text-shadow: none;
-	}
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
 }
 
 :not(pre) > code[class*="language-"],
@@ -48,24 +48,24 @@ pre[class*="language-"] {
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: slategray;
+  color: slategray;
 }
 
 .token.punctuation {
-	color: #999;
+  color: #999;
 }
 
 .namespace {
-	opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -75,7 +75,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-	color: #905;
+  color: #905;
 }
 
 .token.selector,
@@ -84,41 +84,41 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-	color: #690;
+  color: #690;
 }
 
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
-	color: #a67f59;
+  color: #a67f59;
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-	color: #07a;
+  color: #07a;
 }
 
 .token.function {
-	color: #DD4A68;
+  color: #dd4a68;
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-	color: #e90;
+  color: #e90;
 }
 
 .token.important,
 .token.bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .token.italic {
-	font-style: italic;
+  font-style: italic;
 }
 
 .token.entity {
-	cursor: help;
+  cursor: help;
 }

editable-samples-2/js/editable.js

@@ -34,8 +34,11 @@ function choose(choice) {
 function onChoose(e) {
   // highlght the code we are leaving
   var selected = document.querySelector(".selected");
-  if (selected && (e.currentTarget != selected)) {
-    var highlighted = Prism.highlight(selected.firstChild.textContent, Prism.languages.css);
+  if (selected && e.currentTarget != selected) {
+    var highlighted = Prism.highlight(
+      selected.firstChild.textContent,
+      Prism.languages.css,
+    );
     selected.firstChild.innerHTML = highlighted;
   }
   if (selected) {
@@ -51,22 +54,21 @@ function onChoose(e) {
 }
 
 function onEdit(e) {
-  applyCode(e.currentTarget.textContent, e.currentTarget.parentNode); 
+  applyCode(e.currentTarget.textContent, e.currentTarget.parentNode);
 }
 
-
 function copyTextOnly(e) {
   var selection = window.getSelection();
   var range = selection.getRangeAt(0);
 
-  e.clipboardData.setData('text/plain', range.toString());
-  e.clipboardData.setData('text/html', range.toString());
+  e.clipboardData.setData("text/plain", range.toString());
+  e.clipboardData.setData("text/html", range.toString());
   e.preventDefault();
   e.stopPropagation();
 }
 
-document.addEventListener('cut', copyTextOnly);
-document.addEventListener('copy', copyTextOnly);
+document.addEventListener("cut", copyTextOnly);
+document.addEventListener("copy", copyTextOnly);
 
 for (exampleChoice of exampleChoices) {
   originalChoices.push(exampleChoice.textContent);
@@ -75,7 +77,7 @@ for (exampleChoice of exampleChoices) {
   }
   exampleChoice.addEventListener("click", onChoose);
   exampleChoice.firstChild.addEventListener("keyup", onEdit);
-  exampleChoice.querySelector(".reset").addEventListener("click", function(e) {
+  exampleChoice.querySelector(".reset").addEventListener("click", function (e) {
     var choice = e.target.parentNode;
     var replacementText = originalChoices[indexOf(exampleChoices, choice)];
     var highlighted = Prism.highlight(replacementText, Prism.languages.css);