diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js
index a543dd9070dc1b..cf6b9c06d2c714 100644
--- a/src/sections/Adventures-Callout/discuss.style.js
+++ b/src/sections/Adventures-Callout/discuss.style.js
@@ -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;
diff --git a/src/sections/Adventures-Callout/index.js b/src/sections/Adventures-Callout/index.js
index df195b9779e72a..2e99bacf17926a 100644
--- a/src/sections/Adventures-Callout/index.js
+++ b/src/sections/Adventures-Callout/index.js
@@ -23,13 +23,11 @@ const AdventuresCallout = () => {
Adventures of Five & Friends
{/*Meet Five, our intergalatic Cloud Native Hero
*/}
-
+
diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js
index 529c100da3af81..c07358e52cd88c 100644
--- a/src/sections/Discuss-Callout/discuss.style.js
+++ b/src/sections/Discuss-Callout/discuss.style.js
@@ -1,184 +1,175 @@
import styled from "styled-components";
const DiscussWrapper = styled.div`
- background-color:none;
- padding: 1.5rem 0.625rem 1rem;
-
- overflow: hidden;
- h2{
- font-weight: 500;
+ background-color: none;
+ padding: 1.5rem 0.625rem 1rem;
+ overflow: hidden;
+ h2 {
+ font-weight: 500;
+ }
+ h2 span {
+ color: ${(props) => props.theme.secondaryColor};
+ }
+ .logo {
+ width: 200px;
+ mix-blend-mode: screen;
+ }
+
+ .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: 200px;
+ 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};
+ 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 {
- height:20rem;
- -webkit-transition: 450ms all;
- transition: 450ms all;
- margin: auto;
- padding: 1.25rem;
- background-color: #1E2117;
- border-radius: 25px;
- 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;
- }
- &: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.2em 1em;
- border: 2px solid;
- 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){
- .card-align{
- padding:2rem 0;
- }
- .explain {
- .cards {
- padding: 0;
- h2{
- padding-bottom:1rem;
- }
- .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){
- .card-align{
- padding:2rem 0;
- }
- .explain {
- .cards {
- padding: 0;
- h2 {
- padding-bottom:1rem;
- 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){
- .card-align{
- padding:1.1rem 0;
+ }
+ }
+
+ @media only screen and (max-width: 992px) {
+ .explain {
+ .cards {
+ padding: 0;
+ .card {
+ h2 {
+ font-size: 22px;
+ line-height: 32px;
}
- .explain {
- .cards {
- padding: 0;
- .card {
- h2 {
- font-size: 22px;
- line-height: 32px;
- padding-bottom:1rem;
- }
- p {
- font-size: 13px;
- line-height: 23px;
- }
- width:18rem;
- height:18rem;
- }
- }
- button {
- padding: 0;
- }
+ p {
+ font-size: 13px;
+ line-height: 23px;
}
+ width: 18rem;
+ height: 18rem;
+ }
}
+ }
}
-
- @media only screen and (max-width: 450px){
- .card-align{
- padding:2rem 0;
- }
- .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 DiscussWrapper;
diff --git a/src/sections/Discuss-Callout/index.js b/src/sections/Discuss-Callout/index.js
index 1f34ddd27301ea..5c7659db4e8921 100644
--- a/src/sections/Discuss-Callout/index.js
+++ b/src/sections/Discuss-Callout/index.js
@@ -27,14 +27,12 @@ const DiscussCallout = () => {
Discussion Forum
-
+ 