<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nulla repellat quibusdam doloribus aliquam assumenda dolorem temporibus? Eveniet quod iure quibusdam vero nemo dolorum, veritatis delectus ratione accusamus corrupti vitae?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem dolores recusandae distinctio. Dignissimos nostrum velit reiciendis ipsum et! Doloribus, nobis molestias? Aspernatur architecto repudiandae delectus asperiores temporibus corporis officia cumque?</p>
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nulla repellat quibusdam doloribus aliquam assumenda dolorem temporibus? Eveniet quod iure quibusdam vero nemo dolorum, veritatis delectus ratione accusamus corrupti vitae?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem dolores recusandae distinctio. Dignissimos nostrum velit reiciendis ipsum et! Doloribus, nobis molestias? Aspernatur architecto repudiandae delectus asperiores temporibus corporis officia cumque?</p>
/* No context defined. */
:root {
--text-base-size: 1rem;
--text-base-line-height: 1.62;
--fonts-primary: 'Roboto', sans-serif;
@include breakpoint($regular) {
// Edited this variable from 1.25rem.
--text-base-size: 1rem;
}
}
@mixin big_lead {
font-size: 1.2rem;
font-weight: 300;
color: hsla(var(--base-hsl), .7);
@include breakpoint($large) {
font-size: 1.7rem;
line-height: 1.6;
}
}
@mixin h1 {
font-size: 2rem;
font-weight: 300;
color: hsla(var(--base-hsl), 1);
@include breakpoint($medium) { font-size: 1.7rem; }
@include breakpoint($large) { font-size: 3rem; }
}
@mixin h2 {
font-size: 1.3rem;
font-weight: 400;
color: hsla(var(--base-hsl), 1);
@include breakpoint($medium) { font-size: 1.5rem; }
@include breakpoint($large) { font-size: 2.2rem; }
}
@mixin h3 {
font-size: 1.1rem;
font-weight: 400;
color: hsla(var(--base-hsl), 1);
line-height: 1.3;
@include breakpoint($medium) { font-size: 1.2rem; }
@include breakpoint($large) { font-size: 1.7rem; }
}
@mixin h4 {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: hsla(var(--base-hsl), 1);
@include breakpoint($medium) { font-size: 1.1rem; }
@include breakpoint($large) { font-size: 1.3rem; }
}
@mixin h5 {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: hsla(var(--base-hsl), 1);
@include breakpoint($medium) { font-size: 1.1rem; }
@include breakpoint($large) { font-size: 1.1rem; }
}
@mixin h6 {
font-size: 1rem;
font-weight: 300;
line-height: 1.3;
color: hsla(var(--base-hsl), 1);
text-decoration: underline;
@include breakpoint($medium) { font-size: 1rem; }
@include breakpoint($large) { font-size: 1rem; }
}
@mixin text {
font-size: 1.1rem;
font-weight: 400;
color: hsla(var(--base-hsl), 1);
margin-bottom: 0;
// & + & { margin-top: 1rem; }
@include breakpoint($large) { font-size: 1.2rem; }
}
@mixin small_text {
font-size: 0.75rem;
font-weight: 400;
color: hsla(var(--base-hsl), .8);
}
.h1 {
@include h1;
line-height: 1.3;
}
.intro {
@include big-lead;
}
.h2 {
@include h2;
line-height: 1.3;
}
.h3 {
@include h3;
line-height: 1.3;
}
.h4 {
@include h4;
}
.h5 {
@include h5;
}
.h6 {
@include h6;
}
// Slightly complicated styles for the paragraphs.
// We should simplify this.
p {
line-height: 1.62;
margin: 0 0 1.62ex 0;
&.intro {
font-size: 1.5em;
font-weight: 300;
margin-bottom: 2ex;
line-height: 1.5;
}
@include breakpoint($regular) {
line-height: 1.65;
margin-bottom: 1.65ex;
&.intro {
font-size: 1.6em;
margin-bottom: 3ex;
line-height: 1.37;
}
}
}
@mixin text {
font-size: 1.1rem;
font-weight: 400;
color: hsla(var(--base-hsl), 1);
margin-bottom: 0;
@include breakpoint($large) { font-size: 1.2rem; }
}
.p {
@include text;
> a {
font-weight: 400;
color: var(--color-teal-dark);
}
}
No notes defined.