<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ullam pariatur recusandae expedita repudiandae id aspernatur minus, iure debitis aliquid tempora odit error perferendis ipsum rem ea quisquam rerum. Fugiat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ullam pariatur recusandae expedita repudiandae id aspernatur minus, iure debitis aliquid tempora odit error perferendis ipsum rem ea quisquam rerum. Fugiat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos esse nulla voluptate distinctio numquam, incidunt necessitatibus rerum velit voluptatem tempora aut accusantium asperiores expedita. Non iusto dolores cupiditate assumenda, laudantium, velit
aperiam reprehenderit dignissimos, reiciendis architecto quo veritatis ipsam neque itaque omnis? Laborum, ab vel repudiandae quo minus. Esse, rem, animi. Atque fugiat hic impedit, ullam, ex iure perferendis temporibus tempore soluta facere laudantium
eius molestias veniam rerum quaerat molestiae laboriosam quod itaque, mollitia voluptatem. Natus laboriosam reprehenderit ullam voluptas expedita sapiente placeat voluptate doloremque libero recusandae blanditiis, eaque incidunt excepturi esse modi
amet reiciendis odio, eligendi illo ut aspernatur. Amet voluptatem reprehenderit atque quo, ea aspernatur rerum tempora nulla laborum distinctio quod nobis veniam omnis nisi cumque, sapiente, laboriosam inventore? Aperiam dicta repellat quis error
modi adipisci odit, magni tenetur sed quidem assumenda maiores, nihil dolore magnam impedit, eligendi rerum, illo rem. Nobis dicta temporibus cum dolor consequatur doloremque. Modi, corporis vitae culpa architecto consectetur rem nisi, non neque molestiae
quia consequatur sint, voluptatum magni. Laudantium voluptate amet dolorum optio error obcaecati non esse eius. Consequatur ullam deleniti soluta blanditiis minus nam incidunt cupiditate saepe.</p>
<p>Incidunt saepe quasi magnam. Ipsam itaque non similique eum consectetur laborum officiis aut iusto unde, reprehenderit esse fuga soluta assumenda dolore, veritatis ducimus, autem eos voluptate nesciunt! Consequatur ullam aliquam qui aut sunt, expedita
vero laboriosam totam odio, optio doloribus dignissimos exercitationem nam soluta architecto est nostrum aliquid commodi explicabo, blanditiis minus hic ut. Earum quasi nisi quae ab libero enim odit provident, dolorem voluptates, vero saepe recusandae
quos architecto quo placeat adipisci dolorum sunt. Illum iure impedit magni. Temporibus laborum, sequi dolorem, eveniet quos ipsum praesentium eius ea sapiente cumque quaerat repellendus suscipit vero velit aspernatur at doloribus ut modi autem tempore
accusamus, possimus perspiciatis fugit explicabo aut! Velit, illum dicta neque, molestiae tempora ea necessitatibus cum reiciendis rerum fugiat inventore dolorum atque tempore dolor cupiditate deleniti officiis distinctio ipsa adipisci quia laudantium
iusto aliquid autem vitae obcaecati? Fuga non, officiis culpa nulla accusamus eum molestiae debitis reiciendis cupiditate perspiciatis quod dolore tempora quidem perferendis cum nihil autem recusandae rem optio inventore illum pariatur numquam possimus
unde. Voluptatibus recusandae eaque laboriosam officiis sit iusto placeat expedita corporis tempore illo, modi eius, incidunt! Exercitationem eveniet ducimus optio praesentium, eligendi similique cupiditate ipsa voluptatem nesciunt quo consequuntur
perspiciatis. Mollitia, unde veritatis cumque necessitatibus corporis omnis consequatur magni cum, ullam quaerat officia maiores architecto minima obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ullam pariatur recusandae expedita repudiandae id aspernatur minus, iure debitis aliquid tempora odit error perferendis ipsum rem ea quisquam rerum. Fugiat!</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ullam pariatur recusandae expedita repudiandae id aspernatur minus, iure debitis aliquid tempora odit error perferendis ipsum rem ea quisquam rerum. Fugiat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ullam pariatur recusandae expedita repudiandae id aspernatur minus, iure debitis aliquid tempora odit error perferendis ipsum rem ea quisquam rerum. Fugiat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos esse nulla voluptate distinctio numquam, incidunt necessitatibus rerum velit voluptatem tempora aut accusantium asperiores expedita. Non iusto dolores cupiditate assumenda, laudantium, velit aperiam reprehenderit dignissimos, reiciendis architecto quo veritatis ipsam neque itaque omnis? Laborum, ab vel repudiandae quo minus. Esse, rem, animi. Atque fugiat hic impedit, ullam, ex iure perferendis temporibus tempore soluta facere laudantium eius molestias veniam rerum quaerat molestiae laboriosam quod itaque, mollitia voluptatem. Natus laboriosam reprehenderit ullam voluptas expedita sapiente placeat voluptate doloremque libero recusandae blanditiis, eaque incidunt excepturi esse modi amet reiciendis odio, eligendi illo ut aspernatur. Amet voluptatem reprehenderit atque quo, ea aspernatur rerum tempora nulla laborum distinctio quod nobis veniam omnis nisi cumque, sapiente, laboriosam inventore? Aperiam dicta repellat quis error modi adipisci odit, magni tenetur sed quidem assumenda maiores, nihil dolore magnam impedit, eligendi rerum, illo rem. Nobis dicta temporibus cum dolor consequatur doloremque. Modi, corporis vitae culpa architecto consectetur rem nisi, non neque molestiae quia consequatur sint, voluptatum magni. Laudantium voluptate amet dolorum optio error obcaecati non esse eius. Consequatur ullam deleniti soluta blanditiis minus nam incidunt cupiditate saepe.</p>
<p>Incidunt saepe quasi magnam. Ipsam itaque non similique eum consectetur laborum officiis aut iusto unde, reprehenderit esse fuga soluta assumenda dolore, veritatis ducimus, autem eos voluptate nesciunt! Consequatur ullam aliquam qui aut sunt, expedita vero laboriosam totam odio, optio doloribus dignissimos exercitationem nam soluta architecto est nostrum aliquid commodi explicabo, blanditiis minus hic ut. Earum quasi nisi quae ab libero enim odit provident, dolorem voluptates, vero saepe recusandae quos architecto quo placeat adipisci dolorum sunt. Illum iure impedit magni. Temporibus laborum, sequi dolorem, eveniet quos ipsum praesentium eius ea sapiente cumque quaerat repellendus suscipit vero velit aspernatur at doloribus ut modi autem tempore accusamus, possimus perspiciatis fugit explicabo aut! Velit, illum dicta neque, molestiae tempora ea necessitatibus cum reiciendis rerum fugiat inventore dolorum atque tempore dolor cupiditate deleniti officiis distinctio ipsa adipisci quia laudantium iusto aliquid autem vitae obcaecati? Fuga non, officiis culpa nulla accusamus eum molestiae debitis reiciendis cupiditate perspiciatis quod dolore tempora quidem perferendis cum nihil autem recusandae rem optio inventore illum pariatur numquam possimus unde. Voluptatibus recusandae eaque laboriosam officiis sit iusto placeat expedita corporis tempore illo, modi eius, incidunt! Exercitationem eveniet ducimus optio praesentium, eligendi similique cupiditate ipsa voluptatem nesciunt quo consequuntur perspiciatis. Mollitia, unde veritatis cumque necessitatibus corporis omnis consequatur magni cum, ullam quaerat officia maiores architecto minima obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ullam pariatur recusandae expedita repudiandae id aspernatur minus, iure debitis aliquid tempora odit error perferendis ipsum rem ea quisquam rerum. Fugiat!</p>
/* No context defined for this component. */
// General Variables
:root {
--text-base-size: 1rem;
--text-base-line-height: 1.62;
--fonts-primary: trade-gothic-next, sans-serif;
}
body {
color: var(--color-default);
font-family: var(--fonts-primary);
font-size: var(--text-base-size);
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.62;
}
@mixin text {
font-size: 1rem;
font-weight: 300;
margin-bottom: 0;
color: hsla(var(--base-hsl), .8);
line-height: var(--text-base-line-height);
letter-spacing: 0.3px;
margin: 0;
& + & { margin-top: 0.75em; }
@include breakpoint($medium) { font-size: 1.1rem; }
@include breakpoint($large) { font-size: 1.25rem; }
}
h1, h2, h3, h4 { line-height: 1.3; }
@mixin big_lead {
font-size: 1.1rem;
line-height: 1.5;
font-weight: 300;
color: hsla(var(--base-hsl), .6);
@include breakpoint($medium) { font-size: 1.5rem; }
@include breakpoint($large) {
font-size: 1.8rem;
letter-spacing: 0.48px;
}
}
@mixin h1 {
font-size: 2rem;
font-weight: 300;
color: hsla(var(--base-hsl), 1);
@include breakpoint($medium) { font-size: 2rem; }
@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 small_text {
font-weight: 300;
font-size: 0.75rem;
letter-spacing: .2px;
color: hsla(var(--base-hsl), .8);
line-height: var(--text-base-line-height);
}
@mixin bold { font-weight: 600; }
@mixin bullets {
position: relative;
&:before {
border: 7px solid transparent;
border-left-color: var(--bullet-color);
content: "";
height: 0;
position: absolute;
top: 8px;
left: -16px;
}
}
@mixin image {
max-width: 100%;
}
@mixin link {
color: var(--theme-color);
text-decoration: none;
position: relative;
&:before {
content: "";
position: absolute;
left: -4px;
right: -4px;
bottom: -2px;
height: 1px;
background-color: hsla(var(--theme-hsl), .2);
transition: all .2s ease;
}
&:hover:before {
height: 100%;
background-color: hsla(var(--theme-hsl), .3);
}
}
// Applying the mixns to helper classes
.text { @include text; }
.link { @include link; }
.h1 { @include h1; }
.h2 { @include h2; }
.h3 { @include h3; }
.h4 { @include h4; }
.h5 { @include h5; }
.h6 { @include h6; }
.big-lead { @include big_lead; }
.small-text { @include small_text; }