visortelle commented on code in PR #789:
URL: https://github.com/apache/pulsar-site/pull/789#discussion_r1488464371
##########
src/components/pages/FeaturesPage/FeaturesPage.module.css:
##########
@@ -0,0 +1,494 @@
+.FeaturesPage {
+ position: relative;
+ background-color: #fff;
+ }
+
+ .Cards {
+ margin: 0 auto;
+ width: calc(100% - 1rem);
+ max-width: var(--max-content-width);
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .Intro {
+ padding: 10rem 0;
+ line-height: 3rem;
+ }
+
+ .IntroTextA,
+ .IntroTextB {
+ font-size: 2.5rem;
+ font-weight: 400;
+ margin: 0;
+ max-width: 35rem;
+ }
+
+ .IntroTextA{
+ color: var(--primary-0);
+ }
+
+ .IntroTextC {
+ font-size: 1.5rem;
+ line-height: 1.85rem;
+ font-weight: 400;
+ margin: 1rem 0 0 0;
+ max-width: 42rem;
+ }
+
+ /* Cards */
+ .SmallText {
+ font-size: 1.125rem;
+ }
+
+ .RapidHorizontalScalabilityCard {
+ background: url(./images/rapid-horizontal-scalability.svg),
var(--orange-4);
+ background-repeat: no-repeat;
+ background-size: 74%;
+ background-position: 1.5rem 1.5rem;
+ }
+
+ .RapidHorizontalScalabilityCardMainContent {
+ padding-top: 74vw;
+ margin-bottom: 3.4rem;
+ }
+ @media(min-width: 1000px){
+ .RapidHorizontalScalabilityCardMainContent {
+ padding-top: 0;
+ }
+ }
+
+
+ .LowLatencyCard {
+ background: url(./images/low-latency.svg), var(--yellow-5);
+ background-repeat: no-repeat;
+ background-size: calc(100% - 1.5rem);
+ background-position: left 1.5rem top 70vh;
+ }
+
+ .LowLatencyCardMainContent {
+ margin-bottom: 10rem;
+ }
+
+ .LowLatencyCardUnderline{
+ text-decoration: underline;
+ }
+
+ .LowLatencyCardColumns {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .LowLatencyCardSingleColumn {
+ width: calc(100% - 1rem);
+ margin-bottom: 1.5rem;
+ }
+
+ @media(min-width:700px){
+ .LowLatencyCard {
+ background: url(./images/low-latency.svg), var(--yellow-5);
+ background-repeat: no-repeat;
+ background-size: calc(100% - 1.5rem);
+ background-position: left 1.5rem top 25vh;
+ }
+ }
+
+ @media(min-width:1000px){
+ .LowLatencyCard {
+ background: url(./images/low-latency-desktop.svg), var(--yellow-5);
+ background-repeat: no-repeat;
+ background-size: 175px auto;
+ background-position: right 20% top 0;
+ }
+ .LowLatencyCardMainContent {
+ margin-bottom: 0;
+ }
+ .LowLatencyCardColumns {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ .LowLatencyCardSingleColumn {
+ width: calc(33.333333% - 1rem);
+ }
+ }
+
+ .SupportManyTopicsCard {
+ background: url(./images/support-many-topics.svg), var(--teal-6);
+ background-repeat: no-repeat;
+ background-size: 90%;
+ background-position: center top 1.5rem;
+ }
+
+ .SupportManyTopicsCardMainContent{
+ padding-top: 70vw;
+ }
+
+ @media(min-width:1000px){
+ .SupportManyTopicsCard {
+ background-size: 42rem;
+ background-position: right 1.5rem top 1.5rem;
+ }
+
+ .SupportManyTopicsCardMainContent{
+ padding-top: 10rem;
+ }
+ }
+
+ .MultiTenancyCard {
+ background: url(./images/multi-tenancy.svg), var(--gray-6);
+ background-repeat: no-repeat;
+ background-size: 95%;
+ background-position: left 0 top 22rem;
+ }
+
+ .MultiTenancyCardFirstParagraph{
+ padding-bottom: 12rem;
+ }
+
+ @media(min-width:1000px){
+ .MultiTenancyCard {
+ background-position: left 0 top 1.5rem;
+ }
+ .MultiTenancyCardFirstParagraph{
+ padding-bottom: unset;
+ }
+ .MultiTenancyCardHeader {
+ margin-bottom: unset;
+ margin-top: 23rem;
+ }
+ }
+
+ .LoadBalancingCard {
+ background: url(./images//load-balancing-mobile.svg), var(--gray-6);
+ background-repeat: no-repeat;
+ background-size: 85%;
+ background-position: center top 20rem;
+ }
+
+ .LoadBalancingCardMainContent {
+ margin-bottom: 15rem;
+ }
+
+ @media(min-width:1000px){
+ .LoadBalancingCard {
+ background: url(./images//load-balancing.svg), var(--gray-6);
+ background-repeat: no-repeat;
+ background-size: 45%;
+ background-position: right 1.5rem top 1.5rem;
+ }
+ .LoadBalancingCardMainContent {
+ margin-bottom: 5rem;
+ }
+ }
+
+ .K8sReadyCard {
+ background: url(./images/k8s.svg), var(--primary-4);
+ background-repeat: no-repeat;
+ background-size: 150%;
+ background-position: left -10% top 3rem;
+ }
+
+ @media(min-width:1000px){
+ .K8sReadyCard {
+ background-size: 45%;
+ background-position: right 1.5rem top 1.5rem;
+ }
+ .K8sReadyCardMore{
+ width: 50%;
+ }
+ }
+
+ .GeoReplicationCard {
+ background: url(./images/georeplication.svg), var(--primary-5);
+ background-repeat: no-repeat;
+ background-size: 60%;
+ background-position: left 1.5rem top 26rem;
+ }
+
+ .GeoReplicationCardMain{
+ padding-bottom: 35vh;
+ }
+
+ .GeoReplicationCardColumns {
+ margin-top: 6rem;
+ }
+
+ @media(min-width:1000px){
+ .GeoReplicationCard {
+ background-size: 20%;
+ background-position: right 1.5rem top 1.5rem;
+ }
+ .GeoReplicationCardMain{
+ padding-bottom: unset;
+ }
+ .GeoReplicationCardColumns > div {
+ width: 50%;
+ }
+ }
+
+ .LanguagesCard {
+ background: url(./images/languages.svg), var(--gray-6);
+ background-repeat: no-repeat;
+ background-size: 85%;
+ background-position: center top 15rem;
+ }
+
+ .LanguagesCardMain{
+ padding-bottom: 15rem;
+ }
+
+ @media(min-width:1000px){
+ .LanguagesCard {
+ background-size: 45%;
+ background-position: right 1.5rem top 1.5rem;
+ }
+ .LanguagesCardMain{
+ padding-bottom: 15rem;
+ }
+ .LanguagesCardMore{
+ width: 50%;
+ }
+ }
+
+ .TieredStorageCard {
+ background: var(--green-3);
+ }
+
+ .SchemaRegistryCard {
+ background: var(--green-4);
+ }
+
+ .AccessControlCard {
+ background: var(--green-5);
+ }
+
+ .MessagePersistencyCard {
+ background: var(--green-6);
+ }
+
+ .SeparateComputeFromStorageCard {
+ background: url(./images/spearate-compute-from-storage.svg), var(--gray-6);
+ background-repeat: no-repeat;
+ background-size: 85%;
+ background-position: center top 25rem;
+ }
+
+ .SeparateComputeFromStorageCardMain{
+ margin-bottom: 10rem;
+ }
+
+ @media(min-width:1000px){
+ .SeparateComputeFromStorageCard {
+ background-size: 35%;
+ background-position: right 1.5rem top 3rem;
+ }
+ .SeparateComputeFromStorageCardMain{
+ margin-bottom: unset;
+ }
+ }
+
+ .AdditionalProtocolsCard {
+ background: var(--yellow-5);
+ }
+
+ .ServerlessFunctionsCard {
+ background: url(./images/serverless-functions-mobile.svg), var(--green-4);
+ background-repeat: no-repeat;
+ background-size: 125%;
+ background-position: left 1.5rem top 1.5rem;
+ }
+
+ .ServerlessFunctionsCardMainContent {
+ margin-top: 20rem;
+ }
+
+ @media(min-width:1000px){
+ .ServerlessFunctionsCard {
+ background: url(./images/serverless-functions.svg), var(--green-4);
+ background-repeat: no-repeat;
+ background-size: 40%;
+ background-position: left 1.5rem top 1.5rem;
+ }
+ .ServerlessFunctionsCardMainContent {
+ margin-bottom: 8rem;
+ margin-top: unset;
+ }
+ }
+
+ .ConnectorsCard {
+ background: url(./images/connectors.svg), var(--green-5);
+ background-repeat: no-repeat;
+ background-size: 85%;
+ background-position: center top 1.5rem;
+ }
+
+ .ConnectorsCardMainContent {
+ margin-top: 24rem;
+ }
+
+ @media(min-width:1000px){
+ .ConnectorsCard {
+ background-size: 20%;
+ background-position: right 1.5rem top 1.5rem;
+ }
+
+ .ConnectorsCardMainContent {
+ margin-top: unset;
+ margin-bottom: 2.5rem;
+ }
+ }
+
+ .SupportLargeMsgsCard {
+ background: url(./images/support-large-msgs.svg), var(--yellow-5);
+ background-repeat: no-repeat;
+ background-size: 200%;
+ background-position: left 80% top 10rem;
+ }
+
+ .SupportLargeMsgsCardMain {
+ margin-bottom: 5rem;
+ }
+
+ @media(min-width:1000px){
+ .SupportLargeMsgsCard {
+ background-size: 100%;
+ background-position: left top 1.5rem;
+ }
+
+ .SupportLargeMsgsCardMain {
+ margin-bottom: 5rem;
+ }
+ }
+
+ .DelayedMsgCard {
+ background: url(./images/delayed-msg.svg), var(--yellow-5);
+ background-repeat: no-repeat;
+ background-size: 200%;
+ background-position: center top 18rem;
+ }
+
+ .DelayedMsgCardMain {
+ margin-bottom: 7rem;
+ }
+
+ @media(min-width:1000px){
+ .DelayedMsgCard {
+ background-size: 100%;
+ background-position: left top 12rem;
+ }
+
+ .DelayedMsgCardMain {
+ margin-bottom: 10rem;
+ }
+ }
+
+ .LargeConnectedCard {
+ background: var(--orange-4);
+ }
+ .Easy2OperateCard{
+ background: var(--orange-5);
+ }
+ .EasyCard{
+ background: var(--orange-6);
+ }
+
+ .MoreFeats {
+ width: 100%;
+ background: var(--gray-6);
+ margin-top: 3rem;
+ }
+ .MoreFeats > div{
+ margin: 0 auto;
+ width: calc(100% - 1rem);
+ max-width: var(--max-content-width);
+ padding: 3rem 0;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .MoreFeats > div > div{
+ width: 100%;
+ font-size: 1.375rem;
+ }
+ .MoreFeats > div > div > div{
Review Comment:
CSS selectors with a single nesting level are acceptable in most cases,
although undesired.
But 3-level nested selectors are too easy to accidentally break while making
any further changes on the page.
Can we use specific classes for these elements?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
