ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor use-case end cards to use bg images

Browse Source
This commit is contained in:
mDuo13
2025-09-30 14:38:11 -07:00
parent e56994adfb
commit 1de30f07a8
8 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/use-cases/payments/index.page.tsx
View File

@@ -185,7 +185,8 @@ const PaymentsPage: React.FC = () => {
text: "Share Your Work", text: "Share Your Work",
url: "https://discord.gg/sfX3ERAMjH" url: "https://discord.gg/sfX3ERAMjH"
} }
] ],
backgroundClass: "developer-spotlight"
}, },
{ {
title: "Learn & Stay Updated", title: "Learn & Stay Updated",
@@ -199,7 +200,8 @@ const PaymentsPage: React.FC = () => {
text: "Sign up for the Newsletter", text: "Sign up for the Newsletter",
url: "https://xrplresources.org/subscribe" url: "https://xrplresources.org/subscribe"
} }
] ],
backgroundClass: "learn-stay-updated"
} }
]; ];

1
docs/use-cases/tokenization/real-world-assets.page.tsx
View File

@@ -467,6 +467,7 @@ export default function RwaTokenization() {
url: "https://xrplresources.org/subscribe", url: "https://xrplresources.org/subscribe",
}, },
], ],
backgroundClass: "learn-stay-updated"
}, },
]; ];

8
shared/components/developer-resources-section.tsx
View File

@@ -27,14 +27,10 @@ export const DeveloperResourcesSection: React.FC<DeveloperResourcesSectionProps>
const isSingleCard = cards.length === 1; const isSingleCard = cards.length === 1;
return ( return (
<div className={` container developer-resources-section page-community ${className} ${isSingleCard ? 'single-card' : ''}`}> <div className={`container developer-resources-section page-community ${className} ${isSingleCard ? 'single-card' : ''}`}>
<section className="bottom-cards-section bug-bounty section-padding"> <section className="bottom-cards-section bug-bounty section-padding">
{cards.map((card, index) => ( {cards.map((card, index) => (
<div key={index} className={`com-card ${isSingleCard ? 'single-card' : ''}`}> <div key={index} className={`com-card ${card.backgroundClass || ''}`}>
<img
className={`${isSingleCard ? 'bottom-right-img' : (index === 0 ? 'top-right-img' : 'bottom-right-img')} ${isSingleCard ? 'bug-bounty-card-bg-2' : `bug-bounty-card-bg${index === 0 ? '' : '-2'}`} ${card.backgroundClass || ''}`}
alt={`${card.title} Background`}
/>
<div className="card-content custom-gap"> <div className="card-content custom-gap">
<h6 className="card-title">{translate(card.title)}</h6> <h6 className="card-title">{translate(card.title)}</h6>
<p className="card-description"> <p className="card-description">

2
static/css/devportal2024-v1.css
View File

File diff suppressed because one or more lines are too long

BIN
static/img/community/bug-bounty-card-bg-2-mobile.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/img/community/bug-bounty-card-bg-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
static/img/community/bug-bounty-card-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 12 KiB

62
styles/_pages.scss
View File

@@ -2135,10 +2135,10 @@ html.light {
margin: 0 !important; margin: 0 !important;
@media (min-width: 768px) { @media (min-width: 768px) {
flex: 1 1 calc(50% - 20px) !important; flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px) !important; max-width: calc(50% - 20px);
min-width: calc(50% - 20px) !important; min-width: calc(50% - 20px);
width: auto !important; width: auto;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@@ -2148,19 +2148,22 @@ html.light {
margin-bottom: 0 !important; margin-bottom: 0 !important;
flex: none !important; flex: none !important;
} }
// Single card layout styles &.developer-spotlight {
&.single-card { background-image: url(../img/community/bug-bounty-card-bg.png);
font-size: 24px; background-position: top right;
max-height: 288px !important; background-size: 169px 88px;
@media (max-width: 768px) { background-repeat: no-repeat;
min-height: 493px !important; }
} &.learn-stay-updated {
@media (min-width: 768px) { background-image: url(../img/community/bug-bounty-card-bg-2.png);
background-position: bottom right;
flex: 1 1 100% !important; background-size: contain;
max-width: 100% !important; background-repeat: no-repeat;
min-width: 100% !important;
@media (max-width: 767px) {
background-image: url(../img/community/bug-bounty-card-bg-2-mobile.png);
background-size: 136px 177px;
} }
} }
@@ -2204,14 +2207,24 @@ html.light {
} }
&.single-card { &.single-card {
.bug-bounty-card-bg-2 { .bug-bounty-card-bg-2 {
@media (max-width: 767px) { @media (max-width: 767px) {
content: url("../img/community/bug-bounty-card-bg-2-mobile.png") !important; content: url("../img/community/bug-bounty-card-bg-2-mobile.png");
}
} }
}
} .com-card {
font-size: 24px;
// Single card layout - background image full height and spacing max-height: 288px !important;
.com-card.single-card {
@media (max-width: 768px) {
min-height: 493px !important;
}
@media (min-width: 768px) {
flex: 1 1 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
.bottom-right-img.bug-bounty-card-bg-2 { .bottom-right-img.bug-bounty-card-bg-2 {
height: 714px ; height: 714px ;
width: auto; width: auto;
@@ -2239,6 +2252,7 @@ html.light {
margin-bottom: 0; margin-bottom: 0;
} }
} }
}
} }
} }