Redesign psake.dev landing page layout

src/components/CodeShowcase/styles.module.css

@@ -1,5 +1,5 @@
 .showcaseSection {
-  padding: 4rem 0;
+  padding: 4rem 1rem;
   background: var(--ifm-background-surface-color);
 }
 
@@ -36,6 +36,7 @@
   border-bottom: 2px solid var(--ifm-color-emphasis-200);
   overflow-x: auto;
   flex-wrap: wrap;
+  -webkit-overflow-scrolling: touch;
 }
 
 .tab {
@@ -123,6 +124,7 @@
 .outputBlock pre {
   margin: 0 !important;
   border-radius: 0 !important;
+  overflow-x: auto !important;
 }
 
 @keyframes fadeIn {
@@ -137,20 +139,152 @@
 }
 
 @media screen and (max-width: 768px) {
+  .showcaseSection {
+    padding: 3rem 1rem;
+  }
+
   .showcaseHeader h2 {
     font-size: 2rem;
   }
 
   .showcaseSubtitle {
     font-size: 1rem;
+    padding: 0 1rem;
   }
 
   .tabs {
     gap: 0.25rem;
+    flex-wrap: nowrap;
   }
 
   .tab {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
+    min-width: fit-content;
+  }
+
+  .exampleDescription {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .showcaseSection {
+    padding: 2rem 0.75rem;
+  }
+
+  .showcaseHeader {
+    margin-bottom: 2rem;
+  }
+
+  .showcaseHeader h2 {
+    font-size: 1.75rem;
+  }
+
+  .showcaseSubtitle {
+    font-size: 0.95rem;
+  }
+
+  .tabs {
+    gap: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .tab {
+    padding: 0.625rem 0.75rem;
+    font-size: 0.8rem;
+    flex: 1;
+    min-width: auto;
+    text-align: center;
+  }
+
+  .exampleDescription {
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+
+  .codeOutputGrid {
+    gap: 1rem;
+  }
+
+  .codeBlockHeader {
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .codeBlock pre,
+  .outputBlock pre {
+    font-size: 0.8rem !important;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .showcaseSection {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .showcaseHeader {
+    margin-bottom: 1.5rem;
+  }
+
+  .showcaseHeader h2 {
+    font-size: 1.5rem;
+  }
+
+  .showcaseSubtitle {
+    font-size: 0.875rem;
+    padding: 0 0.5rem;
+  }
+
+  .tabContainer {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .tabs {
+    gap: 0;
+    margin-bottom: 1.25rem;
+    flex-wrap: nowrap;
+    padding-bottom: 0.5rem;
+  }
+
+  .tab {
+    padding: 0.5rem 0.5rem;
+    font-size: 0.7rem;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .exampleDescription {
+    font-size: 0.875rem;
+    margin-bottom: 0.875rem;
+    padding: 0 0.25rem;
+  }
+
+  .codeOutputGrid {
+    gap: 0.75rem;
+  }
+
+  .codeBlockHeader {
+    font-size: 0.7rem;
+    padding: 0.375rem 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .codeBlock,
+  .outputBlock {
+    overflow: hidden;
+  }
+
+  .codeBlock pre,
+  .outputBlock pre {
+    font-size: 0.7rem !important;
+    padding: 0.5rem !important;
+    overflow-x: auto !important;
   }
 }

src/components/FeatureGrid/styles.module.css

@@ -1,5 +1,5 @@
 .featureSection {
-  padding: 4rem 0;
+  padding: 4rem 1rem;
   background: var(--ifm-background-color);
 }
 
@@ -111,6 +111,10 @@
 }
 
 @media screen and (max-width: 768px) {
+  .featureSection {
+    padding: 3rem 1rem;
+  }
+
   .grid {
     grid-template-columns: 1fr;
     gap: 1.5rem;
@@ -122,6 +126,7 @@
 
   .subtitle {
     font-size: 1rem;
+    padding: 0 1rem;
   }
 
   .featureCard {
@@ -136,3 +141,98 @@
     font-size: 1.25rem;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .featureSection {
+    padding: 2rem 0.75rem;
+  }
+
+  .header {
+    margin-bottom: 2rem;
+  }
+
+  .header h2 {
+    font-size: 1.75rem;
+  }
+
+  .subtitle {
+    font-size: 0.95rem;
+  }
+
+  .grid {
+    gap: 1rem;
+  }
+
+  .featureCard {
+    padding: 1.25rem;
+  }
+
+  .featureIcon {
+    font-size: 2.25rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .featureTitle {
+    font-size: 1.125rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .featureDescription {
+    font-size: 0.9rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .featureCode pre {
+    font-size: 0.7rem !important;
+    padding: 0.625rem !important;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .featureSection {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .header {
+    margin-bottom: 1.5rem;
+  }
+
+  .header h2 {
+    font-size: 1.5rem;
+  }
+
+  .subtitle {
+    font-size: 0.875rem;
+    padding: 0 0.5rem;
+  }
+
+  .grid {
+    gap: 0.875rem;
+  }
+
+  .featureCard {
+    padding: 1rem;
+  }
+
+  .featureIcon {
+    font-size: 2rem;
+    margin-bottom: 0.625rem;
+  }
+
+  .featureTitle {
+    font-size: 1rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .featureDescription {
+    font-size: 0.85rem;
+    margin-bottom: 0.625rem;
+    line-height: 1.4;
+  }
+
+  .featureCode pre {
+    font-size: 0.65rem !important;
+    padding: 0.5rem !important;
+    overflow-x: auto !important;
+  }
+}

src/components/GitHubStats/styles.module.css

@@ -44,3 +44,41 @@
     font-size: 0.75rem;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .statsContainer {
+    gap: 0.75rem;
+    margin: 1rem 0;
+  }
+
+  .statItem {
+    gap: 0.125rem;
+  }
+
+  .statValue {
+    font-size: 1.25rem;
+  }
+
+  .statLabel {
+    font-size: 0.65rem;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .statsContainer {
+    gap: 0.5rem;
+    margin: 0.75rem 0;
+  }
+
+  .statItem {
+    gap: 0.1rem;
+  }
+
+  .statValue {
+    font-size: 1.125rem;
+  }
+
+  .statLabel {
+    font-size: 0.6rem;
+  }
+}