Use smaller and top-left positioned discreet CompSoc logo

compsoc-edinburgh · Dec 2, 2024 · 671e860 · 671e860
1 parent e22f3f1
commit 671e860
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/src/components/CompSocLogo.tsx b/src/components/CompSocLogo.tsx
@@ -6,26 +6,22 @@ type CompSocLogoProps = {
 
 export const CompSocLogo: FunctionComponent<CompSocLogoProps> = ({ className }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 256" className={className}>
-      <g id="horizontal">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" className={className}>
+      <g id="profile">
         <g id="nofill">
-          <g id="bottom">
-            <rect style={{ fill: "#c33" }} x="1060" y="56" width="72" height="120" />
-            <rect style={{ fill: "#c33" }} x="1036" y="32" width="24" height="24" />
-            <rect style={{ fill: "#c33" }} x="1228" y="32" width="24" height="24" />
-            <rect style={{ fill: "#c33" }} x="844" y="32" width="24" height="24" />
-            <polygon style={{ fill: "#c33" }} points="1396 104 1396 32 1372 32 1372 8 1252 8 1252 32 1348 32 1348 56 1252 56 1252 176 1348 176 1348 200 1252 200 1252 176 1228 176 1228 56 1180 56 1180 32 1156 32 1156 8 1060 8 1060 32 1132 32 1132 56 1156 56 1156 176 1132 176 1132 200 1060 200 1060 176 1036 176 1036 56 1012 56 1012 32 988 32 988 8 868 8 868 32 964 32 964 56 868 56 868 104 940 104 940 128 964 128 964 176 940 176 940 200 844 200 844 176 820 176 820 224 844 224 844 248 988 248 988 224 1012 224 1012 200 1036 200 1036 224 1060 224 1060 248 1180 248 1180 224 1204 224 1204 200 1228 200 1228 224 1252 224 1252 248 1396 248 1396 176 1372 176 1372 152 1324 152 1324 104 1396 104" />
-            <polygon style={{ fill: "#c33" }} points="940 128 868 128 868 104 844 104 844 56 820 56 820 128 844 128 844 176 940 176 940 128" />
-          </g>
-          <g id="top">
-            <polygon style={{ fill: "#363436" }} points="436 56 460 56 460 80 484 80 484 104 508 104 508 80 532 80 532 56 484 56 484 32 460 32 460 8 412 8 412 32 436 32 436 56" />
-            <rect style={{ fill: "#363436" }} x="244" y="56" width="72" height="120" />
-            <rect style={{ fill: "#363436" }} x="220" y="32" width="24" height="24" />
-            <rect style={{ fill: "#363436" }} x="532" y="32" width="24" height="24" />
-            <rect style={{ fill: "#363436" }} x="676" y="56" width="72" height="48" />
-            <polygon style={{ fill: "#363436" }} points="796 56 796 32 772 32 772 8 652 8 652 32 748 32 748 56 772 56 772 104 748 104 748 128 676 128 676 200 652 200 652 32 604 32 604 8 556 8 556 32 580 32 580 200 556 200 556 80 532 80 532 104 508 104 508 128 484 128 484 104 460 104 460 80 436 80 436 200 412 200 412 32 388 32 388 56 364 56 364 32 340 32 340 8 244 8 244 32 316 32 316 56 340 56 340 176 316 176 316 200 244 200 244 176 220 176 220 56 196 56 196 32 172 32 172 8 52 8 52 32 148 32 148 56 52 56 52 176 148 176 148 200 52 200 52 176 28 176 28 56 4 56 4 200 28 200 28 224 52 224 52 248 196 248 196 200 220 200 220 224 244 224 244 248 364 248 364 224 412 224 412 248 484 248 484 176 532 176 532 224 556 224 556 248 628 248 628 224 652 224 652 248 724 248 724 176 772 176 772 152 796 152 796 128 820 128 820 56 796 56" />
-            <rect style={{ fill: "#363436" }} x="28" y="32" width="24" height="24" />
-          </g>
+          <rect style={{ fill: "#363436" }} x="320" y="224" width="24" height="24" />
+          <rect style={{ fill: "#363436" }} x="344" y="248" width="72" height="120" />
+          <polygon style={{ fill: "#363436" }} points="536 248 560 248 560 272 584 272 584 296 608 296 608 272 632 272 632 248 584 248 584 224 560 224 560 200 512 200 512 224 536 224 536 248" />
+          <rect style={{ fill: "#363436" }} x="632" y="224" width="24" height="24" />
+          <polygon style={{ fill: "#363436" }} points="896 248 896 224 872 224 872 200 752 200 752 224 848 224 848 248 872 248 872 296 848 296 848 320 776 320 776 392 752 392 752 224 704 224 704 200 656 200 656 224 680 224 680 392 656 392 656 272 632 272 632 296 608 296 608 320 584 320 584 296 560 296 560 272 536 272 536 392 512 392 512 224 488 224 488 248 464 248 464 224 440 224 440 200 344 200 344 224 416 224 416 248 440 248 440 368 416 368 416 392 344 392 344 368 320 368 320 248 296 248 296 224 272 224 272 200 152 200 152 224 248 224 248 248 152 248 152 368 248 368 248 392 152 392 152 368 128 368 128 248 104 248 104 392 128 392 128 416 152 416 152 440 332 440 332 476 368 476 368 512 404 512 404 476 440 476 440 440 584 440 584 476 620 476 620 512 692 512 692 476 728 476 728 440 824 440 824 440 824 368 872 368 872 344 896 344 896 320 920 320 920 248 896 248" />
+          <rect style={{ fill: "#363436" }} x="128" y="224" width="24" height="24" />
+          <rect style={{ fill: "#363436" }} x="776" y="248" width="72" height="48" />
+          <rect style={{ fill: "#c33" }} x="116" y="476" width="36" height="36" />
+          <rect style={{ fill: "#c33" }} x="440" y="512" width="108" height="180" />
+          <rect style={{ fill: "#c33" }} x="692" y="476" width="36" height="36" />
+          <polygon style={{ fill: "#c33" }} points="260 620 152 620 152 584 116 584 116 512 80 512 80 620 116 620 116 692 260 692 260 620" />
+          <rect style={{ fill: "#c33" }} x="404" y="476" width="36" height="36" />
+          <polygon style={{ fill: "#c33" }} points="944 584 944 476 908 476 908 440 728 440 728 476 872 476 872 512 728 512 728 692 872 692 872 728 728 728 728 692 692 692 692 512 620 512 620 476 584 476 584 440 440 440 440 476 548 476 548 512 584 512 584 692 548 692 548 728 440 728 440 692 404 692 404 512 368 512 368 476 332 476 332 440 152 440 152 476 296 476 296 512 152 512 152 584 260 584 260 620 296 620 296 692 260 692 260 728 116 728 116 692 80 692 80 764 116 764 116 800 332 800 332 764 368 764 368 728 404 728 404 764 440 764 440 800 620 800 620 764 656 764 656 728 692 728 692 764 728 764 728 800 944 800 944 692 908 692 908 656 836 656 836 584 944 584" />
         </g>
       </g>
     </svg>

diff --git a/src/root.tsx b/src/root.tsx
@@ -92,8 +92,10 @@ export default function App() {
           <div className="absolute inset-0 top-0 left-0 overflow-hidden -z-10">
             <Tree className="absolute h-full -left-12 opacity-25 md:opacity-100" />
           </div>
-          <div className="flex flex-col mt-8 mb-8 items-center">
-            <CompSocLogo className="w-32 opacity-50 mb-4" />
+          <div className="flex flex-col mt-16 mb-8 items-center">
+            <a href="https://comp-soc.com">
+              <CompSocLogo className="w-8 absolute left-0 top-0 m-4 opacity-50 hover:opacity-100" />
+            </a>
             <Link to="/">
               <h1 className="md:text-7xl text-4xl text-center font-display bg-clip-text text-transparent bg-gradient-to-t from-christmasDark to-christmasRed">Advent of Code Rewards</h1>
             </Link>