Line 451: | Line 451: | ||
text-align: justify; | text-align: justify; | ||
float: center; | float: center; | ||
− | + | font-color: white; | |
} | } |
Revision as of 08:47, 16 October 2016
/* Overview 1. Body 2. Masthead settings 3. Content left column 4. Sidebar right column 5. windowsize responsive 6. Attribution page 7. Team member page 8. Notebook
- /
/**** 1. BODY
- /
body {
overflow-x: hidden; /*prevent sidescroll on narrow devices*/
}
/* .MYbody {
position: fixed; overflow-x: hidden; overflow-y: scroll;
}
- /
a, a:visited {
color: #555;
}
a:hover, a:focus {
color: #990000;
}
/*********** 2. MASTHEAD
- /
.masthead { /*control height*/
height: 300px;
}
.masthead .caption { /*control shadowing*/
width:100%; height: 300px; bottom: .0rem; position: absolute; background:#000; background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
}
.masthead .thumbnail {
height: 300px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0 none; box-shadow: none; margin:0; padding:0;
}
.masthead .caption > div {
margin-top: 2em;
}
.masthead .caption h1 {
margin-top: -.0em; padding-top: -.0em;
}
.masthead .caption h1, .masthead .caption p {
color: #fff;
}
.masthead .title h1, .masthead .title h1 > p{
text-transform: uppercase; text-align: justify; float: left;
}
.masthead .title h1 > p {
border-top: 1px solid; padding-top: .3em;
}
.masthead .intro blockquote {
position: absolute; margin-top: 30px;
}
.masthead .intro blockquote p {
text-align: right !important;
}
.masthead .intro blockquote small {
color: #fff;
}
/****************** 3. CONTENT LEFT COLUMN
- /
.colLeft blockquote {
border-left-color: #990000;
}
.colLeft a.anchor:target, .colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/
display: block; top: -125px; position: relative; visibility: hidden;
}
.colLeft .h2 {
border-bottom-width: 2px; font-weight: 500;
}
.colLeft .h3 {
border-bottom-width: 1px; font-weight: 500;
margin-bottom: 0.4em; }
- bodyContent h3 {
margin-bottom: 0.5em; }
.colLeft .h2, .colLeft .h3 {
padding-bottom: 0.2em; border-bottom-style: solid; border-bottom-color: #990000;
clear: both; } /* grid layout for achievements, notebook, and parts page */ .grid-row {
clear:both;
}
/******************* 4. SIDEBAR RIGHT COLUMN
- /
@media screen and (max-width: 1000px){
.colRight { padding-left: 0px !important; }
}
- sidebar {
margin-top: 20px; padding-top: 18px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px;
}
- sidebar {
margin-left: 0px;
}
- sidebar.nav li a {
color: #999; font-size: .9em; padding-top: 0.3em; padding-bottom: .3em; background-color: transparent; text-transform: uppercase; border-left-width: 3px; border-left-style: solid; border-left-color: #fff;
}
- sidebar.nav li a:active,
- sidebar.nav li a:hover,
- sidebar.nav li a:focus,
- sidebar.nav li a.nav-active:hover {
background-color: transparent; list-style: circle; border-left-width: 3px; border-left-style: solid; border-left-color: #990000;
}
- sidebar.nav li a.nav-active {
color:black; border-left-width: 3px; border-left-style: solid; border-left-color: #750000;
}
/* Undo the affixed behavior in mobile views */
/* Apply the affixed behavior */
/* affix-top: The affix-top class should be inline to the page. */
- sidebar.affix-top {
width:200px;
/* for reference - no additional styling */ }
/* affix: The affix class should be fixed to the page. */
- sidebar.affix {
position: fixed; top: 125px; /* same as body padding or outer navbar height */ width: 200px; /* stop it from growing - anyone know how to fix this? */
}
/* affix bottom: The affix-bottom class should be positioned absolute. */
- sidebar.affix-bottom {
position: absolute; width: 200px;
}
/********************
5. WINDOWSIZE RESPONSIVE
- /
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
- sidebar *:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 900px) {
div.colLeft { width: 100%; }
#sidebar { position: fixed; top: 70px !important; width: 200px; /* stop it from growing - anyone know how to fix this? */ z-index: 200; background-color: white; border-color: #790000; border-style: solid; border-width: 3px; }
#sidebar.affix-bottom, #sidebar.affix-top { position: fixed; } #scrollspy { display: none; }
}
/*************** 6. ATTRIBUTION PAGE
- /
.sponsor-image {
width: 100%; margin-bottom: 40px;
}
/*************** 7. TEAM MEMBER PAGE
- /
.student {
margin-bottom: 3em;
}
.student img {
margin-top: 1.5em;
}
/******** 8. NOTEBOOK
- /
/* Timeline */
- timeline .timeline-item:after,
- timeline .timeline-item:before {
content: ; display: block; width: 100%; clear: both;
}
- timeline {
width: 100%; margin: 30px auto; position: relative; padding: 0 10px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease;
}
- timeline:before {
content: ""; width: 3px; height: 100%; background: #EFEFEF; left: 50%; top: 0; position: absolute;
}
- timeline:after {
content: ""; clear: both; display: table; width: 100%;
}
- timeline .timeline-item {
margin-bottom: 50px; position: relative;
}
- timeline .timeline-item .timeline-icon {
background: #EFEFEF; width: 50px; height: 50px; position: absolute; top: 0; left: 50%; overflow: hidden; margin-left: -23px; border-radius: 100%;
}
- timeline .timeline-item .timeline-icon span.star {
position: relative; top: 28%; left: 28%; color: #6C7A89; font-size: x-large;
}
- timeline .timeline-item .timeline-content {
width: 45%; background: #EFEFEF; padding: 20px;
}
- timeline .timeline-item .timeline-content h2 {
padding: 15px; color: #141414; margin:-20px -20px 5px -20px; font-weight: 300; font-size:21px;
}
- timeline .timeline-item .timeline-content:before {
content: ; position: absolute; left: 45%; top: 20px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #f1f1f1;
}
- timeline .timeline-item .timeline-content.right {
float: right;
}
- timeline .timeline-item .timeline-content.right:before {
content: ; right: 45%; left: inherit; border-left: 0; border-right: 7px solid #f1f1f1;
}
@media screen and (max-width: 768px) {
#timeline { margin: 30px; padding: 0px; width: 90%; } #timeline:before { left: 0; } #timeline .timeline-item .timeline-content { width: 90%; float: right; } #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before { left: 10%; margin-left: -6px; border-left: 0; border-right: 7px solid #f1f1f1; } #timeline .timeline-item .timeline-icon { left: 0; }
}
/* Labels */
- timeline .label-main {
background-color: #6C7A89; color:#FFF; font-size:14px; margin-left:-30px; border-radius:0; font-weight:400;
}
- full-schedule .label-main {
background-color: #6C7A89; color:#FFF;font-size:14px; margin-left:0px; border-radius:0; font-weight:400;
}
/*********** 9. MASTHEAD
- /
.masthead-main { /*control height*/
height: 150px;
}
.masthead-main .caption { /*control shadowing*/
width:100%; height: 150px; bottom: .0rem; position: absolute; background:#000; background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
}
.masthead-main .thumbnail {
height: 150px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0 none; box-shadow: none; margin:0; padding:0;
}
.masthead-main h1 {
text-transform: uppercase; text-align: justify; float: center; font-color: white;
}