Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
/*! bettertext.css v2.0.4 | MIT License | github.com/paulradzkov/bettertext.css */
.bettertext-settings() {
//settings
@fz: 16px; // default font-size in pixels
@rythm: 24px; // vertical rythm = line-height in pixels
@fz-small: 12px; // smaller font-size (px)
@linel: 50rem; // max-width for text (em or rem)
@font-body: sans-serif; // body
@font-headers: sans-serif; // headers
@font-code: monospace, monospace; // code (duplication is intentional)
@scale1: 1.125; // header size multiplier for small screens
@scale2: 1.250; // header size multiplier for large screens
// margins for body, articles and sections
@space-around: ~"calc(24px + 4vh) calc(10px + 4vw)";
// breakpoint to switch from 'mobile' to 'desktop'
@bettertext-breakpoint: ~"(min-width: 768px)";
}
.bettertext-calculations() {
//calculations
// you almost never need to edit below
// one rem is 16px by default
@onerem: 16px;
// base font-size in ems
@fz-ems: unit(((round( @onerem)) / @fz), em);
// unitless line-height
@lh: unit((@rythm / @fz));
// margins for paragraphs, lists and other tags
@m-default: unit(@lh, em);
// small font-size in ems
@fz-small-ems: unit(((round( @fz-small)) / @fz), em);
//headers size calculations for small screens
@h1-fz: unit(((round( @fz * pow(@scale1, 4))) / @fz), em);
@h2-fz: unit(((round( @fz * pow(@scale1, 3))) / @fz), em);
@h3-fz: unit(((round( @fz * pow(@scale1, 2))) / @fz), em);
@h4-fz: unit(((round( @fz * pow(@scale1, 1))) / @fz), em);
@h5-fz: unit(((round( @fz * pow(@scale1, 0))) / @fz), em);
@h6-fz: @fz-small-ems;
//headers size calculations for large screens
@h1-l-fz: unit(((round( @fz * pow(@scale2, 4))) / @fz), em);
@h2-l-fz: unit(((round( @fz * pow(@scale2, 3))) / @fz), em);
@h3-l-fz: unit(((round( @fz * pow(@scale2, 2))) / @fz), em);
@h4-l-fz: unit(((round( @fz * pow(@scale2, 1))) / @fz), em);
//headers lihe-height
@h1-lh: 1.1;
@h2-lh: 1.2;
@h3-lh: 1.3;
@h4-lh: 1.4;
@h5-lh: unit((@rythm / @fz));
@h6-lh: unit((@rythm / @fz-small));
//headers margin-top
@h1-mt: unit((@lh / @h1-fz * 3.5), em);
@h2-mt: unit((@lh / @h2-fz * 3), em);
@h3-mt: unit((@lh / @h3-fz * 2.5), em);
@h4-mt: unit((@lh / @h4-fz * 2), em);
@h5-mt: unit((@lh / @h5-fz * 1.5), em);
@h6-mt: unit((@lh / @h6-fz * 1), em);
//headers margin-top for large screens
@h1-l-mt: unit((@lh / @h1-l-fz * 5), em);
@h2-l-mt: unit((@lh / @h2-l-fz * 4), em);
@h3-l-mt: unit((@lh / @h3-l-fz * 3), em);
@h4-l-mt: unit((@lh / @h4-l-fz * 2), em);
//headers margin-bottom
@h1-mb: unit((@lh / @h1-fz), em);
@h2-mb: unit((@lh / @h2-fz), em);
@h3-mb: unit((@lh / @h3-fz), em);
@h4-mb: unit((@lh / @h4-fz), em);
@h5-mb: unit((@lh / @h5-fz), em);
@h6-mb: 0;
//headers margin-bottom for large screens
@h1-l-mb: unit((@lh / @h1-l-fz), em);
@h2-l-mb: unit((@lh / @h2-l-fz), em);
@h3-l-mb: unit((@lh / @h3-l-fz), em);
@h4-l-mb: unit((@lh / @h4-l-fz), em);
//double headers margin-top
@h1h2-mt: unit( @h2-lh ,em);
@h2h3-mt: unit( @h3-lh ,em);
@h3h4-mt: unit( @h4-lh ,em);
@h4h5-mt: unit((@lh / @h5-fz), em);
@h5h6-mt: unit((@lh / @h6-fz), em);
}
@bettertext: {
.bettertext-settings();
.bettertext-calculations();
body {
font-family: @font-body;
font-size: @fz-ems;
line-height: @lh;
}
body:not([class]),
article:not([class]),
section:not([class]) {
margin: @space-around;
article:not([class]),
section:not([class]) {
margin-left: 0;
margin-right: 0;
}
}
p {
margin: 0 0 @m-default;
max-width: @linel;
}
/* minimum paragraph width when floating http://css-tricks.com/minimum-paragraph-widths/ */
p:before,
ol:not([class]):before,
ul:not([class]):before {
content: '';
display: block;
width: 10em;
overflow: hidden;
}
li p:before {
content: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: @font-headers;
font-weight: bolder;
}
h1 {
font-size: @h1-fz;
line-height: @h1-lh;
margin: @h1-mt 0 @h1-mb;
}
h2 {
font-size: @h2-fz;
line-height: @h2-lh;
margin: @h2-mt 0 @h2-mb;
}
h3 {
font-size: @h3-fz;
line-height: @h3-lh;
margin: @h3-mt 0 @h3-mb;
}
h4 {
font-size: @h4-fz;
line-height: @h4-lh;
margin: @h4-mt 0 @h4-mb;
}
h5 {
font-size: @h5-fz;
line-height: @h5-lh;
margin: @h5-mt 0 @h5-mb;
}
h6 {
font-size: @h6-fz;
line-height: @h6-lh;
margin: @h6-mt 0 @h6-mb;
text-transform: uppercase;
letter-spacing: 0.05em;
}
// do not create breakpoint and override if scale is not changing
& when not (@scale1 = @scale2) {
@media @bettertext-breakpoint {
h1 {
font-size: @h1-l-fz;
margin-top: @h1-l-mt;
margin-bottom: @h1-l-mb;
}
h2 {
font-size: @h2-l-fz;
margin-top: @h2-l-mt;
margin-bottom: @h2-l-mb;
}
h3 {
font-size: @h3-l-fz;
margin-top: @h3-l-mt;
margin-bottom: @h3-l-mb;
}
h4 {
font-size: @h4-l-fz;
margin-top: @h4-l-mt;
margin-bottom: @h4-l-mb;
}
}
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
/* double headers */
h1 + h2 {
margin-top: @h1h2-mt;
}
h2 + h3 {
margin-top: @h2h3-mt;
}
h3 + h4 {
margin-top: @h3h4-mt;
}
h4 + h5 {
margin-top: @h4h5-mt;
}
h5 + h6 {
margin-top: @h5h6-mt;
}
/* lists */
/* lists without classes */
// 1) force reflow to fix bullet overlapping.
// See https://git.io/vHyUo for details.
ul:not([class]),
ol:not([class]) {
margin: 0 0 @m-default;
max-width: calc(@linel - 2.5em);
padding-left: 0;
padding-right: 2.5em;
ul,
ol {
margin-bottom: 0;
}
li {
transform: translateX(2.5em);
animation: fixlists 1s; // 1)
}
}
@keyframes fixlists {
0% { text-indent: -0.001em;}
100% { text-indent: 0;}
}
/* images */
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
p img:not(:only-child) {
vertical-align: baseline;
}
figure:not([class]) {
margin: (@m-default * 2) 0;
& > p {
max-width: (@linel * 0.75);
font-size: @fz-small-ems;
margin: 0.5em 0 0;
}
}
figcaption {
max-width: (@linel * 0.75);
font-size: @fz-small-ems;
margin: 0.5em 0 (@m-default * 2);
& > p {
margin: 0.5em 0 0;
}
}
/* blockquotes */
blockquote {
max-width: calc(@linel - 5em);
margin: 0 0 (@m-default);
padding: (@m-default) 2.5em;
& > p:last-child {
margin-bottom: 0;
}
& > footer,
& > cite {
display: block;
font-size: @fz-small-ems;
}
}
/* code */
pre {
margin: (@m-default) 0;
white-space: pre-wrap;
}
p code {
line-break: loose;
overflow-wrap: break-word;
}
/* tables */
table:not([class]) {
margin-top: (@m-default * 2);
margin-bottom: (@m-default * 2);
border-collapse: separate;
border-spacing: 0;
caption {
text-align: left;
font-size: @fz-small-ems;
margin-bottom: 0.625em;
}
td, th {
padding: 0.5em 1em;
text-align: left;
vertical-align: top;
border-style: solid;
border-color: rgba(0,0,0,0.1);
border-width: 0 0 1px;
}
thead {
td, th {
vertical-align: bottom;
border-bottom-width: 2px;
}
}
}
/* definition lists */
dl:not([class]) {
max-width: @linel;
margin: 0 0 @m-default;
dt:not([class]) {
font-weight: bolder;
}
dd:not([class]) {
margin: 0 0 @m-default;
}
}
/* other tags */
hr:not([class]) {
border: 0;
border-bottom: 1px solid;
margin: @m-default 0;
max-width: @linel;
opacity: .1;
}
abbr {
letter-spacing: .05em;
margin-right: -.05em;
}
strong, b, dt {
font-weight: bolder;
}
code,
kbd,
pre,
samp {
font-family: @font-code;
font-size: 1em;
}
};
@bettertext();