mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-28 07:35:50 +00:00
adds lg version of community page
This commit is contained in:
akcodez
@@ -1,4 +1,14 @@
|
||||
.page-community {
|
||||
.icon-date {
|
||||
padding-right: 4px;
|
||||
content: url(../img/events/event-date.svg);
|
||||
}
|
||||
|
||||
.icon-location {
|
||||
padding-right: 4px;
|
||||
content: url(../img/events/event-location.svg);
|
||||
}
|
||||
|
||||
.builders-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -16,6 +26,10 @@
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
padding-top: 165px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.eyebrow-convo {
|
||||
@@ -51,6 +65,13 @@
|
||||
border-bottom: 1px solid #343437;
|
||||
}
|
||||
|
||||
#community-table td {
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
max-width: 65vw;
|
||||
|
||||
}
|
||||
|
||||
#community-table img {
|
||||
width: 52px;
|
||||
height: 29px;
|
||||
@@ -96,5 +117,606 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.xrpl-events-section {
|
||||
margin-top: 150px;
|
||||
padding: 50px 40px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
// Responsive Styles for Mobile
|
||||
@media screen and (max-width: 768px) {
|
||||
// Adjust this breakpoint value as needed
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
.header-div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: Work Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: Work Sans;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: start;
|
||||
margin-top: 1rem;
|
||||
font-family: Work Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
/* 140% */
|
||||
}
|
||||
|
||||
.view-all-events-btn {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.upcoming-event {
|
||||
text-align: start;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem 0;
|
||||
|
||||
.days-count {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-div {
|
||||
padding-top: 27px;
|
||||
}
|
||||
|
||||
.header {
|
||||
h6 {
|
||||
padding-left: 1.5px;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--black-black-0, #FFF);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: start;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--black-black-0, #FFF);
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
max-width: 444px;
|
||||
color: var(--black-black-10-gray-200, #E0E0E1);
|
||||
line-height: 32px;
|
||||
/* 133.333% */
|
||||
}
|
||||
|
||||
.view-all-events-btn {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.upcoming-event {
|
||||
margin-top: 2rem;
|
||||
|
||||
.upcoming-label {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
}
|
||||
|
||||
.days-count {
|
||||
font-size: 4rem; // Assuming a larger font for the days count. Adjust as needed.
|
||||
// Add additional styles if required
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
}
|
||||
|
||||
.event-details,
|
||||
.event-location {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.community-funding {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.funding-section {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
color: var(--black-black-0);
|
||||
}
|
||||
|
||||
.small-text {
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
font-family: Work Sans;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
/* 133.333% */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.funding-section h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 38px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.funding-section p {
|
||||
color: var(--black-black-20);
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stacked-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 54px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.community-funding {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.stacked-stats {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.funding-section,
|
||||
.stats {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
width: 950px;
|
||||
margin: 0 auto;
|
||||
margin-top: 106px;
|
||||
|
||||
.flex-align {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.center-image-wrapper {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
margin: 0 48px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#center-image {
|
||||
width: 100%;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
#left-image,
|
||||
#right-image {
|
||||
width: 15%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#prev-btn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#next-btn {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.event-info {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
color: #FFF;
|
||||
font-family: Work Sans;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.name {
|
||||
padding-bottom: 5px;
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
/* 150% */
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black-black-0: #FFF;
|
||||
--black-black-10: #F5F5F7;
|
||||
--black-black-30: #C1C1C2;
|
||||
}
|
||||
|
||||
.community-spotlight-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
margin-top: 100px;
|
||||
min-height: 562px;
|
||||
}
|
||||
|
||||
.community-spotlight {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 10px;
|
||||
/* for spacing */
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin-left: 70px;
|
||||
margin-right: 70px
|
||||
}
|
||||
|
||||
.project-card {
|
||||
height: 291px;
|
||||
position: absolute;
|
||||
width: 205px;
|
||||
background-color: #232325;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project-card.top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.project-card.bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 44%;
|
||||
/* adjust as per your design */
|
||||
background-color: rgb(44, 43, 43);
|
||||
/* placeholder */
|
||||
}
|
||||
|
||||
.spotlight-title,
|
||||
.project-title {
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
/* 100% */
|
||||
}
|
||||
|
||||
.spotlight-subtitle {
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
/* 100% */
|
||||
}
|
||||
|
||||
|
||||
.project-description {
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
/* 150% */
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: start;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.view-project {
|
||||
color: var(--blue-purple-blue-purple-50, #7919FF);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.community-spotlight-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.community-spotlight,
|
||||
.projects-wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: static;
|
||||
margin: 20px 0;
|
||||
/* Space between the cards */
|
||||
}
|
||||
}
|
||||
|
||||
.w-222 {
|
||||
width: 222px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottom-cards-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 48px;
|
||||
padding: 104px 64px;
|
||||
margin: 0 auto;
|
||||
|
||||
.com-card {
|
||||
padding: 36px;
|
||||
background: #232325;
|
||||
width: 352px;
|
||||
height: 442px;
|
||||
position: relative;
|
||||
|
||||
.top-left-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: url(../img/community/card-bg-1.png);
|
||||
}
|
||||
|
||||
.bottom-right-img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: url(../img/community/card-bg-2.png);
|
||||
}
|
||||
|
||||
.top-right-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: url(../img/community/card-bg-3.png);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.card-title {
|
||||
color: var(--black-black-0-white, #FFF);
|
||||
white-space: nowrap;
|
||||
/* Desktop/H6 */
|
||||
font-family: Work Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
/* 130% */
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
color: var(--black-black-0, #FFF);
|
||||
font-family: Work Sans;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
/* 133.333% */
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--black-black-20, #E0E0E1);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
/* 150% */
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.com-card-link {
|
||||
cursor: pointer;
|
||||
color: #7919FF;
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: url(../img/icons/arrow-right-purple.svg);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
-webkit-transition: transform 0.3s ease-out;
|
||||
-moz-transition: transform 0.3s ease-out;
|
||||
-ms-transition: transform 0.3s ease-out;
|
||||
-o-transition: transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
-webkit-transform: translateX(4px);
|
||||
-moz-transform: translateX(4px);
|
||||
-ms-transform: translateX(4px);
|
||||
-o-transform: translateX(4px);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query for mobile view */
|
||||
@media (max-width: 768px) {
|
||||
.bottom-cards-section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.bottom-cards-section .com-card {
|
||||
margin-bottom: 20px;
|
||||
/* Ensure that the card takes up space */
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Reset the image positions for mobile */
|
||||
.com-card .top-left-img,
|
||||
.com-card .bottom-right-img,
|
||||
.com-card .top-right-img {
|
||||
position: static;
|
||||
/* This removes the absolute positioning */
|
||||
display: block;
|
||||
width: 100%;
|
||||
/* Adjust this if you want the image to take up less width */
|
||||
margin-bottom: 15px;
|
||||
/* Add some space between the image and the card content */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user