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

Switch px units to rems

Browse Source
This commit is contained in:
Dan Head
2019-01-15 22:08:24 +00:00
parent 079aa93a4c
commit 910795471a
10 changed files with 58 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/article.css
View File

@@ -16,7 +16,6 @@
}
.article__date-text {
line-height: 2;
margin-left: 10px;
margin-left: var(--space-xs);
vertical-align: top;
}

1
css/comment-respond.css
View File

@@ -54,6 +54,7 @@
color: #fff;
cursor: pointer;
font-family: var(--heading-font-family);
font-size: var(--size-body);
padding: var(--space-xs);
}

4
css/comment.css
View File

@@ -13,8 +13,8 @@
background-repeat: no-repeat;
background-size: 100%;
margin-right: var(--space-sm);
height: 64px;
width: 64px;
height: var(--icon-size-xl);
width: var(--icon-size-xl);
}
.comment__metadata {

14
css/excerpt.css
View File

@@ -39,11 +39,7 @@
.excerpt__icon,
.excerpt__text {
vertical-align: middle;
}
.excerpt__icon {
height: 16px;
vertical-align: top;
}
.excerpt__text {
@@ -52,10 +48,12 @@
.excerpt__audio {
margin-bottom: var(--space-sm);
width: 18rem;
height: 3rem;
}
.excerpt__image {
height: 200px;
height: 12rem;
margin-bottom: var(--space-sm);
}
@@ -79,7 +77,7 @@
position: absolute;
top: 2px;
bottom: 2px;
right: 1px;
width: 2px;
right: 0;
width: 0.1rem;
background-color: var(--color-light-blue);
}

20
css/icon.css
View File

@@ -1,27 +1,27 @@
.icon {
display: inline-block;
height: 32px;
width: 32px;
height: var(--icon-size-md);
width: var(--icon-size-md);
}
.icon--extra-small {
height: 16px;
width: 16px;
height: var(--icon-size-xs);
width: var(--icon-size-xs);
}
.icon--small {
height: 24px;
width: 24px;
height: var(--icon-size-sm);
width: var(--icon-size-sm);
}
.icon--large {
height: 48px;
width: 48px;
height: var(--icon-size-lg);
width: var(--icon-size-lg);
}
.icon--extra-large {
height: 72px;
width: 72px;
height: var(--icon-size-xl);
width: var(--icon-size-xl);
}
.icon--facebook {

7
css/index.css
View File

@@ -52,6 +52,13 @@
--logo-size-md: 9rem;
--logo-size-lg: 10rem;
--logo-size-xl: 12rem;
--icon-size-xs: 1rem;
--icon-size-sm: 1.5rem;
--icon-size-md: 2rem;
--icon-size-lg: 2.5rem;
--icon-size-xl: 4rem;
--menu-size: 3rem;
--menu-size-xl: 4rem;
--transition-fs: 0.15s;
--transition-md: 0.3s;
--transition-sl: 0.6s;

35
css/menu.css
View File

@@ -4,37 +4,46 @@
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
cursor: pointer;
display: block;
height: 48px;
left: 2px;
height: var(--menu-size);
left: var(--space-xxs);
position: fixed;
top: 2px;
transform: translateX(-100px);
top: var(--space-xxs);
opacity: 0;
transition:
filter var(--transition-md) ease-out,
opacity var(--transition-md) ease-out,
transform var(--transition-md) ease-out;
width: 48px;
width: var(--menu-size);
will-change: opacity, transition;
z-index: 5;
}
@media (--viewport-xl) {
.menu {
height: var(--menu-size-xl);
width: var(--menu-size-xl);
left: 1vw;
top: 1vw;
}
}
.logged-in .menu {
top: 48px;
top: calc(var(--space-xxs) + 48px);
}
@media (--viewport-wordpress-admin-bar) {
.logged-in .menu {
top: 34px;
top: calc(var(--space-xxs) + 34px);
}
}
.menu__line {
background-color: #fff;
border-radius: 2px;
height: 2px;
left: 12px;
border-radius: 4%;
height: 4%;
left: 25%;
position: absolute;
right: 12px;
right: 25%;
transform: translateY(-50%);
}
@@ -57,12 +66,12 @@
}
.menu.is-visible {
transform: translateX(0);
opacity: 1;
}
.menu.is-minimized {
opacity: 0.5;
transform: translateX(-12px) translateY(-12px);
transform: translate(calc(var(--space-sm) * -1), calc(var(--space-sm) * -1));
}
/**

7
css/page.css
View File

@@ -3,7 +3,7 @@
grid-auto-flow: dense;
grid-gap: var(--space-sm);
grid-template-columns: 1fr;
max-width: 75rem;
max-width: 60rem;
margin: var(--space-xs) var(--space-xs) 0;
}
@@ -72,7 +72,7 @@
@media (--viewport-lg) {
.page {
grid-template-columns: var(--logo-size-lg) 1fr;
grid-template-rows: 32px calc(var(--logo-size-lg) - var(--space-md) - 32px) 1fr;
grid-template-rows: var(--icon-size-md) calc(var(--logo-size-lg) - var(--space-md) - 32px) 1fr;
}
.page__logo {
@@ -93,7 +93,8 @@
@media (--viewport-xl) {
.page {
grid-template-columns: var(--logo-size-xl) 1fr;
grid-template-rows: 32px calc(var(--logo-size-xl) - var(--space-md) - 32px) 1fr;
grid-template-rows: var(--icon-size-md) calc(var(--logo-size-xl) - var(--space-md) - var(--icon-size-md)) 1fr;
margin: var(--space-md) auto 0;
}
.page__columns {