<div class="mb-1">
<h1 class="text-xl">Text-xl Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
</div>
<div class="mb-1">
<h2 class="text-h1">Text-h1 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
</div>
<div class="mb-1">
<h3 class="text-h2">Text-h2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
<div class="mb-1">
<h4 class="text-h3">Text-h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
</div>
<div class="mb-1">
<h5 class="text-h4">Text-h4 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
</div>
<div class="mb-1">
<h6 class="text-h5">Text-h5 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
</div>
<div class="mb-1">
<p class="text-lg">Text-lg Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-body">Text-body Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-sm">Text-sm Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-xs">Text-xs Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-xs2">Text-xs2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<h1 class="text-xl">Text-xl Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
</div>
<div class="mb-1">
<h2 class="text-h1">Text-h1 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
</div>
<div class="mb-1">
<h3 class="text-h2">Text-h2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
</div>
<div class="mb-1">
<h4 class="text-h3">Text-h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
</div>
<div class="mb-1">
<h5 class="text-h4">Text-h4 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
</div>
<div class="mb-1">
<h6 class="text-h5">Text-h5 Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
</div>
<div class="mb-1">
<p class="text-lg">Text-lg Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-body">Text-body Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-sm">Text-sm Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-xs">Text-xs Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="mb-1">
<p class="text-xs2">Text-xs2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"twitter": "asclearasmud",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "5 Princes Buildings \nBath \nBA1 2ED",
"cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, <a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
"entries": [
{
"title": "Projects",
"url": "/components/preview/listing"
},
{
"title": "About",
"url": "/components/preview/about"
},
{
"title": "Journal",
"url": "/components/preview/journal"
},
{
"title": "Contact",
"url": "/components/preview/contact"
}
]
}
// /*
// Root
// */
html {
@apply .leading-1;
font-size: 1em;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
strong,
b,
cite,
address {
font-style: normal;
font-weight: normal;
}
/**
responsive fluid typography is difficult to achieve using tailwind utility classes...
I am going to replicate tailwind like classes here, but using the postcss responsive
type plugin... like a boss
textSizes: {
xl: calc(ms(8), ms(15), 320, 1600),
h1: calc(ms(6), ms(13), 320, 1600),
h2: calc(ms(5), ms(12), 320, 1600),
h3: calc(ms(4), ms(11), 320, 1600),
h4: calc(ms(4), ms(8), 320, 1600),
h5: calc(ms(4), ms(6), 320, 1600),
h6: ms(4),
lg: calc(ms(0), ms(3), 320, 1600),
body: calc(ms(0), ms(2), 320, 1600),
sm: calc(ms(0), ms(1), 320, 1600),
xs: calc(ms(0), ms(0), 320, 1600),
xs2: calc(ms(-1), ms(-1), 320, 1600)
},
*/
body {
@apply .leading-4 .text-black .font-base;
}
// h1,
.heading-1 {
@apply .font-bold .tracking--2;
}
// h2,
.heading-2 {
@apply .font-bold .tracking--15;
}
// h3,
.heading-3 {
@apply .font-bold .tracking--15;
}
// h4,
.heading-4 {
@apply .font-bold .tracking--15;
}
// h5,
.heading-5 {
@apply .font-bold .tracking--1;
}
// h6,
.heading-6 {
@apply .font-bold;
}
$range: 320px 1600px;
.text-kin-massive {
font-size: responsive ms(14) ms(25);
font-range: $range;
line-height: 0.74; // magic
}
.text-xl {
@apply .font-light;
font-size: responsive ms(6) ms(14);
font-range: $range;
line-height: leading(rem-to-px(ms(14)), 88);
}
.text-h1 {
@apply .font-light;
font-size: responsive ms(6) ms(13);
font-range: $range;
line-height: leading(rem-to-px(ms(13)), 80);
}
.text-h2 {
font-size: responsive ms(5) ms(12);
font-range: $range;
line-height: leading(rem-to-px(ms(12)), 72);
}
.text-h3 {
font-size: responsive ms(4) ms(11);
font-range: $range;
line-height: leading(rem-to-px(ms(11)), 56);
}
.text-h4 {
font-size: responsive ms(4) ms(8);
font-range: $range;
line-height: leading(rem-to-px(ms(8)), 48);
}
.text-h5 {
font-size: responsive ms(4) ms(6);
font-range: $range;
line-height: leading(rem-to-px(ms(6)), 40);
}
.text-h6 {
font-size: responsive ms(2) ms(4);
line-height: leading(rem-to-px(ms(4)), 36);
}
.text-lg {
font-size: responsive ms(1) ms(3);
font-range: $range;
line-height: leading(rem-to-px(ms(3)), 32);
}
.text-body {
font-size: responsive ms(1) ms(2);
font-range: $range;
line-height: leading(rem-to-px(ms(2)), 32);
}
.text-body-s {
font-size: responsive ms(1) ms(2);
font-range: $range;
line-height: leading(rem-to-px(ms(2)), 32);
}
.text-sm {
font-size: responsive ms(0) ms(1);
font-range: $range;
line-height: leading(rem-to-px(ms(1)), 28);
}
.text-xs {
font-size: responsive ms(0) ms(0);
font-range: $range;
line-height: leading(rem-to-px(ms(0)), 28);
}
.text-xs2 {
font-size: responsive ms(-1) ms(-1);
font-range: $range;
line-height: leading(rem-to-px(ms(-1)), 28);
}
.text-intro {
font-size: ms(1);
line-height: leading(rem-to-px(ms(3)), 32);
@screen md {
font-size: ms(3);
line-height: leading(rem-to-px(ms(3)), 32);
}
@screen xl {
font-size: ms(6);
line-height: leading(rem-to-px(ms(6)), 44);
}
}
a {
text-decoration: none;
transition: color 300ms ease;
color: inherit;
&:hover,
&:focus,
&:active {
@apply .text-blue;
}
}
[class*='font'],
[class*='text'] {
transition: opacity 300ms ease;
opacity: 0;
}
.is-fonts-failed,
.is-fonts-loaded {
[class*='font'],
[class*='text'] {
opacity: 1;
}
}
.no-js {
[class*='font'],
[class*='text'] {
opacity: 1;
}
}
html[class*='font'] {
opacity: 1;
}
.s-content {
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p {
&:not(:last-child) {
@apply .mb-1;
}
}
a {
@apply .text-blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
There are no notes for this item.