-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: modernize * feat: saas * feat: slides public
1 parent
52af1fc
commit ec1ce34
Showing
18 changed files
with
892 additions
and
649 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
754 changes: 379 additions & 375 deletions
754
pingcap-jp/css/components/banners/banner-default.scss
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| .tmpl-modernize { | ||
| &__scale { | ||
| background: linear-gradient(180deg, #06111a 0%, #000000 100%); | ||
| .block-columns__column { | ||
| @include media-min($large) { | ||
| display: flex; | ||
| gap: 50px; | ||
| .block-title { | ||
| flex: 1; | ||
| } | ||
| .cards { | ||
| flex: 1.5; | ||
| } | ||
| } | ||
| } | ||
| .cards { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| gap: 80px 50px; | ||
| align-self: flex-start; | ||
| margin-top: 32px; | ||
| .card { | ||
| flex: 1; | ||
| font-size: 24px; | ||
| font-weight: 700; | ||
| line-height: 30px; | ||
| text-align: left; | ||
| color: #5d6974; | ||
| } | ||
| h3 { | ||
| font-size: 40px; | ||
| line-height: 48px; | ||
| font-weight: 700; | ||
| letter-spacing: -0.08em; | ||
| text-align: left; | ||
| color: #1aa8a8; | ||
| @include media-min($medium) { | ||
| font-size: 64px; | ||
| line-height: 70px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| &__proven { | ||
| .block-title { | ||
| @include media-min($large) { | ||
| display: flex; | ||
| gap: 32px; | ||
| .desc { | ||
| margin-top: 32px; | ||
| } | ||
| } | ||
| } | ||
| .cards { | ||
| @include media-min($medium) { | ||
| display: flex; | ||
| } | ||
| margin-bottom: 80px; | ||
| } | ||
| .card { | ||
| border: 1px solid #2f353a; | ||
| padding: 24px 24px 40px 24px; | ||
| flex: 1; | ||
| img { | ||
| margin-bottom: 24px; | ||
| } | ||
| p { | ||
| color: #a2adb9; | ||
| font-size: 16px; | ||
| font-weight: 300; | ||
| line-height: 24px; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,245 @@ | ||
| .tmpl-saas { | ||
| &__banner { | ||
| background-color: #000; | ||
| background-size: contain; | ||
|
|
||
| @include media-min($xlarge) { | ||
| background-size: cover; | ||
| } | ||
| @include media-min($large) { | ||
| .banner-default__text-content--center { | ||
| padding-top: 120px; | ||
| padding-bottom: 200px; | ||
| grid-column: 3 / span 8; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 72px; | ||
| line-height: 86px; | ||
| } | ||
| } | ||
| p { | ||
| font-weight: 300; | ||
| text-align: center; | ||
| color: #a2adb9; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| @include media-min($large) { | ||
| font-size: 26px; | ||
| line-height: 34px; | ||
| } | ||
| + p { | ||
| margin-top: 36px; | ||
| } | ||
| } | ||
| } | ||
| &__logo { | ||
| h2 { | ||
| font-size: clamp(30px, 3.25vw, 36px); | ||
| } | ||
| @include media-min($large) { | ||
| .block-logos__logo { | ||
| width: 74%; | ||
| margin: auto; | ||
| } | ||
| .block-logos__logo-grid { | ||
| grid-template-columns: repeat(5, 1fr); | ||
| } | ||
| } | ||
| } | ||
| &__icon-grid { | ||
| @include media-min($large) { | ||
| .block-icon-grid__item-container { | ||
| margin: auto; | ||
| width: 80%; | ||
| } | ||
| } | ||
| .block-icon-grid__item { | ||
| p { | ||
| color: #a2adb9; | ||
| } | ||
| } | ||
| } | ||
| &__feature { | ||
| .block-inner { | ||
| @include media-min($large) { | ||
| display: flex; | ||
| gap: 64px !important; | ||
| } | ||
| .block-section__title-container { | ||
| flex: 1; | ||
| display: block; | ||
| h2 { | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 48px; | ||
| @include media-min($medium) { | ||
| font-size: 60px; | ||
| line-height: 74px; | ||
| text-align: left; | ||
| } | ||
| } | ||
| } | ||
| .block-section__title-desc { | ||
| font-size: 22px; | ||
| font-weight: 300; | ||
| line-height: 28px; | ||
| text-align: left; | ||
| color: #5d6974; | ||
| margin-top: 32px; | ||
| } | ||
| .block-icon-grid__item-container { | ||
| flex: 2; | ||
| } | ||
| } | ||
| } | ||
| &__compare { | ||
| .block-title { | ||
| @include media-min($large) { | ||
| display: flex; | ||
| gap: 64px; | ||
| .desc { | ||
| width: 100%; | ||
| } | ||
| > div, | ||
| h4 { | ||
| flex: 1; | ||
| } | ||
| } | ||
| h4 { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
| .table { | ||
| overflow: hidden; | ||
| overflow-x: auto; | ||
| display: flex; | ||
| .row { | ||
| color: #fff; | ||
| flex: 1; | ||
| min-width: 140px; | ||
| div { | ||
| height: 64px; | ||
| display: flex; | ||
| align-items: center; | ||
| font-size: 16px; | ||
| font-weight: 500; | ||
| line-height: 22px; | ||
| text-align: center; | ||
| justify-content: center; | ||
| padding: 20px 5px; | ||
| background: #000; | ||
| &:nth-of-type(even) { | ||
| background: #07121a; | ||
| } | ||
| &:first-child { | ||
| height: 68px; | ||
| } | ||
| } | ||
| &:first-child { | ||
| flex: 1.8; | ||
| position: sticky; | ||
| left: 0; | ||
| z-index: 1; | ||
| div { | ||
| font-size: 20px; | ||
| font-weight: 500; | ||
| line-height: 22px; | ||
| text-align: left; | ||
| justify-content: flex-start; | ||
| } | ||
| } | ||
| &:last-child { | ||
| border-radius: 6px; | ||
| border: 2px solid transparent; | ||
| overflow: hidden; | ||
| position: relative; | ||
| div { | ||
| background: rgba(1, 84, 87); | ||
| &:nth-of-type(even) { | ||
| background: #004043; | ||
| } | ||
| &::after { | ||
| content: ""; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 2px; | ||
| border: 2px solid; | ||
| border-image: linear-gradient(180deg, #18ffc9 0%, #22a62a 100%) 1; | ||
| } | ||
| } | ||
| } | ||
| .line { | ||
| position: relative; | ||
| &:after { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 10px; | ||
| height: 1px; | ||
| background: #414b52; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .table-tip { | ||
| color: #a2adb9; | ||
| font-size: 16px; | ||
| font-weight: 300; | ||
| line-height: 22px; | ||
| text-align: right; | ||
| margin-top: 20px; | ||
| @include media-min($medium) { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
| &__customers { | ||
| background: linear-gradient(358.26deg, #ffffff 3.54%, #dde2e6 100.25%); | ||
| .cards { | ||
| --num-cols: 1; | ||
|
|
||
| display: grid; | ||
| grid-template-columns: repeat(var(--num-cols), 1fr); | ||
| gap: var(--grid-column-gutter); | ||
|
|
||
| @include media-min($medium) { | ||
| --num-cols: 2; | ||
| } | ||
|
|
||
| @include media-min($large) { | ||
| --num-cols: 3; | ||
| } | ||
| } | ||
| .card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| padding: 3rem 3.2rem 3.2rem; | ||
| text-decoration: none; | ||
| border: 1px solid var(--card-border-color); | ||
| border-radius: var(--card-border-radius); | ||
| transition: all var(--default-transition-params); | ||
| cursor: pointer; | ||
| &-content { | ||
| flex: 1; | ||
| margin-bottom: 30px; | ||
| } | ||
| img { | ||
| margin-bottom: 48px; | ||
| height: 43px; | ||
| width: auto; | ||
| } | ||
| p { | ||
| font-size: 16px; | ||
| font-weight: 300; | ||
| line-height: 24px; | ||
| } | ||
| &:hover { | ||
| box-shadow: var(--card-box-shadow); | ||
| transform: var(--card-transform); | ||
| } | ||
| } | ||
| } | ||
| } |
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,113 +1,101 @@ | ||
| import { loadEmblaCarousel } from "../util/load-dependencies"; | ||
| import { enableNavButtons } from "../util/embla/util"; | ||
| import EmblaPagination from "../util/embla/pagination"; | ||
| import SiteEvents, { SiteEventNames } from "../util/site-events"; | ||
| import EmblaAutoplay, { stopAutoplayOnHover } from "../util/embla/autoplay"; | ||
| import ClassNames from "embla-carousel-class-names"; | ||
| import { loadEmblaCarousel } from '../util/load-dependencies'; | ||
| import { enableNavButtons } from '../util/embla/util'; | ||
| import EmblaPagination from '../util/embla/pagination'; | ||
| import SiteEvents, { SiteEventNames } from '../util/site-events'; | ||
| import EmblaAutoplay, { stopAutoplayOnHover } from '../util/embla/autoplay'; | ||
|
|
||
| class BlockCarousel { | ||
| constructor(el) { | ||
| this.el = el; | ||
| this.emblaInitialized = false; | ||
|
|
||
| this.initEmbla(); | ||
| } | ||
|
|
||
| async initEmbla() { | ||
| // skip the initialization if the initilialized flag has already been set | ||
| if (this.emblaInitialized) { | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| const EmblaCarousel = await loadEmblaCarousel(); | ||
| const emblaRootEl = this.el.querySelector(".embla-instance"); | ||
|
|
||
| if (!emblaRootEl) { | ||
| return; | ||
| } | ||
|
|
||
| const emblaEl = emblaRootEl.querySelector(".embla"); | ||
| const btnPrevEl = Array.from( | ||
| this.el.querySelectorAll(".embla__nav-button--prev") | ||
| ); | ||
| const btnNextEl = Array.from( | ||
| this.el.querySelectorAll(".embla__nav-button--next") | ||
| ); | ||
| const paginationEl = this.el.querySelector(".embla__pagination"); | ||
|
|
||
| const transitionSpeed = emblaRootEl | ||
| ? parseInt(emblaRootEl.getAttribute("data-transition-speed") || 10, 10) | ||
| : 10; | ||
|
|
||
| const autoplayEnabled = emblaRootEl | ||
| ? parseInt(emblaRootEl.getAttribute("data-autoplay-enabled") || 1, 10) | ||
| : 1; | ||
|
|
||
| const autoplaySpeed = emblaRootEl | ||
| ? parseInt(emblaRootEl.getAttribute("data-autoplay-speed") || 4000, 10) | ||
| : 4000; | ||
|
|
||
| const instance = { | ||
| embla: EmblaCarousel( | ||
| emblaEl, | ||
| { | ||
| loop: autoplayEnabled, | ||
| speed: transitionSpeed, | ||
| containScroll: "keepSnaps", | ||
| draggable: false, | ||
| }, | ||
| [ClassNames()] | ||
| ), | ||
| pagination: null, | ||
| autoplay: autoplayEnabled, | ||
| }; | ||
|
|
||
| if (instance.embla) { | ||
| instance.embla.on("init", (a, b, c) => { | ||
| SiteEvents.publish(SiteEventNames.IMAGEBUDDY_TRIGGER_UPDATE); | ||
| this.setBackgroundColor(); | ||
| }); | ||
|
|
||
| instance.embla.on("select", (a, b, c) => { | ||
| this.setBackgroundColor(); | ||
| }); | ||
|
|
||
| if (btnPrevEl && btnNextEl) { | ||
| enableNavButtons(instance.embla, btnPrevEl, btnNextEl); | ||
| } | ||
|
|
||
| if (paginationEl) { | ||
| instance.pagination = new EmblaPagination( | ||
| instance.embla, | ||
| paginationEl, | ||
| { | ||
| buttonClassName: "embla__pagination-button", | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| if (autoplayEnabled) { | ||
| instance.autoplay = new EmblaAutoplay(instance.embla, autoplaySpeed); | ||
|
|
||
| stopAutoplayOnHover(emblaRootEl, instance.autoplay, 2000); | ||
| } | ||
| } | ||
|
|
||
| this.emblaInitialized = true; | ||
| } catch (err) { | ||
| console.error("Embla Carousel dynamic import failed", err); | ||
| } | ||
| } | ||
|
|
||
| setBackgroundColor() { | ||
| const color = this.el | ||
| .querySelector(".is-snapped") | ||
| .getAttribute("data-color"); | ||
| if (color) { | ||
| this.el.style.backgroundColor = color; | ||
| } | ||
| } | ||
| constructor(el) { | ||
| this.el = el; | ||
| this.emblaInitialized = false; | ||
|
|
||
| this.initEmbla(); | ||
| } | ||
|
|
||
| async initEmbla() { | ||
| // skip the initialization if the initilialized flag has already been set | ||
| if (this.emblaInitialized) { | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| const EmblaCarousel = await loadEmblaCarousel(); | ||
| const emblaRootEl = this.el.querySelector('.embla-instance'); | ||
|
|
||
| if (!emblaRootEl) { | ||
| return; | ||
| } | ||
|
|
||
| const emblaEl = emblaRootEl.querySelector('.embla'); | ||
| const emblaSlideEl = Array.from(this.el.querySelectorAll('.embla__slide')); | ||
| const btnPrevEl = Array.from(this.el.querySelectorAll('.embla__nav-button--prev')); | ||
| const btnNextEl = Array.from(this.el.querySelectorAll('.embla__nav-button--next')); | ||
| const paginationEl = this.el.querySelector('.embla__pagination'); | ||
|
|
||
| const transitionSpeed = emblaRootEl | ||
| ? parseInt(emblaRootEl.getAttribute('data-transition-speed') || 10, 10) | ||
| : 10; | ||
|
|
||
| const autoplayEnabled = emblaRootEl | ||
| ? parseInt(emblaRootEl.getAttribute('data-autoplay-enabled') || 1, 10) | ||
| : 1; | ||
|
|
||
| const autoplaySpeed = emblaRootEl | ||
| ? parseInt(emblaRootEl.getAttribute('data-autoplay-speed') || 4000, 10) | ||
| : 4000; | ||
|
|
||
| const loop = emblaSlideEl.length > 2 ? autoplayEnabled : false; | ||
|
|
||
| const instance = { | ||
| embla: EmblaCarousel(emblaEl, { | ||
| loop, | ||
| speed: transitionSpeed, | ||
| containScroll: 'keepSnaps', | ||
| draggable: false | ||
| }), | ||
| pagination: null, | ||
| autoplay: autoplayEnabled | ||
| }; | ||
|
|
||
| if (instance.embla) { | ||
| instance.embla.on('init', () => { | ||
| SiteEvents.publish(SiteEventNames.IMAGEBUDDY_TRIGGER_UPDATE); | ||
| this.setBackgroundColor(); | ||
| }); | ||
|
|
||
| instance.embla.on('select', () => { | ||
| this.setBackgroundColor(); | ||
| }); | ||
|
|
||
| if (btnPrevEl && btnNextEl) { | ||
| enableNavButtons(instance.embla, btnPrevEl, btnNextEl); | ||
| } | ||
|
|
||
| if (paginationEl) { | ||
| instance.pagination = new EmblaPagination(instance.embla, paginationEl, { | ||
| buttonClassName: 'embla__pagination-button' | ||
| }); | ||
| } | ||
|
|
||
| if (autoplayEnabled) { | ||
| instance.autoplay = new EmblaAutoplay(instance.embla, autoplaySpeed); | ||
|
|
||
| stopAutoplayOnHover(emblaRootEl, instance.autoplay, 2000); | ||
| } | ||
| } | ||
|
|
||
| this.emblaInitialized = true; | ||
| } catch (err) { | ||
| console.error('Embla Carousel dynamic import failed', err); | ||
| } | ||
| } | ||
|
|
||
| setBackgroundColor() { | ||
| const color = this.el.querySelector('.is-selected').getAttribute('data-color'); | ||
| if (color) { | ||
| this.el.style.backgroundColor = color; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default BlockCarousel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <?php | ||
| wp_redirect(get_post_type_archive_link(PingCAP\Constants\CPT::SLIDES)); | ||
| exit; |