Skip to content

fix(docs-ui): improve responsive layout for prev/next navigation cards #781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nehagup merged 1 commit into from
Feb 4, 2026
Merged

fix(docs-ui): improve responsive layout for prev/next navigation cards #781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 24 additions & 21 deletions src/components/KeployCloud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,31 @@ import React from "react";
export const KeployCloud = () => {
return (
<section
id="cloud"
className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 shadow-md"
id="support"
className="my-10 w-full border-y border-white/10 py-4"
>
<div className="prose prose-orange max-w-3xl text-left">
<h1 className="text-left">Questions? 🤔💭</h1>
<p className="my-3 block text-left">
For any support please{" "}
<a
href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
className="text-orange-500 underline hover:text-orange-400"
>
join keploy slack community
</a>{" "}
to get help from fellow users, or{" "}
<a
href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
className="text-orange-500 underline hover:text-orange-400"
>
book a demo
</a>{" "}
if you're exploring enterprise use cases.
</p>
<div className="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-3 text-sm text-gray-400">
<span className="opacity-70">Need help?</span>

<a
href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
target="_blank"
rel="noopener noreferrer"
className="font-semibold text-orange-500 hover:text-orange-400"
>
Join Slack
</a>

<span className="opacity-30">|</span>

<a
href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
target="_blank"
rel="noopener noreferrer"
className="font-semibold text-orange-500 hover:text-orange-400"
>
Book a Demo
</a>
</div>
</section>
);
Expand Down
158 changes: 140 additions & 18 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2094,24 +2094,6 @@ html[data-theme="dark"] .navbar__items--right .dropdown > .navbar__link {
EDIT THIS PAGE / REQUEST CHANGES LINKS
============================================ */

/* Bottom of page links */
.theme-doc-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .theme-doc-footer {
border-top-color: rgba(255, 255, 255, 0.06);
}

.theme-doc-footer-edit-meta-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}

/* Edit this page link */
.theme-edit-this-page {
display: inline-flex;
Expand Down Expand Up @@ -2599,3 +2581,143 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite
}


/* Support strip (Need help? Slack | Demo) */
.support-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 10px;
background: var(--ifm-color-emphasis-100); /* Slim strip look */
border-radius: 4px;
margin-bottom: 20px;
}

#support span {
color: #252525;
font-weight: 400;
}

/* Dark mode */
[data-theme='dark'] #support span {
color: #ffffff; /* or a softer light gray like #e0e0e0 */
}

#support a {
font-weight: 600;
color: #ff7849;
text-decoration: none;
}

#support a:hover {
color: #ffa07a;
text-decoration: underline;
}

/* ===== FINAL Compact Pagination ===== */

.pagination-nav {
border-top: 2.5px solid var(--ifm-color-emphasis-200);
padding-top: 2rem;
margin-top: 2rem;
}

.pagination-nav__link {
padding: 0.5rem 1rem !important;
border-radius: 6px !important;
box-shadow: none !important;
border: 1.5px solid var(--ifm-color-emphasis-200) !important;
background: transparent !important;
min-height: auto !important;
display: flex;
flex-direction: column;
}

.pagination-nav__label {
font-weight: 700 !important;
color: var(--ifm-color-emphasis-900) !important;
font-size: 0.9rem;
}

.pagination-nav__sublabel {
font-weight: 500;
color: var(--ifm-color-emphasis-600);
}

/* Hover */
.pagination-nav__link:hover {
border-color: var(--ifm-color-primary);
background-color: var(--ifm-color-emphasis-100);
text-decoration: none;
}



/* Title */
.pagination-nav__title {
font-size: 0.82rem;
font-weight: 600;
color: var(--ifm-font-color-base);
line-height: 1.9;
}

/* Arrows subtle */
.pagination-nav__link svg {
transform: scale(0.7);
opacity: 1.65;
}

[data-theme='dark'] .pagination-nav__link {
border-color: var(--ifm-color-emphasis-100); /* softer than before */
}

[data-theme='dark'] .pagination-nav__label {
color: var(--ifm-color-emphasis-500);
}

/* ===== Divider Between Pagination and Footer ===== */

/* Add space below pagination */
.pagination-nav {
margin-bottom: 3rem;
}

/* ===== Remove footer border on landing page only ===== */

/* Default: footer border ON everywhere */
.theme-layout-footer.footer {
border-top: 1px solid var(--ifm-toc-border-color);
margin-top: 0;
padding-top: 2rem;
}

/* Remove border ONLY on landing page */
.plugin-pages.plugin-id-default .theme-layout-footer.footer {
border-top: none !important;
}



/* ===== MOBILE FIX FOR PREV / NEXT CARDS ===== */
@media (max-width: 768px) {

.pagination-nav {
display: flex !important;
flex-direction: column !important; /* stack vertically */
gap: 12px;
}

.pagination-nav__link {
width: 100% !important;
padding: 14px !important;
}

.pagination-nav__label {
font-size: 0.85rem !important;
}

.pagination-nav__title {
font-size: 0.9rem !important;
line-height: 1.4;
}
}
Loading