From 5504c8e61a2fdd73e45b72ce5e2e709be57e7776 Mon Sep 17 00:00:00 2001 From: Keith Date: Fri, 30 Aug 2024 10:59:03 +0900 Subject: [PATCH 1/2] fix: fix typo --- src/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/en.json b/src/locales/en.json index 764044c9f..94489d894 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -495,7 +495,7 @@ "amount": "Amount", "visit": "Visit", "rgbpp_explorer": "RGB++ Explorer", - "explore_the": "Explorer the", + "explore_the": "Explore the", "ecosystem": "Ecosystem", "visit_this_item_on_rgbpp_explorer": "Visit this item on RGB++ Explorer" }, From 7869ba491090702a7452f19907590fb1680d889c Mon Sep 17 00:00:00 2001 From: Keith Date: Fri, 30 Aug 2024 11:14:43 +0900 Subject: [PATCH 2/2] feat: tweak style of rgbpp explorer banner --- src/components/RgbppBanner/styles.module.scss | 43 +++++++++++++------ 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/src/components/RgbppBanner/styles.module.scss b/src/components/RgbppBanner/styles.module.scss index d211f778d..0cc4905db 100644 --- a/src/components/RgbppBanner/styles.module.scss +++ b/src/components/RgbppBanner/styles.module.scss @@ -32,8 +32,8 @@ position: relative; margin-left: auto; display: flex; - gap: 16px; - font-size: 30px; + gap: 8px; + font-size: 40px; font-weight: 700; font-family: Roboto, Lato, sans-serif, 'PingFang SC', -apple-system; letter-spacing: 1px; @@ -46,16 +46,16 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 600px; - height: 600px; + width: 646px; + height: 646px; border: 2px solid #fff; opacity: 0.1; border-radius: 50%; } &::after { - width: 700px; - height: 700px; + width: 790px; + height: 790px; } } @@ -64,12 +64,12 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 186px; - height: 186px; + width: 216px; + height: 216px; border-radius: 50%; overflow: hidden; - filter: blur(40px); - opacity: 0.5; + filter: blur(40px) hue-rotate(263deg); + opacity: 0.6; } .words { @@ -87,7 +87,7 @@ @for $i from 1 through 6 { &:nth-child(#{$i}) { - transform: rotateX(#{$i * 60}deg) translateZ(40px); + transform: rotateX(#{$i * 60}deg) translateZ(50px); animation: fade 24s infinite linear; animation-delay: #{21.6s - ($i - 1) * 4s}; @@ -184,13 +184,32 @@ /* stylelint-enable keyframe-block-no-duplicate-selectors */ } + @media (width <= 1600px) { + padding-right: 150px; + } + @media (width <= $xxlBreakPoint) { margin: 24px 100px -12px; - padding: 20px 40px; + padding: 20px 100px 20px 40px; + + .slogan { + font-size: 30px; + + &::before { + width: 35vw; + height: 35vw; + } + + &::after { + width: 40vw; + height: 40vw; + } + } } @media (width <= $extraLargeBreakPoint) { margin: 24px 45px -12px; + padding: 20px 40px; } @media (width <= $largeBreakPoint) {