diff --git a/css/ebi-global.scss b/css/ebi-global.scss
index 81561f58baf73c7463d988b4763ae42e8c7044de..fa5b91320d75092636a49cce212d4ad3e996b03a 100644
--- a/css/ebi-global.scss
+++ b/css/ebi-global.scss
@@ -1,12 +1,3 @@
-// Various includes
-@import 'ebi-global-includes/ebi_theme_settings'; // default EBI styling
-@import 'ebi-global-includes/tag'; // custom tag class
-@import 'ebi-global-includes/embl_selector'; // EMBL Dropdown selector for .masthead-black-bar
-
-// This code is the EBI layer atop the Foundation base styling
-
-
-
/*
================
READ BEFORE EDITING!
@@ -15,10 +6,11 @@
If you wish to use Sass, do not edit this file. Edit ebi-global.scss
If you don't care about Sass, delete this block and the ebi-global.scss file.
- Note: we've included a compiled version for teams that do not wish to use Sass.
+ Note: there is a compiled version for teams that do not wish to use Sass.
*/
+// This code is the EBI layer atop the Foundation base styling
/*
ebi-global.css
@@ -29,17 +21,22 @@
or if you're using Sass you can override settings in _theme_settings.scss
*/
+// Various includes
+@import 'ebi-global-includes/ebi_theme_settings'; // default EBI styling
+@import 'ebi-global-includes/tag'; // custom tag class
+@import 'ebi-global-includes/embl_selector'; // EMBL Dropdown selector for .masthead-black-bar
+
+
body h1, body h2, body h3 { font-weight: 300; }
li { word-wrap: break-word; }
-/* pad in page content */
+// padding for page content
body.table-layout table {
padding: 0;
}
-/* Links
-===================================================*/
+// Links
a,
a:visited {
border-bottom-width: 1px;
@@ -60,8 +57,7 @@ a.image,
a.image:visited { border-bottom: 0 none; }
a.button, a.button:visited { color: $ebi-colour-light; white-space: nowrap; }
-/* Colour - defaults to be reset by custom stylesheet
-===================================================*/
+// Colour - defaults to be reset by custom stylesheet
.masthead-black-bar { background-color: #333; }
h1, h2, h3, h4, h5, h6 { color: $body-font-color; }
@@ -156,14 +152,10 @@ a:active {
}
}
- /*
- SITE-WIDE MASTHEAD LAYOUT AND SIZE
- Generic rules for global and local mastheads
- =================================================== */
+ // SITE-WIDE MASTHEAD LAYOUT AND SIZE
+ // Generic rules for global and local mastheads
- /*
- GLOBAL MASTHEAD
- ================================== */
+ // GLOBAL MASTHEAD
#local-title a,
nav a,
nav a:hover { border-bottom: none; }
@@ -177,13 +169,13 @@ a:active {
}
}
- /* Global menu styling */
+ // Global menu styling
nav ul#global-nav.menu li { border-right: none; display: inline-block; }
- /* Disable masthead-black-bar search when told */
+ // Disable masthead-black-bar search when told
body.no-global-search .masthead-black-bar ul#global-nav.menu li.search { display: none; }
- /* Mobile logo */
+ // Mobile logo
@media screen and (max-width: 40em) {
nav ul#global-nav.menu li.home { display: none; }
nav ul#global-nav.menu li.home-mobile a {
@@ -217,7 +209,7 @@ a:active {
background: rgb(0,0,0);
}
- /* custom colour for Home */
+ // custom colour for Home
ul li.home a:before {
font-family: 'EBI-Generic';
content: 'H ';
@@ -228,7 +220,7 @@ a:active {
background-color: $ebi-colour-petrol;
}
- /* custom colour for Services */
+ // custom colour for Services
ul li.services a:before {
font-family: 'EBI-Generic';
content: '( ';
@@ -239,7 +231,7 @@ a:active {
background-color: $ebi-colour-services;
}
- /* custom colour for Research */
+ // custom colour for Research
ul li.research a:before {
font-family: 'EBI-Generic';
content: ') ';
@@ -250,7 +242,7 @@ a:active {
background-color: $ebi-colour-light-green;
}
- /* custom colour for Training */
+ // custom colour for Training
ul li.training a:before {
font-family: 'EBI-Generic';
content: 't ';
@@ -261,7 +253,7 @@ a:active {
background-color: $ebi-colour-training;
}
- /* custom colour for About us */
+ // custom colour for about us
ul li.about a:before {
font-family: 'EBI-Generic';
content: 'i ';
@@ -275,7 +267,7 @@ a:active {
background-color: $ebi-colour-services;
}
- /* Custom icon for search */
+ // custom icon for search
ul li.search a:before {
font-family: 'EBI-Functional';
content: '1';
@@ -290,7 +282,7 @@ a:active {
color: #fff;
}
- /* masthead dropdwon styles */
+ // masthead dropdwon styles
.dropdown-pane {
background-color: #333;
background-position: 100% 100%;
@@ -304,7 +296,7 @@ a:active {
.button { color: #007c82; background: #fff; }
}
- /* EMBL Selector dropdown */
+ // EMBL Selector dropdown
@include embl-selector;
}
@@ -315,7 +307,7 @@ a:active {
}
// END .masthead
- /* Local masthead secondary links on mobile */
+ // Local masthead secondary links on mobile
@media screen and (max-width: 39.9375em) {
.masthead ul.menu.dropdown.float-right > li {
margin-bottom: -50px;
@@ -327,7 +319,7 @@ a:active {
li { float: none; display: inline-block; }
li.home-mobile { float: left; }
- /* make icon bar smaller for mobile */
+ // make icon bar smaller for mobile
> li > a > img,
> li > a:before {
display: block;
@@ -342,15 +334,13 @@ a:active {
}
}
- /*
- LOCAL MASTHEAD
- ================================== */
+ // LOCAL MASTHEAD
#skip-to {
top: -5000px;
position: absolute;
}
- /* Local menu styling */
+ // Local menu styling
.masthead {
background-repeat: no-repeat;
background-position: 100% 82%;
@@ -394,7 +384,7 @@ a:active {
background-size: initial;
}
- /* tweak sticky behaviour */
+ // tweak sticky behaviour
.masthead.sticky { width: 100%; position: static; -webkit-transform: none; transform: none; }
.masthead.sticky.is-stuck { position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
@@ -438,15 +428,15 @@ a:active {
background-color: $ebi-colour-petrol;
}
- /* tweak to foundation menu; hide submenu until rendered by JS */
+ // tweak to foundation menu; hide submenu until rendered by JS
ul.menu.dropdown ul.menu { display: none; }
ul.menu.dropdown ul.menu.is-dropdown-submenu.js-dropdown-active { display:block; }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: #FFF transparent transparent; }
- /* active sidebar items */
+ // active sidebar items
.menu > li > a.active { font-weight: bold; }
- /* dropdown arrow */
+ // dropdown arrow
body .dropdown.menu .has-submenu.is-down-arrow > a::after {
border-color: rgba(0,0,0,.4) transparent transparent;
}
@@ -558,16 +548,12 @@ a:active {
#local-title.logo-title-strapline h1 { font-size: 270%; }
#local-title.logo-title-strapline p { display: inline; font-size: 123.1%; }
- /*
- LOCAL FOOTER
- =============================== */
+ // LOCAL FOOTER
.local-footer {
border-top: 2px solid #eee;
}
- /*
- GLOBAL FOOTER
- ================================ */
+ // GLOBAL FOOTER
.global-footer {
border-top: 5px solid #eee;
padding-top: .5rem;
@@ -623,27 +609,23 @@ a:active {
}
}
- /*
- COOKIE BANNER
- =============================== */
+ // cookie banner
.cookie-banner {
position:fixed;
- background-color:$ebi-colour-dark;
+ background-color: $ebi-colour-dark;
width:100%;
- padding:$global-padding;
+ padding: $global-padding;
left:0;
bottom:0;
color:#eee;
- a, a:hover { color:$ebi-colour-light; }
+ a, a:hover { color: $ebi-colour-light; }
.text { margin-right:2em; }
- } // END .cookie-banner
+ }
- /*
- MISC TWEAKS
- =============================== */
+ // MISC TWEAKS
ul.menu { font-size: .9rem; }
- /* Image tweaks */
+ // image tweaks
body .thumbnail { box-shadow: none; }
.caption {
line-height: 1.3em;
@@ -669,7 +651,7 @@ a:active {
display: inline-block;
margin-bottom: -5rem;
}
- // Better positioning when combined with position-relative
+ // better positioning when combined with position-relative
.position-relative > .highlight-caption.highlight-caption-big {
position: absolute;
top: initial;
@@ -708,7 +690,6 @@ a:active {
background: linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
color: #FFF;
}
-
.caption .inner {
position: absolute;
bottom: 5%;