prettier code

btramel · btramel · commit 3d526c36e83e · 2022-07-14T09:41:56.000-05:00
diff --git a/index.html b/index.html
@@ -1,23 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Deep Compare</title>
-</head>
-<body>
+  </head>
+  <body>
     <div class="head">
-        <h1 class="header">DEEP COMPARE</h1>
-        <p class="sub-head">Compare the Deep Field photos of the Universe</p>
+      <h1 class="header">DEEP COMPARE</h1>
+      <p class="sub-head">Compare the Deep Field photos of the Universe</p>
     </div>
 
     <div class="juxtapose" id="juxtapose-wrapper" data-startingposition="75%">
-        <img data-hubble src="img/hubble/deep_field.png" alt="Hubble Deep Field" data-label="Hubble, 2004" data-credit="NASA, ESA, CSA, and STScI">
-        <img data-webb src="img/webb/deep_field(1).png" alt="Webb Deep Field" data-label="Webb, 2022">
+      <img
+        data-hubble
+        src="img/hubble/deep_field.png"
+        alt="Hubble Deep Field"
+        data-label="Hubble, 2004"
+        data-credit="NASA, ESA, CSA, and STScI"
+      />
+      <img
+        data-webb
+        src="img/webb/deep_field(1).png"
+        alt="Webb Deep Field"
+        data-label="Webb, 2022"
+      />
     </div>
     <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
-    <link rel="stylesheet" href="styles.css">
-</body>
-</html>
+    <link
+      rel="stylesheet"
+      href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </body>
+</html>
diff --git a/main.js b/main.js
diff --git a/styles.css b/styles.css
@@ -1,58 +1,58 @@
 body {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    background-color: rgb(30, 30, 38);
-    color:rgb(183, 183, 205);
-    font-size: 1rem;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    text-align: center;
-    position: relative;
-    overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background-color: rgb(30, 30, 38);
+  color: rgb(183, 183, 205);
+  font-size: 1rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  text-align: center;
+  position: relative;
+  overflow-x: hidden;
 }
 
 .head {
-    position: absolute;
-    top: 1rem;
-    right: -50%;
-    left: -50%;
-    z-index: 10;
-    opacity: .25;
+  position: absolute;
+  top: 1rem;
+  right: -50%;
+  left: -50%;
+  z-index: 10;
+  opacity: 0.25;
 }
 
 .head:hover {
-    opacity: .05;
+  opacity: 0.05;
 }
 
 h1 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
 
 p {
-    font-size: .5rem;
+  font-size: 0.5rem;
 }
 
-@media screen and (min-width:960px) {
-    [data-hubble] {
-        content: url('img/hubble/deep_field_2800.jpg');
-    }
-
-    [data-webb] {
-        content: url('img/webb/deep_field_2800\(2\).jpg');
-    }
-
-    .head {
-        opacity: .75;
-    }
-
-    h1 {
-        font-size: 3rem;
-    }
-    
-    p {
-        font-size: .9rem;
-    }
-}
+@media screen and (min-width: 960px) {
+  [data-hubble] {
+    content: url('img/hubble/deep_field_2800.jpg');
+  }
+
+  [data-webb] {
+    content: url('img/webb/deep_field_2800\(2\).jpg');
+  }
+
+  .head {
+    opacity: 0.75;
+  }
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  p {
+    font-size: 0.9rem;
+  }
+}
