mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-01 13:29:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit 🚀

Browse source
This commit is contained in:
Lucas 2019-11-27 15:31:49 +07:00
commit 16c7596319
30 changed files with 5996 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

289
scss/content/_typography.scss Normal file
View file

@ -0,0 +1,289 @@
/**
* Typography
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: border;
}
// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
sub,
sup {
position: relative;
font-size: .75rem;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
}
sup {
top: -0.5rem;
}
// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
img {
max-width: 100%; // 2
height: auto; // 2
border-style: none; // 1
}
svg,
img {
vertical-align: text-bottom;
}
// Pico
// ––––––––––––––––––––
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-top: 0;
margin-bottom: $spacing-typography;
color: var(--text);
font-size: 1rem;
font-style: normal;
}
// Links
// 1. Remove the gray background on active links in IE 10.
a {
background-color: transparent; // 1
color: var(--primary);
text-decoration: none;
transition:
background-color $transition,
color $transition,
text-decoration $transition,
box-shadow $transition;
&:hover,
&:active,
&:focus {
color: var(--primary-hover);
text-decoration: underline;
}
&:focus {
outline: none;
background-color: var(--primary-focus);
}
}
// Link .secondary
@if $enable-classes {
a.secondary {
color: var(--secondary);
&:hover,
&:active,
&:focus {
color: var(--secondary-hover);
}
&:focus {
background-color: var(--secondary-focus);
}
}
}
// Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: $spacing-typography;
font-weight: $heading-weight;
}
h1 {
margin-bottom: $spacing-typography*2;
color: var(--h1);
font-size: 2rem;
}
h2 {
margin-bottom: $spacing-typography*1.75;
color: var(--h2);
font-size: 1.75rem;
}
h3 {
margin-bottom: $spacing-typography*1.5;
color: var(--h3);
font-size: 1.5rem;
}
h4 {
margin-bottom: $spacing-typography*1.25;
color: var(--h4);
font-size: 1.25rem;
}
h5 {
margin-bottom: $spacing-typography*1.125;
color: var(--h5);
font-size: 1.125rem;
}
h6 {
color: var(--h6);
font-size: 1rem;
}
// Increase headings font size inside <header>
header {
h1 {
font-size: 2rem*1.5;
}
h2 {
font-size: 1.75rem*1.5;
}
h3 {
font-size: 1.5rem*1.5;
}
h4 {
font-size: 1.25rem*1.5;
}
h5 {
font-size: 1.125rem*1.5;
}
h6 {
font-size: 1rem*1.5;
}
}
// Multi-level heading
hgroup {
margin-bottom: $spacing-typography;
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 0;
}
}
// Paragraphs
p {
margin-bottom: $spacing-typography/2;
}
// Small
small {
font-size: 85%;
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
}
// Lists
ul,
ol {
padding-left: $spacing-typography;
li {
margin-bottom: $spacing-typography/2;
}
}
ul li {
list-style: square;
}
// Marked text
mark {
padding: .125rem .25rem;
background: var(--mark);
color: var(--text);
vertical-align: middle;
}
// Blockquote
blockquote {
display: block;
margin: ($spacing-typography*2) 0;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-gutter;
border-left: .25rem solid var(--muted-border);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
}
}
footer {
margin-top: $spacing-typography/2;
color: var(--muted-text);
}
}
// Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari.
abbr[title] {
border-bottom: 1px dotted;
text-decoration: none; // 1
cursor: help;
}
// Ins
ins {
color: var(--valid);
text-decoration: none;
}
// del
del {
color: var(--invalid);
}