[GitHub] [apisix-website] liuxiran commented on a change in pull request #197: style: redesign team page

[GitBox <gi...@apache.org>]

liuxiran commented on a change in pull request #197:
URL: https://github.com/apache/apisix-website/pull/197#discussion_r579585434



##########
File path: website/src/pages/team.js
##########
@@ -0,0 +1,326 @@
+import React from "react";
+import styled from "styled-components";
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import GitHubLogo from "../assets/icons/github-logo.svg";
+
+import IconCode from "../assets/icons/code.svg";
+import IconStar from "../assets/icons/star.svg";
+import IconDatabase from "../assets/icons/database.svg";
+import IconTerminal from "../assets/icons/terminal.svg";
+import IconPuzzle from "../assets/icons/puzzle.svg";
+import IconEye from "../assets/icons/eye.svg";
+import IconDocumentText from "../assets/icons/document-text.svg";
+
+const PageTitle = styled.h1`
+  margin-top: 2rem;
+  font-size: 4rem;
+  font-weight: 800;
+  text-transform: uppercase;
+`;
+
+const PageSubtitle = styled.div`
+  margin-bottom: 3rem;
+`;
+
+const Page = styled.div`
+  max-width: var(--ifm-container-width);
+  margin: 0 auto;
+  padding: 2rem var(--ifm-spacing-horizontal);
+  width: 100%;
+`;
+
+const MembersContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 18px;
+  @media (max-width: 812px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+`;
+const MemberCard = styled.a`
+  border-radius: 0.75rem;
+  border: 1px solid #eee;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 1rem;
+  min-width: calc(108px + 2rem);
+  cursor: pointer;
+  height: 100%;
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+
+const Avatar = styled.img`
+  height: 108px;
+  width: 108px;
+  border-radius: 50%;
+`;
+const MemberName = styled.div`
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 12px;
+  margin-bottom: -4px;
+  line-height: 1rem;
+`;
+const Username = styled.div`
+  font-size: 12px;

Review comment:
       May I ask why not use `rem` here? `rem` would be more friendly to fit different display devices




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org