Footer: add 1280px breakpoint styles

src/components/Footer/Footer.css

@@ -1,12 +1,65 @@
 footer {
   width: 100%;
-  height: 696px;
   background-color: #925bff;
   overflow: hidden;
   position: absolute;
 }
 
-.outro-container {
+@media screen and (min-width: 1280px) {
+  .outro {
+    position: relative;
+    width: 666px;
+    margin: 160px auto 324px;
+  }
+
+  .outro h2 {
+    font-size: 40px;
+    line-height: 50px;
+    margin-bottom: 32px;
+  }
+
+  .fine-print {
+    margin: 96px 0 0;
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  #back-to-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-212px, 0);
+  }
+
+  #back-to-top-button {
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+  }
+
+  #marker-green {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(384px, 500px);
+  }
+  
+  #phone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-80px, 500px);
+  }
+
+  #command {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(706px, 360px);
+  }
+}
+
+/* .outro-container {
   position: relative;
   width: 1366px;
   height: 100%;
@@ -69,4 +122,4 @@ footer {
   top: 0;
   left: 0;
   transform: translate(1213px, 464px);
-}
+} */

src/components/Footer/Footer.tsx

@@ -23,56 +23,51 @@ const Footer: React.FC<FooterProps> = () => {
 
   return (
     <footer>
-      <div className="outro-container">
+      <div className="outro">
-        <div className="outro">
+        <h2>
-          <h2>
+          Phosphor is free and open source software. If you enjoy these icons,
-            Phosphor is free and open source software. If you enjoy these icons,
+          please support us with a donation.
-            please consider supporting us with a donation.
+        </h2>
-          </h2>
+        <button className="main-button" onClick={(e) => e.currentTarget.blur()}>
-          <button
+          <Heart size={24} weight="fill" style={{ marginRight: 12 }} />
-            className="main-button"
+          Buy us a coffee
-            onClick={(e) => e.currentTarget.blur()}
+        </button>
+        <p className="fine-print">
+          Copyright © 2020 Phosphor Icons
+          <br />
+          Designed by{" "}
+          <a className="main-link" href="https://helenazhang.com">
+            Helena Zhang
+          </a>{" "}
+          + built by{" "}
+          <a className="main-link" href="https://tobiasfried.com">
+            Tobias Fried
+          </a>{" "}
+          <span
+            role="img"
+            aria-label="Emoji of woman technologist, man technologist, and cat"
           >
-            <Heart size={24} weight="fill" style={{ marginRight: 12 }} />
+            👩🏻‍💻👨‍💻🐱
-            Buy us a coffee
+          </span>
-          </button>
+          <br />
-          <p className="fine-print">
+          This website is set in{" "}
-            Copyright © 2020 Phosphor Icons
+          <a className="main-link" href="https://manropefont.com/">
-            <br />
+            Manrope
-            Designed by{" "}
+          </a>{" "}
-            <a className="main-link" href="https://helenazhang.com">
+          by{" "}
-              Helena Zhang
+          <a className="main-link" href="https://gent.media/">
-            </a>{" "}
+            Mikhail Sharanda
-            + built by{" "}
+          </a>
-            <a className="main-link" href="https://tobiasfried.com">
+          .
-              Tobias Fried
+          <br />
-            </a>{" "}
+          See also:{" "}
-            <span
+          <a
-              role="img"
+            className="main-link"
-              aria-label="Emoji of woman technologist, man technologist, and cat"
+            href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-            >
+          >
-              👩🏻‍💻👨‍💻🐱
+            Phosphor for Android
-            </span>
+          </a>
-            <br />
+        </p>
-            This website is set in{" "}
-            <a className="main-link" href="https://manropefont.com/">
-              Manrope
-            </a>{" "}
-            by{" "}
-            <a className="main-link" href="https://gent.media/">
-              Mikhail Sharanda
-            </a>
-            .
-            <br />
-            See also:{" "}
-            <a
-              className="main-link"
-              href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-            >
-              Phosphor for Android
-            </a>
-          </p>
-        </div>
         <div id="back-to-top">
           <button
             id="back-to-top-button"