Skip to content

Commit 8baabf7

Browse files
aboyleaboyle
committed
Started design refresh
1 parent b04aba7 commit 8baabf7

File tree

6 files changed

+385
-0
lines changed

6 files changed

+385
-0
lines changed

‎_includes/footer_bl.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div id="footer-wrap">
2+
<div class="container">
3+
<p class="footer">
4+
<i>
5+
The Boyle Lab at the <a href="https://www.umich.edu/" target='_blank'>University of Michigan</a>
6+
is part of the Departments of <a href="http://www.ccmb.med.umich.edu/" target='_blank'>Computational Medicine & Bioinformatics</a>
7+
and <a href="http://www.hg.med.umich.edu/" target='_blank'>Human Genetics</a>, the
8+
<a href="http://cmb.medicine.umich.edu/" target='_blank'>Cellular & Molecular Biology Program</a>, the
9+
<a href="http://www.umichrna.org/" target='_blank'>Center for RNA Biomedicine</a>, the
10+
<a href="https://medicine.umich.edu/dept/dcmb/education/training-grants/bioinformatics-training-grant" target='_blank'>Bioinformatics Training Program</a>, the
11+
<a href="https://medicine.umich.edu/dept/human-genetics/genetics-training-program" target='_blank'>Predoctoral Genetics Training Program</a>, and the
12+
<a href="http://csg.sph.umich.edu/training/" target='_blank'>Genome Science Training Program</a>.
13+
</i>
14+
<br><br>
15+
<i>The Boyle Lab</i>&nbsp;&nbsp;|&nbsp;&nbsp;Department of Computational Medicine & Bioinformatics&nbsp;&nbsp;|&nbsp;&nbsp;University of Michigan
16+
<br>
17+
</p>
18+
<a href="http://sustainability.umich.edu/ocs/labs"><img style="width: 40px; height: 32px;" alt="Sustainable Lab" src="/assets/images/sustainable_lab_icon.png"></a>
19+
</div><!-- end container -->
20+
</div><!-- end footer-wrap -->
21+
22+
23+
</body>
24+
</html>

‎_includes/header_bl.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% assign current = page.url | downcase | split: '/' %}
2+
3+
<!DOCTYPE html>
4+
<html>
5+
<head>
6+
<title>{{page.title}} | The Boyle Lab</title>
7+
8+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
9+
10+
<link rel='stylesheet' type='text/css' href='/css/main_style_bl.css' />
11+
<link rel='stylesheet' type='text/css' href='/css/academicons.css' />
12+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
13+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic,700italic' rel='stylesheet' type='text/css' />
14+
15+
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
16+
17+
{% include tracking.html %}
18+
19+
<script>
20+
window.onload = function() {
21+
var a = document.getElementsByTagName('a');
22+
for (i = 0; i < a.length; i++) {
23+
if (a[i].hostname === location.hostname) {
24+
if (a[i].href.match(/(zip|dmg|txt|cfg|gz|pl|pdf)$/i)) {
25+
a[i].setAttribute('target', '_blank');
26+
a[i].onclick = function() {
27+
ga('send', 'event', 'Downloads', 'Click', this.getAttribute('href'));
28+
};
29+
}
30+
}
31+
}
32+
}
33+
</script>
34+
35+
</head>

‎_includes/nav_bl.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% assign current = page.url | downcase | split: '/' %}
2+
3+
<body>
4+
5+
<div id="nav-wrap">
6+
<a href="http://boylelab.org/" class="site-title"><img src="/assets/images/lab-logo.png" height=50></a>
7+
<nav role="navigation">
8+
<ul class='wsite-menu'>
9+
<li {% if current[1] == 'boylelab.org' %}id='active'{% endif %}><a href='/'>Home</a></li>
10+
<li {% if current[1] == 'research' %}id='active'{% endif %}><a href='/research/'>Research</a></li>
11+
<li {% if current[1] == 'people' %}id='active'{% endif %}><a href='/people/'>People</a></li>
12+
<li {% if current[1] == 'software' %}id='active'{% endif %}><a href='/software/'>Software</a></li>
13+
<li {% if current[1] == 'publications' %}id='active'{% endif %}><a href='/publications/'>Publications</a></li>
14+
<li {% if current[1] == 'jobs' %}id='active'{% endif %}><a href='/jobs/'>Jobs</a></li>
15+
<li {% if current[1] == 'news' %}id='active'{% endif %}><a href='/news/'>News</a></li>
16+
<li {% if current[1] == 'contact' %}id='active'{% endif %}><a href='/contact/'>Contact</a></li>
17+
</ul>
18+
</nav>
19+
</div><!-- end nav-wrap -->

