Commit 1f34036e authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Initial setup and graft of v4 Springboard look

For https://git.embl.de/grp-stratcom/embl-digital-comms-architecture/issues/3
parents
node_modules
.DS_Store
image: node:6.9.1
preview:
stage: deploy
script:
- npm install
- gulp
- ./deploy.sh
except:
- excluded-branch-names
.git
.*
*.*~
node_modules
bower_components
README.md
pacakge.json
LICENSE
# EMBL Visual Framework layer
---
# No non-developers past this point
---
## Under the hood
This is a stripped down Foundation for Sites installation through npm.
To develop, you'll need to:
1. Clone this repo
1. Open terminal and type `npm install`
1. To build `gulp`
1. To develop locally `gulp dev`
Code will be deployed to:
- Demo page: https://master-branch-embl-visual-framework-grp-stratcom.surge.sh
- CSS: https://master-branch-embl-visual-framework-grp-stratcom.surge.sh/css/style.css
#!/bin/bash
# Split on "/", ref: http://stackoverflow.com/a/5257398/689223
REPO_SLUG_ARRAY=(${CI_PROJECT_PATH//\// })
REPO_OWNER=${REPO_SLUG_ARRAY[0]}
REPO_NAME=${REPO_SLUG_ARRAY[1]}
DEPLOY_PATH=public
DEPLOY_SUBDOMAIN_UNFORMATTED_LIST=()
# if [ "$TRAVIS_PULL_REQUEST" != "false" ]
# then
# DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(${TRAVIS_PULL_REQUEST}-pr)
if [ -n "${CI_COMMIT_TAG// }" ] #TAG is not empty
then
#sorts the tags and picks the latest
#sort -V does not work on the travis machine
#sort -V ref: http://stackoverflow.com/a/14273595/689223
#sort -t ... ref: http://stackoverflow.com/a/4495368/689223
#reverse with sed ref: http://stackoverflow.com/a/744093/689223
#git tags | ignore release candidates | sort versions | reverse | pick first line
LATEST_TAG=`git tag | grep -v rc | sort -t. -k 1,1n -k 2,2n -k 3,3n -k 4,4n | sed '1!G;h;$!d' | sed -n 1p`
echo $LATEST_TAG
if [ "$CI_COMMIT_TAG" == "$LATEST_TAG" ]
then
DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(latest)
fi
DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(${CI_COMMIT_TAG}-tag)
else
echo Deploying branch.
DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(${CI_COMMIT_REF_NAME}-branch)
fi
for DEPLOY_SUBDOMAIN_UNFORMATTED in "${DEPLOY_SUBDOMAIN_UNFORMATTED_LIST[@]}"
do
echo Beginning deplyment to Surge.sh
echo $DEPLOY_SUBDOMAIN_UNFORMATTED
# replaces "/" or "." with "-"
# sed -r is only supported in linux, ref http://stackoverflow.com/a/2871217/689223
# Domain names follow the RFC1123 spec [a-Z] [0-9] [-]
# The length is limited to 253 characters
# https://en.wikipedia.org/wiki/Domain_Name_System#Domain_name_syntax
DEPLOY_SUBDOMAIN=`echo "$DEPLOY_SUBDOMAIN_UNFORMATTED" | sed -r 's/[\/|\.]+/\-/g'`
DEPLOY_DOMAIN=https://${DEPLOY_SUBDOMAIN}-${REPO_NAME}-${REPO_OWNER}.surge.sh
node_modules/.bin/surge public --project ${DEPLOY_PATH} --domain $DEPLOY_DOMAIN --token ${SURGE_TOKEN};
# if [ "$TRAVIS_PULL_REQUEST" != "false" ]
# then
# # Using the Issues api instead of the PR api
# # Done so because every PR is an issue, and the issues api allows to post general comments,
# # while the PR api requires that comments are made to specific files and specific commits
# GITHUB_PR_COMMENTS=https://api.github.com/repos/${TRAVIS_REPO_SLUG}/issues/${TRAVIS_PULL_REQUEST}/comments
# curl -H "Authorization: token ${GITHUB_API_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"Travis automatic deployment: '${DEPLOY_DOMAIN}'"}'
# fi
done
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var gulpSequence = require('gulp-sequence').use(gulp);
var browserSync = require('browser-sync').create();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('browser-sync', function() {
browserSync.init({
server: {
// proxy: "https://work.allaboutken.com",
baseDir: './public'
}
},function(){
// something you want to do
});
});
gulp.task('sass', function() {
return gulp.src('scss/style.scss')
.pipe($.sass({
includePaths: sassPaths
// outputStyle: 'compressed' // if css compressed **file size**
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('public/css'));
});
gulp.task('refreshBrowser', function () {
setTimeout(function() {
browserSync.reload();
}, 500); // wait for the filesystem to write
});
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...');
gulpSequence('sass', 'refreshBrowser')(function (err) {
if (err) console.log(err)
})
});
// gulp.watch(['scss/**/*.scss'], ['sass']);
});
gulp.task('default', ['sass']);
{
"name": "embl-visual-framework-layer",
"version": "1.0.0",
"description": "A short-term tactical solution to implement the beta EMBL look and feel atop the the EBI Visual Framework. This will be superseeded by the EMBL Design Dialect + Design Language for Life Sciences in late 2018/early 2019.",
"main": "index.html",
"devDependencies": {
"browser-sync": "^2.24.4",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-sass": "^2.1.0",
"gulp-sequence": "^1.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://git.embl.de/khawkins/embl-visual-framework-layer.git"
},
"bugs": {
"url": "https://git.embl.de/khawkins/embl-visual-framework-layer/issues",
"email": "khawkins@ebi.ac.uk"
},
"author": "Ken Hawkins",
"license": "ISC",
"dependencies": {
"gulp-autoprefixer": "^3.1.0"
}
}
<html>
<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">
<!-- 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>
<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>
<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>
</div>
<section class="masthead">
<h1 class="row columns">Heidelberg</h1>
</section>
<div class="">
<section id="search-people" class="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">
<div class="input-group-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
</section>
<section id="announcements" class="announcements callout">
<div class="row">
<div class="columns medium-12">
<h2 class="margin-bottom-xlarge">On Campus Today</h2>
</div>
</div>
<div class="row">
<div class="columns medium-3">
<h3>Restaurant Menu</h3>
<ul class="no-bullet">
<li>Soup of the day: Chicken</li>
<li>Spaghetti Carbonara</li>
<li>Grilled Salmon</li>
<li>Fillet Steak</li>
<li>Vegetable Thai Green Curry</li>
</ul>
<p><a href="https://intranet.embl.de/administration/sgs/canteen_cafeteria/canteen_menu.pdf">View lunch Menu</a> (PDF)</p>
</div>
<div class="columns medium-9">
<h3>Seminars</h3>
<ul class="no-bullet">
<li>Wednesday, 23 May 2018, 13:15, Room Small operon<br/>
<a href="#">Gazing upon the stars: EM insight into the surprising role of actin in nuclear envelope breakdown. Pedro Machado, Cell Biology & Biophysics Unit, Group Yannick Schwab/EMCF</a>
</li>
</ul>
<p><a href="#">View all seminars</a></p>
<h3>Next Guesthouse shuttle: 17:30</h3> <a href="https://intranet.embl.de/administration/building_maintenance/transport/shuttle/embl_shuttle.pdf">Shuttle timetable</a>
</div>
</div>
</section>
<section id="links" class="links row medium-up-2">
<div class="links column">
<h2>Popular links</h2>
<ul class="no-bullet">
<li><a href="http://esupport-bm.embl.de/kayako/index.php?_m=tickets&_a=submit&departmentid=1&step=1&group=bm">Facilities Management Service Request</a></li>
<li><a href="https://intranet.embl.de/it_services/room_reservation.html">Room reservations</a></li>
</ul>
</div>
<div class="links column">
<h2>Human Resources</h2>
<ul class="no-bullet">
<li><a href="https://saprouter.embl.de:8005/sap/bc/nwbc/?sap-nwbc-node=0000000100&sap-nwbc-context=03HM33B030D633D533D2333631B0888AF7088A770D0E363032B73440881B19181B8080B1AB4F8081B121880900&sap-client=100&sap-language=EN&sap-nwbc-history_item=&sap-theme=SAP_CORBU">Book leave (SAP)</a></li>
<li><a href="https://saprouter.embl.de:8005/sap/bc/nwbc/?sap-nwbc-node=0000000100&sap-nwbc-context=03HM33B030D633D533D2333631B0888AF7088A770D0E363032B73440881B19181B8080B1AB4F8081B121880900&sap-client=100&sap-language=EN&sap-nwbc-history_item=&sap-theme=SAP_CORBU">Timesheet (SAP)</a></li>
<li><a href="https://intranet.embl.de/health_safety/08-medical_service/index.html">Medical service</a></li>
<li><a href="https://intranet.embl.de/hr/staff_information/salary/index.html">Salaries and getting paid</a></li>
</ul>
</div>
<div class="links column">
<h2>IT</h2>
<ul class="no-bullet">
<li><a href="https://itsupport.embl.de/index.php?/Tickets/Submit">IT Services</a></li>
<li><a href="https://intranet.embl.de/it_services/services/network_access/Remote_Access/How_to_config_Cisco_VPN/index.html">VPN Access</a></li>
<li><a href="https://saprouter.embl.de:8005/sap/bc/nwbc/?sap-nwbc-node=0000000100&sap-nwbc-context=03HM33B030D633D533D2333631B0888AF7088A770D0E363032B73440881B19181B8080B1AB4F8081B121880900&sap-client=100&sap-language=EN&sap-nwbc-history_item=&sap-theme=SAP_CORBU">EMBL Stores (SAP)</a></li>
<li><a href="https://saprouter.embl.de:8005/sap/bc/nwbc/?sap-nwbc-node=0000000100&sap-nwbc-context=03HM33B030D633D533D2333631B0888AF7088A770D0E363032B73440881B19181B8080B1AB4F8081B121880900&sap-client=100&sap-language=EN&sap-nwbc-history_item=&sap-theme=SAP_CORBU">Shopping cart (SAP)</a></li>
</ul>
</div>
</section>
</div>
</body>
</html>
@import "variables.scss";
@import "typography.scss";
@import url('https://khawkins98.github.io/iAWriterDuospace-hosted/style.css');
// Brand bar
.brand-bar {
padding-top: 5px;
.embl-logo {
height: 40px;
}
}
@media (min-width: $desktop) {
.brand-bar {
.embl-logo {
height: 55px;
}
}
}
// Sections
section {
margin-bottom: 2em;
&.masthead {
background: #3F3F3F;
}
&.announcements {
font-size: 0.8rem;
}
&.links {
li {
line-height: 2.5rem
}
}
}
// callout
.callout {
background-color: $lightest-grey;
}
.callout.warning {
background-color: $yellow-orange;
}
// Search
form.search {
input[type=text] {
padding: 12px;
font-size: 1.4em;
color: $dark-grey;
border: 3px solid $lighter-grey;
height: 3.4rem;
}
button {
padding: 15px;
background: #2196F3;
color: white;
font-size: 1.4em;
border: none;
height: 3.4rem;
padding: 0 3.5rem;
margin-left: 1rem;
cursor: pointer;
&:hover {
background: $prototype-blue;
}
}
}
/* Service indicators */
@media (min-width: $desktop) {
.ss-bar {
font-size: 0.9em;
}
}
body, h1, h2, h3, h4, h5, strong {
font-family: $font-sans;
}
h1 {
font-family: $font-serif-bold;
}
a, a:link, a:visited, a:hover {
color: $prototype-blue;
}
a:hover {
text-decoration: none;
font-weight: 400;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
margin: 1rem 0;
}
h3 {
font-size: 1rem;
}
h1, h2, h3 {
font-weight: 800;
}
ul {
color: $mid-grey;
}
@media (min-width: $desktop) {
ul {
font-size: 1.3em;
}
h1 {
font-size: 2.8em;
line-height: 7rem;
padding-top: 1rem;
}
h2 {
font-size: 1.6em;
}
}
// Tag tweaks
.tag {
background-color: $prototype-blue;
}
a.tag {
color: #fff;
}
/* Media Queries */
$desktop: "1100px";
$tablet: "660px";
/* 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;
$mid-grey: #666666;
$light-grey: #999999;
$lighter-grey: #cccccc;
$lightest-grey: #F1F1F1;
$prototype-blue: #298DD3;
$yellow-orange: #FFE6C4;
$yellow: #FFF8DF;
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