Team:DTU-Denmark/content-css

/* 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

• /

/**** BODY

• • • • • /

body {

   overflow-x: hidden; /*prevent sidescroll on narrow devices*/

}

1. 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;

}

.colLeft .h2, .colLeft .h3 {

   padding-bottom: 0.2em;
   
   border-bottom-style: solid;
   border-bottom-color: #990000;    

} /* grid layout for achievements, notebook, and parts page */ .grid-row {

   clear:both;

}

.h2, .h3 {

   clear: both;

} /******************* 4. SIDEBAR RIGHT COLUMN

• • • • • • • • • • • • • • • • • • • • /

@media screen and (max-width: 1000px){

   .colRight {
   padding-left: 0px !important;
   }

}

1. sidebar {

   margin-top: 20px;
   padding-top: 18px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 5px;

}

1. sidebar {

   margin-left: 0px;

}

1. 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;
   

}

1. sidebar.nav li a:active,
2. sidebar.nav li a:hover,
3. sidebar.nav li a:focus,
4. 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;

}

1. 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. */

1. sidebar.affix-top {

   width:200px;

/* for reference - no additional styling */ }

/* affix: The affix class should be fixed to the page. */

1. 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. */

1. sidebar.affix-bottom {

   position: absolute;
   width: 200px;

}

/******************** 5. WINDOWSIZE RESPONSIVE

• • • • • • • • • • • • • • • • • • • • /

/*Fixes dissapear reappear of sidebar when scrolling on iPad */

1. 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 */

1. timeline .timeline-item:after, #timeline .timeline-item:before {content: ;display: block;width: 100%;clear: both;}
2. 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;}
3. timeline:before {content: "";width: 3px;height: 100%;background: #EFEFEF;left: 50%;top: 0; position: absolute;}
4. timeline:after {content: "";clear: both;display: table;width: 100%;}
5. timeline .timeline-item {margin-bottom: 50px;position: relative;}
6. 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%;}
7. timeline .timeline-item .timeline-icon i.fa {position: relative;top: 30%;left: 32%;color: #6C7A89;}
8. timeline .timeline-item .timeline-content {width: 45%;background: #EFEFEF;padding: 20px;}
9. timeline .timeline-item .timeline-content h2 {padding: 15px;color: #141414;margin:-20px -20px 5px -20px;font-weight: 300;font-size:21px;}
10. 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;}
11. timeline .timeline-item .timeline-content.right {float: right;}
12. 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) {

1. timeline {margin: 30px;padding: 0px;width: 90%;}
2. timeline:before {left: 0;}
3. timeline .timeline-item .timeline-content {width: 90%;float: right; }
4. 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;}
5. timeline .timeline-item .timeline-icon {left: 0;}

} .star {

   align-content: center;
   margin-left: 25px;
   margin-right: 25px;
   padding-top: 25px;
   padding-bottom: 25px;
   }
   

/* Labels */

1. timeline .label-main {background-color: #6C7A89;color:#FFF;font-size:14px;margin-left:-30px;border-radius:0;font-weight:400;}
2. full-schedule .label-main {background-color: #6C7A89;color:#FFF;font-size:14px;margin-left:0px;border-radius:0;font-weight:400;}