Improve mobile website

website/src/components/article-elements.tsx

@@ -107,7 +107,7 @@ export const ArticleContent = styled.div`
   > p,
   > ol > li,
   > ul > li {
-    text-align: justify;
+    text-align: left;
   }
 
   > p,

website/src/components/articles/responsive-article-menu.tsx

@@ -113,6 +113,8 @@ const Button = styled.button`
   flex-direction: row;
   align-items: center;
   gap: 8px;
+  min-height: 44px;
+  padding: 0 12px;
   font-size: 0.875rem;
   color: ${THEME_COLORS.link};
   transition: color 0.2s ease-in-out;

website/src/components/misc/content-section.tsx

@@ -242,6 +242,7 @@ const VisibleArea = styled.div`
   flex-direction: column;
   align-items: center;
   gap: 36px;
+  width: 100%;
   max-width: ${MAX_CONTENT_WIDTH}px;
   perspective: 1px;
   overflow: visible;

website/src/components/misc/dialog.tsx

@@ -4,7 +4,7 @@ import { Link } from "./link";
 export const Dialog = styled.div<{ $show: boolean }>`
   position: fixed;
   bottom: 0;
-  z-index: 30;
+  z-index: 20;
   width: 100vw;
   background-color: #aba0ff;
   display: ${({ $show }) => ($show ? "visible" : "none")};
@@ -14,7 +14,7 @@ export const DialogButton = styled.button`
   border-radius: var(--border-radius);
   max-width: 160px;
   padding: 10px;
-  height: 40px;
+  height: 44px;
   font-size: var(--font-size);
   color: #e9e7f4;
   background-color: #2e2857;
@@ -34,7 +34,7 @@ export const DialogLinkButton = styled(Link)`
   justify-content: center;
   border-radius: var(--button-border-radius);
   max-width: 140px;
-  height: 20px;
+  height: 24px;
   padding: 10px;
   color: #e9e7f4;
   background-color: #2e2857;

website/src/components/misc/pagination.tsx

@@ -59,9 +59,9 @@ const PageLink = styled(NextLink)`
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
+  min-width: 44px;
+  min-height: 44px;
+  line-height: 44px;
   border: 2px solid ${THEME_COLORS.primaryButtonBorder};
   border-radius: var(--button-border-radius);
   font-family: ${FONT_FAMILY_HEADING};

website/src/components/misc/plan.tsx

@@ -54,8 +54,7 @@ function Plan({
           <PlanPrice>
             {typeof price === "number" ? (
               <>
-                {fromPrice && <PlanFromText>from </PlanFromText>}
-                ${price}
+                {fromPrice && <PlanFromText>from </PlanFromText>}${price}
                 {period && <PlanPeriod>/{period}</PlanPeriod>}
               </>
             ) : (
@@ -87,14 +86,11 @@ const PlansContainer = styled.div<{
   readonly $maxColumns: number;
 }>`
   display: grid;
-  grid-template-columns: repeat(
-    ${({ $maxColumns }) => $maxColumns},
-    minmax(200px, 300px)
-  );
-  grid-template-rows: min-content 1px auto min-content;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
   border: 1px solid #37353f;
   border-radius: var(--box-border-radius);
-  width: ${MAX_CONTENT_WIDTH};
+  width: 100%;
   backdrop-filter: blur(2px);
   background-image: radial-gradient(
     ellipse at bottom,
@@ -103,19 +99,37 @@ const PlansContainer = styled.div<{
   );
   box-shadow: 0 0 120px 60px #fdfdfd12;
   overflow: visible;
+
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: repeat(
+      ${({ $maxColumns }) => $maxColumns},
+      minmax(200px, 1fr)
+    );
+    grid-template-rows: min-content 1px auto min-content;
+    max-width: ${MAX_CONTENT_WIDTH}px;
+  }
 `;
 
 const PlanHeader = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  grid-row: 1;
   gap: 48px;
   box-sizing: border-box;
-  border-left: 1px solid #211f31;
+  border-top: 1px solid #211f31;
   padding: 82px 32px 60px;
   overflow: visible;
+
+  &:first-child {
+    border-top: none;
+  }
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 1;
+    border-top: none;
+    border-left: 1px solid #211f31;
+  }
 `;
 
 const PlanTitleContainer = styled.div.attrs({
@@ -170,11 +184,9 @@ const PlanPeriod = styled.span`
 `;
 
 const PlanSeparator = styled.div`
-  grid-row: 2;
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
-  border-left: 1px solid #211f31;
   width: 50%;
   height: 1px;
   background-image: linear-gradient(
@@ -185,6 +197,11 @@ const PlanSeparator = styled.div`
     #ffffff4d 78%,
     #ffffff00 100%
   );
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 2;
+    border-left: 1px solid #211f31;
+  }
 `;
 
 const PlanFeatures = styled.ul.attrs({
@@ -194,12 +211,15 @@ const PlanFeatures = styled.ul.attrs({
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  grid-row: 3;
   box-sizing: border-box;
   margin: 0;
-  border-left: 1px solid #211f31;
   padding: 64px 32px 32px;
   list-style-type: none;
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 3;
+    border-left: 1px solid #211f31;
+  }
 `;
 
 const PlanFeature = styled.li`
@@ -217,9 +237,12 @@ const PlanFooter = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  grid-row: 4;
   box-sizing: border-box;
   margin: 0;
-  border-left: 1px solid #211f31;
   padding: 32px;
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 4;
+    border-left: 1px solid #211f31;
+  }
 `;

