diff --git a/css/article.css b/css/article.css index 300ada1..25aeecb 100644 --- a/css/article.css +++ b/css/article.css @@ -16,7 +16,6 @@ } .article__date-text { - line-height: 2; - margin-left: 10px; + margin-left: var(--space-xs); vertical-align: top; } diff --git a/css/comment-respond.css b/css/comment-respond.css index 75969db..d3fb9c2 100644 --- a/css/comment-respond.css +++ b/css/comment-respond.css @@ -54,6 +54,7 @@ color: #fff; cursor: pointer; font-family: var(--heading-font-family); + font-size: var(--size-body); padding: var(--space-xs); } diff --git a/css/comment.css b/css/comment.css index a72bea3..dd6d47f 100644 --- a/css/comment.css +++ b/css/comment.css @@ -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 { diff --git a/css/excerpt.css b/css/excerpt.css index 68ba1a3..d28645d 100644 --- a/css/excerpt.css +++ b/css/excerpt.css @@ -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); } diff --git a/css/icon.css b/css/icon.css index 8acd1a9..9c08e9d 100644 --- a/css/icon.css +++ b/css/icon.css @@ -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 { diff --git a/css/index.css b/css/index.css index 76c81de..66c5808 100644 --- a/css/index.css +++ b/css/index.css @@ -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; diff --git a/css/menu.css b/css/menu.css index 623823d..988afd6 100644 --- a/css/menu.css +++ b/css/menu.css @@ -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)); } /** diff --git a/css/page.css b/css/page.css index b555b11..35e6ae8 100644 --- a/css/page.css +++ b/css/page.css @@ -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 { diff --git a/theme/partials/metadata.php b/theme/partials/metadata.php index 2ac4e17..2492923 100644 --- a/theme/partials/metadata.php +++ b/theme/partials/metadata.php @@ -2,7 +2,7 @@