From 4a1cd36269cb217cc6e40b2863cc8fba789ccbb8 Mon Sep 17 00:00:00 2001 From: HarshPopat23 Date: Tue, 25 Aug 2026 09:53:50 +0530 Subject: [PATCH] feat: make website fully responsive across mobile, tablet, and desktop --- .../CodeEditor/CodeEditor.module.css | 18 +++- .../CommunityLinks/CommunityLinks.module.css | 6 +- .../ContentViewer/ContentViewer.module.css | 25 ++++-- .../EditorNOutput/EditorNOutput.module.css | 25 +++++- .../EditorNOutput/EditorNOutput.tsx | 63 +++++++------ .../HomePageLinks/HomePageLinks.module.css | 31 +++++-- .../KeyBindings/KeyBindings.module.css | 35 ++++---- app/components/NavBar/NavBar.module.css | 77 ++++++++++++++-- app/components/NavBar/NavBar.tsx | 2 +- app/components/Output/Output.module.css | 62 +++++++++---- app/components/Output/Output.tsx | 16 ++-- .../ResponsiveTourWorkspace.module.css | 90 +++++++++++++++++++ .../ResponsiveTourWorkspace.tsx | 76 ++++++++++++++++ .../ResponsiveTourWorkspace/index.tsx | 2 + .../TestCaseWindow/TestCaseWindow.module.css | 6 +- app/content/[...markdownPath]/page.tsx | 20 ++--- app/mobile/page.tsx | 26 ++---- app/styles/page.module.css | 72 +++++++++++---- 18 files changed, 508 insertions(+), 144 deletions(-) create mode 100644 app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.module.css create mode 100644 app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.tsx create mode 100644 app/components/ResponsiveTourWorkspace/index.tsx diff --git a/app/components/CodeEditor/CodeEditor.module.css b/app/components/CodeEditor/CodeEditor.module.css index e71d01a..fb873bd 100644 --- a/app/components/CodeEditor/CodeEditor.module.css +++ b/app/components/CodeEditor/CodeEditor.module.css @@ -1,17 +1,27 @@ .codeEditor { - padding: 8px; + padding: 8px 8px 48px 8px; height: 100%; overflow-y: auto; - padding-bottom: 32px; + box-sizing: border-box; } + .buttonsWrapper { position: absolute; bottom: 8px; display: flex; flex-direction: row; justify-content: space-between; + align-items: center; gap: 8px; width: 100%; - padding-left: 16px; - padding-right: 32px; + padding-left: 12px; + padding-right: 24px; + box-sizing: border-box; + z-index: 10; + pointer-events: none; } + +.buttonsWrapper > * { + pointer-events: auto; +} + diff --git a/app/components/CommunityLinks/CommunityLinks.module.css b/app/components/CommunityLinks/CommunityLinks.module.css index b650470..1930edd 100644 --- a/app/components/CommunityLinks/CommunityLinks.module.css +++ b/app/components/CommunityLinks/CommunityLinks.module.css @@ -1,9 +1,13 @@ .footerLinks { display: flex; + flex-wrap: wrap; justify-content: center; align-items: center; - gap: 1em; + gap: clamp(0.6em, 2vw, 1em); position: relative; + max-width: 100%; + padding-inline: 12px; + box-sizing: border-box; } .footerLink { color: hsl(var(--text)); diff --git a/app/components/ContentViewer/ContentViewer.module.css b/app/components/ContentViewer/ContentViewer.module.css index 8e98663..cf9eb0c 100644 --- a/app/components/ContentViewer/ContentViewer.module.css +++ b/app/components/ContentViewer/ContentViewer.module.css @@ -1,20 +1,29 @@ .content { display: flex; flex-direction: column; - overflow-y: auto; flex: 1; - padding-right: 14px; - padding-bottom: 12px; - padding-left: 14px; + padding-right: clamp(10px, 2vw, 16px); + padding-bottom: 16px; + padding-left: clamp(10px, 2vw, 16px); + padding-top: 8px; + box-sizing: border-box; } -.contentWrapper { - border-right: 1px solid hsl(var(--border-color)); +.contentWrapper { + border-right: none; display: flex; flex-direction: column; - height: 100%; flex: 1; - height: 100%; + width: 100%; + min-width: 0; + box-sizing: border-box; +} + +@media (min-width: 1024px) { + .contentWrapper { + border-right: 1px solid hsl(var(--border-color)); + } } + diff --git a/app/components/EditorNOutput/EditorNOutput.module.css b/app/components/EditorNOutput/EditorNOutput.module.css index 79a8640..007ff6e 100644 --- a/app/components/EditorNOutput/EditorNOutput.module.css +++ b/app/components/EditorNOutput/EditorNOutput.module.css @@ -3,14 +3,19 @@ height: 100%; display: flex; flex-direction: column; + width: 100%; + min-width: 0; + box-sizing: border-box; +} - max-width: 50%; +@media (min-width: 1024px) { + .codeEditorNOutput { + max-width: 50%; + } } .outputWrapper { width: 100%; - - /* padding: 16px; */ display: flex; flex-direction: column; align-items: flex-start; @@ -18,15 +23,27 @@ overflow-y: hidden; border-left: none; height: 100%; + box-sizing: border-box; } + +@media (max-width: 1023px) { + .outputWrapper { + border-left: 1px solid hsl(var(--border-color)); + border-right: 1px solid hsl(var(--border-color)); + } +} + .divider { width: 100%; - height: 6px; + height: 8px; background-color: hsl(var(--border-color)); cursor: row-resize; + touch-action: none; + flex-shrink: 0; } .divider:hover, .divider:active { background-color: hsl(var(--primary) / 0.75); } + diff --git a/app/components/EditorNOutput/EditorNOutput.tsx b/app/components/EditorNOutput/EditorNOutput.tsx index 05957f7..a04537a 100644 --- a/app/components/EditorNOutput/EditorNOutput.tsx +++ b/app/components/EditorNOutput/EditorNOutput.tsx @@ -32,41 +32,50 @@ export default function EditorNOutput({ errors: "", testCaseResults: [], }); - const [topWidth, setTopWidth] = useState(400); // Initial width of the left div + const [topWidth, setTopWidth] = useState(380); const dividerRef = useRef(null); - const containerRef = useRef(null); - const isDraggingRef = useRef(false); + const isDraggingRef = useRef(false); - const handleMouseDown = () => { + const startDragging = () => { isDraggingRef.current = true; }; - const handleMouseUp = () => { + const stopDragging = () => { isDraggingRef.current = false; }; - const handleMouseMove = ( - e: React.MouseEvent | MouseEvent, - ) => { - if (!isDraggingRef.current) return; + const updateHeight = (clientY: number) => { + if (!isDraggingRef.current || !containerRef.current) return; + + const containerRect = containerRef.current.getBoundingClientRect(); + const newHeight = clientY - containerRect.top; + const minHeight = 100; + const maxHeight = containerRect.height - 100; - const containerRect = containerRef.current!.getBoundingClientRect(); - const newTopWidth = e.clientY - containerRect.top; + const clampedHeight = Math.max(minHeight, Math.min(newHeight, maxHeight)); + setTopWidth(clampedHeight); + localStorage.setItem("verticalTopHeight", String(clampedHeight)); + }; + + const handleMouseMove = (e: React.MouseEvent) => { + updateHeight(e.clientY); + }; - if (newTopWidth > 32) { - setTopWidth(newTopWidth); - localStorage.setItem("verticalTopHeight", String(newTopWidth)); - } else { - localStorage.setItem("verticalTopHeight", String(containerRect.top)); - setTopWidth(containerRect.top); + const handleTouchMove = (e: React.TouchEvent) => { + if (e.touches.length > 0) { + updateHeight(e.touches[0].clientY); } }; useEffect(() => { - const topHeight = localStorage.getItem("verticalTopHeight"); - if (topHeight) { - setTopWidth(Number(topHeight)); + if (typeof window !== "undefined") { + const topHeight = localStorage.getItem("verticalTopHeight"); + if (topHeight && Number(topHeight) > 100 && Number(topHeight) < window.innerHeight - 150) { + setTopWidth(Number(topHeight)); + } else { + setTopWidth(Math.max(250, Math.floor(window.innerHeight * 0.45))); + } } }, []); @@ -74,15 +83,18 @@ export default function EditorNOutput({
diff --git a/app/components/HomePageLinks/HomePageLinks.module.css b/app/components/HomePageLinks/HomePageLinks.module.css index 85a7705..be7b697 100644 --- a/app/components/HomePageLinks/HomePageLinks.module.css +++ b/app/components/HomePageLinks/HomePageLinks.module.css @@ -1,9 +1,28 @@ -/* grid of 4 rows */ .HomePageLinks { display: grid; - grid-template-rows: repeat(4, 1fr); - gap: 8px; - column-gap: 32px; - grid-auto-flow: column; - font-size: large; + grid-template-columns: 1fr; + gap: 12px; + width: 100%; + font-size: 1.05rem; + box-sizing: border-box; } + +@media (min-width: 600px) { + .HomePageLinks { + grid-template-columns: repeat(2, 1fr); + column-gap: 28px; + row-gap: 10px; + } +} + +@media (min-width: 1024px) { + .HomePageLinks { + grid-template-rows: repeat(4, auto); + grid-auto-flow: column; + column-gap: 36px; + row-gap: 8px; + font-size: 1.15rem; + width: auto; + } +} + diff --git a/app/components/KeyBindings/KeyBindings.module.css b/app/components/KeyBindings/KeyBindings.module.css index 09f6724..515afca 100644 --- a/app/components/KeyBindings/KeyBindings.module.css +++ b/app/components/KeyBindings/KeyBindings.module.css @@ -1,31 +1,36 @@ .key { font-family: monospace; - - padding: 1px 5px; - font-weight: 900; - border-radius: 8px; + padding: 1px 6px; + font-size: 0.82em; + font-weight: 700; + border-radius: 6px; background-color: hsl(var(--text) / 0.85); text-transform: capitalize; - border: 2px solid hsl(var(--background) / 0.4); - border-bottom: 4px solid hsl(var(--background) / 0.6); - + border: 1px solid hsl(var(--background) / 0.4); + border-bottom: 3px solid hsl(var(--background) / 0.6); color: hsl(var(--background)); + display: inline-block; } .keysWrapper { - display: flex; + display: inline-flex; flex-direction: row; - gap: 6px; + gap: 4px; align-items: center; - - justify-content: center; + vertical-align: middle; + margin-inline: 2px; } + .keyAndPlus { - display: flex; - gap: 6px; + display: inline-flex; + gap: 4px; + align-items: center; } + .plus { - display: flex; + display: inline-flex; align-items: center; - justify-self: center; + font-size: 0.85em; + font-weight: bold; } + diff --git a/app/components/NavBar/NavBar.module.css b/app/components/NavBar/NavBar.module.css index d5a8088..e0c9bf4 100644 --- a/app/components/NavBar/NavBar.module.css +++ b/app/components/NavBar/NavBar.module.css @@ -1,7 +1,7 @@ .navBar { width: 100%; border-bottom: 1px solid hsl(var(--text) / 0.3); - padding: 8px 16px; + padding: 8px clamp(8px, 2vw, 16px); padding-bottom: 10px; display: flex; gap: 8px; @@ -9,18 +9,30 @@ align-items: center; justify-content: space-between; position: relative; + box-sizing: border-box; + overflow-x: hidden; } .logoTitle { display: flex; align-items: center; gap: 8px; + flex-shrink: 0; + text-decoration: none; } .title { - font-size: 1.2em; + font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 800; + white-space: nowrap; } + +@media (max-width: 640px) { + .title { + display: none; + } +} + .backBtn { border-radius: 8px; border: 1px solid hsl(var(--text) / 0.2); @@ -30,24 +42,43 @@ width: 32px; height: 32px; padding: 2px; + flex-shrink: 0; } + .backBtn:hover { background-color: hsl(var(--text) / 0.1); } + .leftContentWrapper { display: flex; - gap: 36px; + gap: clamp(8px, 2vw, 28px); flex-direction: row; - justify-content: center; + justify-content: flex-start; align-items: center; + min-width: 0; + flex: 1; } + .contentNavigation { display: flex; flex-direction: row; - justify-content: center; + justify-content: flex-start; align-items: center; - gap: 16px; + gap: clamp(6px, 1.5vw, 12px); + min-width: 0; + flex: 1; } + +.breadcrumbWrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + min-width: 0; + overflow: hidden; + cursor: pointer; +} + .breadcrumbIcon { height: 16px; width: 16px; @@ -55,22 +86,52 @@ justify-content: center; align-items: center; padding: 0; + flex-shrink: 0; } + .chapterTitle { color: hsl(var(--text) / 0.5); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: clamp(0.8rem, 1.5vw, 0.95rem); +} + +@media (max-width: 768px) { + .chapterTitle { + display: none; + } + .breadcrumbIcon { + display: none; + } +} + +.lessonTitle { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: clamp(0.8rem, 1.5vw, 0.95rem); + font-weight: 500; } .rightContentWrapper { display: flex; - gap: 8px; + gap: clamp(4px, 1vw, 8px); flex-direction: row; - justify-content: center; + justify-content: flex-end; align-items: center; + flex-shrink: 0; } + .menuButton { padding: 6px; border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; } + .menuButton:hover { background-color: hsl(var(--text) / 0.1); } + diff --git a/app/components/NavBar/NavBar.tsx b/app/components/NavBar/NavBar.tsx index 0d60c24..653f3b5 100644 --- a/app/components/NavBar/NavBar.tsx +++ b/app/components/NavBar/NavBar.tsx @@ -82,7 +82,7 @@ export default function NavBar({ urlPath }: { urlPath: string }) { { onOpen(); sendGAEvent("event", "buttonClicked", { diff --git a/app/components/Output/Output.module.css b/app/components/Output/Output.module.css index b9e7572..00650e1 100644 --- a/app/components/Output/Output.module.css +++ b/app/components/Output/Output.module.css @@ -1,7 +1,5 @@ .output { width: 100%; - - /* padding: 16px; */ display: flex; flex-direction: column; align-items: flex-start; @@ -9,51 +7,82 @@ overflow-y: hidden; border-left: none; height: 100%; + box-sizing: border-box; } .title { font-size: small; - padding: 0.2em 1em; + font-weight: 600; + padding: 0.35em 1em; } .header { background-color: hsl(var(--background2)); width: 100%; - border-bottom: 1px solid rgba(152, 152, 152, 0.668); + border-bottom: 1px solid hsl(var(--border-color)); display: flex; flex-direction: row; justify-content: space-between; user-select: none; + flex-shrink: 0; } + .invalid { - color: red; + color: hsl(var(--error)); } .outputBody { width: 100%; - padding: 4px 16px; - overflow-y: scroll; + padding: 10px 14px; + overflow-y: auto; height: 100%; - white-space: pre-wrap; display: flex; flex-direction: column; + box-sizing: border-box; +} + +.neutralMessage { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + font-size: 0.92rem; + line-height: 1.6; + padding-top: 4px; + color: hsl(var(--text)); +} + +.inlineValidateBadge { + display: inline-flex; + align-items: center; + background-color: hsl(var(--primary)); + color: #ffffff; + font-weight: 700; + font-size: 0.75rem; + padding: 2px 8px; + border-radius: 6px; + letter-spacing: 0.5px; } + .valid { display: flex; gap: 12px; - align-items: flex-start; + align-items: center; + margin-bottom: 8px; } .validMessage { color: hsl(var(--success)); - font-size: large; + font-size: 1.1rem; } .validSmallMessage { - font-size: small; + font-size: 0.85rem; + opacity: 0.85; } + .neutral { - color: black; + color: hsl(var(--text)); } .keyBindingsWrapper { @@ -61,19 +90,22 @@ display: flex; justify-content: center; } + .footer { margin-top: auto; - font-size: small; - padding: 0.2em 0.2em; + font-size: 0.85rem; + padding: 8px 0 2px 0; } .schemaErrorContainer { margin: 10px 0; } + .schemaErrorDetails { margin-block: 10px; } .schemaErrorFixList { - margin-top: "200px"; + margin-top: 10px; } + diff --git a/app/components/Output/Output.tsx b/app/components/Output/Output.tsx index 5a5d395..32d1be5 100644 --- a/app/components/Output/Output.tsx +++ b/app/components/Output/Output.tsx @@ -89,15 +89,13 @@ function Output({ if (outputResult.validityStatus == "neutral") { outputBodyContent = ( - - {" "} - Please click the{" "} - {}}> - validate - {" "} - button or use to view the - output - +
+ Please click the + VALIDATE + button or use + + to view the output +
); } else if (outputResult.validityStatus == "valid") { outputBodyContent = ( diff --git a/app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.module.css b/app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.module.css new file mode 100644 index 0000000..556fb59 --- /dev/null +++ b/app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.module.css @@ -0,0 +1,90 @@ +.workspaceContainer { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + width: 100%; + overflow: hidden; + position: relative; +} + +.tabBar { + display: none; + background-color: hsl(var(--background2)); + border-bottom: 1px solid hsl(var(--border-color)); + padding: 6px 12px; + gap: 8px; + align-items: center; + justify-content: flex-start; + flex-shrink: 0; + overflow-x: auto; +} + +@media (max-width: 1023px) { + .tabBar { + display: flex; + } +} + +.tabButton { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 14px; + border-radius: 8px; + font-size: 0.88rem; + font-weight: 600; + border: 1px solid transparent; + background: transparent; + color: hsl(var(--text) / 0.7); + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + +.tabButton:hover { + background-color: hsl(var(--text) / 0.08); + color: hsl(var(--text)); +} + +.tabButtonActive { + background-color: hsl(var(--primary)); + color: #ffffff !important; + box-shadow: 0 2px 6px hsl(var(--primary) / 0.35); +} + +.tabBadge { + padding: 2px 6px; + border-radius: 12px; + font-size: 0.72rem; + font-weight: 700; + background-color: hsl(var(--background)); + color: hsl(var(--text)); +} + +.mainArea { + display: flex; + flex-direction: row; + flex: 1; + height: 100%; + width: 100%; + overflow: hidden; +} + +@media (max-width: 1023px) { + .mainArea { + flex-direction: column; + } + + .hiddenOnSmall { + display: none !important; + } + + .activeOnSmall { + display: flex !important; + flex: 1; + height: 100%; + width: 100%; + max-width: 100% !important; + } +} diff --git a/app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.tsx b/app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.tsx new file mode 100644 index 0000000..4440247 --- /dev/null +++ b/app/components/ResponsiveTourWorkspace/ResponsiveTourWorkspace.tsx @@ -0,0 +1,76 @@ +"use client"; + +import React, { useState } from "react"; +import styles from "./ResponsiveTourWorkspace.module.css"; +import ContentViewer from "../ContentViewer"; +import EditorNOutput from "../EditorNOutput"; +import { CodeFile } from "@/lib/types"; +import cx from "classnames"; + +export type WorkspaceTab = "lesson" | "editor"; + +export default function ResponsiveTourWorkspace({ + pageContent, + codeFile, + nextStepPath, + stepIndex, + chapterIndex, +}: { + pageContent: React.ReactNode; + codeFile: CodeFile; + nextStepPath: string | undefined; + stepIndex: number; + chapterIndex: number; +}) { + const [activeTab, setActiveTab] = useState("lesson"); + + return ( +
+
+ + +
+ +
+
+ {pageContent} +
+ +
+ +
+
+
+ ); +} diff --git a/app/components/ResponsiveTourWorkspace/index.tsx b/app/components/ResponsiveTourWorkspace/index.tsx new file mode 100644 index 0000000..f5a2844 --- /dev/null +++ b/app/components/ResponsiveTourWorkspace/index.tsx @@ -0,0 +1,2 @@ +import ResponsiveTourWorkspace from "./ResponsiveTourWorkspace"; +export default ResponsiveTourWorkspace; diff --git a/app/components/TestCaseWindow/TestCaseWindow.module.css b/app/components/TestCaseWindow/TestCaseWindow.module.css index ea85230..34362d9 100644 --- a/app/components/TestCaseWindow/TestCaseWindow.module.css +++ b/app/components/TestCaseWindow/TestCaseWindow.module.css @@ -4,10 +4,12 @@ } .TestCaseCode { - width: max-content; - /* width: 100%; */ + width: 100%; + max-width: 100%; + overflow-x: auto; font-size: small; line-height: 1.3; + box-sizing: border-box; } .TestCasesSubtitle { font-size: small; diff --git a/app/content/[...markdownPath]/page.tsx b/app/content/[...markdownPath]/page.tsx index c2b94a4..7068022 100644 --- a/app/content/[...markdownPath]/page.tsx +++ b/app/content/[...markdownPath]/page.tsx @@ -5,6 +5,8 @@ import { parseLessonFolder } from "@/lib/server-functions"; import ContentViewer from "@/app/components/ContentViewer"; import EditorNOutput from "@/app/components/EditorNOutput"; +import ResponsiveTourWorkspace from "@/app/components/ResponsiveTourWorkspace"; + export function generateMetadata({ params, }: { @@ -39,17 +41,13 @@ export default async function Content({ const { Page, metadata, codeFile } = parseLessonFolder(mdPath, codePath); return ( -
- - - - -
+ } + codeFile={codeFile} + nextStepPath={nextStepPath} + stepIndex={stepIndex} + chapterIndex={chapterIndex} + /> ); } export async function generateStaticParams() { diff --git a/app/mobile/page.tsx b/app/mobile/page.tsx index 63a848d..8d17caa 100644 --- a/app/mobile/page.tsx +++ b/app/mobile/page.tsx @@ -1,25 +1,13 @@ "use client"; -import React, { useEffect } from "react"; -import styles from "./page.module.css"; -import classnames from "classnames"; -import { outfitFont } from "../styles/fonts"; +import { useEffect } from "react"; +import { useRouter } from "next/navigation"; export default function Mobile() { + const router = useRouter(); useEffect(() => { - // if not on mobile, redirect to the main page - if (window.innerWidth > 768) { - window.location.href = "/"; - } - }, []); - return ( -
-
- We are sorry, -
- Tour of JSON Schema is not optimized for mobile devices. Please use a - desktop computer for the best experience. -
-
- ); + router.replace("/"); + }, [router]); + return null; } + diff --git a/app/styles/page.module.css b/app/styles/page.module.css index 7b3b959..ee56df0 100644 --- a/app/styles/page.module.css +++ b/app/styles/page.module.css @@ -1,9 +1,10 @@ .main { display: flex; flex-direction: column; - height: inherit; - + min-height: 100%; align-items: center; + justify-content: space-between; + box-sizing: border-box; } .wrapper { @@ -22,18 +23,24 @@ color: white; height: max-content; width: 100%; - padding-top: 64px; - padding-bottom: 96px; + padding-top: clamp(32px, 5vw, 64px); + padding-bottom: clamp(60px, 8vw, 96px); + padding-inline: clamp(16px, 4vw, 32px); align-items: center; + box-sizing: border-box; } .titleWrapper { display: flex; flex-direction: column; - gap: 8px; + gap: 12px; + max-width: 900px; + width: 100%; + box-sizing: border-box; } + .title { - font-size: 5rem; + font-size: clamp(2.25rem, 6vw, 5rem); font-weight: 900; display: flex; flex-direction: column; @@ -41,48 +48,81 @@ } .title > div { - line-height: 115%; - letter-spacing: -2px; + line-height: 110%; + letter-spacing: -1px; } + .jsonSchemaTitle { text-decoration: underline; text-decoration-thickness: 0.075em; - /* add some gap between the underline and text */ text-underline-offset: 0.15em; } + .subtitle1 { - font-size: x-large; + font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: bold; display: flex; flex-direction: column; gap: 0px; } + .subtitle2 { - font-size: 1.3rem; + font-size: clamp(0.95rem, 2vw, 1.3rem); + line-height: 1.4; } + .subtitleWrapper { display: flex; flex-direction: column; - gap: 0px; + gap: 4px; justify-content: center; } + .homePageLinksWrapper { display: flex; + flex-direction: column; align-items: center; + padding: clamp(20px, 4vw, 40px) 16px; + width: 100%; + max-width: 1100px; + box-sizing: border-box; + gap: 20px; + position: relative; } + +@media (min-width: 992px) { + .homePageLinksWrapper { + flex-direction: row; + justify-content: center; + align-items: center; + } +} + .continueBtnWrapper { - position: absolute; - margin-left: 500px; + display: flex; + justify-content: center; +} + +@media (min-width: 992px) { + .continueBtnWrapper { + position: absolute; + right: 24px; + } } + .footer { display: flex; flex-direction: column; justify-content: center; align-items: center; - gap: 4px; - padding-bottom: 8px; + gap: 8px; + padding: 16px 12px 24px; + width: 100%; + box-sizing: border-box; } .footerText { font-weight: 700; + font-size: clamp(0.9rem, 2vw, 1rem); } +