mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: set root font size to 100%

Browse source
This commit is contained in:
Lucas Larroche 2023-02-13 20:19:54 +07:00
parent 76fda2f6df
commit 8b4f1527b1
11 changed files with 37 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

24
css/pico.classless.css
View file

@ -397,7 +397,7 @@ progress,
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--pico-line-height: 1.5; --pico-line-height: 1.5;
--pico-font-weight: 400; --pico-font-weight: 400;
--pico-font-size: 16px; --pico-font-size: 100%;
--pico-text-underline-offset: 0.1rem; --pico-text-underline-offset: 0.1rem;
--pico-border-radius: 0.25rem; --pico-border-radius: 0.25rem;
--pico-border-width: 1px; --pico-border-width: 1px;
@ -417,22 +417,22 @@ progress,
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
--pico-font-size: 17px; --pico-font-size: 106.25%;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
:root { :root {
--pico-font-size: 18px; --pico-font-size: 112.5%;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
:root { :root {
--pico-font-size: 19px; --pico-font-size: 118.75%;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
:root { :root {
--pico-font-size: 20px; --pico-font-size: 125%;
} }
} }
@ -552,6 +552,11 @@ h5 {
--pico-typography-spacing-top: 1.6875rem; --pico-typography-spacing-top: 1.6875rem;
} }
h6 {
--pico-font-size: 1rem;
--pico-typography-spacing-top: 1.5rem;
}
thead th, thead th,
thead td, thead td,
tfoot th, tfoot th,
@ -560,7 +565,7 @@ tfoot td {
} }
:not(thead, tfoot) > * > td { :not(thead, tfoot) > * > td {
--pico-font-size: 0.875em; font-size: 0.875em;
} }
pre, pre,
@ -774,7 +779,6 @@ ul {
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
} }
h1, h1,
@ -836,10 +840,6 @@ p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-bottom: var(--pico-typography-spacing-vertical);
} }
small {
font-size: var(--pico-font-size);
}
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;
padding-left: var(--pico-spacing); padding-left: var(--pico-spacing);
@ -1054,7 +1054,6 @@ td {
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
text-align: left; text-align: left;
text-align: start; text-align: start;
} }
@ -1429,7 +1428,6 @@ label > :where(input, select, textarea) {
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

24
css/pico.css
View file

@ -397,7 +397,7 @@ progress,
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--pico-line-height: 1.5; --pico-line-height: 1.5;
--pico-font-weight: 400; --pico-font-weight: 400;
--pico-font-size: 16px; --pico-font-size: 100%;
--pico-text-underline-offset: 0.1rem; --pico-text-underline-offset: 0.1rem;
--pico-border-radius: 0.25rem; --pico-border-radius: 0.25rem;
--pico-border-width: 1px; --pico-border-width: 1px;
@ -419,22 +419,22 @@ progress,
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
--pico-font-size: 17px; --pico-font-size: 106.25%;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
:root { :root {
--pico-font-size: 18px; --pico-font-size: 112.5%;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
:root { :root {
--pico-font-size: 19px; --pico-font-size: 118.75%;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
:root { :root {
--pico-font-size: 20px; --pico-font-size: 125%;
} }
} }
@ -554,6 +554,11 @@ h5 {
--pico-typography-spacing-top: 1.6875rem; --pico-typography-spacing-top: 1.6875rem;
} }
h6 {
--pico-font-size: 1rem;
--pico-typography-spacing-top: 1.5rem;
}
thead th, thead th,
thead td, thead td,
tfoot th, tfoot th,
@ -562,7 +567,7 @@ tfoot td {
} }
:not(thead, tfoot) > * > td { :not(thead, tfoot) > * > td {
--pico-font-size: 0.875em; font-size: 0.875em;
} }
pre, pre,
@ -818,7 +823,6 @@ ul {
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
} }
h1, h1,
@ -883,10 +887,6 @@ p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-bottom: var(--pico-typography-spacing-vertical);
} }
small {
font-size: var(--pico-font-size);
}
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;
padding-left: var(--pico-spacing); padding-left: var(--pico-spacing);
@ -1148,7 +1148,6 @@ td {
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
text-align: left; text-align: left;
text-align: start; text-align: start;
} }
@ -1523,7 +1522,6 @@ label > :where(input, select, textarea) {
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
scss/_settings.scss
View file

@ -44,28 +44,28 @@ $breakpoints: map.deep-merge(
( (
breakpoint: 576px, breakpoint: 576px,
viewport: 510px, viewport: 510px,
root-font-size: 17px, root-font-size: 106.25%,
), ),
// Medium (tablets) // Medium (tablets)
md: md:
( (
breakpoint: 768px, breakpoint: 768px,
viewport: 700px, viewport: 700px,
root-font-size: 18px, root-font-size: 112.5%,
), ),
// Large (desktops) // Large (desktops)
lg: lg:
( (
breakpoint: 992px, breakpoint: 992px,
viewport: 920px, viewport: 920px,
root-font-size: 19px, root-font-size: 118.75%,
), ),
// Extra large (large desktops) // Extra large (large desktops)
xl: xl:
( (
breakpoint: 1200px, breakpoint: 1200px,
viewport: 1130px, viewport: 1130px,
root-font-size: 20px, root-font-size: 125%,
) )
), ),
$breakpoints $breakpoints

1
scss/content/_table.scss
View file

@ -30,7 +30,6 @@
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color); border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
color: var(#{$✨}color); color: var(#{$✨}color);
font-weight: var(#{$✨}font-weight); font-weight: var(#{$✨}font-weight);
font-size: var(#{$✨}font-size);
text-align: left; text-align: left;
text-align: start; text-align: start;
} }

6
scss/content/_typography.scss
View file

@ -50,7 +50,6 @@
color: var(#{$✨}color); color: var(#{$✨}color);
font-style: normal; font-style: normal;
font-weight: var(#{$✨}font-weight); font-weight: var(#{$✨}font-weight);
font-size: var(#{$✨}font-size);
} }
// Headings // Headings
@ -135,11 +134,6 @@
margin-bottom: var(#{$✨}typography-spacing-vertical); margin-bottom: var(#{$✨}typography-spacing-vertical);
} }
// Small
small {
font-size: var(#{$✨}font-size);
}
// Lists // Lists
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;

1
scss/forms/_checkbox-radio-switch.scss
View file

@ -19,7 +19,6 @@
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(#{$✨}border-width); border-width: var(#{$✨}border-width);
font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;

9
scss/themes/default/_styles.scss
View file

@ -13,7 +13,7 @@
"Noto Color Emoji"; "Noto Color Emoji";
#{$✨}line-height: 1.5; #{$✨}line-height: 1.5;
#{$✨}font-weight: 400; #{$✨}font-weight: 400;
#{$✨}font-size: 16px; #{$✨}font-size: 100%;
#{$✨}text-underline-offset: 0.1rem; #{$✨}text-underline-offset: 0.1rem;
// Responsive root font size // Responsive root font size
@ -213,6 +213,11 @@
#{$✨}font-size: 1.125rem; #{$✨}font-size: 1.125rem;
#{$✨}typography-spacing-top: 1.6875rem; #{$✨}typography-spacing-top: 1.6875rem;
} }
h6 {
#{$✨}font-size: 1rem;
#{$✨}typography-spacing-top: 1.5rem;
}
} }
// Table // Table
@ -226,7 +231,7 @@
} }
:not(thead, tfoot) > * > td { :not(thead, tfoot) > * > td {
#{$✨}font-size: 0.875em; font-size: 0.875em;
} }
} }