Merge pull request #47 from chriskthomas/patch-preview

Live Preview Edits
chriskthomas · Jun 29, 2024 · 947e3b3 · 947e3b3
2 parents fdde563 + 3b5101a
commit 947e3b3
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 174 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,53 +1,53 @@
-:root{
-    --buttonSize: 70px;
-    --buttonOffset: 10px;
-    --buttonRadius: 10px;
-    --previewWidth: 30vw;
-    --previewHeight: 100vh;
-    --previewXOffset: 0;
-    --previewYOffset: 0;
-    --animationDuration: 500ms;
+:root {
+  --buttonSize: 70px;
+  --buttonOffset: 10px;
+  --buttonRadius: 10px;
+  --previewWidth: 30vw;
+  --previewHeight: 100vh;
+  --previewXOffset: 0;
+  --previewYOffset: 0;
+  --animationDuration: 500ms;
 }
 #previewButton {
-    position: fixed;
-    width: var(--buttonSize);
-    height: var(--buttonSize);
-    bottom: var(--buttonOffset);
-    right: var(--buttonOffset);
-    border-radius: var(--buttonRadius);
-    z-index: 2;
+  position: fixed;
+  width: var(--buttonSize);
+  height: var(--buttonSize);
+  bottom: var(--buttonOffset);
+  right: var(--buttonOffset);
+  border-radius: var(--buttonRadius);
+  z-index: 2;
 }
 
-#previewButton > *{
-    width: 100%;
-    height: 100%;
+#previewButton > * {
+  width: 100%;
+  height: 100%;
 }
 
-#previewButton:hover{
-    cursor: pointer;
-    background-color: gray;
-    transition: var(--animationDuration);
+#previewButton:hover {
+  cursor: pointer;
+  background-color: gray;
+  transition: var(--animationDuration);
 }
 
-#previewBlock{
-    position: fixed;
-    top: var(--previewYOffset);
-    right: var(--previewXOffset);
-    width: var(--previewWidth);
-    height: var(--previewHeight);
-    z-index: 1;
-    transition: var(--animationDuration);
-    right: -100%;
+#previewBlock {
+  position: fixed;
+  top: var(--previewYOffset);
+  right: var(--previewXOffset);
+  width: var(--previewWidth);
+  height: var(--previewHeight);
+  z-index: 1;
+  transition: var(--animationDuration);
+  right: -100%;
 }
 
-@media screen and (max-width: 1200px){
-    #previewBlock{
-        width: 50vw;
-    }
+@media screen and (max-width: 1200px) {
+  #previewBlock {
+    width: 50vw;
+  }
 }
 
-@media screen and (max-width: 700px){
-    #previewBlock{
-        width: 100vw;
-    }
-}
+@media screen and (max-width: 700px) {
+  #previewBlock {
+    width: 100vw;
+  }
+}