A Pen by Abraham Juliot on CodePen.
Created
March 14, 2016 17:27
-
-
Save anonymous/dba3b1271e743376781c to your computer and use it in GitHub Desktop.
Earth Sciences Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> ></li> | |
| <li><a href="http://cnas.ucr.edu/">CNAS</a> ></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&month=201512&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes" onclick="requestCalInfo('cal','option=minical&month=201512&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes');return false" | |
| title="Previous" class="prev" accesskey="p">Previous</a> <span class='month'>January</span> <span class='year'>2016</span> <a href="/calendar.html?option=minical&month=201602&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes" | |
| onclick="requestCalInfo('cal','option=minical&month=201602&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&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"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </td> | |
| <td>1</td> | |
| <td>2</td> | |
| </tr> | |
| <tr> | |
| <td>3</td> | |
| <td class="hlite"><a href="/calendar.html?option=daily&date=20160104&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&date=20160104&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&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&date=20160111&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&date=20160111&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&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&date=20160118&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&date=20160118&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&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&date=20160125&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&dow=yes" onclick="new Effect.Highlight('events', { startcolor: '#f3f2ed', restorecolor: '#fff' });requestCalInfo('events','option=daily&date=20160125&unit=55&dtemplate=daily.tpl&etemplate=promise-event.tpl&calid=cal&destid=events&fstart=f3f2ed&fend=fff&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"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </td> | |
| <td class="empty"> </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&unit=55&etemplate=promise-event.tpl&type=all" onclick="javascript:requestCalInfo('events','option=daily&destid=events&unit=55&type=all&etemplate=promise-event.tpl'); return false">View events for today</a></li> | |
| <li><a href="/calendar.html?option=list&unit=55&type=all&timelimit=30&limit=45&etemplate=promise-event.tpl" onclick="javascript:requestCalInfo('events','option=list&destid=events&unit=55&type=all&timelimit=30&limit=45&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> • <a href="http://campusstatus.ucr.edu/">Campus Status</a><br /> | |
| <a href="http://www.ucr.edu/employment.html">Career Opportunities</a> • <a href="http://diversity.ucr.edu/">Diversity</a><br /> | |
| <a href="http://my.ucr.edu/visit/Pages/default.aspx">Visit UCR</a> • <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:john.herring@ucr.edu?subject=Earth Sciences Inquiry">john.herring@ucr.edu</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>© 2016 Regents of the University of California</li> | |
| <li><a rel="nofollow" href="http://cms-prod-1.ucr.edu/10?action=de&skin=oucampus&account=D01055&site=earthsciences&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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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