You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
11 KiB
CSS
1 line
11 KiB
CSS
4 years ago
|
*{--rhythm:2rem;--rhythm-quadruple:calc(4 * var(--rhythm));--rhythm-triple:calc(3 * var(--rhythm));--rhythm-double:calc(2 * var(--rhythm));--rhythm-half:calc((1/2) * var(--rhythm));--rhythm-third:calc((1/3) * var(--rhythm));--rhythm-fourth:calc((1/4) * var(--rhythm));--rhythm-sixth:calc((1/6) * var(--rhythm));--rhythm-eighth:calc((1/8) * var(--rhythm));--rhythm-twelfth:calc((1/12) * var(--rhythm));--rhythm-sixteenth:calc((1/16) * var(--rhythm));--line-height:var(--sub-rhythm,var(--rhythm));--line-height-ratio:1.4;--font-size:calc(var(--line-height) / var(--line-height-ratio))}html{--border-radius:4px;--color-primary-tint1:hsl(350,80%,60%);--color-primary:hsl(350,80%,45%);--color-primary-shade1:hsl(350,80%,35%);--color-accent-tint1:hsl(170,80%,60%);--color-accent:hsl(170,80%,45%);--color-accent-shade1:hsl(170,80%,35%);--color-link:hsl(230,60%,50%);--color-link-visited:hsl(290,60%,50%);--color-link-hover:hsl(230,80%,60%);--color-link-active:hsl(350,60%,50%);--color-neutral-tint4:hsl(170,10%,98%);--color-neutral-tint3:hsl(170,10%,94%);--color-neutral-tint2:hsl(170,10%,85%);--color-neutral-tint1:hsl(170,10%,68%);--color-neutral:hsl(170,10%,55%);--color-neutral-shade1:hsl(170,10%,41%);--color-neutral-shade2:hsl(170,10%,30%);--color-neutral-shade3:hsl(170,10%,18%);--color-neutral-shade4:hsl(170,10%,2%);--focus-outline:var(--rhythm-twelfth) dotted var(--color-primary-tint1);--focus-outline-offset:var(--rhythm-twelfth);--font-family:'Avenir','Avenir Next','Helvetica Neue','Segoe UI','Verdana',sans-serif;--font-mono:'Consolas','Monaco','Courier New',monospace;--font-heading:var(--font-family);--font-body:var(--font-family)}body{font-size:var(--font-size);line-height:var(--line-height)}*{border:0;font:inherit;margin:0;padding:0;text-rendering:geometricPrecision}:focus{outline:var(--focus-outline);outline-offset:var(--focus-outline-offset)}html{overflow-x:hidden}html,body{box-sizing:border-box;min-height:100%}body{background-color:var(--color-neutral-tint4);color:var(--color-neutral-shade4);font-family:var(--font-body);position:relative}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-size:var(--font-size);line-height:var(--line-height);margin:var(--rhythm) 0}h1{--line-height-ratio:1.1;--sub-rhythm:var(--rhythm-triple);font-weight:700;margin-bottom:var(--rhythm-double)}h2{--line-height-ratio:1.2;--sub-rhythm:var(--rhythm-triple)}h3{--line-height-ratio:1.3;--sub-rhythm:var(--rhythm-double);font-weight:700}h4{--sub-rhythm:var(--rhythm-double)}h5{font-weight:700}p{margin-bottom:var(--rhythm)}form{margin:var(--rhythm) 0}pre,code,samp,kbd{background-color:var(--color-neutral-tint3);font-size:var(--font-size);color:var(--color-primary-shade1);font-family:var(--font-mono);line-height:1}code,samp,kbd{border-radius:var(--border-radius);overflow-y:hidden;overflow-x:auto;padding:var(--rhythm-sixth)}pre{border-radius:var(--border-radius);line-height:var(--line-height);overflow-y:hidden;overflow-x:auto;padding:var(--rhythm-half);margin:0 0 var(--rhythm)}pre code,pre samp,pre kbd{background-color:transparent;border:0;border-radius:0;padding:0}a:link{color:var(--color-link)}a:visited{color:var(--color-link-visited)}a:hover,a:focus{color:var(--color-link-hover)}a:active{color:var(--color-link-active)}img,video{max-width:100%;vertical-align:top}hr{height:var(--rhythm-double);margin-bottom:var(--rhythm);position:relative}hr::before{background-color:var(--color-neutral-tint1);content:'';height:1px;left:0;position:absolute;top:50%;width:100%}ol,ul{margin:0 0 var(--rhythm) var(--rhythm)}ol{list-style-type:decimal}ol ol{margin-bottom:0}ul{list-style-type:disc}ul ul{margin-bottom:0}dt{font-style:italic}dd{margin-left:var(--rhythm)}blockquote{margin:0 0 var(--rhythm) var(--rhythm-half);border-left:var(--rhythm-eighth) solid var(--color-neutral-tint1);padding:var(--rhythm) var(--rhythm-half)}blockquote p:last-child{margin-bottom:0}figure{margin:0 auto var(--rhythm)}small,sub,sup,caption,figcaption{font-size:calc(2 * var(--rhythm-third));vertical-align:top}sub,sup{position:relative}sub{top:var(--rhythm-third)}sup{bottom:var(--rhythm-third)}caption,fi
|