Permalink
Fetching contributors…
Cannot retrieve contributors at this time
408 lines (331 sloc) 9.16 KB
/*! 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();