Animation for footer menu 🚀

Author: chicio

CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 All changes to Chicio coding will be documented in this file.
 
+## [4.11.0](https://github.com/chicio/chicio.github.io/releases/tag/v4.11.0)
+Release date: 2021-10-XX
+
+#### Added
+
+- Media query styled components mixin
+- animation on footer elements
+- Header logo for art page
+
+#### Fixed
+
+- disabled animation for touch devices
+
 ## [4.10.0](https://github.com/chicio/chicio.github.io/releases/tag/v4.10.0)
 Release date: 2021-10-16
 

graphql-types.ts

@@ -258,6 +258,8 @@ export type DirectoryCtimeArgs = {
 export type Site = Node & {
   buildTime?: Maybe<Scalars['Date']>;
   siteMetadata?: Maybe<SiteSiteMetadata>;
+  port?: Maybe<Scalars['Int']>;
+  host?: Maybe<Scalars['String']>;
   polyfill?: Maybe<Scalars['Boolean']>;
   pathPrefix?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
@@ -1048,6 +1050,8 @@ export type QueryAllDirectoryArgs = {
 export type QuerySiteArgs = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
+  port?: Maybe<IntQueryOperatorInput>;
+  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;
@@ -2363,6 +2367,8 @@ export type SiteFieldsEnum =
   | 'siteMetadata___contacts___links___medium'
   | 'siteMetadata___contacts___links___devto'
   | 'siteMetadata___contacts___links___instagram'
+  | 'port'
+  | 'host'
   | 'polyfill'
   | 'pathPrefix'
   | 'id'
@@ -2496,6 +2502,8 @@ export type SiteGroupConnectionGroupArgs = {
 export type SiteFilterInput = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
+  port?: Maybe<IntQueryOperatorInput>;
+  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;

src/components/design-system/organism/footer.tsx

@@ -29,6 +29,14 @@ const FooterMenu = styled.div`
 
 const FooterMenuItem = styled(MenuItemWithTracking)`
   margin: ${(props) => props.theme.spacing[0]};
+
+  ${mediaQuery.inputDevice.mouse} {
+    transition: transform 0.15s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
 `;
 
 const FooterContentContainer = styled.div`

src/components/design-system/organism/menu.tsx

@@ -101,13 +101,17 @@ const NavBarMenuItem = memo(styled(MenuItemWithTracking)<NavBarMenuItemProps>`
     opacity: 1;
     height: 55px;
 
-    ${mediaQuery.inputDevice.mouse} {
-      transition: transform 0.15s;
+    ${(props) =>
+      !props.selected &&
+      css`
+        ${mediaQuery.inputDevice.mouse} {
+          transition: transform 0.15s;
 
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      `};
 
     ${(props) =>
       props.selected &&