Skip to content

fix: remove unwanted border and fix logo color in DiscussCallout #7977

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

Closed
khushal-winner wants to merge 6 commits into from
Closed

fix: remove unwanted border and fix logo color in DiscussCallout #7977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fd21ef7
fix: remove unwanted border and fix logo color in DiscussCallout
khushal-winner Aug 19, 2026
9b0c909
fix: remove whitish borders and match card dimensions in callout cards
khushal-winner Aug 20, 2026
c185606
fix: remove whitish background from logo and adventure image wrappers
khushal-winner Aug 20, 2026
231bc95
fix: match card dimensions, reset focus outlines, and use theme tokens
khushal-winner Aug 20, 2026
265e603
refactor: remove unnecessary button elements wrapping callout card logos
khushal-winner Aug 20, 2026
c08d4e0
Merge branch 'master' of https://github.com/layer5io/layer5 into fix/…
khushal-winner Aug 20, 2026
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
295 changes: 154 additions & 141 deletions src/sections/Adventures-Callout/discuss.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,167 +1,180 @@
import styled from "styled-components";

const AdventuresWrapper = styled.div`
background-color:none;
padding: 1.5rem 0.625rem 1rem;
background-color: none;
padding: 1.5rem 0.625rem 1rem;
overflow: hidden;
h2 {
font-weight: 500;
}
h2 span {
color: ${(props) => props.theme.secondaryColor};
}
.logo {
width: 100%;
}
.gatsby-image-wrapper {
background-color: transparent !important;
border-radius: 12px;
overflow: hidden;
h2{
font-weight: 500;
}
.gatsby-image-wrapper img {
border-radius: 12px;
}
.explain {
padding-top: 0rem;
text-align: center;
p {
text-align: center;
color: ${(props) => props.theme.white};
padding: 0px 3.125rem;
}
h2 span{
color:${(props) => props.theme.secondaryColor};
h2 {
color: ${(props) => props.theme.white};
line-height: 1.2;
}
.logo{
width: 100%;
h1 {
padding: 1.25rem 0px;
}
.explain {
padding-top: 0rem;
text-align: center;
p {
text-align: center;
color: ${(props) => props.theme.white};
padding: 0px 3.125rem;
.cards {
margin: 0.15rem auto 0;
max-width: 50rem;
padding: 1.5rem 2rem 0rem 2rem;
background-color: none;
border-radius: 25px;
.card {
-webkit-transition: 450ms all;
transition: 450ms all;
margin: auto;
padding: 1.25rem;
background-color: ${(props) => props.theme.darkJungleGreenColor};
border-radius: 25px;
overflow: hidden;
p {
text-align: center;
padding: 0px 0px 1px 0px;
letter-spacing: 0;
font-size: 16px;
}
h2 {
color: ${(props) => props.theme.white};
line-height: 1.2;
text-align: center;
font-size: 28px;
text-transform: uppercase;
clear: both;
margin-bottom: 0rem;
margin-top: 1rem;
}
h1 {
padding: 1.25rem 0px;
&:hover,
&:focus {
outline: none;
}
.cards {
margin: 0.15rem auto 0 ;
max-width: 50rem;
padding: 1.5rem 2rem 0rem 2rem;
background-color: none;
border-radius: 25px;
.card {
-webkit-transition: 450ms all;
transition: 450ms all;
margin: auto;
padding: 1.25rem;
background-color: #1E2117;
border-radius: 25px;
overflow: hidden;
p {
text-align: center;
padding: 0px 0px 1px 0px;
letter-spacing: 0;
font-size: 16px;
}
h2 {
text-align: center;
font-size: 28px;
text-transform:uppercase;
clear: both;
margin-bottom: 0rem;
margin-top: 1rem;
}
&:hover,
&:focus:not(:focus-visible) {
outline: none;
}
&:hover{
transform: translateY(0.03rem);
box-shadow: 0 2px 10px #00d3a9;
}
}
}
&:hover {
transform: translateY(0.03rem);
box-shadow: 0 2px 10px #00d3a9;
}
}
}
}

button{
color: #1E2117;
padding: 0;
border: 0;
background: none;
transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s;
cursor: pointer;
button {
color: ${(props) => props.theme.darkJungleGreenColor};
padding: 0;
border: 0;
background: none;
appearance: none;
line-height: 0;
outline: none;
transition:
color 0.25s,
border-color 0.25s,
transform 0.25s,
box-shadow 0.25s;
cursor: pointer;
&:focus,
&:focus-visible {
outline: none;
}
@media only screen and (min-width: 768px){
@media only screen and (min-width: 1211px){
.explain {
.cards {
padding: 0;
.card {
height:20rem;
width: 23.8rem;
}
}
}
}
@media only screen and (min-width: 768px) {
@media only screen and (min-width: 1211px) {
.explain {
.cards {
padding: 0;
.card {
height: 20rem;
width: 23.8rem;
}
}
@media only screen and (max-width: 1211px){
.explain {
.cards {
padding: 0;
h2 {
font-size: 25px;
line-height: 35px;
}
p {
font-size: 15px
}
.card{
width:23rem;
height:20rem;
}
}
}
}
}
}
@media only screen and (max-width: 1211px) {
.explain {
.cards {
padding: 0;
h2 {
font-size: 25px;
line-height: 35px;
}
p {
font-size: 15px;
}
.card {
width: 23rem;
height: 20rem;
}
}

@media only screen and (max-width: 992px){

.explain {
.cards {
padding: 0;
.card {
h2 {
font-size: 22px;
line-height: 32px;
}
p {
font-size: 13px;
line-height: 23px;
}
width:18rem;
height:18rem;
}
}
button {
padding: 0;
}
}
}

@media only screen and (max-width: 992px) {
.explain {
.cards {
padding: 0;
.card {
h2 {
font-size: 22px;
line-height: 32px;
}
p {
font-size: 13px;
line-height: 23px;
}
width: 18rem;
height: 18rem;
}
}
}
}
@media only screen and (max-width: 450px){
.explain {
.cards {
padding: 1rem 1rem 1rem 1rem;
.card {
padding: 0.5rem;
h2 {
font-size: 25px;
}
p{
font-size: 15px;
}
}
}
}
@media only screen and (max-width: 450px) {
.explain {
.cards {
padding: 1rem 1rem 1rem 1rem;
.card {
padding: 0.5rem;
h2 {
font-size: 25px;
}
p {
font-size: 15px;
}
}
}
}
@media only screen and (max-width: 375px){
.explain {
.cards {
padding: 1rem .5rem 1rem .5rem;
h2 {
font-size: 22px;
}
p{
font-size: 13px;
}
}
}
@media only screen and (max-width: 375px) {
.explain {
.cards {
padding: 1rem 0.5rem 1rem 0.5rem;
h2 {
font-size: 22px;
}
}
p {
font-size: 13px;
}
}
}
}
`;

export default AdventuresWrapper;
12 changes: 5 additions & 7 deletions src/sections/Adventures-Callout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,11 @@ const AdventuresCallout = () => {
<h2>Adventures of Five & Friends</h2>
{/*<p>Meet Five, our intergalatic Cloud Native Hero</p>*/}

<button>
<StaticImage
className="logo"
alt="Adventures of Five & Friends"
src={Adventure}
/>
</button>
<StaticImage
className="logo"
alt="Adventures of Five & Friends"
src={Adventure}
/>
</SectionTitle>
</div>
</div>
Expand Down
Loading
Loading