Permalink
Cannot retrieve contributors at this time
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?
bettertext.css/bettertext.less
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
407 lines (331 sloc)
9.16 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! 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(); |