diff --git a/components/embl-group-page/embl-group-page.njk b/components/embl-group-page/embl-group-page.njk
index 71fd93a2233706889de01e6622503351821d9218..011a1e8f6ec39f418b9bd1066896260930d5f597 100644
--- a/components/embl-group-page/embl-group-page.njk
+++ b/components/embl-group-page/embl-group-page.njk
@@ -50,7 +50,7 @@
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?pattern=node-body&filter-content-type=article&filter-id=580&source=contenthub" data-target="self" data-embl-js-content-hub-loader="">
</div>
- {% render '@vf-masthead--inlay' %}
+ {% render '@vf-header--inlay' %}
<section class="vf-inlay">
@@ -59,58 +59,62 @@
<section class="vf-inlay__content vf-u-background-color-white">
<main class="vf-inlay__content--main">
- <div class="vf-text vf-text--body-xl">The Häring group aims to understand the molecular machinery that organises eukaryotic genomes. <a href="http://vfthemeprototype.lndo.site/about/">Read more about the Häring group</a></div> </main>
+ <div class="vf-text vf-text--body-xl">The Häring group aims to understand the molecular machinery that organises eukaryotic genomes. <a class="vf-link" href="http://vfthemeprototype.lndo.site/about/">Read more about the Häring group</a></div> </main>
</main>
<aside class="vf-inlay__content--additional">
- <article class="vf-summary | vf-summary--profile vf-summary--profile-r">
- <img class="vf-summary__image vf-summary__image--avatar" src="{{ '/assets/vf-summary/assets/vf-summary--profile-img.png' | path }}" alt="">
- <h3 class="vf-summary__title">Person Name</h3>
- <p class="vf-summary__text">Group Leader</p>
- <a href="##" class="vf-summary__email">Contact Person</a>
- </article>
- </aside>
-
- <hr class="vf-divider" />
- </section>
-
- <section class="vf-inlay__content vf-u-background-color-white">
- <main class="vf-inlay__content--main">
- {% render '@vf-content' %}
- </main>
+ <article class="vf-summary vf-summary--profile vf-summary--profile-r">
+ <img class="vf-summary__image vf-summary__image--avatar" src="{{ '/assets/vf-summary/assets/vf-summary--profile-img.png' | path }}" alt="">
+ <h3 class="vf-summary__title">
+ <a href="javascript:void(0);" class="vf-summary__link">FirstName Surname</a>
+ </h3>
+ <p class="vf-summary__text">EMBL Press Office</p>
+ <p class="vf-summary__email">
+ <a href="mailto:contact@persons.com" class="vf-summary__link vf-summary__link--secondary">contact@persons.com</a>
+ </p>
+ </article>
+ </aside>
+
+ <hr class="vf-divider" />
+ </section>
- <aside class="vf-inlay__content--additional">
- {% render '@vf-box' %}
- </aside>
+ <section class="vf-inlay__content vf-u-background-color-white">
+ <main class="vf-inlay__content--main">
+ {% render '@vf-content' %}
+ </main>
- </section>
+ <aside class="vf-inlay__content--additional">
+ {% render '@vf-box' %}
+ </aside>
</section>
- </div>
- <div class="vf-body vf-body__additional-content">
- <section class="vf-news-container | embl-grid embl-grid--has-sidebar vf-u-margin__top-xl">
+ </section>
+</div>
- {% render '@vf-section-header', {'section-title': 'Latest Press Releases'} %}
+<div class="vf-body vf-body__additional-content">
+ <section class="vf-news-container | embl-grid embl-grid--has-sidebar vf-u-margin__top-xl">
- <div class="vf-news-container__content">
- {% render '@vf-summary--news' %}
- {% render '@vf-summary--news' %}
- {% render '@vf-summary--news' %}
- {% render '@vf-summary--news' %}
- </div>
+ {% render '@vf-section-header', {'section-title': 'Latest Press Releases'} %}
- <div class="vf-news-container__sidebar">
- </div>
+ <div class="vf-news-container__content">
+ {% render '@vf-summary--news' %}
+ {% render '@vf-summary--news' %}
+ {% render '@vf-summary--news' %}
+ {% render '@vf-summary--news' %}
+ </div>
- </section>
+ <div class="vf-news-container__sidebar">
+ </div>
+
+ </section>
- </div>
+</div>
- <link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=569&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
+<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=569&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
- <script src="{{ '/scripts/scripts.js' | path }}"></script>
+<script src="{{ '/scripts/scripts.js' | path }}"></script>
</body>
</html>
diff --git a/components/vf-componenet-rollup/scripts.js b/components/vf-componenet-rollup/scripts.js
index a6632ceeccd116cadd649fb73826ffc4dd3a57b8..c1fc4e94e728625513a221fdc02075b208128fc2 100644
--- a/components/vf-componenet-rollup/scripts.js
+++ b/components/vf-componenet-rollup/scripts.js
@@ -10,6 +10,9 @@
import { vfBanner } from 'vf-banner/vf-banner';
vfBanner();
+import { vfMastheadSetStyle } from 'vf-masthead/vf-masthead';
+vfMastheadSetStyle();
+
import { vfTabs } from 'vf-tabs/vf-tabs';
vfTabs();
diff --git a/components/vf-header/vf-header--inlay.njk b/components/vf-header/vf-header--inlay.njk
new file mode 100644
index 0000000000000000000000000000000000000000..78e4429c99ab5ea227b18987ce29ccf55f77ecdf
--- /dev/null
+++ b/components/vf-header/vf-header--inlay.njk
@@ -0,0 +1,14 @@
+<style>
+:root {
+ /* These CSS properties are theming variables. If used, add to your HTML
+ after the VF CSS for vf-masthead and before the HTML for vf-masthead. */
+ --vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
+}
+</style>
+
+<header class="vf-header vf-header--inlay">
+
+ {% render '@vf-masthead--inlay' %}
+ {% render '@vf-navigation--main' %}
+
+</header>
diff --git a/components/vf-header/vf-header.njk b/components/vf-header/vf-header.njk
index 3bad1a5f363a98b01988f4dac0d2c254625e93fc..ac15a7dd3f9f210165b84e5e6b75b28b5540c37e 100755
--- a/components/vf-header/vf-header.njk
+++ b/components/vf-header/vf-header.njk
@@ -3,11 +3,7 @@
{% render '@vf-global-header' %}
{% render '@vf-masthead' %}
- <div class="vf-header__navigation vf-header__navigation--main">
{% render '@vf-navigation--main' %}
- </div>
- <div class="vf-header__navigation vf-header__navigation--additional">
{% render '@vf-navigation--additional' %}
- </div>
</header>
diff --git a/components/vf-header/vf-header.scss b/components/vf-header/vf-header.scss
index b84ff050d21cc8ac95f7037809b5b30dfa084cfc..ebe3bc5c804446a40cc67bbb99d813bab0cfbf6b 100755
--- a/components/vf-header/vf-header.scss
+++ b/components/vf-header/vf-header.scss
@@ -9,17 +9,14 @@
grid-template-columns: minmax(var(--page-grid-gap), auto) minmax(auto, $global-page-max-width) minmax(var(--page-grid-gap), auto);
}
-.vf-header > .vf-global-header {
- margin-bottom: -1px;
-}
-
-.vf-header__navigation {
- display: grid;
- grid-column: 1 / -1;
- grid-template-columns: minmax(var(--page-grid-gap), auto) minmax(auto, $global-page-max-width) minmax(var(--page-grid-gap), auto);
- & > * {
+.vf-header {
+ .vf-navigation--main {
grid-column: 2 / -2;
}
+ .vf-navigation--additional {
+ grid-column: 1 / -1;
+ grid-row: 2;
+ }
}
.vf-header__navigation--site {
@@ -33,3 +30,19 @@
background-color: set-color(vf-color-gray-dark);
grid-row: 2;
}
+
+.vf-header > .vf-global-header {
+ margin-bottom: -1px;
+}
+
+.vf-header--inlay {
+ grid-column: 2 / -2;
+
+ .vf-masthead__heading {
+ padding: 0 1rem;
+ }
+
+ .vf-navigation {
+ grid-column: 1 / -1;
+ }
+}
diff --git a/components/vf-masthead/.npmignore b/components/vf-masthead/.npmignore
new file mode 100644
index 0000000000000000000000000000000000000000..cd8944a12375ac0417bbcd070c3278330004aab4
--- /dev/null
+++ b/components/vf-masthead/.npmignore
@@ -0,0 +1,4 @@
+bin
+.github
+.travis.yml
+node_modules
diff --git a/components/vf-masthead/README.md b/components/vf-masthead/README.md
index f1774afcf380e9b5fc46128ae901b4c4436e3f47..4126051d8f653666b836b3ae6261cee62e54d2c0 100755
--- a/components/vf-masthead/README.md
+++ b/components/vf-masthead/README.md
@@ -2,6 +2,97 @@
## About
+## Usage
+
+### Background Colours
+
+By default, the background colour for the masthead is `vf-color-green`. To make this more adaptable for other teams and organisation the Visual Framework uses CSS Custom Properties in order to be able to switch this colour to something more in-keeping with the team wanting to use this component.
+
+The colour values are stored in two CSS custom properties. One for the background colour itself and the other for the text colour.
+
+```css
+ --vf-masthead__color--foreround-default: var(--vf-color-white);
+ --vf-masthead__color--background-default: var(--vf-color-green);
+```
+
+This is set in the components Sass partial but is used in the components HTML inline.
+
+```html
+ <div class="vf-masthead" style="
+ background-color: var( --vf-masthead__color--background, var(--vf-masthead__color--background-default) );
+ color: var( --vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
+ ">
+```
+
+To override this the changes to `--vf-masthead__color--foreground-default` and `--vf-masthead__color--background-default` need to be applied either after the Sass partial is compiled in your build step or in the HTML on the page using `root`:
+
+```html
+<style>
+:root {
+ --vf-masthead__color--background: none;
+ --vf-masthead__color--foreground: #000000;
+}
+</style>
+```
+
+#### notes:
+
+If you are overriding the background or foreground (text) colour make sure you are:
+
+- using a colour from the Visual Framework
+- testing to be sure that the contrast ratio meets accessibility guidelines
+
+---
+
+### Background Images
+
+If you wish to use an image instead of a colour for the background of your masthead you will need to define its location as a CSS Custom Property.
+
+```css
+--vf-masthead__bg-image: url('path/to/background-image_00EF00.png');
+```
+
+#### Image Size
+
+The maximum dimensions for a background image is 1224px wide with a height of 150px. As more and more displays are what we term 'retina' they need to be twice the width and height to look crisp.
+
+Images that are used for mastheads need to have dimensions of 2448px by 300px.
+
+#### Text Colour
+
+When using a background image we have to determine the best text colour to meet the contrast ratio from our accessibility guidelines.
+
+We do this using JavaScript and the background image filename.
+
+In creating the background images for mastheads each image filename needs to have it's most dominate colour added as a hexadecimal code.
+
+```bash
+masthead-background-image--00EF00.png
+```
+
+The JavaScript looks for this hexidecimal colour code and mathematically works out the correct text colour to use. The CSS custom property `--vf-masthead__color--foreground` is then added as a style block after the `body` tag in the HTML page. It will also add the custom property `--vf-masthead__color--background: none` to remove the background colour.
+
+```html
+<style>
+:root {
+ --vf-masthead__color--background: none;
+ --vf-masthead__color--foreground: #00EF00;
+}
+</style>
+```
+
+If JavaScript is disabled, or if it doesn't load with the page. The masthead will default to the background colour.
+
+---
+
+### Browser Support
+
+CSS Custom Properties do not work in older versions of Internet Explorer. We provide a default look for the masthead for these browser which is a white foreground colour (for text) on a green background.
+
+However, this can be overriden if needed using the Sass variables.
+
+<br>
+
## Installation and Implementation
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-masthead` with this command.
diff --git a/components/vf-masthead/assets/group-bg.png b/components/vf-masthead/assets/group-bg_2d4155.png
similarity index 100%
rename from components/vf-masthead/assets/group-bg.png
rename to components/vf-masthead/assets/group-bg_2d4155.png
diff --git a/components/vf-masthead/package.json b/components/vf-masthead/package.json
index 031a046c3d30ed7e207c2aae3b0abed3fbd5db4b..6fb9b9c74c8c0f6c6b1bbe6295d0482d25a22c4a 100755
--- a/components/vf-masthead/package.json
+++ b/components/vf-masthead/package.json
@@ -7,14 +7,6 @@
"license": "Apache 2.0",
"style": "vf-masthead.css",
"sass": "index.scss",
- "files": [
- "assets",
- "index.scss",
- "vf-masthead.scss",
- "vf-masthead.css",
- "vf-masthead.njk",
- "vf-masthead.config.yml"
- ],
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
diff --git a/components/vf-masthead/vf-masthead--inlay.njk b/components/vf-masthead/vf-masthead--inlay.njk
index 923244fa9654d18dafa231df5d06738d6ccca29b..0c8ae2c834269f1f2e73be14c4cef43474408787 100644
--- a/components/vf-masthead/vf-masthead--inlay.njk
+++ b/components/vf-masthead/vf-masthead--inlay.njk
@@ -2,30 +2,17 @@
:root {
/* These CSS properties are theming variables. If used, add to your HTML
after the VF CSS for vf-masthead and before the HTML for vf-masthead. */
- /* --vf-masthead__color--background: none; */
- /* --vf-masthead__color--foreground: #000000; */
- /* --vf-masthead__bg-image: url('http://www.fillmurray.com/800/200'); */
+ --vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
}
</style>
-
-<header class="vf-inlay__header">
- <div class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
+<div data-vf-js-masthead class="vf-masthead" style="background-color: 'var(--vf-masthead__color--background', var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreground-default) );">
+ <div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
- <a class="vf-masthead__heading__link" href="http://dev-vf-theme-prototype.pantheonsite.io">Häring Group</a>
+ <a class="vf-masthead__heading__link" href="#">Häring Group</a>
<span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
</h1>
</div>
- </div> <!--/vf-masthead-->
- <nav class="vf-navigation vf-navigation--main">
- <ul class="vf-navigation__list | vf-list--inline">
- <li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/about/" class="vf-navigation__link">About</a></li>
- <li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/members/" class="vf-navigation__link">Members</a></li>
- <li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/publications/" class="vf-navigation__link">Publications</a></li>
- <li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/jobs/" class="vf-navigation__link">Jobs</a></li>
- <li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/blog/" class="vf-navigation__link">Blog</a></li>
- <li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/optional/" class="vf-navigation__link">Optional</a></li>
- </ul>
- </nav>
- <!--/vf-navigation-->
-</header>
+ </div>
+</div>
+<!--/vf-masthead-->
diff --git a/components/vf-masthead/vf-masthead--with-title-block.njk b/components/vf-masthead/vf-masthead--with-title-block.njk
index 2ca2c440f6e8c956136597b8262dcbae50cb2fb9..631c00cd82b6a87fca4e8140386d3f49e5d7c6ea 100644
--- a/components/vf-masthead/vf-masthead--with-title-block.njk
+++ b/components/vf-masthead/vf-masthead--with-title-block.njk
@@ -1,23 +1,22 @@
<div class="vf-masthead vf-masthead--with-title-block" style="background-image: url('{{ '/assets/vf-masthead/assets/group-bg.png' | path }}')">
- <div class="vf-masthead__title">
- <div class="vf-masthead__title-inner">
+ <div class="vf-masthead__inner">
+ <div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
- <a href="http://dev.beta.embl.org/guidelines/visual-framework" class="vf-masthead__heading__link" data-pjax="">Visual Framework 2.0</a>
+ <a href="#" class="vf-masthead__heading__link">Strategy & Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
- <span class="vf-masthead__location">EMBL</span>
- <span class="vf-masthead__group"><a href="http://dev.beta.embl.org/guidelines/">Guidelines</a></span>
+ <span class="vf-masthead__location">VF Hamburg</span>
+ <span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
- </div>
-
- <form action="" class="vf-masthead__form--search">
- <div class="vf-masthead__form__item">
- <label for="" class="vf-masthead__form__label">Search This Project</label>
- <input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
- <button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
- </div>
- <span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
- </form>
+ <form action="" class="vf-masthead__form--search">
+ <div class="vf-masthead__form__item">
+ <label for="" class="vf-masthead__form__label">Search This Project</label>
+ <input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
+ <button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
+ </div>
+ <span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
+ </form>
+ </div>
</div>
diff --git a/components/vf-masthead/vf-masthead.js b/components/vf-masthead/vf-masthead.js
new file mode 100644
index 0000000000000000000000000000000000000000..5cc8a0f3a05c9f860d2fce664c8acb446a67567d
--- /dev/null
+++ b/components/vf-masthead/vf-masthead.js
@@ -0,0 +1,53 @@
+// vf-masthead
+
+
+// The background image for the banner element are taken from the database.
+// The filename includes the hex code for the background colour of the image.
+// Then test if the 6 characters are a hex code and declare the background-color
+
+/**
+ * Function for making background color of banner from image file name
+ * @example vfMastheadSetStyle()
+ */
+function vfMastheadSetStyle() {
+ const vfMastheads = document.querySelectorAll('[data-vf-js-masthead]');
+ if (vfMastheads[0]) {
+ let el = vfMastheads[0];
+ let bannerBG = getComputedStyle(el).getPropertyValue('--vf-masthead__bg-image');
+ let filename = bannerBG.substr(0, bannerBG.lastIndexOf('.')) || bannerBG;
+ let hexcode = filename.substr(filename.length - 6);
+ let bannerBGC = "#" + hexcode;
+ let regHex = /[0-9A-Fa-f]{6}/g;
+ let threshold = 130; // about half of 256. Lower threshold equals more dark text on dark background
+ let cBrightness = 255; // default to above the threshold
+
+ if (regHex.test(hexcode)) {
+
+ if (!bannerBGC) return;
+
+ bannerBGC = bannerBGC.trim();
+
+ function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
+ function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
+ function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
+ function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
+
+ function getCorrectTextColor(hex){
+ let hRed = hexToR(hex);
+ let hGreen = hexToG(hex);
+ let hBlue = hexToB(hex);
+ return ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
+ }
+
+ cBrightness = getCorrectTextColor(bannerBGC);
+
+ if (cBrightness > threshold){
+ el.style.setProperty('--vf-masthead__color--foreground', "#000000");
+ } else if (cBrightness < threshold) {
+ el.style.setProperty('--vf-masthead__color--foreground', "#FFFFFF");
+ }
+ }
+ }
+};
+
+export { vfMastheadSetStyle };
diff --git a/components/vf-masthead/vf-masthead.njk b/components/vf-masthead/vf-masthead.njk
index b7441d61f93a6053698719c54452124eeb7490f0..87f94107f0a82b4a32af1461c74b82760de190e0 100755
--- a/components/vf-masthead/vf-masthead.njk
+++ b/components/vf-masthead/vf-masthead.njk
@@ -1,20 +1,22 @@
<div class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
- <div class="vf-masthead__title">
- <h1 class="vf-masthead__heading">
- <a href="#" class="vf-masthead__heading__link">Strategy & Communications</a>
- </h1>
- <h2 class="vf-masthead__subheading">
- <span class="vf-masthead__location">VF Hamburg</span>
- <span class="vf-masthead__group">Structural Biology</span>
- </h2>
- </div>
-
- <form action="" class="vf-masthead__form--search">
- <div class="vf-masthead__form__item">
- <label for="" class="vf-masthead__form__label">Search This Project</label>
- <input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
- <button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
+ <div class="vf-masthead__inner">
+ <div class="vf-masthead__title">
+ <h1 class="vf-masthead__heading">
+ <a href="#" class="vf-masthead__heading__link">Strategy & Communications</a>
+ </h1>
+ <h2 class="vf-masthead__subheading">
+ <span class="vf-masthead__location">VF Hamburg</span>
+ <span class="vf-masthead__group">Structural Biology</span>
+ </h2>
</div>
- <span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
- </form>
+
+ <form action="" class="vf-masthead__form--search">
+ <div class="vf-masthead__form__item">
+ <label for="" class="vf-masthead__form__label">Search This Project</label>
+ <input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
+ <button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
+ </div>
+ <span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
+ </form>
+ </div>
</div>
diff --git a/components/vf-masthead/vf-masthead.scss b/components/vf-masthead/vf-masthead.scss
index 441da8bc22004651b695167a358267e21fb08b39..ceb8b44d8da80788512e33b561b2ac2e46d1acef 100755
--- a/components/vf-masthead/vf-masthead.scss
+++ b/components/vf-masthead/vf-masthead.scss
@@ -2,78 +2,43 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
// vf-masthead
-.vf-inlay__header {
- // box-sizing: border-box;
- grid-column: 1 / -1;
- margin: 0 auto;
- max-width: 76.5em;
- padding: 0 1rem;
- position: relative;
- width: 100%;
-
- .vf-masthead__heading {
- padding: 0 1rem;
- }
-
- .vf-navigation {
- &::before {
- background-color: inherit;
- content: '';
- height: 37px; // special number
- left: 50%;
- margin: 0 -50vw;
- position: absolute;
- right: 50%;
- width: 100vw;
- z-index: -1;
- }
- }
-}
-
.vf-masthead {
--vf-masthead__color--foreround-default: var(--vf-color-white);
--vf-masthead__color--background-default: var(--vf-color-green);
background-color: set-color(vf-color-green);
+ background-image: var( --vf-masthead__bg-image, none);
+ background-repeat: no-repeat;
+ background-size: cover;
color: set-color(vf-color-white);
- &::before {
- background-color: inherit;
- background-image: var( --vf-masthead__bg-image, 0);
- background-repeat: no-repeat;
- background-size: cover;
- content: '';
- height: 100%;
- left: 50%;
- margin: 0 -50vw;
- position: absolute;
- right: 50%;
- width: 100vw;
- z-index: -1;
- }
-
@media (min-width: $vf-breakpoint-l) {
- display: grid;
- grid-template-columns: calc(var(--embl-grid-module--prime) + var(--embl-grid-spacing-normaliser)) repeat(auto-fit, minmax(288px, 1fr));
- grid-template-rows: 48px 1fr;
+ padding-top: 48px;
}
}
+.vf-masthead__inner {
+ display: flex;
+ margin: 0 auto;
+ max-width: 76.5em;
+ width: 100%;
+}
+
.vf-masthead__title {
align-self: unset;
display: inline-flex;
flex-direction: column-reverse;
- grid-column: 1 / span 3;
- grid-row: 2;
+ // margin: 0 auto;
+ z-index: 2;
}
.vf-masthead__heading {
@include set-type(heading--xl, $custom-margin-bottom: 8px);
- color: inherit;
+ color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
display: flex;
flex-direction: column;
}
@@ -81,7 +46,7 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead__heading--additional {
@include set-type(heading--s, $custom-margin-bottom: 0);
- color: inherit;
+ color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
position: relative;
top: -8px;
}
@@ -89,7 +54,7 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead__sub-heading {
@include set-type(heading--s);
- color: $vf-masthead__title-text--color;
+ color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
}
.vf-masthead__heading__link {
@@ -115,29 +80,30 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead--with-title-block {
- grid-column-gap: 0;
- &::before {
- background-color: set-color(vf-color-black);
- content: '';
- grid-column: 1 / 2;
- grid-row: 2 / 2;
- }
.vf-masthead__title {
- align-self: unset;
+ background-color: set-color(vf-color-black);
display: inline-flex;
- grid-column: 2 / span 1;
padding-right: 16px;
+ padding-top: 16px;
+ position: relative;
- .vf-masthead__title-inner {
+ &::before {
background-color: set-color(vf-color-black);
+ content: '';
display: inline-flex;
flex-direction: column-reverse;
grid-auto-columns: max-content;
- grid-column: 3 / -2;
+ height: 100%;
padding-left: 16px;
+ position: absolute;
+ transform: translateX(-50%);
+ width: 50vw;
}
}
+ .vf-masthead__subheading {
+ z-index: 5150;
+ }
}
.vf-masthead__form--search {
@@ -145,6 +111,8 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
grid-row: 2;
justify-content: flex-end;
margin-bottom: 12px;
+ margin-left: auto;
+ max-width: 288px;
z-index: 5150;
}
diff --git a/components/vf-navigation/vf-navigation--additional.scss b/components/vf-navigation/vf-navigation--additional.scss
index e0c47bf7c1465fd25de391f31c37ae5aec4078e1..abf7f0a3d6c4afa94ef8edb6c62feb01bcec195a 100644
--- a/components/vf-navigation/vf-navigation--additional.scss
+++ b/components/vf-navigation/vf-navigation--additional.scss
@@ -7,15 +7,34 @@
border-width: 1px 0 1px 0;
box-sizing: border-box;
display: flex;
+ margin: 0 auto;
+ max-width: 76.5em;
padding: 4px 0;
+ position: relative;
text-transform: uppercase;
+ width: 100%;
+
+ &::before {
+ background-color: inherit;
+ content: '';
+ height: 35px; // magic number
+ left: 50%;
+ margin: 0 -50vw;
+ position: absolute;
+ right: 50%;
+ top: 0;
+ width: 100vw;
+ z-index: -1;
+ }
.vf-navigation__heading {
color: set-color(vf-color-white);
+ padding-top: 6px; // magic number
}
.vf-navigation__list {
margin-left: auto;
+ padding-top: 5px; // magic number
}
.vf-navigation__item:not(:first-child) {
diff --git a/components/vf-navigation/vf-navigation--main.scss b/components/vf-navigation/vf-navigation--main.scss
index cf49c31105c4ce3f4e8fb86ab24ff808b4c1585d..2d7ea0e879c3e49196f9f6d7d995439611ff149e 100644
--- a/components/vf-navigation/vf-navigation--main.scss
+++ b/components/vf-navigation/vf-navigation--main.scss
@@ -3,6 +3,19 @@
.vf-navigation--main {
background-color: set-color(vf-color-gray-dark);
+ position: relative;
+
+ &::before {
+ background-color: inherit;
+ content: '';
+ height: 37px; // special number
+ left: 50%;
+ margin: 0 -50vw;
+ position: absolute;
+ right: 50%;
+ width: 100vw;
+ z-index: -1;
+ }
.vf-navigation__list {
display: block;
diff --git a/components/vf-navigation/vf-navigation.scss b/components/vf-navigation/vf-navigation.scss
index 8795a0c147986b63206300ce747bc91a32d2c840..8f9b3b90463675a626bc7e2dfc8f9462d2737fc1 100755
--- a/components/vf-navigation/vf-navigation.scss
+++ b/components/vf-navigation/vf-navigation.scss
@@ -4,6 +4,7 @@
.vf-navigation__list {
display: flex;
flex-direction: row;
+
}
.vf-navigation__heading {
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 5e2b7b936ee1a11dcb5cce008696e954aa228bd8..f0022fc6eb98324820927782a59e3858689d7ef3 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -8986,7 +8986,7 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+ "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
}
}
@@ -24242,7 +24242,7 @@
"get-stdin": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
- "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
+ "integrity": "sha1-ngm/cSs2CrkiXoEgSPcf3pyJZXs="
},
"glob": {
"version": "7.1.3",
@@ -24416,7 +24416,7 @@
"meow": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz",
- "integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==",
+ "integrity": "sha1-38c9Y6mvxxSl43F2DrXIi5EHiqQ=",
"requires": {
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
@@ -24432,7 +24432,7 @@
"micromatch": {
"version": "3.1.10",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
- "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+ "integrity": "sha1-cIWbyVyYQJUvNZoGij/En57PrCM=",
"requires": {
"arr-diff": "^4.0.0",
"array-unique": "^0.3.2",
@@ -24507,7 +24507,7 @@
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
- "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+ "integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE="
},
"postcss": {
"version": "7.0.14",
@@ -24590,7 +24590,7 @@
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
- "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
+ "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q="
},
"slice-ansi": {
"version": "2.1.0",
@@ -24769,7 +24769,7 @@
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
- "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+ "integrity": "sha1-s56mIp72B+zYniyN8SU2iRysm40="
},
"postcss-selector-parser": {
"version": "5.0.0",
@@ -24784,7 +24784,7 @@
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
- "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+ "integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE="
}
}
},
@@ -25165,7 +25165,7 @@
"fs-extra": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
- "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+ "integrity": "sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=",
"requires": {
"graceful-fs": "^4.1.2",
"jsonfile": "^4.0.0",
@@ -25199,7 +25199,7 @@
"js-yaml": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz",
- "integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==",
+ "integrity": "sha1-LnhEFka9RoLpY/IrbpKCPDCcYtw=",
"requires": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
@@ -26837,7 +26837,7 @@
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
- "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+ "integrity": "sha1-Sl7Hxk364iw6FBJNus3uhG2Ay8Q=",
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
@@ -26849,7 +26849,7 @@
"dateformat": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
- "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
+ "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4="
},
"debug": {
"version": "4.1.1",
@@ -26862,7 +26862,7 @@
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
- "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+ "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
"requires": {
"locate-path": "^3.0.0"
}
@@ -26918,7 +26918,7 @@
"read-pkg-up": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
- "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
+ "integrity": "sha1-GyIcYIi6d5lgHICPkRYcZuWPiXg=",
"requires": {
"find-up": "^3.0.0",
"read-pkg": "^3.0.0"
diff --git a/tools/component-generator/templates/_package.json b/tools/component-generator/templates/_package.json
index 0b91073156109631d8b3ba9b1e49997a5cabdb88..884b25df1bfed8ffb21536142ef9a91cf7ec0bab 100755
--- a/tools/component-generator/templates/_package.json
+++ b/tools/component-generator/templates/_package.json
@@ -9,9 +9,9 @@
"sass": "index.scss",
"main": "build/index.js",
"test": "echo \"Error: no test specified\" && exit 1",
-"publishConfig": {
- "access": "public"
-},
+ "publishConfig": {
+ "access": "public"
+ },
"repo": "https://github.com/visual-framework/vf-core/tree/master/tree/master/components/<%= componentName %>",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues"