Unverified Commit dfd665fb authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3225188 by mherchel, dipakmdhrm, Gauravmahlawat, jwitkowski79: Olivero:... 

Issue #3225188 by mherchel, dipakmdhrm, Gauravmahlawat, jwitkowski79: Olivero: Ensure proper visual hierarchy between headings

(cherry picked from commit 45d92a93)
parent 9c38b992

core/themes/olivero/css/base/base.css

+48 −15
Original line number Diff line number Diff line
@@ -72,52 +72,85 @@ audio { 
}



h1 {

  margin-top: 1.125rem;

  margin-bottom: 1.125rem;

  letter-spacing: -0.01em;

  color: #0d1214;

  font-size: 1.5rem;

  font-weight: bold;

  line-height: 1.6875rem

  font-size: 1.75rem;

  line-height: 2.25rem

}



@media (min-width: 43.75rem) {



h1 {

    margin-top: 2.25rem;

    margin-bottom: 2.25rem;

    font-size: 3.75rem;

    line-height: 4.5rem

}

  }



h2 {

  margin-top: 1.125rem;

  margin-bottom: 1.125rem;

  letter-spacing: -0.01em;

  color: #0d1214;

  font-size: 1.5rem;

  font-weight: bold;

  line-height: 1.6875rem

  line-height: 2.25rem

}



@media (min-width: 43.75rem) {



h2 {

    margin-top: 2.25rem;

    margin-bottom: 2.25rem;

    font-size: 2.25rem;

    line-height: 3.375rem

}

  }



h3 {

  font-size: 1.25rem;

  line-height: 1.6875rem

}



@media (min-width: 43.75rem) {



h3 {

    font-size: 1.5rem;

    line-height: 2.25rem

}

  }



h4 {

  font-size: 1.125rem;

  line-height: 1.6875rem;

}



h5 {

  font-size: 1rem;

  line-height: 1.6875rem;

}



h6 {

  font-size: 0.875rem;

  line-height: 1.125rem;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin-top: 1.125rem;

  margin-bottom: 1.125rem;

  color: #0d1214;

  font-family: "metropolis", sans-serif;

  font-weight: bold

}



@media (min-width: 43.75rem) {



h1,

h2,

h3,

h4,

h5,

h6 {

    margin-top: 2.25rem;

    margin-bottom: 2.25rem

}

  }



[dir="ltr"] ul {

core/themes/olivero/css/base/base.pcss.css

+35 −11
Original line number Diff line number Diff line
@@ -67,42 +67,66 @@ audio { 
}



h1 {

  margin-block: var(--sp);

  letter-spacing: -0.01em;

  color: var(--color--gray-0);

  font-size: 24px;

  font-weight: bold;

  line-height: var(--sp1-5);

  font-size: 28px;

  line-height: var(--sp2);



  @media (--md) {

    margin-block: var(--sp2);

    font-size: 60px;

    line-height: var(--sp4);

  }

}



h2 {

  margin-block: var(--sp);

  letter-spacing: -0.01em;

  color: var(--color--gray-0);

  font-size: 24px;

  font-weight: bold;

  line-height: var(--sp1-5);

  line-height: var(--sp2);



  @media (--md) {

    margin-block: var(--sp2);

    font-size: 36px;

    line-height: var(--sp3);

  }

}



h3 {

  font-size: 20px;

  line-height: var(--sp1-5);



  @media (--md) {

    font-size: 24px;

    line-height: var(--sp2);

  }

}



h4 {

  font-size: 18px;

  line-height: var(--sp1-5);

}



h5 {

  font-size: 16px;

  line-height: var(--sp1-5);

}



h6 {

  font-size: 14px;

  line-height: var(--sp);

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin-block: var(--sp);

  color: var(--color--gray-0);

  font-family: var(--font-sans);

  font-weight: bold;



  @media (--md) {

    margin-block: var(--sp2);

  }

}



ul {

core/themes/olivero/css/components/text-content.css

+0 −23
Original line number Diff line number Diff line
@@ -15,29 +15,6 @@ 
  color: #313637;

  font-family: "Lora", "georgia", serif;

  line-height: 1.6875rem

}



.text-content h2, .cke_editable h2 {

    margin-top: 2.25rem;

    margin-bottom: 1.6875rem;

    letter-spacing: 0.12em;

    color: #000;

    font-size: 1rem;

    line-height: 1.6875rem

  }



@media (min-width: 43.75rem) {



.text-content h2, .cke_editable h2 {

      margin-top: 3.375rem;

      margin-bottom: 2.25rem;

      letter-spacing: 0.09em;

      font-size: 1.3125rem

  }

    }



.text-content,

.cke_editable {



  /*

    @todo

core/themes/olivero/css/components/text-content.pcss.css

+0 −16
Original line number Diff line number Diff line
@@ -11,22 +11,6 @@ 
  font-family: var(--font-serif);

  line-height: var(--sp1-5);



  & h2 {

    margin-block-start: var(--sp2);

    margin-block-end: var(--sp1-5);

    letter-spacing: 0.12em;

    color: var(--color--black);

    font-size: 16px;

    line-height: var(--sp1-5);



    @media (--md) {

      margin-block-start: var(--sp3);

      margin-block-end: var(--sp2);

      letter-spacing: 0.09em;

      font-size: 21px;

    }

  }



  /*

    @todo