Skip to content

Instantly share code, notes, and snippets.

/Earth Sciences Test.markdown

Created March 14, 2016 17:27
Show Gist options
  • Save anonymous/dba3b1271e743376781c to your computer and use it in GitHub Desktop.
Save anonymous/dba3b1271e743376781c to your computer and use it in GitHub Desktop.
Download ZIP
Earth Sciences Test
Raw
index.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Department of Earth Sciences: Home</title>
<meta http-equiv="last-modified" content="2016-01-19" />
<meta name="version" content="2.45 2.62 " />
<!-- 01/19/16 15:18:10 01/19/16 15:30:01 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://www.ucr.edu/css/design6bis.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.ucr.edu/css/wide6.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.ucr.edu/css/blue6a.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.ucr.edu/css/print6.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/custom.css" media="all" />
<script type="text/javascript" src="http://www.ucr.edu/js/prototype.js"></script>
<script type="text/javascript" src="http://www.ucr.edu/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.ucr.edu/js/lib.js"></script>
<script type="text/javascript" src="http://www.ucr.edu/js/glider.js"></script>
<script type="text/javascript" src="/js/script.js" async></script>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="http://www.ucr.edu/css/ie6-wide6.css" media="all" />
<script defer type="text/javascript" src="http://www.ucr.edu/pngfix.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.ucr.edu/css/ie7.css" media="all" />
<script type="text/javascript" src="http://www.ucr.edu/fixiequotes.js"></script>
<![endif]-->
<script type="text/javascript">
// <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
try {
var pageTracker = _gat._getTracker("UA-3051875-1");
pageTracker._setDomainName("ucr.edu");
pageTracker._trackPageview();
} catch(err) {}
// ]]>
</script>
</head>
<body>
<div class="pagewrapper">
<ul id="accessibility_links">
<li class="skip"><a tabindex="1" href="#main" accesskey="2">Skip Navigation</a></li>
<li class="skip"><a tabindex="2" href="http://earthsciences.ucr.edu/" accesskey="1">Home Page</a></li>
</ul>
<hr />
<div id="brandingbar">
<img class="overlay" src="/images/overlay.png" alt="" />
<h2><a href="http://www.ucr.edu/" title="UCR Home Page"><img src="http://www.ucr.edu/images/design6/ucr_logo.gif" width="150" height="53" alt="University of California, Riverside" title="UCR Home page" /></a></h2>
</div>
</div>
<div id="masthead" style="background-image:url(/images/masthead.jpg);">
<h1><a href="http://earthsciences.ucr.edu/"><span class="printonly">Department of Earth Sciences</span></a></h1>
</div>
<!-- Status: Normal -->
<hr />
<div class="breadcrumbs">
<h3 class="accessibility">Breadcrumbs</h3>
<ul>
<li><a href="http://www.ucr.edu/" title="UCR Home">UCR Home</a> &gt;</li>
<li><a href="http://cnas.ucr.edu/">CNAS</a> &gt;</li>
<li class="lastitem">Department of Earth Sciences</li>
</ul>
</div>
<div class="pagewrapper">
<div id="search">
<div id="nav_utility">
<ul>
<li><a href="http://www.ucr.edu/alpha.html">A to Z Listing</a></li>
<li><a href="http://campusmap.ucr.edu/">Campus Map</a></li>
<li><a href="http://www.ucr.edu/find_people.php">Find People</a></li>
</ul>
</div>
<form id="searchbox" action="http://www.ucr.edu/search.php">
<p>
<label for="SearchText" accesskey="4">Search for:</label>
<input type="text" size="18" maxlength="255" id="SearchText" name="q" value="" />
<input id="go" type="submit" name="sa" value="Go" />
</p>
</form>
<script type="text/javascript" src="http://www.ucr.edu/js/watermark.js"></script>
</div>
<hr />
<!-- Start Content (Navigation and Content columns) -->
<div id="content">
<h2>Home</h2>
<!-- Start Sidebar -->
<div id="sidebar">
<div class="nav">
<h3 class="accessibility">Main Navigation</h3>
<ul>
<li><a href="">Home</a></li>
<li><a href="">People</a></li>
<li><a href="">About</a></li>
<li><a href="">Programs</a></li>
<li><a href="">Research</a></li>
<li><a href="">News</a></li>
</ul>
</div>
</div>
<hr />
<!-- End Sidebar -->
<!-- Start Content Area -->
<div id="main">
<!-- com.omniupdate.editor csspath="/z-omniupdate/css/macy-wide.css" cssmenu="" width="992" -->
<!-- com.omniupdate.div label="title" group="Everyone" button="734" -->
<!-- com.omniupdate.editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="700" toolbar="TITLE" -->
<script type="text/javascript">
// Toggles the visibility of element using the blind effect.
//
function toggleXpander(item) {
/*
// Hide all elements of class "chass_xpander"
items = $$('.senate_xpander');
items.each(function(item) {
item.hide();
});
// Set the class on elements of class c3_xpander back to the default view
items = $$('.cal_xpander');
items.each(function(item) {
item.removeClassName('senate_xpander_on');
});
*/
// Set the class on the link clicked to the open view
item.toggleClassName('earthsci_xpander_on');
// Open up the element requested
new Effect.toggle($($($(item).next('.earthsci_xpander')).identify()),'blind');
}
// Look for elements of class "chass_xpander" and hide them
/*
Event.observe(window,'load', function () {
items = $$('.senate_xpander');
items.each(function(item) {
item.hide();
});
});
*/
</script>
<style type="text/css">
h3 {
margin-top:0px;
}
.column3, .column3R {
margin:0;
padding:0;
width:218px;
}
.column23 {
position:relative;
bottom:30px;
}
.linkMore {
border-bottom:medium none;
left:10px;
position:relative;
}
.linkMore {
left:10px;
position:relative;
}
</style>
<div id="omnicontent">
<div class="glider" id="my-glider">
<div class="scroller">
<div class="content">
<div class="slide" id="slide1">
<a href="GEOP.html"><img alt="OutReach - Reaching out the Community" src="http://earthsciences.ucr.edu/images/design6/outreach_banner.jpg" /></a>
</div>
<div class="slide" id="slide2">
<a href="field_trips.html"><img alt="In the Field - Roam the Earth" src="http://earthsciences.ucr.edu/images/design6/field_banner.jpg" /></a>
</div>
<div class="slide" id="slide3">
<a href="undergraduate_programs.html"><img alt="Geology as your Major - Explore the Possibilities" src="http://earthsciences.ucr.edu/images/design6/major_banner.jpg" /></a>
</div>
<div class="slide" id="slide4">
<a href="research_highlights.html"><img alt="Research Highlights - New Discoveries" src="http://earthsciences.ucr.edu/images/design6/research_banner.jpg" /></a>
</div>
</div>
</div>
<a class="previous" href="#" onclick="my_glider.previous();return false;" title="Previous"></a>
<a class="next" href="#" onclick="my_glider.next();return false" title="Next"></a>
</div>
<div class="vsection">
<div class="column23">
<!-- com.omniupdate.div label="main" group="Everyone" button="707" -->
<!-- ouc:editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="460"/ -->
<a href="/gcec.html" class="intro-photo"><span>Climate</span></a>
<a href="" class="intro-photo"><span>Earthquake</span></a>
<a href="/geochemistry_sedimentary.html" class="intro-photo"><span>Geobiochemistry</span></a>
<h4>The Department of Earth Sciences at UCR</h4>
<p>UCR’s Department of Earth Sciences focuses on research and education about Earth’s dynamic nature and history. Students and faculty investigate geological processes operating at a wide range of spatial and temporal scales and our research interests
span many disciplines within the Earth Sciences.</p>
<!-- /com.omniupdate.div -->
<div class="boxD">
<h4>News & Announcements</h4>
<ul class="rss_details">
<li><a href="http://earthscience.ucr.edu/index.html">Earth Sciences Welcomes a New Musuem Scientist</a> <strong>(November 3, 2015)</strong>
<br /> The Department of Earth Sciences Welcomes our new Museum Scientist Jessica Miller Camp. Jessica comes to us from Hendersonville, NC and has a B.S. in Geology with a Biology minor from Appalachian State University in 2003. She has a M.S.
in Geoscience from the University of Iowa in 2010 and will be defending there this academic year for a Ph.D. in Earth and Environmental Science. Jessica has a vertebrate paleontologist studying the phylogeny, taxonomy, ecomorphology, biogeography,
and diversity in relation to climate change of alligatorines as well as the morphology and extinction dynamics of Lystrosaurus, a dicynodont that survived and proliferated following the P–T mass extinction. Welcome Jessica!!!</li>
<li><a href="http://abc7.com/weather/hot-temperatures-in-october-not-unusual-expert-says/1030040/">Hot temperatures in October not unusual, expert says</a> <strong>(October 13, 2015)</strong>
<br />
</li>
<li><a href="http://ucrtoday.ucr.edu/32364">Mark Your Calendar for 10:15 on 10/15</a> <strong>(October 12, 2015)</strong>
<br />
</li>
<li><a href="http://ucrtoday.ucr.edu/31633">Free Public Lecture Tomorrow on Earth’s Climate History</a> <strong>(September 25, 2015)</strong>
<br />
</li>
<li><a href="http://www.latimes.com/local/lanow/la-me-ln-earthquake-tsunami-ventura-20150819-htmlstory.html">Computer Models Show Significant Tsunami Strength for Ventura and Oxnard</a> <strong>(August 20, 2015)</strong>
<br />
</li>
</ul>
<a class="linkMore" style="border-bottom:none;" href="news.html">More News</a>
</div>
</div>
<div class="column3R" id="calendar">
<h3><img width="220" height="45" alt="Academic Senate Calendar" src="http://earthsciences.ucr.edu/images/calendar/earth-science-calendar.png"></h3>
<div id="cal">
<table class="mini_calendar" cellspacing="3">
<caption><a href="/calendar.html?option=minical&amp;month=201512&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes" onclick="requestCalInfo('cal','option=minical&amp;month=201512&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes');return false"
title="Previous" class="prev" accesskey="p">Previous</a>&nbsp;<span class='month'>January</span>&nbsp;<span class='year'>2016</span>&nbsp;<a href="/calendar.html?option=minical&amp;month=201602&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes"
onclick="requestCalInfo('cal','option=minical&amp;month=201602&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes');return false" title="Next" class="next"
accesskey="n">Next</a></caption>
<thead>
<tr>
<th><abbr title="Sunday">S</abbr></th>
<th><abbr title="Monday">M</abbr></th>
<th><abbr title="Tuesday">Tu</abbr></th>
<th><abbr title="Wednesday">W</abbr></th>
<th><abbr title="Thursday">Th</abbr></th>
<th><abbr title="Friday">F</abbr></th>
<th><abbr title="Saturday">S</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td class="hlite"><a href="/calendar.html?option=daily&amp;date=20160104&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&amp;date=20160104&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes');return false">4</a></td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td class="hlite"><a href="/calendar.html?option=daily&amp;date=20160111&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&amp;date=20160111&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes');return false">11</a></td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td class="hlite"><a href="/calendar.html?option=daily&amp;date=20160118&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&amp;date=20160118&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes');return false">18</a></td>
<td class="today" title="today"><strong>19</strong></td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td class="hlite"><a href="/calendar.html?option=daily&amp;date=20160125&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&amp;date=20160125&amp;unit=55&amp;dtemplate=daily.tpl&amp;etemplate=promise-event.tpl&amp;calid=cal&amp;destid=events&amp;fstart=f3f2ed&amp;fend=fff&amp;dow=yes');return false">25</a></td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
<td class="empty">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<a class="cal_xpander earthsci_xpander_on notop" onfocus="if(this.blur)this.blur()" onclick="javascript:toggleXpander(this); return false" href="#"></a>
<div class="earthsci_xpander">
<div id="events" style="background-color:none !important;">
<h3>All Events for Tuesday, January 19, 2016</h3>
<p>No Events.</p>
</div>
<ul class="standout">
<li><a href="/calendar.html?option=daily&amp;unit=55&amp;etemplate=promise-event.tpl&amp;type=all" onclick="javascript:requestCalInfo('events','option=daily&amp;destid=events&amp;unit=55&amp;type=all&amp;etemplate=promise-event.tpl'); return false">View events for today</a></li>
<li><a href="/calendar.html?option=list&amp;unit=55&amp;type=all&amp;timelimit=30&amp;limit=45&amp;etemplate=promise-event.tpl" onclick="javascript:requestCalInfo('events','option=list&amp;destid=events&amp;unit=55&amp;type=all&amp;timelimit=30&amp;limit=45&amp;etemplate=promise-event.tpl'); return false">View events for next Week</a></li>
</ul>
<br/>
<ul class="cal_links">
<li><a href="calendar.html">More Events</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</ul>
<!-- com.omniupdate.div label="related" group="Everyone" button="707" -->
<!-- com.omniupdate.editor csspath="/z-omniupdate/css/style.css" cssmenu="/z-omniupdate/css/style.txt" width="300" -->
<!-- /com.omniupdate.div -->
<!-- com.omniupdate.efp -->
<!-- /com.omniupdate.efp -->
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {autoGlide: true, initialSection:'slide1', frequency: 6, duration: .7} );
</script>
</div>
<!-- End Content Area -->
<div class="clear"></div>
</div>
<!-- End Content -->
</div>
<div class="clear"></div>
<div class="footerwrapper">
<h2>More Information</h2>
<div class="pagewrapper">
<div class="prefooter">
<div class="column49">
<h3>General Campus Information</h3>
<address>
<span class="vcard">
<strong><span class="fn org">University of California, Riverside</span></strong><br />
<span class="adr">
<span class="street-address">900 University Ave.</span><br />
<span class="locality">Riverside</span>, <span class="region">CA</span> <span class="postal-code">92521</span><br />
</span>
Tel: <span class="tel">(951) 827-1012</span><br /><br />
</span>
<a href="http://library.ucr.edu/">UCR Libraries</a> &bull; <a href="http://campusstatus.ucr.edu/">Campus Status</a><br />
<a href="http://www.ucr.edu/employment.html">Career Opportunities</a> &bull; <a href="http://diversity.ucr.edu/">Diversity</a><br />
<a href="http://my.ucr.edu/visit/Pages/default.aspx">Visit UCR</a> &bull; <a href="http://www.ucr.edu/about/directions.html">Maps and Directions</a></address>
</div>
<div class="column49">
<h3>Earth Sciences Information</h3>
<address><strong>Department of Earth Sciences</strong><br />
Geology Building<br /><br />
Tel: (951) 827-3434<br />
Fax: (951) 827-4324<br />E-mail: <a href="mailto:[email protected]?subject=Earth Sciences Inquiry">[email protected]</a></address>
</div>
<div class="column49R">
<h3>Related Links</h3>
<ul>
<li><a href="http://www.info.ucr.edu/cgi-bin/display.cgi" target="_blank">Campus News</a></li>
<li><a href="/gcec.html">Global Climate and Environmental Change</a></li>
<li><a href="http://ep.ucr.edu/EP/Home.html">Earthquake Processes and Geophysics</a></li>
<li><a href="http://trilobyte.ucr.edu">Paleobiology Research</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="nav_footer">
<h3 class="accessibility">Campuswide Navigation</h3>
<ul>
<li><a id="nav_footer_home" href="http://www.ucr.edu/"><span>Home</span></a></li>
<li><a id="nav_footer_about_ucr" href="http://www.ucr.edu/about/"><span>About UCR</span></a></li>
<li><a id="nav_footer_academics" href="http://www.ucr.edu/academics/"><span>Academics</span></a></li>
<li><a id="nav_footer_athletics" href="http://www.ucr.edu/athletics/"><span>Athletics</span></a></li>
<li><a id="nav_footer_happenings" href="http://www.ucr.edu/happenings/"><span>Happenings</span></a></li>
<li><a id="nav_footer_research" href="http://www.ucr.edu/research/"><span>Research</span></a></li>
<li><a id="nav_footer_resources" href="http://www.ucr.edu/resources/"><span>Campus Resources</span></a></li>
<li><a id="nav_footer_giving" href="http://www.ucr.edu/giving/"><span>Giving to UCR</span></a></li>
</ul>
</div>
<h3 class="accessibility">Footer</h3>
<div id="footer">
<ul>
<li><a href="http://earthsciences.ucr.edu/sendmail.html" title="Send Feedback E-mail" accesskey="9">Feedback</a></li>
<li><a href="http://www.ucr.edu/privacy.html">Privacy Policy</a></li>
<li><a href="http://www.ucr.edu/terms.html">Terms and Conditions</a></li>
<li>&copy; 2016 Regents of the University of California</li>
<li><a rel="nofollow" href="http://cms-prod-1.ucr.edu/10?action=de&amp;skin=oucampus&amp;account=D01055&amp;site=earthsciences&amp;path=%2Findex.html">Last modified: 2016-Jan-19</a></li>
</ul>
</div>
</div>
</div>
<!-- Generated in 0.445776 seconds using 5.25 MiB of memory. -->
</body>
</html>
Raw
script.js
doc = document
# mini library
getId = (id) -> return doc.getElementById id
getFirst = (selector) -> return doc.querySelector selector
getEach = (selector) -> return doc.querySelectorAll selector
removeClassOn = (element, className) ->
element.classList.remove className
return
addClassOn = (element, className) ->
element.classList.add className
return
classIsOn = (element, className) ->
element.classList.contains className
toggleClassOn = (element, className) ->
element.classList.toggle className
return
ready = (fn) ->
if document.readyState isnt 'loading' then fn()
else document.addEventListener 'DOMContentLoaded', fn
return
#temp html script
newNavHTML = "<h3 class=\"accessibility\">Main Navigation</h3><ul><li><a href=\"\">Home</a></li><li><a href=\"\">People</a></li><li><a href=\"\">About</a></li><li><a href=\"\">Programs</a></li><li><a href=\"\">Research</a></li><li><a href=\"\">News</a></li></ul>"
$navContent = getFirst '.nav'
$navContent.innerHTML = newNavHTML
introPhotosHTML = "<a href=\"/gcec.html\" class=\"intro-photo\"><span>Climate</span></a><a href=\"\" class=\"intro-photo\"><span>Earthquake</span></a><a href=\"/geochemistry_sedimentary.html\" class=\"intro-photo\"><span>Geobiochemistry</span></a>"
$homeContent = getFirst '.column23 h3'
if window.location.pathname == '/'
then $homeContent.insertAdjacentHTML 'beforebegin', introPhotosHTML
# alter html
menuToggleHTML = "<div href=\"#\"id='menu-toggle'><span class=\"line\"></span><span class=\"line\"></span><span class=\"line\"></span></div><h2 class=\"title\">Earth Sciences</h2>"
$brandingbar = getId 'brandingbar'
$brandingbar.insertAdjacentHTML 'beforeend', menuToggleHTML #appended
siteMapHTML = "<div ng-app=\"searchSiteMap\" class=\"site-map\"><div ng-controller=\"mapCtrl as linkList\" class=\"map-content\"><div id=\"map-close\">Close</div><input type=\"text\" ng-model=\"search\" placeholder=\"Search earthsciences.ucr.edu\" id=\"site-search\"><ul><li ng-if=\"!search.length\" ng-repeat=\"webpage in linkList.list \" ng-class=\"(webpage.hide ? 'menu-item-hide' : '')+' '+(webpage.main ? 'menu-main-item' : 'menu-sub-item')\" ><a href=\"{{webpage.link}}\">{{webpage.name}}</a></li><li ng-if=\"search.length\" ng-repeat=\"webpage in linkList.list | filter: search | orderBy: 'name' | limitTo: 6 \" ng-class=\"(webpage.hide ? 'menu-item-hide' : '')+' '+(webpage.main ? 'menu-main-item' : 'menu-sub-item')+' '+(search.length ? 'menu-item-found' : '')\" ><a href=\"{{webpage.link}}\">{{webpage.name}}</a></li></ul><span ng-show=\"(linkList.list|filter:search).length == 0\">\"{{search}}\" not found</span></div></div>"
$mastHead = getId 'masthead'
$mastHead.insertAdjacentHTML 'afterend', siteMapHTML #after
mapOpenHTML = "<input type=\"text\" id=\"map-open\" placeholder=\"Search\">"
$nav = getFirst '.nav ul'
$nav.insertAdjacentHTML 'afterbegin', mapOpenHTML # prepended
ready(->
# vars
$menu = getId 'menu-toggle' # previously appended
$navList = getEach '.nav li'
$sidebar = getId 'sidebar'
$siteMap = getFirst '.site-map'
$mapContent = getFirst '.map-content'
$mapOpen = getId 'map-open'
$mapClose = getId 'map-close'
$body = getFirst 'body'
$siteSearch = getId 'site-search'
# when menu is clicked
$menu.addEventListener 'click', ->
toggleClassOn $menu, 'menu-morph'
toggleClassOn $sidebar, 'slide-in'
toggleClassOn $sidebar, 'nav-overlay'
for item in $navList
toggleClassOn item, 'show-items'
return
# prevent any of .nav's parent events from being executed onclick
$nav.onclick = (e) -> e.stopPropagation()
# rather when sidebar itself is clicked
$sidebar.addEventListener 'click', ->
if classIsOn $sidebar, 'slide-in'
removeClassOn $sidebar, 'slide-in'
removeClassOn $sidebar, 'nav-overlay'
removeClassOn $menu, 'menu-morph'
for item in $navList
removeClassOn item, 'show-items'
return
$mapOpen.addEventListener 'click', ->
$siteMap.classList.add 'show-site-map', 'opacified'
removeClassOn $siteMap, 'unopacified'
addClassOn $mapContent, 'revealed'
removeClassOn $mapContent, 'unrevealed'
addClassOn $body, 'no-scroll'
setTimeout ->
$siteSearch.focus()
return
, 800
return
$mapClose.addEventListener 'click', ->
setTimeout ->
removeClassOn $siteMap, 'show-site-map'
return
, 800
removeClassOn $body, 'no-scroll'
removeClassOn $siteMap, 'opacified'
addClassOn $siteMap, 'unopacified'
removeClassOn $mapContent, 'revealed'
addClassOn $mapContent, 'unrevealed'
return
return #end program
)
angular.module 'searchSiteMap', []
.controller 'mapCtrl', ->
linkList = this
linkList.list = [
name: "home"
link: "http://earthsciences.ucr.edu/"
main: true
,
name: "people"
link: "http://earthsciences.ucr.edu/people.html"
main: true
,
name: "Faculty & Staff"
link: "http://earthsciences.ucr.edu/faculty.html"
sub: true
,
name: "Graduate Students"
link: "http://earthsciences.ucr.edu/grad_students.html"
sub: true
,
name: "About"
link: "http://earthsciences.ucr.edu/about.html"
main: true
,
name: "Programs"
link: "http://earthsciences.ucr.edu/programs.html"
main: true
,
name: "Undergraduate Programs"
link: "http://earthsciences.ucr.edu/undergraduate_programs.html"
sub: true
,
name: "Graduate Programs"
link: "http://earthsciences.ucr.edu/grad_programs.html"
sub: true
,
name: "Research"
link: "http://earthsciences.ucr.edu/research.html"
main: true
,
name: "Department Field Trips"
link: "http://earthsciences.ucr.edu/research.html"
sub: true
,
name: "Outreach Program"
link: "http://earthsciences.ucr.edu/GEOP.html"
sub: true
,
name: "News"
link: "http://earthsciences.ucr.edu/news.html"
main: true
]
return #end app
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
Raw
style.css
//Imports
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic) // main font, use link
//Variables
$max-small: "max-width: 39.99rem"
$max-medium: "max-width: 63.99rem"
$medium: "min-width: 40rem" //Medium screens (640px)
$large: "min-width: 64rem" //Large screens (1024px)
//color-variables
$ucr-blue: #396ab7
$light-grey: #f9f9f9
$link-initial: $ucr-blue
$link-hover: darken($ucr-blue, 15%)
$link-active: $ucr-blue
$link-visited: $ucr-blue
$site-blue: rgba(16, 112, 195, 0.5)
$site-orange: rgba(255,185,56,0.5)
$site-brown: rgba(119, 98, 97, 0.5)
$site-brick: rgba(122, 33, 15, 0.5)
$site-green: rgba(110, 177, 68, 0.5)
$site-sky: rgba(79, 174, 218, 0.5)
$site-glass: rgba(255,255,255,0)
$site-grey: rgba(170, 170, 170, .5)
//Functions
$browser-context: 16 // Default
@function em($pixels, $context: $browser-context)
@return #{$pixels/$context}rem
//Placeholders
%hidden
display: none
//Global
*, *:before, *:after
box-sizing: border-box
font-size: em(15)
font-family: 'Roboto', sans-serif !important // strict
color: #666 !important
@media ($max-small)
font-size: em(14)
//Base
// prevent Page breaks
img, embed, object, video
display: block !important
max-width: 100% !important
height: auto !important
@media ($max-small)
float: none !important
margin: 0 auto !important
margin-bottom: 15px !important
.img_L, .img_L_borderless, .img_R, .img_R_borderless
&:not([src*="faculty"])
width: 100% !important
max-width: 300px !important
&[src*="faculty"]
max-width: 100% !important
h1
font-size: em(24) !important
h2
font-size: em(18) !important
h3
font-size: em(20) !important
h4
font-size: em(18) !important
h5
font-size: em(16) !important
h6
font-size: em(14) !important
h3, h4, h5, h6
padding-top: 15px !important
html, body
position: relative
&::-webkit-scrollbar
width: 4px
background-color: #fff
&::-webkit-scrollbar-thumb
background-color: #aaa
a
&:link
color: $link-initial !important
border-bottom: none !important
&:visited
color: $link-initial !important
&:hover, &:active, &:focus
color: $link-hover !important
text-decoration: none
background: lighten($ucr-blue, 50%)
&:active
color: $link-active !important
&:visited
color: $link-visited !important
/*---------Container-----------*/
body > div.pagewrapper:first-of-type
border-bottom: 1px solid #eee
z-index: 1002
position: fixed
margin-top: -70px !important // pull up nav
background-color: rgba(255, 255, 255, 0.95) !important
min-width: 100% !important
@media ($medium)
margin-top: 0 !important // normalize nav margin-top
.pagewrapper
background: #fff !important
border: none
margin: 0 auto !important
min-height: 4.4rem //debugging
width: 100% !important
@media ($large)
max-width: 64rem
/*Footer*/
.footerwrapper
padding-bottom: 0 !important // remove grey padding
display: block !important
min-width: 0 !important // reset
margin: 0 auto !important
max-width: 100% !important
background: none !important
border-top: 1px solid #eee
h2
background: none !important
color: white !important
min-width: 0 !important // reset
.prefooter
max-width: 38rem
margin: 0 auto
background: none !important // remove footer dividers
@media ($large)
max-width: 64rem
address, a, strong
font-weight: normal !important // less style
font-size: em(13) !important
span
font-size: em(13)
.column49, .column49R
padding: em(5) em(5) !important
margin: 0 auto !important
text-align: center
width: 100% !important
// hide logo
// Each footer heading
h3
color: #999 !important
padding-top: em(10) !important
font-weight: normal
font-size: em(18) !important
.column49R
a
&:hover, &:active, &:focus
background: none // no conflict with bg url
ul
margin-top: 0
li
line-height: 1.2em
@media ($max-small and $max-medium)
background: none !important
min-height: em(20) !important
@media ($medium)
li
display: inline-block !important
&:not(:first-child):before
content: "|\00a0\00a0"
color: #777 !important
@media ($large)
background: url("http://s17.postimg.org/q9vkr887j/ucr_watermark_light_400x400.jpg") no-repeat !important
background-position: 100% 18px !important
background-size: 160px !important
min-height: 180px !important
text-align: left
width: 33.3% !important
li
display: block !important
&:not(:first-child):before
content: " "
.column49
&:first-of-type
h3
border-top: none !important // no border for the first heading
address
margin: 0 !important
padding-top: em(5)
@media ($medium)
padding-left: em(20) !important
width: 50% !important
text-align: left
@media ($large)
width: 33.3% !important
#nav_footer
display: none // remove ucr img links for now
#footer
padding-top: em(10)
background: none !important
margin-bottom: 0 !important
margin-top: 0 !important
@media ($large)
background: none !important
a
color: #bbb !important // less style
font-size: em(14) !important
li+li
border-left: none !important
li
font-size: em(14) !important
text-align: center
display: block !important
li:nth-child(-n+3)
display: none !important // Hide Feedback Privacy Policy Terms and Conditions (simplify content)
// very top header with logo
#brandingbar
display: block
margin: 0 auto !important
background: none !important // remove text image
@media ($large)
max-width: 64rem
// Earth Sciences Title
.title
text-align: center
padding-top: em(35)
font-size: em(18)
color: $ucr-blue !important
@media ($medium)
padding-left: em(160) // make room for the image
@media ($large)
text-align: left
padding-left: em(10)
img
display: none !important
@media ($medium)
opacity: 0.9
display: block !important
float: right !important // note: both images inherit these styles
margin-right: em(15)
margin-top: em(7)
width: em(150)
height: em(53)
.overlay
display: none !important // add if the photo is desired
// blue header
#masthead
display: block // allow space for nav header
margin: 70px auto 0 // push down for nav header
background-image: none !important // remove earth text image
background: white !important // remove blue background
background-size: 96% auto
min-width: 0px !important // reset
max-width: 64rem !important
max-height: 0 // remove the blue bar by default
h1
width: 100% !important // prevent rwd break
@media ($medium)
margin: 0 auto
max-height: initial // return space for nav
@media ($large)
h1
max-width: 100% !important
// Search and breadcrumbs
#search
display: none // remove - not essential (breaks design)
div.breadcrumbs
background: white
min-width: 100% !important
@media ($large)
min-width: 64rem !important
max-width: 64rem !important
margin: 0 auto
ul
text-align: center !important
ul
line-height: em(16) !important
width: 100% !important
padding-left: em(10)
padding-top: em(10)
li
font-size: em(12)
font-weight: normal !important
color: #ccc !important
a
color: #ccc !important
font-size: em(12)
// hide UCR and CNAS (breaks design)
li:nth-child(-n+2)
display: none
// container of sidebar and main
#content
padding: 0 !important
width: 100% !important
min-height: em(5)
margin: 0 auto !important
// page title
h2
visibility: hidden
border-bottom: none !important
padding: em(8) !important
margin-right: 0 !important
width: 100%
text-align: left
font-size: em(22) !important
color: #aaa !important
@media ($large)
text-align: center
object
display: none !important
/* Navigation */
#sidebar
margin: 0 auto !important
display: block !important
position: fixed
background: none // fallack
min-height: 100%
left: -200px
top: 0 // move below nav bar margin
margin-left: 200px !important
width: 100% !important // so that it doesn't cover the links
z-index: -1 // so that it transitions from this index to the same index
@media ($large)
background: initial // ensure white
margin-left: 0 !important // return to intial state
min-height: 100%
//top: 0 // revert to top of context // was 70px
left: initial
transform: translateX(0) //update to 0px
width: 150px !important
z-index: 0 !important
.nav
padding: 0
margin-left: -200px
display: block
height: 100%
position: absolute
background: rgba(255, 255, 255, 0.97)
@media ($large)
margin-left: 0
padding: 0
p a.img_link
display: none !important // not aloud
.nav ul
margin-top: 70px
display: block
position: absolute
width: 200px
height: 100%
overflow-y: auto // for the scroll bar
border-right: 1px solid #eee
padding: em(10)
background: rgba(255, 255, 255, 0.97)
@media ($large)
border-right: none
margin-top: 90px // was 70
padding: em(10) em(5)
height: initial
// each menu item
.nav li
text-align: left
font-weight: normal
border: none
margin-bottom: em(1)
min-height: em(30)
vertical-align: middle
@media ($large)
border: 1px solid #fff
// link styles
a
background: none
min-height: em(40)
line-height: em(40)
padding-left: em(15)
@media ($large)
min-height: em(15)
line-height: em(15)
&:hover, &:active, &:focus
//background: lighten($ucr-blue, 50%)
text-decoration: none !important
span
// sub description text
display: none // remove from html
.currentpage
//border: 1px solid #eee !important
background: none !important
padding-left: em(7) !important
h3
color: #aaa !important
font-weight: normal !important
vertical-align: middle
min-height: em(40) !important
line-height: em(40) !important
@media ($large)
min-height: em(15) !important
line-height: em(15) !important
// @import only on news feed page
#main h3
text-align: center
.rss_details
margin: 0 auto 20px !important
max-width: 600px
padding: 0 10px !important
li
background: none !important
border-bottom: 1px solid #eee !important
a
font-weight: normal !important
strong
font-weight: normal !important
font-size: 14px !important
color: #999 !important
&:last-of-type
border-bottom: none !important
// main is below sidebar and on large it is right of sidebar
#main
float: none !important
width: 100% !important
margin: 0 auto !important
@media ($medium)
clear: both
@media ($large)
float: left !important
/* Omnicontent editor - Single Column*/
#omnicontent
overflow-wrap: break-word
word-wrap: break-word
hyphens: auto
word-break: break-word
float: none !important
width: 100%
max-width: 600px
margin: 0 auto em(15) !important
padding: em(0) em(10) em(5)
& h1, h2, h3, h4, h5, h6
margin-top: 0
// home image intro (mobile first) - @import
.intro-photo
display: block
float: left
width: 31.33%
height: 120px
margin: 0px 1% 20px
&:nth-child(1)
background: url("http://placehold.it/350x150") no-repeat center
&:nth-child(2)
background: url("http://placehold.it/350x150") no-repeat center
&:nth-child(3)
background: url("http://placehold.it/350x150") no-repeat center
&:nth-child(1), &:nth-child(2), &:nth-child(3)
background-size: cover
overflow: hidden
&:hover span
min-height: 120px
line-height: 120px
transition: min-height .2s ease-out, line-height .4s cubic-bezier(.53,.28,.43,1.02)
&:hover span:after
top: 45px
transition: top .4s cubic-bezier(.53,.28,.43,1.02)
span
display: block
text-align: center
padding-left: 0px
background: rgba(0,0,0,0.4)
color: #fff !important
line-height: 30px
min-height: 30px
font-size: 11px
transition: min-height .3s, line-height .3s cubic-bezier(.53,.28,.43,1.1)
@media ("min-width: 30rem")
font-size: 13px
@media ($medium)
font-size: 14px
@media ($large)
text-align: left
padding-left: 6px
font-size: 13px
&:after
display: none
@media ("min-width: 30rem")
display: inline
position: absolute
top: 0
border-bottom: 2px solid #fff
border-right: 2px solid #fff
width: 8px
height: 8px
content: ""
transform: translate(2px, 11px) rotate(-45deg)
transition: top .3s cubic-bezier(.53,.28,.43,1.1)
@media ($large)
transform: translate(1px, 11px) rotate(-45deg)
// home template - @import
.column23, .column3R
width: 100% !important
margin-top: em(30) !important
.column23
margin-right: 0 !important //reset
bottom: 0 !important //reset
margin-bottom: em(0)
@media ($large)
margin-bottom: em(20)
width: 66.6666% !important
.column3R
h3 img
display: none !important // hide header img
@media ($large)
width: 33.3333% !important
padding-left: em(20) !important
// Scroller - Home Page Styles - @import
.glider
display: none // hide glider on small
overflow: hidden !important
padding: 0 !important
border: none !important
a.previous, a.next
display: none !important
.glider, .scroller
background: none !important
@media ($medium)
display: block // show glider on medium
text-align: right !important // align buttons right
.scroller, .slide, .content
img
@media ($medium)
max-width: 580px !important
.boxD
background: #f9f9f9 !important
margin-top: 27px !important
padding-bottom: 50px !important
.rss_details
li
font-size: em(14)
line-height: 1.4
background: none
border-top: 1px solid #eee
strong, a
font-weight: normal !important
strong
color: #999 !important
font-size: em(13)
.cal_links
max-width: 120px !important
padding: em(5) em(0)
@media ($medium)
padding: em(8) em(0)
li
float: left
&:before
display: none !important
a
float: left
margin-left: -10px !important
background-image: none !important
a.linkMore
padding: em(5) em(18)
margin-right: 10px
// reuse linkmore
a.linkMore, .cal_links
border: 1px solid lighten($ucr-blue, 15%) !important
border-radius: 2px
background-image: none !important
background: white
top: 0px
margin-bottom: 10px !important
vertical-align: center
&:hover, &:active
background: lighten($ucr-blue, 15%)
color: white !important
transition: .2s ease-out
&:hover a, &:active a
background: none
color: white !important
transition: .2s ease-out
// Mini Calendar - Home Page Styles - @import
#calendar
background: #fff !important
#events>p, #events p
background-color: #fff !important
padding: 2px
border-bottom: none !important
#events
ul.alt3 li
background: none !important
font-size: 0.8125rem !important
margin-left: 0 !important
border: none !important
border-top: 1px solid #eee !important
line-height: 1.2
transition: background .5s
&:hover
background: #fff !important
&:hover a
background: lighten($ucr-blue, 50%) !important
strong
font-size: em(12) !important
color: #999 !important
table.mini_calendar, caption, thead, tbody
width: 100% !important
td, td.empty, caption
background-color: white !important
table.mini_calendar td a
background-color: #f9f9f9 !important
td.today
background-color: lighten($ucr-blue, 20%) !important
strong
background: none !important
color: white !important
table.mini_calendar
max-width: 200px
border-spacing: 1px !important
background-color: #eee !important
padding: 0 !important
margin: 0 auto
margin-bottom: em(20) !important
a.prev
background: url(http://www.ucr.edu/images/design6/cal_prev_bttn.png) no-repeat !important
a.next
background: url(http://www.ucr.edu/images/design6/cal_next_bttn.png) no-repeat !important
td, td a, td.today, td strong, th abbr, thead, caption
max-width: 100% !important
font-size: em(10) !important
caption
padding: em(10) !important
td
color: #999 !important
span.month, span.year
font-size: em(12) !important
td a, td a:link
color: $ucr-blue !important
// calendar expander - @import
.cal_xpander
display: none !important
.earthsci_xpander
background: #f9f9f9
padding: em(15)
margin-bottom: em(10)
text-align: center
h3
font-size: em(12) !important
@media ($medium)
text-align: left
@media ($large)
margin-top: -26px !important
li
text-align: left
margin-left: em(30) !important
@media ($medium)
line-height: 1
ul.standout a
font-size: em(12) !important
// calendar id - @import
#cal
border: 1px solid #f5f5f5
margin-bottom: em(5)
@media ($large)
border: none
.earthsci_xpander, #cal
z-index: 0 !important
min-height: em(230)
width: 100%
@media ($medium)
width: 50%
float: left
@media ($large)
float: none
width: 100%
// @import on calndar pages only
@media ($max-small)
#cal_main td.empty
display: none !important
.big_calendar
thead tr
display: none
tbody tr td
padding-left: 20px
padding-right: 20px
display: block !important
width: 100% !important
border: none !important
border-bottom: 2px solid #fff !important
background: #f9f9f9 !important
&.hlite
background: lighten(#7fa1d7, 30%) !important
a
transition: background 1s ease
&:hover a
background: #fff !important
tbody td strong
text-align: left !important
font-size: 14px !important
#cal_main
h3
font-size: 16px !important
max-width: 600px
margin: 10px auto 20px
caption
font-size: 16px !important
tbody td strong, th, tbody td.hlite
font-size: 12px !important
th
background: #f9f9f9 !important
td.hlite
a, em
font-size: 12px !important
td.today
background-color: #7fa1d7 !important
ul.alt3 li
background: none !important
font-size: 0.8125rem !important
margin-left: 0 !important
border: none !important
border-top: 1px solid #eee !important
line-height: 1.5
transition: background .5s
&:hover
background: #fff !important
&:hover a
background: lighten($ucr-blue, 50%) !important
strong, .vevent
background: #fff !important
font-size: em(12) !important
color: #999 !important
.summary
padding: 10px
.vevent
padding: 5px 10px 20px !important
margin: 10px !important
font-size: 14px !important
background: #f9f9f9
h3, h4, h5
font-size: 14px !important
background: #f9f9f9
// @import on table.data2 pages only - make table only version
table.data2
border: #eee !important
margin-bottom: 20px
tbody tr
background: #fff !important
&:hover
background: initial !important
&:nth-child(2n+0)
background: #f9f9f9 !important
&:nth-child(1n+0)
border: 1px solid #eee !important
td
border: none !important
background: none !important
@media ($medium)
font-size: 12px !important
padding: 5px 5px !important
p, a, span
font-size: 12px !important
@media ($max-small)
table.data2
border: none !important
table.data2 thead tr
display: none !important
table.data2 tbody tr
td strong
display: none !important // only for grad page
&:nth-child(2n+0)
td
border-bottom: 1px solid #f9f9f9 !important
td
border-bottom: 2px solid #fff !important
padding-left: 20px
padding-right: 20px
display: block !important
width: 100% !important
padding-top: 0 !important
padding-bottom: 2px !important
&:first-child
text-align: center !important
padding-top: 10px !important
&:last-child
padding-bottom: 20px !important
/* States */
/* Animation */
// content
#sidebar
@media ($max-medium)
// slide out .3s and fade out .3s as z-index updates in .3s
transition: transform .3s cubic-bezier(0.785, 0.135, 0.15, 0.86), background .3s, z-index .3s
@media ($large)
transition: none
// menu icons
#menu-toggle
border: 1px solid #f9f9f9
box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.2)
position: absolute
background: #fff
z-index: 2000
cursor: pointer
height: em(40)
width: em(47)
padding: em(5) em(6)
margin: em(10) em(5) em(5) em(20) !important
&:hover
box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.2)
.line
height: em(3)
width: em(25)
background: #a9a9a9
display: block
margin: em(5) em(4)
transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
@media ($large)
display: none
.menu-morph
.line
&:nth-child(1)
transform: translateY(8px) rotate(45deg)
transition: transform .3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
&:nth-child(2)
opacity: 0 // fallback 1
background: white //fallback 2
transform: rotateY(-90deg) // primary
transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
&:nth-child(3)
transform: translateY(-8px) rotate(-45deg)
transition: transform .3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
@for $li from 2 through 8
.nav li:nth-child(#{$li})
opacity: 0
transform: translateY(-3px)
transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
transition-delay: #{$li}10ms
a
transition: background .1s ease-in
@if $li == 2
background-color: $site-blue
background: linear-gradient(to right, $site-blue 0%, $site-blue 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-blue, 50%) !important
@if $li == 3
background-color: $site-orange
background: linear-gradient(to right, $site-orange 0%, $site-orange 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-orange, 30%) !important
@if $li == 4
background-color: $site-brown
background: linear-gradient(to right, $site-brown 0%, $site-brown 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-brown, 40%) !important
@if $li == 5
background-color: $site-brick
background: linear-gradient(to right, $site-brick 0%, $site-brick 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-brick, 60%) !important
@if $li == 6
background-color: $site-green
background: linear-gradient(to right, $site-green 0%, $site-green 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-green, 40%) !important
@if $li == 7
background-color: $site-sky
background: linear-gradient(to right, $site-sky 0%, $site-sky 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-sky, 35%) !important
@if $li == 8
background-color: $site-grey
background: linear-gradient(to right, $site-grey 0%, $site-grey 3%, $site-glass 3%, $site-glass 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb938', endColorstr='#ffffff', GradientType=1 )
&:hover a, &:active a, &:focus a
background: lighten($site-grey, 25%) !important
@media ($large)
opacity: 1
transform: translateY(0px)
transition: none
.show-items
transform: translateY(0px) !important
opacity: 1 !important
transition-delay: 0ms
.slide-in
z-index: 1000 !important // so this is above links and footer
transform: translateX(200px)
// slide in .3s and fade in .3s after z-index updates in .3s
//transition: transform .3s cubic-bezier(0.785, 0.135, 0.15, 0.86), background .2s, z-index .3s
.nav-overlay
background: none !important // fallback
background: rgba(0, 0, 0, 0.03) !important
@media ($large)
background: none !important
#map-close
font-size: 18px
margin: 5px 0 20px
display: absolute
border: 1px solid #eee
border-bottom: 3px solid #eee
height: 50px
line-height: 50px
padding-left: 12px
cursor: pointer
@media ($large)
font-size: 16px
height: 35px
line-height: 35px
#map-open
outline: none
margin: 1px 5px 10px
display: absolute
border: 1px solid #eee
border-radius: 2px
height: 50px
line-height: 50px
padding-left: 10px
font-size: 16px
width: 174px
@media ($large)
width: 184px
height: 35px
line-height: 35px
// after to #masthead
.site-map
display: none
position: fixed
height: 100%
width: 100%
border: none
z-index: 10000
margin-top: -69px
background: rgba(255,255,255,1)
.map-content
background: #fff
margin: 0 auto
max-width: 400px
border: none
padding: 10px
position: absolute
top: 0
bottom: 0
left: 0
right: 0
overflow-y: scroll
&::-webkit-scrollbar
position: absolute
width: 4px
background: #fff
right: 0
&::-webkit-scrollbar-thumb
background: #fff
transition: background .3s ease
&:hover
&::-webkit-scrollbar-thumb
background: #eee
input
outline: none
width: 100%
max-width: 300px
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
&::-webkit-input-placeholder
color: #bbb
font-size: 18px !important
transition: color .7s
&:focus::-webkit-input-placeholder
color: #e1e1e1
transition: color .7s ease .9s
span
color: #bbb !important
font-size: 20px !important
animation: reveal 7s
li
text-align: left
list-style-image: none !important
margin: 2px
padding-right: 17px
a
display: block
border: 1px solid #fff !important
font-size: 16px
width: 100%
line-height: 35px
height: 35px
padding: 0 20px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-transform: lowercase
transition: background .3s ease-out, border .3s ease-out !important
text-transform: capitalize
&:hover
background: lighten($ucr-blue, 50%) !important
color: $ucr-blue !important
@media ($large)
line-height: 25px
height: 25px
#site-search
font-size: 24px
border: none !important
border-bottom: 1px solid #eee !important
line-height: 50px
height: 50px
.menu-main-item
padding-left: 17px
font-weight: bold
//a
background: #f2f2f2
.menu-sub-item
padding-left: 30px
//a
background: #f9f9f9
.menu-item-hide
display: none
padding-left: 40px
a
background: #fff
.opacified
animation: opacify .7s cubic-bezier(0,.86,.47,1.1) forwards
.unopacified
animation: unopacify .8s cubic-bezier(0,.86,.47,1.1) forwards
.revealed
animation: reveal 1s cubic-bezier(0,.86,.47,1.1) forwards
.unrevealed
animation: unreveal 1.3s cubic-bezier(0,.86,.47,1.1) forwards
.menu-item-found
display: block
font-weight: normal
font-style: normal
padding-left: 17px
animation: reveal .7s cubic-bezier(0,.86,.47,1.1)
a
background: white !important
@keyframes reveal
from
opacity: 0
transform: translateY(15px)
to
opacity: 1
transform: translateY(0)
@keyframes unreveal
from
opacity: 1
transform: translateY(0)
to
opacity: 0
transform: translateY(15px)
@keyframes opacify
from
background: rgba(255,255,255,0)
to
background: rgba(255,255,255,1)
@keyframes unopacify
from
background: rgba(255,255,255,1)
to
background: rgba(255,255,255,0)
.show-site-map
display: block
.no-scroll
overflow: hidden
margin-left: -4px !important // as scroll bar is hidden
h2.title
margin-left: 4px !important
#menu-toggle
margin-left: 24px !important
@media ($large)
h2.title
margin-left: 2px !important
#brandingbar h2 img
margin-right: 13px !important
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment