Difference between revisions of "Team:DTU-Denmark/project"

Line 1: Line 1:
−
{{Team:DTU-Denmark/header.html}}
+
/* Overview
−
<!-- General outline for content-->
+
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
 +
*/
  
−
<html>
+
/****
 +
1. BODY
 +
*****/
 +
body {
 +
    overflow-x: hidden; /*prevent sidescroll on narrow devices*/
 +
}
  
−
<head>
+
/*
−
     <meta charset="utf-8">
+
.MYbody {
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     position: fixed;
−
</head>
+
    overflow-x: hidden;
 +
     overflow-y: scroll;
 +
}
 +
*/
 +
a,
 +
a:visited {
 +
    color: #555;
 +
}
  
−
<body>
+
a:hover,
−
<div class="masthead-main">
+
a:focus {
−
     <div class="container-fluid">
+
     color: #990000;
−
        <div class="row">
+
}
−
            <div class="col-md-12 thumbnail" style="background-image:url(https://www.spring-green.com/wp-content/uploads/2015/12/Tree-that-needs-pruning1.jpg)"> <!-- EDIT style url (this should lead to an image) -->
+
−
<h1 class="title">Project</h1>
+
−
               
+
−
            </div>
+
−
        </div> <!-- /row -->
+
−
    </div>
+
−
</div> <!-- /masthead-->
+
−
</body>
+
  
−
</html>
+
/***********
−
{{Team:DTU-Denmark/Submenue_tiles.html}}
+
2. MASTHEAD
−
{{Team:DTU-Denmark/footer}}
+
************/
 +
.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: 200px;
 +
}
 +
 
 +
.masthead-main .caption { /*control shadowing*/
 +
    width:100%;
 +
    height: 200px;
 +
    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: 200px;
 +
    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.title {
 +
    text-transform: uppercase;
 +
    text-align: justify;
 +
    float: center;
 +
color: white;
 +
}

Revision as of 08:59, 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; }

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

}

  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,
  2. timeline .timeline-item:before {
   content: ;
   display: block;
   width: 100%;
   clear: both;

}

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

}

  1. timeline:before {
   content: "";
   width: 3px;
   height: 100%;
   background: #EFEFEF;
   left: 50%;
   top: 0; 
   position: absolute;

}

  1. timeline:after {
   content: "";
   clear: both;
   display: table;
   width: 100%;

}

  1. timeline .timeline-item {
   margin-bottom: 50px;
   position: relative;

}

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

}

  1. timeline .timeline-item .timeline-icon span.star {
   position: relative;
   top: 28%;
   left: 28%;
   color: #6C7A89;
   font-size: x-large;

}

  1. timeline .timeline-item .timeline-content {
   width: 45%;
   background: #EFEFEF;
   padding: 20px;

}

  1. timeline .timeline-item .timeline-content h2 {
   padding: 15px;
   color: #141414;
   margin:-20px -20px 5px -20px;
   font-weight: 300;
   font-size:21px;

}

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

}

  1. timeline .timeline-item .timeline-content.right {
   float: right;

}

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

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

}

  1. 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: 200px;

}

.masthead-main .caption { /*control shadowing*/ 

   width:100%;
   height: 200px;
   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: 200px;
   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.title { 

   text-transform: uppercase;
   text-align: justify;
   float: center;

color: white; }