Unverified Commit d7c60b76 authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

Merge pull request #2 from embl-communications/develop

Adds, displays additional EMBL components
parents e56ae0f6 c44511ab
{
"version": "0.0.29",
"name": "@visual-framework/vf-masthead",
"description": "vf-masthead component",
"homepage": "https://visual-framework.github.io/vf-core/",
"author": "VF",
"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"
},
"repo": "https://github.com/visual-framework/vf-core/tree/master/components/blocks/vf-masthead",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues/new"
},
"dependencies": {
"@visual-framework/vf-grid": "^0.0.28",
"@visual-framework/vf-sass-config": "^0.0.25",
"node-normalize-scss": "^8.0.0"
},
"keywords": [
"fractal",
"component"
],
"gitHead": "ce5e8d5c5c0b99c706f3f67324bf4c058ec89ccd"
}
<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__color--background: none; */
/* --vf-masthead__color--foreground: #000000; */
/* --vf-masthead__bg-image: url('http://www.fillmurray.com/800/200'); */
}
</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 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>
<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>
.vf-header .vf-masthead {
grid-column: 1 / -1;
}
.embl-group-header__header .vf-masthead {
grid-column: 2 / -2;
}
<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">
<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>
</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>
</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>
</div>
title: Masthead
label: Masthead
preview: '@preview--nogrid'
context:
component-type: block
<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 &amp; 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>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
</div>
$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);
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;
}
}
.vf-masthead__title {
align-self: unset;
display: inline-flex;
flex-direction: column-reverse;
grid-column: 1 / span 3;
grid-row: 2;
}
.vf-masthead__heading {
@include set-type(heading--xl, $custom-margin-bottom: 8px);
color: inherit;
display: flex;
flex-direction: column;
}
.vf-masthead__heading--additional {
@include set-type(heading--s, $custom-margin-bottom: 0);
color: inherit;
position: relative;
top: -8px;
}
.vf-masthead__sub-heading {
@include set-type(heading--s);
color: $vf-masthead__title-text--color;
}
.vf-masthead__heading__link {
@include inline-link($vf-masthead__title-text--color,$vf-masthead__title-text--color,$vf-masthead__title-text--color,$vf-masthead__title-text--color);
color: inherit;
text-decoration: none;
z-index: 5150;
}
.vf-masthead__subheading {
@include set-type(body--s-alt, $custom-margin-bottom: 0);
color: $vf-masthead__title-text--color;
text-transform: uppercase;
}
.vf-masthead__subheading a {
color: inherit;
text-decoration: none;
z-index: 5150;
}
.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;
display: inline-flex;
grid-column: 2 / span 1;
padding-right: 16px;
.vf-masthead__title-inner {
background-color: set-color(vf-color-black);
display: inline-flex;
flex-direction: column-reverse;
grid-auto-columns: max-content;
grid-column: 3 / -2;
padding-left: 16px;
}
}
}
.vf-masthead__form--search {
align-self: flex-end;
grid-row: 2;
justify-content: flex-end;
margin-bottom: 12px;
z-index: 5150;
}
.vf-masthead__form__item {
color: set-color(vf-color-white);
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 6px;
}
.vf-masthead__button {
align-items: flex-end;
background-color: set-color(vf-color-azure-dark);
border: 0;
color: set-color(vf-color-white);
margin-left: 8px;
outline: 0;
padding: 8px 12px;
svg {
fill: set-color(vf-color-white);
width: 16px;
}
}
.vf-masthead__form__label {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 4px;
text-shadow: 1px 1px 3px set-color(vf-color-white);
}
.vf-masthead__form__input--text {
flex-basis: 79%;
flex-grow: 0;
flex-shrink: 0;
font-size: 18px;
font-style: italic;
padding: map-get($vf-spacing-map, vf-spacing-tight);
}
.search-examples {
// white-space: nowrap;
color: set-color(vf-color-white);
font-size: 12px;
text-shadow: 1px 1px 0px set-ui-color(vf-ui-color-black);
a {
color: set-color(vf-color-white);
text-shadow: 1px 1px 0px set-ui-color(vf-ui-color-black);
}
}
......@@ -242,7 +242,7 @@ gulp.task('scripts:modern', function() {
// -----------------------------------------------------------------------------
gulp.task('component-assets', function() {
return gulp
.src(['./components/**/**/assets/**/*'])
.src(['./components/**/assets/**/*','./components/vf-core-components/**/assets/**/*'])
.pipe(gulp.dest('./public/assets'));
});
......
......@@ -1379,6 +1379,29 @@
"@visual-framework/vf-navigation": "^0.0.30",
"@visual-framework/vf-sass-config": "^0.0.26",
"node-normalize-scss": "^8.0.0"
},
"dependencies": {
"@visual-framework/vf-logo": {
"version": "0.0.28",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-logo/-/vf-logo-0.0.28.tgz",
"integrity": "sha512-e8fasvia9r81RLBRl5C0Z8z/l1BfkaoDAtv37uL1zrhwvm8vI+1FNTfNxz1get/gBDggu0EwrquYPeqSZ4ze7Q==",
"dev": true,
"requires": {
"@visual-framework/vf-sass-config": "^0.0.25",
"node-normalize-scss": "^8.0.0"
},
"dependencies": {
"@visual-framework/vf-sass-config": {
"version": "0.0.25",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-sass-config/-/vf-sass-config-0.0.25.tgz",
"integrity": "sha512-ZnYjdr8DCDojEKj+eM5H4y7Gy9cwkG3EBt2xjnepQPYeffZ11xEQkXYQ+mPPDcKZazJztSt2Lk9rJ/wFzKlTmw==",
"dev": true,
"requires": {
"node-normalize-scss": "^8.0.0"
}
}
}
}
}
},
"@visual-framework/vf-grid": {
......@@ -1457,24 +1480,12 @@
}
},
"@visual-framework/vf-logo": {
"version": "0.0.28",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-logo/-/vf-logo-0.0.28.tgz",
"integrity": "sha512-e8fasvia9r81RLBRl5C0Z8z/l1BfkaoDAtv37uL1zrhwvm8vI+1FNTfNxz1get/gBDggu0EwrquYPeqSZ4ze7Q==",
"dev": true,
"version": "0.0.30",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-logo/-/vf-logo-0.0.30.tgz",
"integrity": "sha512-e2Gl/e1X5Dv1J3jdE6DCw80/B2uEb5gLYiCKMRLYXC2hD+SRRS6TYZEVT3exTNTNi5/2KO683oOzuHJo+1kdDA==",
"requires": {
"@visual-framework/vf-sass-config": "^0.0.25",
"@visual-framework/vf-sass-config": "^0.0.26",
"node-normalize-scss": "^8.0.0"
},
"dependencies": {
"@visual-framework/vf-sass-config": {
"version": "0.0.25",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-sass-config/-/vf-sass-config-0.0.25.tgz",
"integrity": "sha512-ZnYjdr8DCDojEKj+eM5H4y7Gy9cwkG3EBt2xjnepQPYeffZ11xEQkXYQ+mPPDcKZazJztSt2Lk9rJ/wFzKlTmw==",
"dev": true,
"requires": {
"node-normalize-scss": "^8.0.0"
}
}
}
},
"@visual-framework/vf-masthead": {
......
<header class="vf-header">
<div class="vf-global-header">
<header class="vf-global-header">
<div class="vf-global-header__inner">
{% render '@vf-logo--responsive' %}
<p class="vf-global-header__site-name">{{ frctl.get('project.title') }}</p>
{% render '@embl-logo' %}
<p class="vf-global-header__site-name">{{ text }}</p>
{% render '@vf-navigation--global' %}
</div>
</div>
</header>
</header>
{% render '@vf-masthead' %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment