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

Ensure all content scales with base font-size

Browse Source
This commit is contained in:
Dan Head
2019-01-18 22:19:05 +00:00
parent 7d6c89f2bb
commit bfb07c2d0c
8 changed files with 37 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/avatar.css
View File

@@ -1,5 +1,5 @@
.avatar { .avatar {
border-radius: 5px; border-radius: var(--space-xxs);
transition: filter var(--transition-md) ease-out; transition: filter var(--transition-md) ease-out;
} }

4
css/content.css
View File

@@ -76,7 +76,7 @@
} }
.content a:focus img { .content a:focus img {
box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--color-light-blue); box-shadow: var(--image-focus);
filter: brightness(125%); filter: brightness(125%);
} }
@@ -95,7 +95,7 @@
.content .wp-caption { .content .wp-caption {
background-color: #fff; background-color: #fff;
border: 1px solid var(--color-light-grey); border: 1px solid var(--color-light-grey);
border-radius: 4px; border-radius: var(--space-xxs);
display: inline-block; display: inline-block;
margin: 0 0 var(--space-sm); margin: 0 0 var(--space-sm);
padding: var(--space-sm); padding: var(--space-sm);

3
css/index.css
View File

File diff suppressed because one or more lines are too long

4
css/logo.css
View File

@@ -26,7 +26,7 @@
} }
.logo__link:focus { .logo__link:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--color-light-blue); box-shadow: var(--image-focus);
} }
.logo__link:before { .logo__link:before {
@@ -36,7 +36,7 @@
background-size: 100%; background-size: 100%;
content: ""; content: "";
display: block; display: block;
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.5));
padding-bottom: 100%; padding-bottom: 100%;
width: 100%; width: 100%;
} }

2
css/menu.css
View File

@@ -1,7 +1,7 @@
.menu { .menu {
background-color: var(--color-dark-blue); background-color: var(--color-dark-blue);
border-radius: 50%; border-radius: 50%;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
cursor: pointer; cursor: pointer;
display: block; display: block;
height: var(--menu-size); height: var(--menu-size);

46
css/nav.css
View File

@@ -26,7 +26,7 @@
.nav__content { .nav__content {
background-color: var(--color-dark-blue); background-color: var(--color-dark-blue);
bottom: 0; bottom: 0;
box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0 0.25rem rgba(0, 0, 0, 0.25);
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -57,8 +57,8 @@
.nav__title-link { .nav__title-link {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 72px; width: var(--icon-size-xl);
height: 72px; height: var(--icon-size-xl);
border-radius: 50%; border-radius: 50%;
transition: box-shadow var(--transition-fs) ease-out; transition: box-shadow var(--transition-fs) ease-out;
} }
@@ -71,7 +71,7 @@
} }
.nav__title-link:focus { .nav__title-link:focus {
box-shadow: 0 0 0 2px var(--color-dark-blue), 0 0 0 4px #fff; box-shadow: 0 0 0 0.1rem var(--color-dark-blue), 0 0 0 0.2rem #fff;
} }
.nav__title-link-image { .nav__title-link-image {
@@ -85,41 +85,41 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
display: block; display: block;
height: 32px; height: var(--icon-size-sm);
padding: 0; padding: 0;
position: absolute; position: absolute;
right: 15px; right: var(--space-sm);
top: 15px; top: var(--space-sm);
transition: transition:
box-shadow var(--nav-transition-duration) ease-out, box-shadow var(--nav-transition-duration) ease-out,
filter var(--nav-transition-duration) ease-out; filter var(--nav-transition-duration) ease-out;
width: 32px; width: var(--icon-size-sm);
} }
.nav__close:focus { .nav__close:focus {
box-shadow: 0 3px 0 0 #fff; box-shadow: 0 0.1rem 0 0 #fff;
outline: 0; outline: 0;
} }
.nav__close:hover { .nav__close:hover {
filter: drop-shadow(0 0 2px #fff); filter: drop-shadow(0 0 0.1rem #fff);
} }
.nav__close-bar { .nav__close-bar {
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 8%;
height: 4px; height: 8%;
left: 4px;
position: absolute; position: absolute;
transition: transform var(--nav-transition-duration) ease-out var(--nav-transitionDuration); left: 0;
top: 14px; transition: transform var(--nav-transition-duration) ease-out var(--nav-transition-duration);
width: 24px; transform: translateY(-50%);
top: 50%;
width: 100%;
} }
.nav__close-text { .nav__close-text {
left: -10000px; left: -10000px;
position: absolute; position: absolute;
top: -10000px;
} }
/** /**
@@ -149,11 +149,11 @@
} }
.nav__link:hover { .nav__link:hover {
text-shadow: 0 0 2px #fff; text-shadow: 0 0 0.1rem #fff;
} }
.nav__link:focus { .nav__link:focus {
box-shadow: 0 3px 0 0 #fff; box-shadow: 0 0.1rem 0 0 #fff;
} }
/** /**
@@ -177,11 +177,11 @@
} }
.nav__social-link:focus { .nav__social-link:focus {
box-shadow: 0 3px 0 0 #fff; box-shadow: 0 0.1rem 0 0 #fff;
} }
.nav__social-link:hover { .nav__social-link:hover {
filter: drop-shadow(0 0 2px #fff); filter: drop-shadow(0 0 0.1rem #fff);
} }
.nav.is-open .nav__content { .nav.is-open .nav__content {
@@ -189,9 +189,9 @@
} }
.nav.is-open .nav__close-bar:nth-of-type(1) { .nav.is-open .nav__close-bar:nth-of-type(1) {
transform: rotate(45deg); transform: translateY(-50%) rotate(45deg);
} }
.nav.is-open .nav__close-bar:nth-of-type(2) { .nav.is-open .nav__close-bar:nth-of-type(2) {
transform: rotate(-45deg); transform: translateY(-50%) rotate(-45deg);
} }

11
css/pagination.css
View File

@@ -22,16 +22,7 @@
.pagination__current { .pagination__current {
font-weight: 700; font-weight: 700;
position: relative; position: relative;
} box-shadow: var(--link-focus);
.pagination__current:after {
background-color: var(--color-light-blue);
bottom: -1px;
content: '';
left: 0;
height: 2px;
position: absolute;
right: 0;
} }
.pagination__link, .pagination__link,

8
css/search.css
View File

@@ -12,8 +12,9 @@
border-radius: 0; border-radius: 0;
color: var(--color-near-black); color: var(--color-near-black);
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
max-width: 150px; font-size: var(--size-body-small);
padding: 10px; max-width: 8rem;
padding: var(--space-xs);
} }
.search__submit { .search__submit {
@@ -21,5 +22,6 @@
border: none; border: none;
color: #fff; color: #fff;
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
min-width: 100px; font-size: var(--size-body-small);
min-width: 5rem;
} }