website/src/components/widgets/community-section.tsx

@@ -22,8 +22,7 @@ export const CommunityVisualization: FC = () => {
         <GraphContent>
           <GraphTitle>A Growing Community</GraphTitle>
           <GraphText>
-            Be part of our expanding community. A place for sharing, learning,
-            <br />
+            Be part of our expanding community. A place for sharing, learning,{" "}
             and evolving together, driving forward the future of GraphQL
             technologies.
           </GraphText>
@@ -69,10 +68,11 @@ const VisibleArea = styled.div`
   height: 100%;
   max-width: ${MAX_CONTENT_WIDTH}px;
   gap: 16px;
-  overflow: visible;
+  overflow: hidden;
 
   @media only screen and (min-width: 992px) {
     gap: 24px;
+    overflow: visible;
   }
 `;
 
@@ -85,6 +85,7 @@ const Graph = styled.div`
   border: 1px solid ${THEME_COLORS.boxBorder};
   border-radius: var(--box-border-radius);
   backdrop-filter: blur(2px);
+  overflow: hidden;
   background-image: linear-gradient(
     to bottom,
     #e043da1d,
@@ -100,8 +101,14 @@ const GraphContent = styled.div`
   flex: 0 0 auto;
   flex-direction: column;
   align-items: flex-start;
-  width: 670px;
-  padding: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24px;
+
+  @media only screen and (min-width: 992px) {
+    width: 670px;
+    padding: 40px;
+  }
 `;
 
 const GraphTitle = styled.h2`
@@ -126,17 +133,20 @@ const GraphText = styled.p.attrs({
 const CommunityIllustration = styled(CommunityIllustrationSvg)`
   position: absolute;
   z-index: -1;
+  width: 100%;
+  height: auto;
 `;
 
 const Numbers = styled.div`
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   flex: 1 1 200px;
-  flex-direction: rows;
   gap: 16px;
   border: 1px solid ${THEME_COLORS.boxBorder};
   border-radius: var(--box-border-radius);
   backdrop-filter: blur(2px);
+  padding: 24px 0;
   background-image: linear-gradient(
     to right top,
     #9b9aa51d,
@@ -147,7 +157,10 @@ const Numbers = styled.div`
   );
 
   @media only screen and (min-width: 992px) {
+    display: flex;
+    flex-direction: row;
     gap: 24px;
+    padding: 0;
   }
 `;
 

website/src/components/widgets/newsletter-section.tsx

@@ -146,7 +146,7 @@ const Newsletter = styled.div`
   }
 `;
 
-const NewsletterTitle = styled.h3`
+const NewsletterTitle = styled.h2`
   flex: 0 0 auto;
   margin-bottom: 24px;
 
@@ -184,7 +184,7 @@ const Media = styled.div`
   );
 `;
 
-const MediaTitle = styled.h3`
+const MediaTitle = styled.h2`
   flex: 0 0 auto;
   margin-bottom: 32px;
 `;
@@ -206,6 +206,11 @@ const MediaBox = styled.div`
 `;
 
 const MediaConnectLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
   text-decoration: none;
   color: ${THEME_COLORS.footerLink};
   transition: color 0.2s ease-in-out;

website/src/page-components/index.tsx

@@ -148,7 +148,9 @@ const IndexPage: FC<IndexPageProps> = ({ recentPosts }) => {
 
 export default IndexPage;
 
-const Fusion = styled(FusionSvg)`
+const Fusion = styled(FusionSvg).attrs({
+  viewBox: "0 0 1246 1153",
+})`
   animation: 0.5s ease-in-out ${FADE_IN} forwards,
     0.5s ease-in-out ${ZOOM_IN} forwards;
   opacity: 0;