Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@matt-bernhardt

matt-bernhardt/css-js.html

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matt-bernhardt/9ff59021559bc14c4e79 to your computer and use it in GitHub Desktop.
Save matt-bernhardt/9ff59021559bc14c4e79 to your computer and use it in GitHub Desktop.
Download ZIP
Libguides Group - Moth Design
Raw
css-js.html
<meta name="viewport" content="width=device-width, maximum-scale=1">
<style>
/*
*** Libguides overrides
*/
body {
font-size: 16px;
}
footer h4 {
font: inherit;
padding: 0;
}
@media only screen and (max-width: 800px) {
/* Start shrinking the content column */
div#wrapper,
div#container {
max-width: 100%;
}
/* Undo oversize padding on menu to allow it to collapse */
nav#customNav ul li a {
padding: 5px 1%;
font-size: 13px;
}
div#content div#contentleft,
div#content div#contentcenter,
div#content div#contentright {
width: 100% !important;
}
}
/* Phone/4-inch styles */
@media only screen and (max-width: 650px) {
/* Header items in a row, by force */
div#content {
padding: 0;
}
}
/*
*******************************************************************************
*******************************************************************************
*******************************************************************************
*** Basic styles
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Open Sans", Helvetica, sans-serif;
line-height: 1.4;
text-rendering: optimizeLegibility;
}
a {
text-decoration: none;
}
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.hidden-mobile {
display: none;
}
.hidden-non-mobile {
display: block;
}
@media only screen and (min-width: 569px) {
.hidden-non-mobile {
display: none;
}
}
@media only screen and (min-width: 569px) {
.hidden-mobile {
display: block;
}
}
/*
*******************************************************************************
*******************************************************************************
*******************************************************************************
*** Header styles
*/
/* Header & Nav */
.header-main {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
background: #333333;
font-family: 'Open Sans', sans-serif;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
clear: both;
margin: 0 auto;
max-width: 1024px;
width: 100%;
}
@media only screen and (min-width: 569px) {
.header-main {
width: 100%;
}
}
@media only screen and (min-width: 569px) {
.header-main {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 1em;
}
}
.header-main > [class*="link"] {
color: #fff;
font-size: 0.4375em;
-webkit-box-ordinal-group: 401;
-webkit-order: 400;
-ms-flex-order: 400;
order: 400;
text-transform: uppercase;
}
.header-main .logo-mit-lib {
fill: white;
}
.header-main .logo-mit-lib svg {
max-height: 3em;
}
.header-main .logo-mit-lib .arch {
display: none;
}
@media only screen and (min-width: 569px) {
.header-main .logo-mit-lib .arch {
display: block;
}
}
.header-main .link-account {
margin-left: 2em;
}
.header-main .link-logo-mit {
display: none;
}
@media only screen and (min-width: 569px) {
.header-main .link-logo-mit {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
display: block;
-webkit-box-ordinal-group: 5;
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
margin-bottom: 8px;
margin-bottom: 0.5rem;
}
}
.header-main .link-site-search {
margin-left: 5.5em;
}
.header-main .link-account,
.header-main .link-site-search {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
padding-bottom: 8px;
padding-bottom: 0.5rem;
}
.header-main .link-account svg,
.header-main .link-site-search svg {
fill: #c8c8c8;
margin: 0 auto;
}
@media only screen and (min-width: 569px) {
.header-main .link-account,
.header-main .link-site-search {
display: none;
}
}
.header-main .logo-mit {
display: none;
}
@media only screen and (min-width: 569px) {
.header-main .logo-mit {
display: block;
height: auto;
max-height: 45px;
max-height: 2.8125rem;
fill: #b9b7b6;
}
.header-main .logo-mit .color {
fill: #fff;
}
}
.header-main .name-site {
font-size: 16px;
font-size: 1rem;
line-height: 1;
margin-top: -1.25em;
margin-left: 0.75em;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
padding-bottom: 8px;
padding-bottom: 0.5rem;
width: 6.4375em;
}
@media only screen and (min-width: 569px) {
.header-main .name-site {
margin-top: 0.5em;
margin-left: 0;
padding-bottom: 0;
}
}
.lte-ie9 .header-main .name-site {
margin-left: 32px;
max-width: 103px;
}
.lte-ie9 .header-main .logo-mit {
margin-top: 24px;
margin-left: 40px;
}
.nav-main {
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-transform: translateY(-1000%);
-ms-transform: translateY(-1000%);
transform: translateY(-1000%);
z-index: 7000;
margin: 0;
padding: 0;
width: 0;
height: 0;
overflow: hidden;
}
.nav-main.active {
background: white;
-webkit-box-shadow: 0 3px 3px #cccccc;
box-shadow: 0 3px 3px #cccccc;
height: auto;
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
padding: 0px 8px 8px 8px;
padding: 0rem 0.5rem 0.5rem 0.5rem;
position: absolute;
-webkit-transform: translateY(3em);
-ms-transform: translateY(3em);
transform: translateY(3em);
top: 0;
width: 100%;
}
.nav-main .small {
display: none;
}
@media only screen and (min-width: 569px) {
.nav-main .small {
display: block;
}
}
@media only screen and (max-width: 768px) {
.nav-main {
font-size: 0.75em;
}
.nav-main .small {
font-size: 0.25em;
}
}
@media only screen and (min-width: 569px) {
.nav-main {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
height: auto;
-webkit-flex-flow: nowrap;
-ms-flex-flow: nowrap;
flex-flow: nowrap;
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
overflow: visible;
width: auto;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.nav-main .small {
font-size: 0.5em;
line-height: 1.4;
padding-top: 8px;
padding-top: 0.5rem;
}
.nav-main .small a {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 8px;
padding-bottom: 0.5rem;
text-transform: uppercase;
}
.nav-main .small svg {
fill: #fff;
margin-bottom: 1em;
}
}
.nav-main .chat {
display: none;
}
@media only screen and (min-width: 569px) {
.nav-main .chat {
display: block;
}
.nav-main .chat .links-sub {
background: #f3f3f3;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
min-width: 150px;
min-width: 9.375rem;
width: auto;
}
.nav-main .chat .links-sub a:hover {
background: none;
}
.nav-main .chat .more {
display: block;
font-size: 12px;
font-size: 0.75rem;
text-align: center;
text-transform: none;
width: 100%;
}
.nav-main .chat .wrap-button-chat {
min-height: 46px;
min-height: 2.875rem;
padding: 16px 8px 0px 8px;
padding: 1rem 0.5rem 0rem 0.5rem;
min-width: 100%;
}
.nav-main .chat .wrap-button-chat #libchat_btn_widget {
border: 1px solid #666;
}
}
.link-primary {
position: relative;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
width: 100%;
}
@media only screen and (min-width: 569px) {
.link-primary {
border-right: 1px solid #666666;
padding-top: 1em;
width: auto;
}
}
@media only screen and (min-width: 569px) {
.link-primary:hover {
background: #5889c2;
}
}
.link-primary:hover .links-sub {
-webkit-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
max-height: 1000px;
opacity: 1;
overflow: visible;
-webkit-transition: max-height 0.3s, margin 0.3s, opacity 0.3s, overflow 0.3s, padding-top 0.3s, padding-bottom 0.3s;
transition: max-height 0.3s, margin 0.3s, opacity 0.3s, overflow 0.3s, padding-top 0.3s, padding-bottom 0.3s;
}
.link-primary > a {
border-bottom: 1px solid #b5b5b5;
display: block;
padding: 8px;
padding: 0.5rem;
position: relative;
}
@media only screen and (min-width: 569px) {
.link-primary > a {
border-bottom: none;
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
padding-top: 1em;
}
}
.link-primary > a.active {
background: lightgray;
-webkit-box-shadow: 0 0 2px #444, inset 1px 0 0 gray, inset -1px 0 0 gray, inset 0 1px 0 gray;
box-shadow: 0 0 2px #444, inset 1px 0 0 gray, inset -1px 0 0 gray, inset 0 1px 0 gray;
}
.link-primary .col-1 {
background: #fff;
}
.link-primary .col-2 {
background: #f3f3f3;
}
.link-primary .links-sub {
display: none;
max-height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
-webkit-transition: max-height 0.3s, margin 0.3s, opacity 0.3s, overflow 0.3s, padding-top 0.3s, padding-bottom 0.3s;
transition: max-height 0.3s, margin 0.3s, opacity 0.3s, overflow 0.3s, padding-top 0.3s, padding-bottom 0.3s;
width: 31.75em;
}
@media only screen and (min-width: 569px) {
.link-primary .links-sub {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
.link-primary .links-sub a {
color: #5889c2;
display: block;
font-weight: 600;
padding: 0.5em;
}
.link-primary .links-sub a:hover {
background: #d9d9d9;
}
.link-primary .links-sub [class*="col-"] {
width: 50%;
}
.link-primary .links-sub .about {
display: block;
font-size: 0.6875em;
font-weight: normal;
}
.link-primary .links-sub .bottom {
border-top: 1px solid #dedede;
}
.link-primary .links-sub .bottom.extra span:first-of-type:after {
content: url('http://libraries.mit.edu/wp-content/themes/libraries/images/arrow-right-sfw.svg');
display: inline-block;
margin-left: 0.25em;
}
.link-primary .links-sub .bottom:not(.extra):after {
content: url('http://libraries.mit.edu/wp-content/themes/libraries/images/arrow-right-sfw.svg');
display: inline-block;
margin-left: 0.25em;
}
.link-primary .bottom:not(.extra) span:not(:first-of-type):before {
color: #5889c2;
content: '|';
display: inline-block;
margin-right: 4px;
}
.link-primary .heading-col {
color: #7c7c7d;
display: block;
font-size: 0.6em;
font-weight: bold;
margin: 16px 0px 8px 8px;
margin: 1rem 0rem 0.5rem 0.5rem;
text-transform: uppercase;
}
.link-primary .push {
right: 0;
}
.no-csstransitions .link-primary .links-sub {
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 0;
}
.no-csstransitions .link-primary:hover .links-sub {
height: auto;
margin: auto;
overflow: visible;
padding: 16px;
padding: 1rem;
width: 600px;
}
.nav-secondary {
border-bottom: 1px solid #dedede;
font-size: 16px;
font-size: 1rem;
margin: 0 20px;
z-index: 7000;
}
@media only screen and (max-width: 320px) {
.nav-secondary {
background: #333333;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
.nav-secondary.active {
height: auto;
margin: 0;
overflow: visible;
padding: 0;
}
}
.nav-secondary ul {
list-style: none;
}
.nav-secondary .menu > ul > li {
display: inline-block;
position: relative;
}
@media only screen and (max-width: 320px) {
.nav-secondary .menu > ul > li {
display: block;
}
}
.nav-secondary .menu > ul > li:nth-child(n+4) ul {
right: 0;
}
.nav-secondary .menu > ul > li:hover {
background: #dedede;
-webkit-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media only screen and (max-width: 320px) {
.nav-secondary .menu > ul > li:hover {
background: none;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.nav-secondary .menu > ul > li:hover li {
background: #dedede;
border-top: 1px solid #ababab;
height: auto;
line-height: 1;
margin: auto;
opacity: 1;
overflow: visible;
width: 100%;
z-index: 7000;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
@media only screen and (max-width: 320px) {
.nav-secondary .menu > ul > li:hover li {
display: none;
}
}
.nav-secondary .menu > ul > li:hover li a {
display: block;
padding: 16px;
padding: 1rem;
}
.nav-secondary .menu > ul > li > a {
display: block;
padding: 16px;
padding: 1rem;
}
@media only screen and (max-width: 320px) {
.nav-secondary .menu > ul > li > a {
color: white;
}
}
.nav-secondary .menu > ul > li li {
height: 0;
line-height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 0;
}
.nav-secondary .menu > ul > li ul {
-webkit-box-shadow: 0 1px 2px #444;
box-shadow: 0 1px 2px #444;
position: absolute;
width: 320px;
width: 20rem;
}
.menu--toggle {
background: #100c0d;
cursor: pointer;
fill: #ebf5ff;
font-size: 16px;
font-size: 1rem;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 14.375%;
}
@media only screen and (min-width: 569px) {
.menu--toggle {
display: none;
}
}
.menu--toggle svg {
display: block;
margin: 1em auto;
}
.no-flexbox .link-primary.chat:hover .links-sub {
display: block;
}
.no-flexbox .link-primary.chat:hover .links-sub a {
display: block;
width: 100%;
}
.lte-ie9 .nav-main .links-sub {
display: none;
}
/* no-flexbox fallbacks */
.no-flexbox.no-flexboxlegacy .flex-container {
display: block;
}
.no-flexbox.no-flexboxlegacy .flex-container > a,
.no-flexbox.no-flexboxlegacy .flex-container > button,
.no-flexbox.no-flexboxlegacy .flex-container > div,
.no-flexbox.no-flexboxlegacy .flex-container > form,
.no-flexbox.no-flexboxlegacy .flex-container > header,
.no-flexbox.no-flexboxlegacy .flex-container > h1,
.no-flexbox.no-flexboxlegacy .flex-container > h2,
.no-flexbox.no-flexboxlegacy .flex-container > h3,
.no-flexbox.no-flexboxlegacy .flex-container > input,
.no-flexbox.no-flexboxlegacy .flex-container > nav,
.no-flexbox.no-flexboxlegacy .flex-container > span,
.no-flexbox.no-flexboxlegacy .flex-container > svg,
.no-flexbox.no-flexboxlegacy .flex-container > ul {
float: left;
width: auto;
}
.no-flexbox.no-flexboxlegacy .flex-container:after {
clear: both;
content: '';
display: table;
}
.no-flexbox.no-flexboxlegacy .flex-item {
float: left;
}
/*
*******************************************************************************
*******************************************************************************
*******************************************************************************
*** Footer styles
*/
.footer-main {
background: #474747;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
clear: both;
max-width: 1024px;
width: 100%;
}
@media only screen and (min-width: 769px) {
.footer-main {
background: #333333;
}
}
@media only screen and (min-width: 569px) {
.footer-main {
padding: 2em 1.375em;
}
}
@media only screen and (min-width: 569px) {
.footer-main {
width: 100%;
}
}
.footer-main a {
color: #dedede;
}
.footer-main a:hover {
text-decoration: underline;
}
.footer-main .identity {
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
padding: 2em 0 0;
}
@media only screen and (min-width: 569px) {
.footer-main .identity {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
}
.footer-main .links-all {
display: none;
}
@media only screen and (min-width: 569px) {
.footer-main .links-all {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
}
.footer-main .links-all h4 {
font-size: 1.125em;
font-weight: normal;
padding-bottom: 1em;
}
.footer-main .links-all .flex-item {
margin-right: 1.75em;
}
.footer-main .links-all .link-sub {
display: block;
font-size: 0.75em;
}
@media only screen and (min-width: 569px) {
.footer-main .links-all .link-sub {
font-size: 0.75em;
font-weight: 300;
}
.footer-main .links-all .link-sub:not(:last-of-type) {
padding-bottom: 1em;
}
}
.footer-main .links-primary {
border-top: 1px solid #808285;
border-bottom: 1px solid #808285;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
font-size: 0.8125em;
margin-top: 2em;
padding: 2rem 1.375rem;
width: 100%;
}
@media only screen and (min-width: 569px) {
.footer-main .links-primary {
border-top: none;
border-bottom: none;
font-size: 0.875em;
margin-top: -22.4px;
margin-top: -1.4rem;
margin-left: 184px;
margin-left: 11.5rem;
padding: 0;
}
}
.footer-main .links-primary span {
display: block;
width: 50%;
}
.footer-main .links-primary span:not(:last-of-type) {
margin-bottom: 1.5em;
}
@media only screen and (min-width: 569px) {
.footer-main .links-primary span {
font-weight: 300;
padding-left: 1em;
width: auto;
}
.footer-main .links-primary span:not(:last-of-type):after {
color: #dedede;
content: '|';
display: inline-block;
margin-left: 1em;
}
}
.footer-main .logo-mit-lib {
display: block;
fill: #fff;
padding-left: 1.375em;
width: 10.3125em;
}
@media only screen and (min-width: 569px) {
.footer-main .logo-mit-lib {
padding-left: 0;
max-width: 9.5em;
width: 9.5em;
}
}
.footer-main .logo-mit-lib svg {
max-height: 4em;
max-width: 9.5em;
}
.footer-main .text-find-us {
color: #ebebeb;
display: none;
font-size: 0.625em;
font-weight: bold;
text-transform: uppercase;
min-width: 7em;
}
@media only screen and (min-width: 569px) {
.footer-main .text-find-us {
display: block;
}
}
.footer-main .social {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
padding-left: 1.375em;
width: auto;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
}
@media only screen and (min-width: 569px) {
.footer-main .social {
-webkit-flex-flow: nowrap;
-ms-flex-flow: nowrap;
flex-flow: nowrap;
margin-bottom: -0.8em;
}
}
.footer-main .social a {
width: 33%;
}
.footer-main .social a:hover {
text-decoration: none;
}
@media only screen and (min-width: 569px) {
.footer-main .social a {
width: 20%;
}
.footer-main .social a:not(:last-of-type) {
margin-right: 0.5em;
}
}
.footer-main .social [class*="icon-social"] {
background: #dedede;
border-radius: 50%;
height: 1.5em;
padding: 0.2em;
width: 1.5em;
}
.footer-main .social [class*="icon-social"] path {
fill: #474747;
}
@media only screen and (min-width: 569px) {
.footer-main .social [class*="icon-social"] {
height: 2em;
padding: 0.2em;
width: 2em;
}
}
.footer-info-institute {
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
background: #595959;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
padding: 1.5em 1em;
max-width: 1024px;
width: 100%;
}
@media only screen and (min-width: 569px) {
.footer-info-institute {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
}
.footer-info-institute .about-mit {
font-size: 0.625em;
margin-bottom: 2em;
}
@media only screen and (min-width: 569px) {
.footer-info-institute .about-mit {
margin-bottom: 0;
}
}
.footer-info-institute .about-mit span {
color: #eeeeee;
text-transform: uppercase;
}
.footer-info-institute .about-mit span:first-of-type {
font-weight: bold;
}
@media only screen and (min-width: 569px) {
.footer-info-institute .about-mit span {
color: #ededed;
}
.footer-info-institute .about-mit span:not(:last-of-type):after {
content: '|';
font-weight: normal;
}
}
.footer-info-institute .license {
color: #bbb9b8;
font-size: 0.6875em;
width: 100%;
}
.footer-info-institute .license a {
color: #ededed;
}
.footer-info-institute .link-mit-home {
display: block;
}
@media only screen and (min-width: 569px) {
.footer-info-institute .link-mit-home {
margin: 0 1em 1.5em 0;
}
}
.footer-info-institute .logo-mit {
fill: #bbb9b8;
width: 3.375em;
}
.footer-info-institute .logo-mit .color {
fill: #ededed;
}
.no-flexbox .footer-info-institute {
display: block;
}
.no-flexbox .footer-info-institute:after {
clear: both;
content: '';
display: table;
}
.no-flexbox .footer-info-institute > a,
.no-flexbox .footer-info-institute > div {
float: left;
}
.no-flexbox .footer-info-institute .about-mit {
padding-top: 4em;
}
.no-flexbox .footer-info-institute .link-mit-home {
padding-top: 1.5em;
}
.no-flexbox .footer-main.flex-container {
display: block;
float: left;
}
.no-flexbox .footer-main:after {
clear: both;
content: '';
display: table;
}
.no-flexbox .footer-main .identity {
position: relative;
width: 100%;
}
.no-flexbox .footer-main .identity .logo-mit-lib {
display: block;
float: left;
}
.no-flexbox .footer-main .identity .social {
bottom: 0;
display: block;
right: 22px;
position: absolute;
}
.no-flexbox .footer-main .links-primary {
display: block;
margin-top: 0;
margin-left: 0;
left: 202px;
position: absolute;
top: 79px;
width: 100%;
}
.no-flexbox .footer-main .links-primary span {
display: block;
float: left;
position: relative;
}
.lte-ie9.no-flexbox .footer-main .identity {
width: 100%;
}
</style>
<script>
$(function() {
var libchat_efc75c55947db323d4faab725b79307f = { iid:59, key:'fb10446730e271c', width:'240' };
$('header .menu--toggle').click(function(){
$('#nav-main').toggleClass('active');
$('.wrap-page').toggleClass('mobile-nav-active');
});
});
</script>
Raw
header.html
<header class="header-main flex-container group">
<h1 class="name-site group">
<a href="http://libraries.mit.edu/" class="logo-mit-lib"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 128.027 53.766" enable-background="new 0 0 128.027 53.766" xml:space="preserve"><polygon points="0,53.486 0,29.308 5.919,29.308 8.671,45.75 8.72,45.75 11.643,29.308 17.367,29.308 17.367,53.486 13.787,53.486 13.787,34.833 13.738,34.833 10.352,53.486 6.845,53.486 3.629,34.833 3.581,34.833 3.581,53.486 "/><rect x="20.662" y="29.308" width="3.678" height="24.179"/><polygon points="37.659,29.308 37.659,33.326 33.567,33.326 33.567,53.486 29.889,53.486 29.889,33.326 25.797,33.326 25.797,29.308 "/><polygon points="40.547,53.43 40.547,29.249 42.691,29.249 42.691,51.621 50.695,51.621 50.695,53.43 "/><path d="M52.535 36.517h2.01V53.43h-2.01V36.517zM52.3 29.249h2.478v2.545H52.3V29.249z"/><path d="M57.154 53.431c0.101-0.57 0.201-1.106 0.201-1.676V29.249h2.01v9.176l0.067 0.067c1.037-1.606 2.377-2.311 4.286-2.311 5.493 0 5.058 5.761 5.058 8.774 0 3.719-0.301 8.81-5.225 8.81 -1.976 0-3.416-0.804-4.253-2.378h-0.067v2.043H57.154zM62.948 52.157c3.718 0 3.818-3.182 3.818-7.134s-0.101-7.233-3.818-7.233c-3.249 0-3.65 4.387-3.65 6.933C59.298 47.401 59.298 52.157 62.948 52.157"/><path d="M72.79 38.794h0.066c0.838-1.607 2.613-2.611 4.656-2.611v2.043c-2.847-0.235-4.723 1.474-4.723 4.319v10.886h-2.01V36.517h2.01V38.794z"/><path d="M86.852 51.353h-0.067c-1.072 1.608-2.713 2.412-4.789 2.412 -3.015 0-4.656-2.043-4.656-4.99 0-5.929 5.963-5.325 9.377-5.592v-1.408c0-2.478-0.735-3.985-3.414-3.985 -1.844 0-3.317 0.905-3.317 2.914h-2.144c0.168-3.249 2.68-4.521 5.627-4.521 1.709 0 5.259 0.166 5.259 4.487v8.507c0 1.205 0 2.277 0.2 4.254h-2.075V51.353zM86.716 44.789c-2.879 0.101-7.233-0.233-7.233 3.885 0 1.909 0.972 3.483 3.048 3.483 2.311 0 4.186-2.076 4.186-4.287V44.789z"/><path d="M93.61 38.794h0.067c0.839-1.607 2.613-2.611 4.656-2.611v2.043c-2.847-0.235-4.724 1.474-4.724 4.319v10.886h-2.01V36.517h2.01V38.794z"/><path d="M99.936 36.517h2.009V53.43h-2.009V36.517zM99.7 29.249h2.479v2.545H99.7V29.249z"/><path d="M106.765 45.393v1.306c0 2.344 0.637 5.459 3.818 5.459 2.512 0 3.752-1.607 3.719-3.885h2.109c-0.234 4.086-2.445 5.492-5.828 5.492 -2.914 0-5.827-1.172-5.827-6.296v-4.153c0-4.89 2.043-7.134 5.827-7.134 5.828 0 5.828 4.187 5.828 9.211H106.765zM114.401 43.784c0-3.751-0.603-5.994-3.818-5.994 -3.215 0-3.818 2.243-3.818 5.994H114.401z"/><path d="M123.038 53.765c-3.651 0-5.092-1.774-5.058-5.358h2.043c0 2.312 0.535 3.852 3.114 3.852 1.943 0 2.88-1.104 2.88-2.981 0-4.42-7.603-3.281-7.603-8.875 0-3.114 2.144-4.219 5.092-4.219 3.349 0 4.42 2.311 4.42 4.889h-1.977c-0.1-2.144-0.67-3.282-2.947-3.282 -1.439 0-2.578 0.938-2.578 2.444 0 4.221 7.603 3.082 7.603 8.742C128.027 52.157 126.186 53.765 123.038 53.765"/><path class="arch" fill-rule="evenodd" clip-rule="evenodd" d="M121.487 19.746c-33.822-10.8-82.05-10.8-115.805 0C36.39 3.176 90.661 3.176 121.487 19.746"/><path class="arch" fill-rule="evenodd" clip-rule="evenodd" d="M105.419 8.979c-24.436-7.803-59.282-7.803-83.67 0C43.936-2.993 83.147-2.993 105.419 8.979"/></svg></a>
</h1>
<div class="menu--toggle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18.909px" height="13.091px" viewBox="2.182 6.545 18.909 13.091" enable-background="new 2.182 6.545 18.909 13.091" xml:space="preserve"><path d="M2.909,6.545h17.454c0.197,0,0.367,0.072,0.512,0.216c0.145,0.144,0.216,0.314,0.216,0.511s-0.071,0.367-0.216,0.511
c-0.145,0.144-0.314,0.216-0.512,0.216H2.909c-0.197,0-0.367-0.072-0.511-0.216C2.254,7.639,2.182,7.469,2.182,7.272
s0.072-0.367,0.216-0.511C2.542,6.617,2.712,6.545,2.909,6.545z M20.363,13.818H2.909c-0.197,0-0.367-0.072-0.511-0.216
s-0.216-0.314-0.216-0.511c0-0.196,0.072-0.367,0.216-0.511s0.314-0.216,0.511-0.216h17.454c0.197,0,0.367,0.072,0.512,0.216
s0.216,0.314,0.216,0.511c0,0.197-0.071,0.367-0.216,0.511S20.561,13.818,20.363,13.818z M20.363,19.636H2.909
c-0.197,0-0.367-0.071-0.511-0.216s-0.216-0.314-0.216-0.511s0.072-0.367,0.216-0.511c0.144-0.145,0.314-0.217,0.511-0.217h17.454
c0.197,0,0.367,0.072,0.512,0.217c0.145,0.144,0.216,0.314,0.216,0.511s-0.071,0.366-0.216,0.511S20.561,19.636,20.363,19.636z"/>
</svg>
</div>
<nav id="nav-main" class="nav-main flex-container">
<div class="link-primary">
<a href="http://libraries.mit.edu/search">Search</a>
<div class="links-sub flex-container group">
<div class="col-1 flex-item">
<span class="heading-col">Start Here</span>
<a href="http://libraries.mit.edu/bartonplus">BartonPlus (mega-search) <span class="about">Articles, e-books, & more</span></a>
<a href="http://libraries.mit.edu/vera">Vera <span class="about">E-journals & databases</span></a>
<a href="http://libraries.mit.edu/barton">Barton catalog (classic search) <span class="about">Books & more at MIT</span></a>
<a href="http://mit.worldcat.org">WorldCat<span class="about">Books & more worldwide</span></a>
<a href="http://libraries.mit.edu/barton-reserves">Course reserves</a>
<a href="http://libraries.mit.edu/search" class="bottom extra"><span>More search options</span> <span class="about">Images, data, DSpace, etc.</span></a>
</div>
<div class="col-2 flex-item">
<span class="heading-col">Also Try</span>
<a href="http://libraries.mit.edu/fulltext">FullText Finder <span class="about">Find specific citations</span></a>
<a href="http://libguides.mit.edu/googlescholar">Google Scholar for MIT <span class="about">Change settings to get better access</span></a>
<a href="http://libraries.mit.edu/libx">LibX <span class="about">Search/authenticate via browser</span></a>
<a href="http://dspace.mit.edu/">DSpace@MIT <span class="about">MIT research</span></a>
<a href="http://dome.mit.edu/">Dome <span class="about">MIT-digitized images, maps, etc.</span></a>
<a href="http://libraries.mit.edu/about/site-search">Site search</a>
</div>
</div><!-- end div.links-sub -->
</div><!-- end div.links-primary -->
<div class="link-primary">
<a href="http://libraries.mit.edu/hours">Hours & locations</a>
<div class="links-sub flex-container group">
<div class="col-1 flex-item">
<span class="heading-col">Locations</span>
<a href="http://libraries.mit.edu/barker">Barker Library</a>
<a href="http://libraries.mit.edu/dewey">Dewey Library</a>
<a href="http://libraries.mit.edu/hayden">Hayden Library</a>
<a href="http://libraries.mit.edu/archives">Institute Archives & Special Collections</a>
<a href="http://libraries.mit.edu/lewis">Lewis Music Library</a>
<a href="http://libraries.mit.edu/lsa">Library Storage Annex</a>
<a href="http://libraries.mit.edu/rotch">Rotch Library</a>
<a href="http://libraries.mit.edu/hours" class="bottom">All hours & locations</a>
</div>
<div class="col-2 flex-item">
<span class="heading-col">Using The Libraries</span>
<a href="http://libraries.mit.edu/locations">Map</a>
<a href="http://libraries.mit.edu/study">Study spaces</a>
<a href="http://libraries.mit.edu/copying">Scan, copy, print</a>
<a href="http://libraries.mit.edu/exhibits">Exhibits & galleries</a>
<a href="http://libraries.mit.edu/visitors">Non-MIT visitors</a>
<a href="http://libraries.mit.edu/use-policies">Library use policy</a>
</div>
</div><!-- end div.links-sub -->
</div><!-- end div.links-primary -->
<div class="link-primary">
<a href="http://libraries.mit.edu/borrow">Borrow & request</a>
<div class="links-sub flex-container group">
<div class="col-1 flex-item">
<span class="heading-col">Renew, Request, Suggest</span>
<a href="http://libraries.mit.edu/barton-account">Your Account <span class="about">Renew MIT, BLC, & Borrow Direct items</span></a>
<a href="http://library.mit.edu">Barton catalog <span class="about">Request items owned by MIT</span></a>
<a href="http://mit.worldcat.org">WorldCat <span class="about">Request items not owned by MIT</span></a>
<a href="http://libraries.mit.edu/illiad">ILLiad <span class="about">Track your Interlibrary Borrowing requests</span></a>
<a href="http://libraries.mit.edu/suggest-purchase">Suggest a purchase</a>
<a href="http://libraries.mit.edu/borrow" class="bottom">More options & help</a>
</div>
<div class="col-2 flex-item">
<span class="heading-col">More Information</span>
<a href="http://libraries.mit.edu/getit">Get it <span class="about">Understand your options</span></a>
<a href="http://libguides.mit.edu/circfaq">Circulation FAQ <span class="about">Info about fines, renewing, etc.</span></a>
<a href="http://libguides.mit.edu/reserves">Course reserves & TIP FAQ</a>
<a href="http://libraries.mit.edu/otherlibraries">Visit non-MIT libraries <span class="about">Harvard, Boston Library Consortium, etc.</span></a>
</div>
</div>
</div>
<div class="link-primary">
<a href="http://libraries.mit.edu/research-support">Research support</a>
<div class="links-sub flex-container push group">
<div class="col-1 flex-item">
<span class="heading-col">Help & useful tools</span>
<a href="http://libraries.mit.edu/ask">Ask Us! <span class="about">Email, chat, call, drop by</span></a>
<a href="http://libraries.mit.edu/research-guides">Research guides & expert librarians <span class="about">For every research interest</span></a>
<a href="http://libraries.mit.edu/offcampus">Connect from on and off-campus <span class="about">Tips & tricks</span></a>
<a href="http://libraries.mit.edu/research-support/productivity-tools/">Productivity tools <span class="about">Apps, LibX, RSS, etc.</span></a>
<a href="http://libraries.mit.edu/new-books">New books by subject <span class="about">Browse or subscribe to RSS feeds</span></a>
<a href="http://libraries.mit.edu/research-support" class="bottom">More research support options</a>
</div>
<div class="col-2 flex-item">
<span class="heading-col">Publishing & content management</span>
<a href="http://libraries.mit.edu/references">Citation software <span class="about">EndNote, Mendeley, & Zotero</span></a>
<a href="http://libguides.mit.edu/citing">Citing sources <span class="about">Avoid plagiarism, format references, etc.</span></a>
<a href="http://libguides.mit.edu/manage-info">Manage your info & data <span class="about">Organize your data, files, and more</span></a>
<a href="http://libguides.mit.edu/publishing">Getting published <span class="about">Tools & help</span></a>
<a href="http://libraries.mit.edu/scholarly">Scholarly publishing <span class="about">Open access & copyright</span></a>
</div>
</div><!-- end div.links-sub -->
</div><!-- end div.links-primary -->
<div class="link-primary">
<a href="http://libraries.mit.edu/about">About us</a>
<div class="links-sub flex-container push group">
<div class="col-1 flex-item">
<span class="heading-col">About us</span>
<a href="http://libraries.mit.edu/contact">Contact us</a>
<a href="http://libraries.mit.edu/use-policies">Library use policy</a>
<a href="http://libraries.mit.edu/about/#Jobs">Jobs</a>
<a href="http://libraries.mit.edu/giving">Giving to the MIT Libraries <span class="about">More about us</span></a>
<a href="http://libraries.mit.edu/about" class="bottom">More about us</a>
</div>
<div class="col-2 flex-item">
<span class="heading-col">News, events, & exhibits</span>
<a href="http://libraries.mit.edu/calendar">Calendar of events</a>
<a href="http://libraries.mit.edu/news">News</a>
<a href="http://libraries.mit.edu/exhibits">Exhibits & galleries</a>
</div>
</div><!-- end div.links-sub -->
</div><!-- end div.links-primary -->
<div class="link-primary small chat push">
<a href="http://libraries.mit.edu/ask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16.593px" height="16px" viewBox="0 0 16.593 16" enable-background="new 0 0 16.593 16" xml:space="preserve"><path d="M16.593 6.278c0 1.074-0.074 2.148-0.241 3.185 -0.204 1.353-1.722 2.574-3.055 2.722 -1.353 0.131-2.686 0.204-4.02 0.223L5.74 15.833C5.63 15.944 5.481 16 5.334 16c-0.094 0-0.167-0.019-0.241-0.037C4.871 15.87 4.74 15.647 4.74 15.407V12.37c-0.481-0.036-0.963-0.055-1.443-0.111 -1.334-0.148-2.853-1.443-3.074-2.796C0.074 8.426 0 7.352 0 6.296c0-1.092 0.074-2.185 0.223-3.24 0.222-1.352 1.74-2.648 3.074-2.797C4.963 0.093 6.63 0 8.297 0s3.333 0.093 5 0.259c1.333 0.149 2.851 1.445 3.055 2.797C16.519 4.111 16.593 5.204 16.593 6.278"/></svg><span>Ask Us</span></a>
<div class="links-sub">
<div class="wrap-button-chat">
<div id='libchat_btn_widget'></div>
</div>
<a class="more" href="http://libraries.mit.edu/ask">More ways to ask us</a>
</div>
</div>
<div class="link-primary small">
<a href="http://libraries.mit.edu/barton-account"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="15.4" height="16" viewBox="0 0 15.4 16" enable-background="new 0 0 15.445 16" xml:space="preserve"><path d="M13.4 15.7C12.2 15.9 10.4 16 7.7 16c-5.4 0-7.3-0.6-7.3-0.6 -0.3-0.1-0.4-0.4-0.4-0.7 0.3-1.6 1.2-2.5 2.5-3.3 0.3-0.2 0.8-0.4 1.2-0.6 0.8-0.3 1.8-0.7 2-1.3C5.8 9.2 5.7 8.6 5.2 7.9c-1.4-2.3-1.7-4.3-0.8-5.9C5.1 0.7 6.4 0 7.7 0c1.4 0 2.6 0.7 3.3 2 0.9 1.6 0.7 3.6-0.8 5.9C9.8 8.6 9.6 9.2 9.8 9.6c0.2 0.6 1.2 1 2 1.3 0.4 0.2 0.9 0.4 1.2 0.6 1.2 0.8 2.1 1.6 2.5 3.3 0.1 0.3-0.1 0.6-0.4 0.7C15 15.4 14.5 15.6 13.4 15.7"/></svg><span>Account</span></a>
</div>
</nav>
<a class="link-logo-mit" href="http://www.mit.edu"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="54" height="28" viewBox="0 0 54 28" enable-background="new 0 0 54 28" xml:space="preserve" class="logo-mit"><rect x="28.9" y="8.9" width="5.8" height="19.1" class="color"/><rect width="5.8" height="28"/><rect x="9.6" width="5.8" height="18.8"/><rect x="19.3" width="5.8" height="28"/><rect x="38.5" y="8.9" width="5.8" height="19.1"/><rect x="38.8" width="15.2" height="5.6"/><rect x="28.9" width="5.8" height="5.6"/></svg></a>
<a href="http://libraries.mit.edu/search" class="link-site-search hidden-non-mobile"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="16" viewBox="0 0 12 12" alt="search" class="icon-search">
<path d="M7.273 0.727q1.187 0 2.19 0.585t1.588 1.588 0.585 2.19-0.585 2.19-1.588 1.588-2.19 0.585q-1.278 0-2.33-0.676l-3.284 3.301q-0.295 0.284-0.688 0.284-0.403 0-0.688-0.284t-0.284-0.688 0.284-0.688l3.301-3.284q-0.676-1.051-0.676-2.33 0-1.188 0.585-2.19t1.588-1.588 2.19-0.585zM7.273 8q0.591 0 1.128-0.23t0.929-0.622 0.622-0.929 0.23-1.128-0.23-1.128-0.622-0.929-0.929-0.622-1.128-0.23-1.128 0.23-0.929 0.622-0.622 0.929-0.23 1.128 0.23 1.128 0.622 0.929 0.929 0.622 1.128 0.23z"></path>
</svg><span class="bottom">Search</span></a>
<a href="" class="link-account hidden-non-mobile"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="15.4" height="16" viewBox="0 0 15.4 16" enable-background="new 0 0 15.445 16" xml:space="preserve"><path d="M13.4 15.7C12.2 15.9 10.4 16 7.7 16c-5.4 0-7.3-0.6-7.3-0.6 -0.3-0.1-0.4-0.4-0.4-0.7 0.3-1.6 1.2-2.5 2.5-3.3 0.3-0.2 0.8-0.4 1.2-0.6 0.8-0.3 1.8-0.7 2-1.3C5.8 9.2 5.7 8.6 5.2 7.9c-1.4-2.3-1.7-4.3-0.8-5.9C5.1 0.7 6.4 0 7.7 0c1.4 0 2.6 0.7 3.3 2 0.9 1.6 0.7 3.6-0.8 5.9C9.8 8.6 9.6 9.2 9.8 9.6c0.2 0.6 1.2 1 2 1.3 0.4 0.2 0.9 0.4 1.2 0.6 1.2 0.8 2.1 1.6 2.5 3.3 0.1 0.3-0.1 0.6-0.4 0.7C15 15.4 14.5 15.6 13.4 15.7"/></svg><span class="bottom">Account</span></a>
</header>
Raw
index.txt
This contains branding materials (styles, javascript, header and footer) for implementing the new Moth-designed header and footer in the MIT Libraries' instance of LibGuides.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment