Skip to content

Commit

Permalink
update styles and markup for themed panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@poojagunturu96
poojagunturu96 committed Aug 14, 2024
1 parent 5527c5b commit 2741399
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 35 deletions.
122 changes: 100 additions & 22 deletions src/scss/components/_themed-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,72 +15,150 @@
}
}

.themed-panel__media {
.themed-panel__title {
font-size: $typescale-6;
font-weight: $font-weight-bold;
color: $white;
padding: $spacing-3;

@include breakpoint(md){
font-size: $typescale-9;
font-weight: $font-weight-normal;
}

@include breakpoint(lg) {
@include h1;
padding: $spacing-3 $spacing-5;
}
}

.themed-panel__figure {
img {
@include breakpoint(xl) {
// @include absolute-fill;
object-fit: cover;
font-family: 'object-fit: cover;';
}
}
}

.themed-panel__title {
color: $white;
@include h1;
padding: $spacing-3 $spacing-5;
}

.themed-panel__secondary {
display: flex;
// position: relative;
padding: $spacing-5 0;
flex-direction: column;
padding-bottom: $spacing-5;
}

.themed-panel__article-background {
.themed-panel__main-article {
display: block;
background: $navy;
margin-left: $spacing-3;
margin-right: $spacing-3;
margin-bottom: $spacing-4;

@include breakpoint(md) {
margin-bottom: $spacing-5;
}

@include breakpoint(lg) {
margin-left: $spacing-5;
margin-right: $spacing-5;
}

.themed-panel__article {
margin-top: -$spacing-7;
}
}

.themed-panel__article {
position: absolute;
background: $white;
padding: $spacing-4;
padding: $spacing-2;
padding-bottom: $spacing-4;

@include breakpoint(md) {
padding-top: $spacing-3;
padding: $spacing-4;
}

&, .themed-panel__heading {
color: $navy;
@include breakpoint(lg) {
padding: $spacing-4;
}

.themed-panel__text {
color: $black;
}
}

.themed-panel__subarticle {
padding: 0 $spacing-5;
.themed-panel__subarticles {
display: flex;
flex-direction: column;

@include breakpoint(md) {
flex-direction: row;
}
}

.themed-panel__subarticle {
&:not(:last-child) {
border-right: 1px solid rgba($white, 0.3);
width: calc(100% - #{$spacing-5});
padding: 0;
padding-bottom: $spacing-5;
margin: 0 $spacing-3;
margin-bottom: $spacing-5;
border-bottom: 1px solid rgba($white, 0.3);

@include breakpoint(md) {
width: initial;
margin: 0;
padding-bottom: 0;
padding-left: $spacing-3;
padding-right: $spacing-3;
border-bottom: 0;
border-right: 1px solid rgba($white, 0.3);
}

@include breakpoint(lg) {
padding-left: $spacing-5;
padding-right: $spacing-5;
}
}
}

.themed-panel__heading {
font-weight: $font-weight-bold;
color: $white;
margin-bottom: $spacing-2;
margin-bottom: $spacing-1;

@include breakpoint(lg) {
margin-bottom: $spacing-2;
}

&.h2 {
font-weight: $font-weight-bold;

@include breakpoint(lg) {
font-weight: $font-weight-normal;
}
}
}

.themed-panel__text {
color: $white;
font-size: $typescale-3;
margin-bottom: $spacing-4;
font-size: $typescale-3;

@include breakpoint(lg) {
font-size: $typescale-4;
}

.themed-panel__subarticle & {
font-size: $typescale-3;
}
}

.themed-panel__cta {
color: $white;
font-size: $typescale-2;
font-weight: $font-weight-semibold;
padding: $spacing-2;

&.button--light {
font-size: $typescale-2;
}
}
33 changes: 20 additions & 13 deletions src/templates/paragraphs/themed-panel.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,32 @@
</div>

<div class="themed-panel__secondary">
<div class="themed-panel__article-background">
<article class="offset-1 col-9 themed-panel__article" aria-labelledby="themed-panel-{{id}}-first">
<div class="themed-panel__main-article">
<article class="offset-lg-1 col-md-11 col-lg-9 themed-panel__article" aria-labelledby="themed-panel-{{id}}-first">
<h3 class="themed-panel__heading h2" id="themed-panel-{{id}}-first">
<a href="">Lorem ipsum dolor sit amet consectetur adipisicing</a>
</h3>
<p class="themed-panel__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit magnam dicta nihil reiciendis laboriosam, exercitationem harum numquam rem sint laudantium ducimus optio provident voluptate obcaecati reprehenderit voluptates illum dignissimos corrupti!</p>
<a href="button" class="themed-panel__cta">Learn more</a>
<a href="#" class="button button--primary themed-panel__cta">Learn more</a>
</article>
</div>
{% for item in 0..2 %}
<article class="themed-panel__subarticle" aria-labelledby="themed-panel-{{id}}-{{loop.index}}">
<h3 class="themed-panel__heading" id="themed-panel-{{id}}-{{loop.index}}">
<a href="" class="text-white">24/7 Support</a>
</h3>
<p class="themed-panel__text">Lorem ipsum dolor sit amet consectetur adipisicing ipsum dolor sit amet consectetur adipisicing elit.
</p>
<a href="" class="themed-panel__cta button button--light button--outline">Read more</a>
</article>
{% endfor %}
<div class="themed-panel__subarticles">
{% for item in 0..2 %}
<article class="col-auto col-md-4 themed-panel__subarticle" aria-labelledby="themed-panel-{{id}}-{{loop.index}}">
<h3 class="themed-panel__heading" id="themed-panel-{{id}}-{{loop.index}}">
<a href="" class="text-white">24/7 Support</a>
</h3>
<p class="themed-panel__text">
{% if random(1) %}
Lorem ipsum dolor sit amet consectetur adipisicing ipsum dolor sit amet consectetur adipisicing elit.
{% else %}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quo optio quia molestias ipsa debitis, accusamus tempore quaerat eveniet, perspiciatis, natus provident saepe ducimus placeat dignissimos nemo delectus pariatur nesciunt! Earum eveniet qui provident ad aliquam, assumenda reprehenderit fugit recusandae, est cum deleniti, dolore corrupti doloremque magni. Laboriosam accusantium natus rem adipisci.
{% endif %}
</p>
<a href="" class="button button--light button--outline themed-panel__cta">Read more</a>
</article>
{% endfor %}
</div>
</div>

</section>
Expand Down

0 comments on commit 2741399

Please sign in to comment.