Commit 0ef897fe authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Graft into typical EBI VF theme approach

parent 68f9e87e
Pipeline #4828 passed with stage
in 2 minutes and 1 second
......@@ -22,7 +22,7 @@ gulp.task('browser-sync', function() {
});
gulp.task('sass', function() {
return gulp.src('scss/style.scss')
return gulp.src('scss/theme-embl.scss')
.pipe($.sass({
includePaths: sassPaths
// outputStyle: 'compressed' // if css compressed **file size**
......@@ -36,6 +36,7 @@ gulp.task('sass', function() {
gulp.task('refreshBrowser', function () {
setTimeout(function() {
console.log('Reloading browser windows.');
browserSync.reload();
}, 500); // wait for the filesystem to write
});
......@@ -43,7 +44,8 @@ gulp.task('refreshBrowser', function () {
gulp.task('dev', ['sass', 'browser-sync'], function() {
var watcher = gulp.watch(['./scss/**/*.scss','./public/index.html'], function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
console.log('File ' + event.type + ': ' + event.path);
console.log('Running tasks...');
gulpSequence('sass', 'refreshBrowser')(function (err) {
if (err) console.log(err)
})
......
<html>
<!doctype html>
<html lang="en">
<head>
<title>EMBL Strategy &amp; Communications</title>
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css" />
<link href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
<meta charset="utf-8" />
<title>The European Bioinformatics Institute &lt; EMBL-EBI</title>
<meta name="description" content="EMBL-EBI" /><!-- Describe what this page is about -->
<meta name="keywords" content="bioinformatics, europe, institute" /><!-- A few keywords that relate to the content of THIS PAGE (not the whol project) -->
<meta name="author" content="EMBL-EBI" /><!-- Your [project-name] here -->
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#70BDBD" /> <!-- Android Chrome mobile browser tab color -->
<!-- Add information on the life cycle of this page -->
<meta name="ebi:owner" content="John Doe" /> <!-- Who should be contacted about changes -->
<meta name="ebi:review-cycle" content="30" /> <!-- In days, how often should the content be reviewed -->
<meta name="ebi:last-review" content="2015-12-20" /> <!-- The last time the content was reviewed -->
<meta name="ebi:expiry" content="2016-01-20" /> <!-- When this content is no longer relevant -->
<!-- If you link to any other sites frequently, consider optimising performance with a DNS prefetch -->
<link rel="dns-prefetch" href="//www.embl.org" />
<!-- If you have custom icon, replace these as appropriate.
You can generate them at realfavicongenerator.net -->
<link rel="icon" type="image/x-icon" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
<link rel="apple-touch-icon-precomposed" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
<link rel="mask-icon" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
<meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
<meta name="msapplication-TileImage" content="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all" />
<!-- Use this CSS file for any custom styling -->
<!--
<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />
-->
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- If you have a custom header image or colour -->
<!--
<meta name="ebi:masthead-color" content="#3F3F3F" />
<meta name="ebi:masthead-image" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/images/backgrounds/embl-ebi-background.jpg" />
-->
<div id="ss-bar" class="ss-bar callout warning small margin-bottom-none sticky is-stuck is-at-bottom">
<div class="row">
<a href="https://blogs.embl.org/communications/2018/03/20/digital-release-phases/" class=" tag alpha">Beta</a> We're testing a new page. Go <a href="#">back to EMBL Intranet</a>
</div>
</div>
<!-- you can replace this with theme-[projectname].css. See http://www.ebi.ac.uk/web/style/colour for details of how to do this -->
<!-- also inform ES so we can host your colour palette file -->
<link rel="stylesheet" href="css/theme-embl.css" type="text/css" media="all" />
<!-- end CSS-->
</head>
<div class="brand-bar">
<div class="row columns">
<a href="http://www.embl.org" class="no-underline"><img src="images/embl-logo.svg" alt="EMBL Logo" class="embl-logo"/></a>
<span class="r-al"></span>
</div>
<body class="ebi-black-bar-loaded">
<div id="skip-to">
<a href="#content">Skip to main content</a>
</div>
<!-- <header id="masthead-black-bar" class="clearfix masthead-black-bar"></header> -->
<section class="masthead">
<h1 class="row columns">Heidelberg</h1>
</section>
<div id="content">
<div class="">
<section id="search-people" class="row ">
<section id="ss-bar" class="ss-bar callout warning small margin-bottom-none sticky is-stuck is-at-bottom">
<div class="row">
<a href="https://blogs.embl.org/communications/2018/03/20/digital-release-phases/" class=" tag alpha">Beta</a> We're testing a new page. Go <a href="#">back to EMBL Intranet</a>
</div>
</section>
<header class="clearfix masthead-black-bar">
<div class="row columns">
<a href="http://www.embl.org" class="no-underline"><img src="https://v4-tag-springboard-grp-stratcom.surge.sh/images/embl-logo.svg" alt="EMBL Logo" class="embl-logo"/></a>
<span class="r-al"></span>
</div>
</header>
<div data-sticky-container>
<header id="masthead" class="masthead" Xdata-sticky data-sticky-on="large" data-top-anchor="content:top" data-btm-anchor="content:bottom">
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">Heidelberg</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
<!-- <nav>
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="../../">Overview</a></li>
<li><a data-open="modal-download">Download</a></li>
<li><a href="#">Support <i class="icon icon-generic" data-icon="x"></i></a></li>
</ul>
</nav> -->
<!-- /local-nav -->
</div>
</header>
</div>
<section id="search-people" class="search-people row">
<div class="columns medium-8 medium-push-2">
<form class="search input-group" method="get" action="http://intranet.embl.de/search_result/index.php">
<input type="text" placeholder="Search for people" name="search" class="input-group-field">
......@@ -106,7 +181,67 @@
</div>
</section>
<!-- Suggested layout containers -->
<section id="main-content-area" class="row" role="main">
<!-- Your menu structure should make a breadcrumb redundant, but if a breadcrump is needed uncomment the below -->
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs columns">
<li><a href="../../">EBI Framework</a></li>
<li><a href="../">Sample pages</a></li>
<li>
<span class="show-for-sr">Current: </span> Blank boilerplate
</li>
</ul>
</nav>
<div class="columns">
<section>
<h2>[page-title]</h2>
<p>Your content</p>
</section>
<section>
<h3>Level 3 heading</h3>
<p>More content in a full-width container.</p>
<h4>Level 4 heading</h4>
<p>More content in a full-width container.</p>
</section>
</div>
</section>
<!-- Optional local footer (insert citation / project-specific copyright / etc here -->
<!--
<footer id="local-footer" class="local-footer" role="local-footer">
<div class="row">
<span class="reference">How to reference this page: ...</span>
</div>
</footer>
-->
<!-- End optional local footer -->
</div>
<!-- End suggested layout containers / #content -->
<footer>
<div id="global-footer" class="global-footer">
<nav id="global-nav-expanded" class="global-nav-expanded row">
<!-- Footer will be automatically inserted by footer.js -->
</nav>
<section id="ebi-footer-meta" class="ebi-footer-meta row">
<!-- Footer meta will be automatically inserted by footer.js -->
</section>
</div>
</footer>
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script defer="defer" src="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.js"></script>
<!-- The Foundation theme JavaScript -->
<script src="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/foundation-6/js/foundation.js"></script>
<script src="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/foundationExtendEBI.js"></script>
<script type="text/JavaScript">$(document).foundation();</script>
<script type="text/JavaScript">$(document).foundationExtendEBI();</script>
</body>
......
@import "variables.scss";
@import "typography.scss";
@import url('https://khawkins98.github.io/iAWriterDuospace-hosted/style.css');
// Things that don't fit into our typical EBI theme approach.
// Brand bar
.brand-bar {
.masthead-black-bar {
padding-top: 5px;
background: none;
.embl-logo {
height: 40px;
......@@ -23,9 +22,6 @@
section {
margin-bottom: 2em;
&.masthead {
background: #3F3F3F;
}
&.announcements {
font-size: 0.8rem;
}
......@@ -36,7 +32,7 @@ section {
}
}
// callout
// Callout
.callout {
background-color: $lightest-grey;
}
......@@ -45,7 +41,7 @@ section {
}
// Search
form.search {
.search-people form.search {
input[type=text] {
padding: 12px;
font-size: 1.4em;
......@@ -70,7 +66,7 @@ form.search {
}
}
/* Service indicators */
// Service indicators
@media (min-width: $desktop) {
.ss-bar {
font-size: 0.9em;
......
body, h1, h2, h3, h4, h5, strong {
font-family: $font-sans;
}
/*
Colour palette: EMBL.org
Echoes the current (albeit dated) theme approach:
https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css
*/
h1 {
font-family: $font-serif-bold;
}
@import "variables.scss";
@import "extra-styles.scss";
@import url('https://khawkins98.github.io/iAWriterDuospace-hosted/style.css');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans');
// @import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700');
a, a:link, a:visited, a:hover {
a,
dl dt a,
a.label,
.label,
a:hover,
a:focus,
a:active {
color: $prototype-blue;
}
......@@ -15,23 +25,28 @@ a:hover {
font-weight: 400;
}
body, h1, h2, h3, h4, h5, strong {
font-family: $font-sans;
}
h1, h2, h3, strong {
font-weight: 800;
color: $dark-grey;
}
h1 {
font-size: 1.8em;
color: #fff;
font-family: $font-serif-bold;
}
h2 {
font-size: 1.3em;
margin: 1rem 0;
}
h3 {
font-size: 1rem;
}
h1, h2, h3 {
font-weight: 800;
}
ul {
color: $mid-grey;
}
......@@ -44,7 +59,6 @@ ul {
h1 {
font-size: 2.8em;
line-height: 7rem;
padding-top: 1rem;
}
h2 {
......@@ -52,10 +66,29 @@ ul {
}
}
// Tag tweaks
.tag {
a.special { background-color: $yellow-orange; }
.menu .active > a,
.tag,
.tabs-title > a:hover,
.button,
.button.primary {
background-color: $prototype-blue;
}
a.tag {
a.tag,
a.tag:hover { color: #fff; }
.tabs-title > a:hover,
.button.primary:hover,
.button.primary:focus { background: $prototype-blue; }
.tabs-title > a:focus,
.tabs-title > a[aria-selected='true'] {
color: #fff;
background: $mid-grey; }
.masthead {
background-color: $dark-grey;
margin-bottom: 2rem;
}
/* end */
/* Media Queries */
// Media Queries
$desktop: "1100px";
$tablet: "660px";
/* Typography variables */
// Typography variables
$font-serif: "iAWriterDuospace Regular", monospace;
$font-serif-bold: "iAWriterDuospace Bold", monospace;
$font-sans: 'IBM Plex Sans', sans-serif;
/* Colour variables */
$dark-grey: #333333;
// Colour variables
$dark-grey: #3F3F3F;
$mid-grey: #666666;
$light-grey: #999999;
$lighter-grey: #cccccc;
......
Supports Markdown
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