Seth
a6b3f039d8
Pages: /, /simple, /decimal, /seth, /calendar, /astro, /convert, /timegov Features: Seth Calendar (10×36 + holidays), decimal time, moon phases, astronomy (sun/moon), bidirectional time converter, Seth date display, leap day split cell in calendar grid.
160 lines
2.7 KiB
CSS
160 lines
2.7 KiB
CSS
/**
|
|
* @file
|
|
* Header and Footer styles
|
|
*
|
|
*/
|
|
|
|
/* Header Styles */
|
|
.nist-header {
|
|
background: #000;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
padding: 10px 16px 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.nist-header__logo-link {
|
|
display: inline-block;
|
|
height: 35px;
|
|
}
|
|
|
|
.nist-header__logo-icon {
|
|
fill: #fff;
|
|
display: inline-block;
|
|
height: 16px;
|
|
position: relative;
|
|
top: -2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.nist-header__logo-image {
|
|
fill: #fff;
|
|
display: inline-block;
|
|
height: 24px;
|
|
width: 90px;
|
|
}
|
|
|
|
/* Limit main content area width */
|
|
.nist-main {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1200px;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Make sure body has no margin or padding when using only this header component */
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Footer styles */
|
|
|
|
.nist-footer {
|
|
background: #333333;
|
|
position: relative;
|
|
z-index: 200;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nist-footer__inner {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1200px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.nist-footer__inner:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.nist-footer {
|
|
background: #333333;
|
|
color: white;
|
|
padding: 10px 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.nist-footer a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nist-footer .nist-footer__logo img {
|
|
/* width: 30%; 300px;*/
|
|
height: 100px;
|
|
display: inline-block;
|
|
margin-left: 5%; /*margin-left: 10%;*/
|
|
margin-right: 5%; /*margin-right: 10%auto;*/
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.nist-footer__menu {
|
|
clear: both;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.nist-footer__menu.first {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.nist-footer__menu ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.nist-footer__menu-item {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
padding: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.nist-footer__menu-item:after {
|
|
content: '|';
|
|
margin-right: 1.6px;
|
|
display: inherit;
|
|
position: static;
|
|
font: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.nist-footer__menu-item:last-child:after {
|
|
content: none;
|
|
}
|
|
|
|
.nist-footer__menu-item a {
|
|
font-weight: normal;
|
|
margin-right: 6px;
|
|
white-space: nowrap;
|
|
padding: 0.5em 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
/**
|
|
* Stick footer to bottom of page
|
|
* Source: https://css-tricks.com/couple-takes-sticky-footer/
|
|
*/
|
|
|
|
html.nist-footer-bottom,
|
|
html.nist-footer-bottom body {
|
|
height: 100%;
|
|
}
|
|
html.nist-footer-bottom body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
html.nist-footer-bottom #main {
|
|
flex: 1 0 auto;
|
|
}
|
|
html.nist-footer-bottom .nist-footer {
|
|
flex-shrink: 0;
|
|
}
|