Switched general logos to new logo by Karni :D (#1065)

* Switched general logos to new logo by Karni :D

* ran formatting

* Fixed lines, added gif to assets

* Fixed reduced motion with general logo

* simplify picture logic

* Fixed picture alignment

---------

Co-authored-by: Ethan Davidson <[email protected]>

src/routes/(site)/teams/team-section.svelte

@@ -2,14 +2,14 @@
   import type { Team } from '$lib/public/board/types';
   import { OFFICERS_JSON } from '$lib/public/board/data';
   import { Term, getMembers } from '$lib/public/board';
-  import DiamondPicture from './diamond-picture.svelte';
   import Members from './members.svelte';
 
   export let info: Team;
   export let term: Term;
 
   $: members = getMembers(OFFICERS_JSON, term, info?.tiers ?? []);
 
+  const generalLogoNoPreference = '/assets/general-logo.gif';
   const permanentTeamIDs = ['general', 'icpc', 'oss'];
   const oldTerms = [Term.Fall21, Term.Spring21, Term.Spring22];
   const nodebudsTerms = [...oldTerms];
@@ -36,18 +36,21 @@
       class:special-events-animation={info.id === 'special-events'}
       class:gamedev-animation={info.id === 'gamedev'}
     >
-      {#if info.id === 'general'}
-        <DiamondPicture
-          src="https://cdn.discordapp.com/icons/710225099923521558/a_f72bf9caa196d84a44ff40cdfd3f8d9a.gif?size=1024"
-          reducedMotionSrc={info.logoSrc}
-          altSrc="General Picture"
-        />
-      {:else}
+      <picture>
+        {#if info.id === 'general'}
+          <source
+            srcset={oldTerms.includes(term)
+              ? info.oldLogoSrc ?? generalLogoNoPreference
+              : generalLogoNoPreference}
+            media="(prefers-reduced-motion: no-preference)"
+          />
+        {/if}
+
         <img
           src={oldTerms.includes(term) ? info.oldLogoSrc ?? info.logoSrc : info.logoSrc}
           alt={`${info.title} Team Logo`}
         />
-      {/if}
+      </picture>
 
       <div class="team-description">
         <h2>
@@ -82,6 +85,10 @@
     justify-self: center;
   }
 
+  .team-section picture {
+    text-align: center;
+  }
+
   .team-section .team-title {
     color: var(--font-color, var(--acm-dark));
   }