diff --git a/css/icon.css b/css/icon.css
index 7892320..8acd1a9 100644
--- a/css/icon.css
+++ b/css/icon.css
@@ -19,6 +19,11 @@
width: 48px;
}
+.icon--extra-large {
+ height: 72px;
+ width: 72px;
+}
+
.icon--facebook {
color: var(--color-facebook);
}
diff --git a/css/nav.css b/css/nav.css
index 363dc08..2f6b198 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -37,6 +37,7 @@
transform: translateX(-100%);
transition: transform var(--nav-transition-duration) ease-out;
z-index: 10;
+ overflow-y: auto;
}
.logged-in .nav__content {
@@ -49,14 +50,32 @@
margin-right: 62px;
}
+.nav__title-link {
+ display: block;
+ position: relative;
+}
+
.nav__title-link,
-.nav__title-link:active,
-.nav__title-link:focus,
.nav__title-link:hover,
+.nav__title-link:focus,
.nav__title-link:visited {
color: #fff;
}
+.nav__title-link-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 72px;
+ height: 72px;
+ opacity: 0;
+ transition: opacity var(--nav-transition-duration) ease-out;
+}
+
+.nav__title-link:hover .nav__title-link-image {
+ opacity: 1;
+}
+
.nav__close {
background-color: transparent;
border: none;
@@ -67,15 +86,19 @@
position: absolute;
right: 15px;
top: 15px;
- transition: filter var(--nav-transition-duration) ease-out;
+ transition:
+ box-shadow var(--nav-transition-duration) ease-out,
+ filter var(--nav-transition-duration) ease-out;
width: 32px;
}
-.nav__close:active,
-.nav__close:focus,
+.nav__close:focus {
+ box-shadow: 0 3px 0 0 #fff;
+ outline: 0;
+}
+
.nav__close:hover {
filter: drop-shadow(0 0 2px #fff);
- outline: 0;
}
.nav__close-bar {
@@ -103,11 +126,10 @@
flex-grow: 1;
font-family: var(--heading-font-family);
font-size: 1.5rem;
- margin: var(--spaceMd) 0 0 var(--space-md);
}
.nav__list--sub-list {
- margin-top: 0;
+ margin: 0 0 0 var(--space-sm);
}
.nav__link,
@@ -117,21 +139,26 @@
.nav__link:visited {
color: #fff;
display: inline-block;
- margin-bottom: var(--space-sm);
- transition: text-shadow var(--nav-transition-duration) ease-out;
+ margin-bottom: var(--space-xs);
+ transition:
+ box-shadow var(--nav-transition-duration) ease-out,
+ text-shadow var(--nav-transition-duration) ease-out;
}
-.nav__link:focus,
.nav__link:hover {
text-shadow: 0 0 2px #fff;
}
+.nav__link:focus {
+ box-shadow: 0 3px 0 0 #fff;
+}
+
/**
* nav Social
*/
.nav__social {
- margin-bottom: var(--spaceSm);
+ margin-bottom: var(--space-xs);
}
.nav__social-link,
@@ -141,10 +168,15 @@
.nav__social-link:visited {
display: inline-block;
color: #fff;
- transition: filter var(--nav-transition-duration) ease-out;
+ transition:
+ box-shadow var(--nav-transition-duration) ease-out,
+ filter var(--nav-transition-duration) ease-out;
+}
+
+.nav__social-link:focus {
+ box-shadow: 0 3px 0 0 #fff;
}
-.nav__social-link:focus,
.nav__social-link:hover {
filter: drop-shadow(0 0 2px #fff);
}
diff --git a/css/search.css b/css/search.css
index e38f028..a586c55 100644
--- a/css/search.css
+++ b/css/search.css
@@ -13,7 +13,7 @@
border-radius: 0;
color: var(--color-near-black);
font-family: var(--heading-font-family);
- max-width: 200px;
+ max-width: 150px;
padding: 10px;
}
diff --git a/js/image.js b/js/image.js
index 56c3871..ec60d52 100644
--- a/js/image.js
+++ b/js/image.js
@@ -1,6 +1,7 @@
export default class Image {
constructor(image) {
this.image = image;
+ this.dataset = image.dataset;
}
fadeIn() {
@@ -8,6 +9,9 @@ export default class Image {
}
start() {
+ if (this.dataset.loadTransition === 'false') {
+ return;
+ }
this.image.style.opacity = 0;
if (this.image.complete) {
this.fadeIn();
diff --git a/js/image.spec.js b/js/image.spec.js
index b91cd62..1a9458b 100644
--- a/js/image.spec.js
+++ b/js/image.spec.js
@@ -1,13 +1,18 @@
import Image from './image';
-const imageHtml = '
';
+const imageHtml = `
+
+
+`;
describe('Image', () => {
let image;
+ let disabledImage;
beforeEach(() => {
document.body.innerHTML = imageHtml;
- image = document.querySelector('img');
+ image = document.querySelector('.image');
+ disabledImage = document.querySelector('.disabled-image');
});
it('Should initialize', () => {
@@ -53,5 +58,12 @@ describe('Image', () => {
img.start();
expect(img.attachLoadedEvent).toHaveBeenCalledTimes(1);
});
+
+ test('start should do nothing if data-load-transition=false', () => {
+ const img = new Image(disabledImage);
+ img.attachLoadedEvent = jest.fn();
+ img.start();
+ expect(img.attachLoadedEvent).toHaveBeenCalledTimes(0);
+ });
});
diff --git a/theme/icons.php b/theme/icons.php
index 250c014..cb66f72 100644
--- a/theme/icons.php
+++ b/theme/icons.php
@@ -35,4 +35,7 @@
+
+
+
diff --git a/theme/partials/navigation.php b/theme/partials/navigation.php
index 8631066..1ded82c 100644
--- a/theme/partials/navigation.php
+++ b/theme/partials/navigation.php
@@ -7,8 +7,13 @@
; ?>/images/icon.png){kind=icon}