dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use viewport unit to scale base font size

Browse Source 
Use rems for font sizes and margin/padding
This commit is contained in:
Dan Head
2019-01-11 15:46:00 +00:00
parent af55b90f0d
commit 4bc196ad7b
13 changed files with 87 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css/archive.css
View File

@@ -12,12 +12,21 @@
margin-left: var(--space-sm);
}
.archive__heading {
.archive__heading,
.archive__subheading {
font-family: var(--heading-font-family);
color: var(--color-dark-blue);
margin-bottom: var(--space-xs);
}
.archive__heading {
font-size: var(--size-heading-2);
}
.archive__subheading {
font-size: var(--size-heading-3);
}
.archive__date {
display: inline-block;
font-style: italic;

17
css/base.css
View File

@@ -1,5 +1,18 @@
html {
box-sizing: border-box;
line-height: 1.5;
}
@media screen and (min-width: 50rem) {
html {
font-size: 2vw;
}
}
@media screen and (min-width: 62.5rem) {
html {
font-size: 1.25rem;
}
}
body {
@@ -7,8 +20,6 @@ body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23e0e0e0' fill-opacity='0.55' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
color: var(--color-near-black);
font-family: var(--body-font-family);
font-size: 16px;
line-height: 1.5;
margin: 0;
}
@@ -25,6 +36,8 @@ h1,
h2,
h3,
h4,
h5,
h6,
figure,
table,
p,

10
css/comment-respond.css
View File

@@ -9,7 +9,7 @@
}
.comment-respond__text {
font-size: 14px;
font-size: var(--size-body-small);
}
.comment-respond__item {
@@ -17,6 +17,10 @@
max-width: 360px;
}
.comment-respond__cancel {
font-size: var(--size-body-extra-small);
}
.comment-respond__label {
display: block;
margin-bottom: var(--space-xs);
@@ -45,10 +49,6 @@
padding: var(--space-xs);
}
.comment-respond__cancel {
font-size: 12px;
}
.comment-respond__cancel a,
.comment-respond__cancel a:visited {
color: var(--color-light-blue);

4
css/comment.css
View File

@@ -31,7 +31,7 @@
}
.comment__date {
font-size: 12px;
font-size: var(--size-body-extra-small);
}
.comment__body {
@@ -60,7 +60,7 @@
.comment__reply-text {
display: inline-block;
position: relative;
font-size: 12px;
font-size: var(--size-body-extra-small);
vertical-align: middle;
transition: box-shadow var(--transition-md) ease-out;
}

46
css/content.css
View File

@@ -1,29 +1,37 @@
.content h1 {
font-family: var(--heading-font-family);
font-size: 1.8rem;
margin-bottom: var(--space-sm);
}
.content h2 {
font-family: var(--heading-font-family);
font-size: 1.6rem;
margin-bottom: var(--space-sm);
}
.content h3 {
font-family: var(--heading-font-family);
font-size: 1.4rem;
margin-bottom: var(--space-sm);
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
font-family: var(--heading-font-family);
font-size: 1.2rem;
margin-bottom: var(--space-sm);
}
.content h1 {
font-size: var(--size-heading-1);
}
.content h2 {
font-size: var(--size-heading-2);
}
.content h3 {
font-size: var(--size-heading-3);
}
.content h4 {
font-size: var(--size-heading-4);
}
.content h5 {
font-size: var(--size-heading-5);
}
.content h6 {
font-size: var(--size-heading-6);
}
.content p {
margin-bottom: var(--space-sm);
}

8
css/excerpt.css
View File

@@ -28,18 +28,18 @@
}
}
.excerpt__title {
font-size: 1.5rem;
.excerpt__title,
.excerpt__subtitle {
font-size: var(--size-heading-6);
}
.excerpt__subtitle {
font-size: 1.2rem;
margin-top: var(--space-sm);
}
.excerpt__metadata {
color: var(--color-grey);
font-size: 12px;
font-size: var(--size-body-extra-small);
margin-bottom: var(--space-sm);
}

5
css/footer.css
View File

@@ -1,12 +1,9 @@
.footer {
text-align: center;
font-size: var(--size-body-extra-small);
}
.footer__head,
.footer__body {
margin-bottom: var(--space-sm);
}
.footer__text {
font-size: 14px;
}

27
css/index.css
View File

@@ -32,11 +32,20 @@
--color-facebook: #3e5a98;
--color-twitter: #1da1f2;
--color-rss: #ee802f;
--space-xxs: 5px;
--space-xs: 10px;
--space-sm: 20px;
--space-md: 30px;
--space-lg: 60px;
--space-xxs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--size-heading-1: 2rem;
--size-heading-2: 1.8rem;
--size-heading-3: 1.6rem;
--size-heading-4: 1.424rem;
--size-heading-5: 1.267rem;
--size-heading-6: 1.125rem;
--size-body: 1rem;
--size-body-small: 0.889rem;
--size-body-extra-small: 0.79rem;
--transition-fs: 0.15s;
--transition-md: 0.3s;
--transition-sl: 0.6s;
@@ -46,8 +55,8 @@
--link-focus: 0 3px 0 0 var(--color-light-blue);
}
@custom-media --viewport-sm (min-width: 480px);
@custom-media --viewport-md (min-width: 640px);
@custom-media --viewport-lg (min-width: 900px);
@custom-media --viewport-xl (min-width: 1200px);
@custom-media --viewport-sm (min-width: 30rem);
@custom-media --viewport-md (min-width: 40rem);
@custom-media --viewport-lg (min-width: 60rem);
@custom-media --viewport-xl (min-width: 75rem);
@custom-media --viewport-wordpress-admin-bar (min-width: 783px);

2
css/metadata.css
View File

@@ -1,7 +1,7 @@
.metadata {
display: flex;
flex-flow: row wrap;
font-size: 12px;
font-size: var(--size-body-extra-small);
margin-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-light-grey);
}

2
css/nav.css
View File

@@ -128,7 +128,7 @@
.nav__list {
font-family: var(--heading-font-family);
font-size: 1.2rem;
font-size: var(--size-heading-6);
}
.nav__list .nav__list {

2
css/page.css
View File

@@ -3,7 +3,7 @@
grid-auto-flow: dense;
grid-gap: var(--space-xs);
grid-template-columns: 1fr;
max-width: 1200px;
max-width: 75rem;
margin: var(--space-xs) var(--space-xs) 0;
}

9
css/title.css
View File

@@ -1,17 +1,10 @@
.title {
font-family: var(--heading-font-family);
font-size: 1.8rem;
color: var(--color-dark-blue);
font-size: var(--size-heading-1);
margin-bottom: var(--space-sm);
}
@media (--viewport-md) {
.title {
font-size: 2.4rem;
margin-bottom: var(--space-md);
}
}
.title a {
color: inherit;
}

2
theme/partials/archive.php
View File

@@ -35,7 +35,7 @@ foreach ($posts as $post) {
<ol class="archive__list archive__list--sub-list">
<?php foreach ($yearData as $month => $monthData) : ?>
<li class="archive__item">
<h3 class="archive__heading">
<h3 class="archive__subheading">
<?php echo $month ?>
</h3>
<ol class="archive__list archive__list--sub-list">