feat: add mobile footer

src/components/MobileFooter/MobileFooter.scss

@@ -0,0 +1,34 @@
+footer {
+  color: $primary-orange;
+  margin-inline: 1rem;
+  font-family: $p-font;
+  font-size: $footer-font-size;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+span {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  flex-wrap: wrap;
+
+  svg {
+    height: $footer-font-size;
+  }
+
+  #heart {
+    margin-inline-start: calc($footer-font-size / 2);
+    margin-inline-end: calc($footer-font-size / 3);
+  }
+}
+
+@media (min-width: $mobile-breakpoint) {
+  footer {
+    display: none;
+  }
+}

src/components/MobileFooter/MobileFooter.tsx

@@ -0,0 +1,82 @@
+import './MobileFooter.scss';
+
+export default function MobileFooter() {
+  return (
+    <footer>
+      <span>
+        <span>
+          <p>Made with</p>
+          <svg
+            id="heart"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 11 12"
+            fill="none"
+          >
+            <g clipPath="url(#clip0_853_7341)">
+              <path
+                d="M5.41387 10.4346L4.75991 9.83932C2.43723 7.73312 0.903809 6.34403 0.903809 4.63922C0.903809 3.25013 1.99524 2.15869 3.38434 2.15869C4.16909 2.15869 4.92227 2.52401 5.41387 3.10129C5.90546 2.52401 6.65864 2.15869 7.44339 2.15869C8.83249 2.15869 9.92393 3.25013 9.92393 4.63922C9.92393 6.34403 8.39051 7.73312 6.06783 9.84383L5.41387 10.4346Z"
+                fill="#FF671E"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_853_7341">
+                <rect
+                  width="10.8241"
+                  height="10.8241"
+                  fill="white"
+                  transform="translate(0 0.805176)"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </span>
+        <svg
+          id="dco-logo"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 79 14"
+          fill="none"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.8434 10.3775L9.04721 10.3775L9.04721 6.59066L4.42837 11.2095L3.14222 9.92334L7.67637 5.38919L4.05777 5.38919L4.05777 3.39341L9.04721 3.39341V3.39224H10.8434L10.8434 3.39341L10.8434 5.38919L10.8434 10.3775Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M13.9067 11.1736H17.1966C19.0243 11.1736 20.2506 10.4732 20.8284 9.2418C21.0996 8.67695 21.2176 8.01044 21.2176 7.18577C21.2176 6.3611 21.0996 5.69458 20.8284 5.12974C20.2624 3.89838 19.0243 3.19797 17.1966 3.19797H13.9067V11.1736ZM15.6519 9.73886V4.63267H16.9254C18.081 4.63267 18.7767 5.01677 19.1069 5.75106C19.2837 6.12386 19.3663 6.56444 19.3663 7.18577C19.3663 7.80709 19.2837 8.24767 19.1069 8.62047C18.7767 9.34347 18.0928 9.73886 16.9254 9.73886H15.6519Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M22.727 11.1736H28.0568V9.78405H24.4722V7.80709H28.0214V6.44017H24.4722V4.58749H28.0568V3.19797H22.727V11.1736Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M32.6322 11.3769C34.2122 11.3769 35.3914 10.8572 35.8395 9.89702C35.981 9.592 36.0635 9.25309 36.0635 8.8577C36.0635 8.47361 35.9928 8.1573 35.8749 7.88617C35.4857 7.0728 34.5424 6.73389 33.4576 6.45147C32.4553 6.19164 31.5237 6.04478 31.2761 5.53642C31.229 5.41216 31.2172 5.31049 31.2172 5.17492C31.2172 5.03936 31.229 4.93769 31.2879 4.81342C31.453 4.46322 31.9129 4.24858 32.5142 4.24858C33.151 4.24858 33.5637 4.46322 33.7642 4.86991C33.8585 5.07325 33.8939 5.29919 33.8939 5.58161H35.698C35.698 5.12974 35.6272 4.76824 35.4739 4.41803C35.0377 3.49169 34 2.99463 32.585 2.99463C31.1346 2.99463 30.038 3.52558 29.6371 4.40674C29.4956 4.70046 29.413 5.00547 29.413 5.35567C29.413 5.71717 29.4956 5.9996 29.6017 6.24813C29.9437 6.98242 30.7809 7.35522 31.7478 7.60375C32.7619 7.88617 33.7759 8.03303 34.0589 8.63177C34.1179 8.75603 34.1533 8.8803 34.1533 9.04975C34.1533 9.19661 34.1179 9.33217 34.0472 9.49033C33.8703 9.86312 33.375 10.0778 32.6911 10.0778C31.96 10.0778 31.4884 9.84053 31.2761 9.39995C31.1818 9.19661 31.1464 8.94808 31.1464 8.66566H29.2244C29.2362 9.11753 29.3069 9.52422 29.472 9.87442C29.9083 10.7895 30.9695 11.3769 32.6322 11.3769Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M37.4771 11.1736H39.2223V3.19797H37.4771V11.1736Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M44.9034 6.83556V8.11211H46.9552C46.9434 8.46231 46.8844 8.71084 46.7665 8.97067C46.4599 9.6033 45.8114 9.91961 44.8916 9.91961C43.9247 9.91961 43.229 9.55811 42.887 8.83511C42.6866 8.40583 42.604 7.94266 42.604 7.18577C42.604 6.42888 42.6866 5.95441 42.887 5.53642C43.2172 4.82472 43.8893 4.45192 44.8444 4.45192C45.4458 4.45192 45.9646 4.59878 46.3066 4.9038C46.6014 5.15233 46.7665 5.50253 46.8254 5.94311H48.6296C48.5588 5.10714 48.1933 4.38414 47.6037 3.87578C46.9434 3.29964 46 2.99463 44.868 2.99463C43.0403 2.99463 41.7904 3.74022 41.1654 5.05066C40.8942 5.6268 40.7527 6.3272 40.7527 7.18577C40.7527 8.04433 40.8942 8.74473 41.1654 9.32087C41.7786 10.62 43.0403 11.3769 44.8444 11.3769C46.5307 11.3769 47.6862 10.733 48.2758 9.49033C48.5706 8.8577 48.7003 8.1347 48.7003 7.37781V6.83556H44.9034Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M50.2121 11.1736H51.9101V5.70588L55.5773 11.1736H57.3697V3.19797H55.6717V8.67695L51.9927 3.19797H50.2121V11.1736Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M65.5821 11.3769C66.7023 11.3769 67.6928 11.0493 68.3649 10.4506C68.9781 9.91961 69.3554 9.15142 69.379 8.23638H67.5277C67.5041 8.75603 67.3037 9.15142 66.9853 9.42255C66.6315 9.72756 66.1363 9.89702 65.5113 9.89702C64.6034 9.89702 63.9548 9.53551 63.6247 8.83511C63.4242 8.41712 63.3535 7.89747 63.3535 7.18577C63.3535 6.46277 63.436 5.96571 63.6247 5.54772C63.943 4.86991 64.568 4.47452 65.5113 4.47452C66.1363 4.47452 66.5962 4.64397 66.9499 4.93769C67.2801 5.23141 67.4688 5.6381 67.4923 6.16905H69.3436C69.3083 5.254 68.9545 4.46322 68.306 3.90968C67.6338 3.32224 66.6905 2.99463 65.5703 2.99463C63.7544 2.99463 62.5045 3.76282 61.9149 5.03936C61.6319 5.64939 61.4904 6.3498 61.4904 7.18577C61.4904 8.02173 61.6201 8.72214 61.9031 9.33217C62.5163 10.6313 63.778 11.3769 65.5821 11.3769Z"
+            fill="#FF671E"
+          />
+          <path
+            d="M74.6897 11.3769C76.5056 11.3769 77.7319 10.6313 78.3333 9.36606C78.6281 8.75603 78.7696 7.99914 78.7696 7.18577C78.7696 6.37239 78.6281 5.6268 78.3333 5.00547C77.7437 3.75152 76.5056 2.99463 74.7015 2.99463C72.8856 2.99463 71.6356 3.75152 71.0461 5.01677C70.7631 5.6381 70.6216 6.38369 70.6216 7.18577C70.6216 7.99914 70.7631 8.74473 71.0578 9.35477C71.6474 10.6313 72.8856 11.3769 74.6897 11.3769ZM74.7015 9.87442C73.6992 9.87442 73.0742 9.45644 72.7558 8.77862C72.5554 8.33805 72.4728 7.85228 72.4728 7.18577C72.4728 6.51925 72.5554 6.03349 72.7558 5.59291C73.0742 4.9151 73.6992 4.49711 74.6897 4.49711C75.692 4.49711 76.3169 4.9151 76.6353 5.59291C76.8475 6.03349 76.9183 6.51925 76.9183 7.18577C76.9183 7.85228 76.8358 8.33805 76.6353 8.76733C76.3169 9.45644 75.7038 9.87442 74.7015 9.87442Z"
+            fill="#FF671E"
+          />
+        </svg>
+      </span>
+      <a href="mailto: [email protected]">[email protected]</a>
+    </footer>
+  );
+}

src/pages/Judges/Judges.tsx

@@ -1,9 +1,11 @@
 import './Judges.scss';
+import MobileFooter from '../../components/MobileFooter/MobileFooter';
 
 export default function Judges() {
   return (
     <section className="judges">
       <h2>Judges</h2>
+      <MobileFooter />
     </section>
   );
 }

src/styles/variables.scss

@@ -12,6 +12,10 @@ $header-font: 'Ridge Obligque Regular';
 $subheader-font: 'NeuePlak Bold';
 $p-font: 'NB International Regular';
 
+//Font-Sizes
+$p-font-size: 14px;
+$footer-font-size: clamp(8px, 2.5vw, $p-font-size);
+
 //Spacing and Sizing
 $navbar-margin: clamp(2rem, calc(0.5rem + 5vw), 8rem);
 $navbar-width: 45px;