‎_layouts/bl.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% include header_bl.html %}
2+
3+
{% include nav_bl.html %}
4+
5+
<div id="main-wrap">
6+
<div class="container">
7+
<div class="wsite-content">
8+
{{content}}
9+
</div>
10+
</div><!-- end container -->
11+
</div><!-- end main-wrap -->
12+
13+
{% include footer_bl.html %}

‎css/main_style_bl.css

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
.short-header-page #banner-image-wrap { width: 100%; height: 200px; }
2+
.short-header-page .wsite-header { width: 100%; height: 200px; background: url('/assets/images/banner-short-apb.png') no-repeat; }
3+
#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap { width:100%; }
4+
.container { margin: 0 auto; width: 960px; background: #FFFFFF; overflow:hidden; }
5+
#header-wrap .container {
6+
margin-top:0px;
7+
padding:10px 20px 0px;
8+
text-align:right;
9+
width:920px;
10+
}
11+
12+
#wsite-university { margin-top:0px; padding:10px 20px 0px; text-align:right; }
13+
#nav-wrap .container { clear: both; overflow: hidden; position: relative; border-bottom:1px solid #E8E8E8; margin-bottom:0px; padding-top: 8px; }
14+
#nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody { vertical-align:bottom; text-align:right;}
15+
#nav-wrap .container, #nav-wrap .container table { border-collapse: collapse; border-spacing: 0; width:960px; }
16+
#wsite-title { font-family: 'Open Sans', sans-serif; color:#555; line-height:30px; float:left; padding-left:10px; }
17+
#wsite-title {font-size:30px !important;font-weight:400 !important;}
18+
#wsite-title:hover { color:#0052ad; }
19+
td#nav { float:right; }
20+
td#peoplepic { text-align:center; width:200px; padding-right:20px; }
21+
td#peopledesc { text-align:left; }
22+
#navigation { line-height: 1; float: right; }
23+
#navigation ul { display: inline; list-style: none; float: right; max-width:700px; margin-bottom:-1px; }
24+
#navigation li { display: inline; position: relative; list-style: none; margin-left:6px; float: left; }
25+
#navigation ul li a { display: block; color: #333; text-decoration: none; padding: 5px 7px 8px; margin:0 0px 1px; border: 0; outline: 0; list-style-type: none; box-sizing:border-box; float: left; font:13px 'Open Sans',arial,sans-serif; text-transform:uppercase; }
26+
#navigation ul li#active a{ padding: 5px 7px 4px; border-bottom:4px solid #0D57AA; color:#000; }
27+
#navigation ul li a:hover { padding: 5px 7px 4px; border-bottom:4px solid #0D57AA; color: #666; }
28+
.wsite-menu-default a {}
29+
#banner { padding-bottom:0px; }
30+
.wsite-header { width: 100%; height: 300px; background: url('/assets/images/banner-landing.jpg') no-repeat; }
31+
#main-wrap .container {min-height:450px;}
32+
.wsite-content { padding-left:10px; padding-right:10px; padding-bottom:10px; }
33+
#footer-wrap .container { border-top:1px solid #eee; margin-top:10px; background:#FFFFFF; }
34+
#footer-wrap .container { padding:30px 20px 38px; text-align:right; width:920px; }
35+
.Nheader {background-color:#f4f4f4; border-left:4px solid #ccc; color:#505050; font-size:1em; line-height:2em; font-weight:bold; padding:0px 0px 0px 10px; margin:0px; }
36+
.imgright {float:right; margin:2px 10px 2px 10px;}
37+
38+
li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, div.paragraph, blockquote, fieldset, input { margin: 0; padding: 0; }
39+
ol, ul { margin: 0; padding: 0px 20px; }
40+
a img { border: 0; }
41+
a { text-decoration: none; }
42+
body { font-family: 'Open Sans', sans-serif; font-size: 14px; background: url('/assets/images/pattern.jpg'); color: #000; line-height:24px; }
43+
/* body { font-family: 'Open Sans', sans-serif; font-size: 14px; background: #FFFFFF; color: #000; line-height:24px; } */
44+
h3 { font-size: 22px; padding: .2em 0 .2em 0; line-height: 1.2; font-weight: normal; letter-spacing: -1px; color: #333; margin-bottom:20px; }
45+
h4 { font-size: 18px; padding: .2em 0 .2em 0; line-height: 1.2; font-weight: normal; letter-spacing: -1px; color: #333; margin-bottom:5px; }
46+
47+
a { color: #0D57AA; }
48+
a:hover { color: #00274c; }
49+
hr {background:#ddd !important;}
50+
h2 { font-size: 22px; padding: .8em 0 .2em 0; line-height: 1.2; font-weight: normal; letter-spacing: -1px; color: #333; margin-bottom:20px; }
51+
52+
div.paragraph { color:#000; font: 13px/22px 'Open Sans',arial,sans-serif; font-weight: 400; }
53+
p { color:#000; font: 13px/22px 'Open Sans',arial,sans-serif; font-weight: 400; }
54+
.footer {font-size:12px; background: #FFFFFF; width: 80%; float:right;}
55+
56+
blockquote { font-style:italic; border-left:4px solid #0370EA; margin:10px 0 10px 0; padding-left:20px; line-height:1.5; font-size:13px; color:#999; }
57+
58+
#contact { outline: 0px solid; float: left; }
59+
60+
61+
/* news */
62+
.news .list {
63+
width: 100%;
64+
padding: 0;
65+
margin: 0;
66+
clear: both;
67+
}
68+
69+
.news .list:after {
70+
content: "";
71+
display: table;
72+
clear: both;
73+
}
74+
75+
.news .item {
76+
list-style: none;
77+
margin: 0;
78+
width: 25%;
79+
float: left;
80+
}
81+
82+
.news .item ul {
83+
margin: 0;
84+
padding: 0;
85+
}
86+
87+
.news .item p {
88+
font-size: .925em;
89+
color: #666;
90+
line-height: 1.1;
91+
}
92+
93+
.news .item li {
94+
list-style: none;
95+
font-size: .875em;
96+
line-height: 1;
97+
margin: 0px 0px 7.5px;
98+
}
99+
100+
.news .list img {
101+
border: 1px solid #ccc;
102+
-webkit-border-radius: 20px;
103+
-moz-border-radius: 20px;
104+
border-radius: 20px;
105+
}
106+
107+
.news .list a:hover .image {
108+
background-color:#ccc;
109+
opacity:0.6;
110+
}
111+
112+
.news .list h3 {
113+
font-size: 1.4em;
114+
margin-bottom: 0px;
115+
}
116+
117+
.news .list ul {
118+
padding: 10px 5px 20px;
119+
}
120+
121+
.news .list a {
122+
border-bottom: 0px;
123+
color: #000000;
124+
}
125+
126+
.news .entry-content {
127+
margin-right: 7px;
128+
}
129+
130+
131+
/* people */
132+
133+
.people h2 {
134+
margin-bottom: 60px;
135+
}
136+
137+
.people .list {
138+
width: 100%;
139+
padding: 0;
140+
margin: 0;
141+
clear: both;
142+
}
143+
144+
.people .list:after {
145+
content: "";
146+
display: table;
147+
clear: both;
148+
}
149+
150+
.people .item {
151+
list-style: none;
152+
margin: 0;
153+
width: 25%;
154+
float: left;
155+
}
156+
157+
.people .item ul {
158+
margin: 0;
159+
padding: 0;
160+
}
161+
162+
.people .item p {
163+
font-size: .925em;
164+
color: #666;
165+
line-height: 1.1;
166+
}
167+
168+
.people .item li {
169+
list-style: none;
170+
font-size: .875em;
171+
line-height: 1;
172+
margin: 0px 0px 7.5px;
173+
}
174+
175+
.people .list img {
176+
border: 1px solid #ccc;
177+
-webkit-border-radius: 20px;
178+
-moz-border-radius: 20px;
179+
border-radius: 20px;
180+
}
181+
182+
.people .list a:hover .image {
183+
background-color:#ccc;
184+
opacity:0.6;
185+
}
186+
187+
188+
.people .list h3 {
189+
font-size: 1.4em;
190+
margin-bottom: 0px;
191+
}
192+
193+
.people .list ul {
194+
padding: 10px 5px 20px;
195+
}
196+
197+
.row{
198+
/* border:2px dotted #F00; */
199+
border-left:none;
200+
border-right:none;
201+
text-align:center;
202+
padding-top:20px;
203+
padding-bottom:20px;
204+
}
205+
206+
.row.genomics { background: url('/assets/images/background-top.png') no-repeat; }
207+
.row.PI { background: #FAFAFA; }
208+
209+
.row div{
210+
display: inline-block;
211+
/* border-left: 2px dotted #ccc; */
212+
vertical-align: middle;
213+
line-height: 250px;
214+
}
215+
216+
.column-left{ float: left; width: 32%;}
217+
.column-right{ float: right; width: 32%; }
218+
.column-center{ display: inline-block; width: 33%;}
219+
.column-narrow{ float:center; width:66%;}
220+
.align-left{ text-align: left;}
221+
.yellow-bar { align:center; width:50px; border-bottom:4px solid #FFCB05; margin-bottom:5px; }
222+
.gray-bar { float:center; width:30px; border-bottom:1px solid #A0A0A0; margin-bottom:5px; }
223+
.right-link{ float:right; }
224+
225+
h2.postdate { font-size: 0.875em; color:#999; margin-bottom:0px; margin-left: 10px; padding: 0px; display: inline; }
226+
h2.categories { font-size: 0.875em; color:#999; margin-bottom:0px; margin-right: 10px; padding: 0px; float:right; display: inline; }
227+
h2.date { font-size: 0.875em; color:#999; margin-bottom:0px; margin-right: 10px; padding: 0px; float:right; display: inline; }
228+
h2.title { font-size: 1.125em; margin-bottom: 0px; font-weight: bold; margin-top: 5px; margin-right: 5px;}
229+
h3.title { margin-bottom: 0px; margin-top: 10px; }
230+
.entry-content { margin-bottom: 20px; margin-top: 1px; }
231+
232+
.pagination { height: 16px; }
233+
.pagination a { float: left; padding: 0px 14px; border-style: solid; border-color: #DDD; text-decoration: none; border-width: 1px; }
234+
235+
.__dimensions_badge_embed__[style] {
236+
vertical-align:baseline !important;
237+
}

‎index_new.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Home
3+
layout: bl
4+
---
5+
6+
<div class="row genomics">
7+
<div class="column-narrow">
8+
<h4><i>EXPLORING THE GENOME</i></h4>
9+
<center><p class="yellow-bar"></p><center>
10+
<p><i>
11+
We use modern genomics techniques and high-throughput experiments to explore biological systems.
12+
We can leverage computational tools to help answer biological problems that were previously intractable.
13+
We aim to combine computational approaches with high-throughput biological assays to better understand the whole human transcriptional regulatory system.
14+
</i></p>
15+
</div>
16+
</div>
17+
18+
<div class="row PI">
19+
<div class="column-narrow">
20+
<h4><i>From Principal Investigator, Alan P. Boyle, Ph.D.</i></h4>
21+
<center><p class="gray-bar"></p></center>
22+
<p class="align-left">
23+
Understanding gene regulation at the transcriptional level is critical to understanding complex biological systems and human disease. In virtually all organisms gene regulation is mediated by a “regulatory code” in which distinct combinations of specific transcription factors collaborate to regulate the expression of individual genes.
24+
This code is complex and not readily obvious from sequences alone.
25+
It likely involves many cis-regulatory modules that exist both upstream and within genes.
26+
In addition, mounting evidence suggests that major differences between individuals and species lie at the level of gene regulation and that changes in cis-regulatory sequences are responsible for these effects.
27+
<br><br>
28+
Our research aims to explore this regulatory code by examining the cis-regulatory elements in the human genome.
29+
</p>
30+
<p class="right-link">
31+
<font color="#FFCB05">|</font> <a href="research/"><i><b>Learn More</b></i></a>
32+
</p>
33+
</div>
34+
</div>
35+
36+
<div class="row">
37+
<div class="column-center">
38+
<a href="publications/"><h4><i>Our Work</i></h4></a>
39+
<center><p class="yellow-bar"></p><center>
40+
<p><img src="assets/images/Fseq.gif" width="200px"></p>
41+
</div>
42+
<div class="column-left">
43+
<a href="news/"><h4><i>News</i></h4></a>
44+
<center><p class="yellow-bar"></p><center>
45+
{% for post in site.posts limit:3 offset:0 %}
46+
<p class="align-left">
47+
<i><font color="#888">{{ post.date | date: "%B %d, %Y" }} - </font></i> {{ post.title }}
48+
</p>
49+
{% endfor %}
50+
</div>
51+
<div class="column-right">
52+
<a href="contact/"><h4><i>Find Us</i></h4></a>
53+
<center><p class="yellow-bar"></p><center>
54+
<p class="align-left">Our offices are located in the Palmer Commons Building on the edge of central campus. The lab is located on the 4th floor of the Medical Science Research Building I.</p>
55+
<p><i><a href="contact/">View Map</a><br><a href="http://palmercommons.umich.edu/article/driving-directions">Parking Information</a></i></p>
56+
</div>
57+
</div><!-- end row -->

0 commit comments

Comments
 (0)