Skip to content

Commit

Permalink
refactor(groups): rearrange some CSS for better semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
Sabe Jones committed Aug 30, 2024
1 parent fd74326 commit aed7ff5
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 108 deletions.
12 changes: 12 additions & 0 deletions website/client/src/assets/scss/colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,15 @@ $gold-color: #FFA624;
$hourglass-color: #2995CD;

$purple-task: #925cf3;

.gray-200 {
color: $gray-200 !important;
}

.purple-300 {
color: $purple-300 !important;
}

.white {
color: $white !important;
}
202 changes: 94 additions & 108 deletions website/client/src/components/static/groupPlans.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@
{{ $t('getStarted') }}
</button>
</div>
<small>{{ $t('billedMonthly') }}</small>
<p class="gray-200">{{ $t('billedMonthly') }}</p>
</div>
<div class="top-right"></div>
<div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
<div class="ml-auto my-auto w-448 text-left">
<h2 class="mt-0">{{ $t('teamBasedTasksList') }}</h2>
<small>{{ $t('teamBasedTasksListDesc') }}</small>
<p>{{ $t('teamBasedTasksListDesc') }}</p>
</div>
<div class="mr-auto my-auto">
<img src="../../assets/images/group-plans-static/[email protected]">
Expand All @@ -48,7 +48,7 @@
</div>
<div class="mr-auto my-auto w-448 text-left">
<h2 class="mt-0">{{ $t('groupManagementControls') }}</h2>
<small>{{ $t('groupManagementControlsDesc') }}</small>
<p>{{ $t('groupManagementControlsDesc') }}</p>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
Expand All @@ -57,15 +57,15 @@
src="../../assets/images/group-plans-static/[email protected]"
>
<h2 class="mt-3">{{ $t('inGameBenefits') }}</h2>
<small class="final-paragraph mx-auto">{{ $t('inGameBenefitsDesc') }}</small>
<p class="final-paragraph mx-auto">{{ $t('inGameBenefitsDesc') }}</p>
</div>
<div class="text-center mb-128">
<div class="bot-left"></div>
<div class="col-6 offset-3">
<h2 class="purple mt-0 mb-4" v-if="upgradingGroup._id">
<h2 class="purple-300 mt-0 mb-4" v-if="upgradingGroup._id">
{{ $t('readyToUpgrade') }}
</h2>
<h2 v-else class="purple mt-0 mb-4">
<h2 v-else class="purple-300 mt-0 mb-4">
{{ $t('createGroupToday') }}
</h2>
<div class="pricing mb-4">
Expand All @@ -83,7 +83,7 @@
{{ $t('getStarted') }}
</button>
</div>
<small>{{ $t('billedMonthly') }}</small>
<p class="gray-200">{{ $t('billedMonthly') }}</p>
</div>
<div class="bot-right"></div>
</div>
Expand Down Expand Up @@ -115,7 +115,7 @@
:class="{ static: isStaticPage }"
>
<h2 class="white">{{ $t('interestedLearningMore') }}</h2>
<small class="purple-600" v-html="$t('checkGroupPlanFAQ')"></small>
<p class="purple-600" v-html="$t('checkGroupPlanFAQ')"></p>
</div>
</div>
</template>
Expand All @@ -135,84 +135,13 @@
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import '~@/assets/scss/colors.scss';
// General typography tweaks
h1, h2 {
font-family: 'Varela Round', sans-serif;
font-weight: 400;
}
.bottom-banner {
height: 152px;
background-image: linear-gradient(rgba(97, 51, 180), rgba(79, 42, 147));
padding-top: 32px;
width: 100vw;
&.static {
padding-top: 16px;
}
&:not(.static) {
margin-left: -12px;
}
}
.gap-72 {
gap: 72px;
}
.mb-100 {
margin-bottom: 100px !important;
}
.mb-128 {
margin-bottom: 128px !important;
}
.w-448 {
width: 448px;
}
.final-paragraph {
width: 684px;
margin-bottom: 11rem;
}
.party {
width: 386px;
margin-top: 100px;
}
.top-left, .top-right, .bot-left, .bot-right {
width: 246px;
height: 340px;
background-size: contain;
position: absolute;
background-repeat: no-repeat;
}
.top-left {
background-image: url('../../assets/images/group-plans-static/[email protected]');
top: 48px;
left: 48px;
}
.top-right {
background-image: url('../../assets/images/group-plans-static/[email protected]');
right: 48px;
top: 48px;
}
.bot-left {
background-image: url('../../assets/images/group-plans-static/[email protected]');
left: 48px;
bottom: 48px;
}
.bot-right {
background-image: url('../../assets/images/group-plans-static/[email protected]');
right: 48px;
bottom: 48px;
}
h1 {
color: $purple-300;
font-size: 48px;
Expand All @@ -225,35 +154,27 @@
line-height: 40px;
}
.purple {
color: $purple-300;
}
p {
font-size: 20px;
color: $gray-100;
font-size: 20px;
line-height: 28px;
}
.group-plan-page {
max-width: 1440px;
position: relative;
// Major layout elements
.bottom-banner {
height: 152px;
background-image: linear-gradient(rgba(97, 51, 180), rgba(79, 42, 147));
padding-top: 32px;
width: 100vw;
&.static {
margin-top: 56px;
padding-top: 16px;
}
}
.row {
margin-top: 10em;
margin-bottom: 10em;
}
.text-col {
margin-top: 3em;
}
.big-gem {
width: 138.5px;
&:not(.static) {
margin-left: -12px;
}
}
.cta-button {
Expand All @@ -271,6 +192,20 @@
}
}
.final-paragraph {
width: 684px;
margin-bottom: 11rem;
}
.group-plan-page {
max-width: 1440px;
position: relative;
&.static {
margin-top: 56px;
}
}
.pricing {
color: $gray-100;
font-size: 24px;
Expand All @@ -289,14 +224,65 @@
}
}
small {
font-size: 20px;
line-height: 28px;
color: $gray-200;
// One-off spacing adjustments
.gap-72 {
gap: 72px;
}
.mb-100 {
margin-bottom: 100px !important;
}
.white {
color: $white;
.mb-128 {
margin-bottom: 128px !important;
}
.w-448 {
width: 448px;
}
// Images
.big-gem {
width: 138.5px;
}
.bot-left, .bot-right, .top-left, .top-right {
width: 246px;
height: 340px;
background-size: contain;
position: absolute;
background-repeat: no-repeat;
}
.bot-left {
background-image: url('../../assets/images/group-plans-static/[email protected]');
left: 48px;
bottom: 48px;
}
.bot-right {
background-image: url('../../assets/images/group-plans-static/[email protected]');
right: 48px;
bottom: 48px;
}
.party {
width: 386px;
margin-top: 100px;
}
.top-left {
background-image: url('../../assets/images/group-plans-static/[email protected]');
top: 48px;
left: 48px;
}
.top-right {
background-image: url('../../assets/images/group-plans-static/[email protected]');
right: 48px;
top: 48px;
}
</style>

Expand Down

0 comments on commit aed7ff5

Please sign in to comment.