Design component (#974)

* Added Design team with placeholder text, along with logo flip animation

* changed design text a bit

* npm run all changed formatting

* Fixed tier in Spring 2022

* Fixed design team text color

src/lib/public/board/data/officers.json

@@ -46,7 +46,7 @@
     "positions": {
       "S22": {
         "title": "Dev Project Manager",
-        "tier": 14
+        "tier": 18
       }
     }
   },

src/routes/(site)/6/teams/+page.svelte

@@ -51,6 +51,12 @@
 <!-- TODO: Algo -->
 
 <!-- TODO: Design -->
+<TeamSection info={TEAMS.design} textAlign={TextAlignment.RIGHT} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-pink brand-em">design</span> team is awesome :capycool:
+    <span class="brand-pink brand-em">Design</span> does more than just web dev :surreallick:
+  </p>
+</TeamSection>
 
 <TeamSection info={TEAMS.dev} textAlign={TextAlignment.RIGHT} term={VISIBLE_TERMS[$termIndex]}>
   <p slot="content" class="size-md">

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

@@ -14,6 +14,7 @@
       id={info.id}
       class:align-right={textAlign === TextAlignment.RIGHT}
       class:marketing-animation={info.id === 'marketing'}
+      class:design-animation={info.id === 'design'}
       class:dev-animation={info.id === 'dev'}
       class:oss-animation={info.id === 'oss'}
     >
@@ -72,6 +73,23 @@
     }
   }
 
+  .design-animation img {
+    animation-duration: 2.8s;
+    animation-timing-function: cubic-bezier(0.425, 0.145, 0.515, 0.955);
+    animation-name: flip;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+  }
+
+  @keyframes flip {
+    from {
+      transform: rotateX(0deg);
+    }
+    to {
+      transform: rotateX(-360deg);
+    }
+  }
+
   .dev-animation img {
     animation-duration: 3s;
     animation-name: spin;