Add responsive CSS for wide screens and mobile devices

- Custom SCSS for better wide screen support (> 1400px, > 1800px)
- Mobile improvements for readability (< 768px, < 480px)
- Better table, code block, and button styling
- Improved navigation and search box styling

Author: prajwalendra

docs/_config.yml

@@ -13,6 +13,14 @@ repository: aws-samples/sample-bedrock-agentcore-gateway-user-federation
 theme: just-the-docs
 color_scheme: light
 
+# Responsive layout
+ga_tracking: false
+nav_external_links_new_tab: true
+
+# Custom SASS for responsive design
+sass:
+  style: compressed
+
 # Plugins
 plugins:
   - jekyll-seo-tag

docs/_sass/custom/custom.scss

@@ -0,0 +1,149 @@
+// Custom responsive styles for AgentCore Gateway documentation
+
+// Wide screen improvements (> 1400px)
+@media (min-width: 1400px) {
+  .main-content {
+    max-width: 1200px;
+  }
+
+  .side-bar {
+    width: 300px;
+  }
+
+  // Better code block width on wide screens
+  .highlight {
+    max-width: 100%;
+  }
+
+  // Wider tables
+  .table-wrapper {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}
+
+// Extra wide screens (> 1800px)
+@media (min-width: 1800px) {
+  .main-content {
+    max-width: 1400px;
+  }
+
+  .side-bar {
+    width: 320px;
+  }
+}
+
+// Mobile improvements (< 768px)
+@media (max-width: 768px) {
+  // Improve readability on mobile
+  .main-content {
+    padding: 1rem;
+    font-size: 16px;
+    line-height: 1.6;
+  }
+
+  // Better heading sizes on mobile
+  h1 {
+    font-size: 1.75rem !important;
+  }
+
+  h2 {
+    font-size: 1.5rem !important;
+  }
+
+  // Stack table cells on mobile
+  .table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // Better code blocks on mobile
+  .highlight {
+    font-size: 14px;
+    overflow-x: auto;
+  }
+
+  pre {
+    padding: 0.75rem;
+  }
+
+  // Better button sizing on mobile
+  .btn {
+    display: block;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    text-align: center;
+  }
+}
+
+// Small mobile (< 480px)
+@media (max-width: 480px) {
+  .main-content {
+    padding: 0.75rem;
+  }
+
+  h1.fs-9 {
+    font-size: 1.5rem !important;
+  }
+
+  .fs-6 {
+    font-size: 1rem !important;
+  }
+}
+
+// General improvements
+.main-content {
+  // Smooth transitions
+  transition: max-width 0.2s ease;
+}
+
+// Better table styling
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #e1e4e8;
+}
+
+// Improve code readability
+code {
+  font-size: 0.9em;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+}
+
+// Better link visibility
+a:hover {
+  text-decoration: underline;
+}
+
+// Navigation improvements
+.site-nav {
+  padding-top: 1rem;
+}
+
+.nav-list-link {
+  padding: 0.5rem 1rem;
+  transition: background-color 0.15s ease;
+}
+
+.nav-list-link:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+// Search box improvements
+.search-input {
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+}
+
+// Footer styling
+.site-footer {
+  padding: 1rem;
+  font-size: 0.85rem;
+  border-top: 1px solid #e1e4e8;
+}