c

Author: Aditya90456

src/css/custom.css

@@ -399,6 +399,93 @@ footer svg {
 
 /* Docs */
 
+/* Responsive helpers and utilities
+   - container, grid, responsive images, type scaling
+   - accessible focus, reduced-motion support
+   Usage: wrap content with `.container` or use `.grid` for responsive columns.
+*/
+:root {
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+  --container-max: 1200px;
+  --container-padding: 1rem;
+}
+
+.container {
+  width: 100%;
+  max-width: var(--container-max);
+  padding-left: var(--container-padding);
+  padding-right: var(--container-padding);
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.img-responsive, img.responsive {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.lead {
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0);
+  white-space: nowrap; border: 0;
+}
+
+/* Simple two-column layout utility */
+.two-cols {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+@media (min-width: var(--bp-md)) {
+  .two-cols { grid-template-columns: 1fr 1fr; }
+}
+
+/* Heading responsive scaling */
+h1 { font-size: clamp(1.45rem, 2.5vw + 0.5rem, 2.5rem); }
+h2 { font-size: clamp(1.25rem, 2vw + 0.4rem, 1.75rem); }
+
+/* Focus visible for keyboard users */
+:focus-visible {
+  outline: 3px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+/* Respect users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
+}
+
+/* Small usage example (HTML)
+<div class="container">
+  <header class="two-cols">
+    <div>Brand / Title</div>
+    <nav>Navigation</nav>
+  </header>
+  <main class="grid">
+    <article class="lead">Your main content</article>
+    <aside>Sidebar content (stacked on small screens)</aside>
+  </main>
+</div>
+*/
+
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
   display: block;