Difference between revisions of "Team:DTU-Denmark/content-css"

Line 34: Line 34:
 
     background: -o-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);
 
     background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
 +
}
 +
 +
@media screen and (max-width: 767px) {
 +
    .masthead .caption {
 +
        width:100%;
 +
        height: 300px;
 +
        bottom: .0rem;
 +
        position: absolute;
 +
        background:#000;
 +
        background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0));
 +
        background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0));
 +
        background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0));
 +
        background: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
 +
    }
 
}
 
}
  
Line 132: Line 146:
 
     padding-right: 5px;
 
     padding-right: 5px;
 
     border-radius: 5px;
 
     border-radius: 5px;
 +
}
 +
 +
@media screen and (max-width: 900px) {
 +
    #sidebar,
 +
    .colRight {
 +
        display: none;
 +
    }
 
}
 
}
  
Line 171: Line 192:
  
 
/* Undo the affixed behavior in mobile views */
 
/* 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 {
 
#sidebar.affix {
−
     position: fixed;
+
     position: static;
−
    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. */
+
/* Apply the affixed behavior in large views */
−
#sidebar.affix-bottom {
+
@media screen and (min-width: 767px) {
−
    position: absolute;
+
 
−
    width: 200px;
+
    /* 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 {
−
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
+
−
#sidebar *:not(html) {
+
−
    -webkit-transform: translate3d(0, 0, 0);
+
−
}
+
−
 
+
−
@media screen and (max-width: 900px) {
+
−
 
+
−
 
+
−
     #sidebar {
+
 
         position: fixed;
 
         position: fixed;
−
         top: 70px !important;  
+
         top: 125px;     /* same as body padding or outer navbar height */
 
         width: 200px;  /* stop it from growing - anyone know how to fix this? */
 
         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,
+
     /* affix bottom: The affix-bottom class should be positioned absolute. */
−
     #sidebar.affix-top {
+
     #sidebar.affix-bottom {
−
         position: fixed;
+
         position: absolute;
 +
        width: 200px;
 
     }
 
     }
−
 
+
      
−
     #scrollspy {
+
−
        display: none;
+
−
    }
+
−
 
+
 
}
 
}
  
−
.sponsor-image {
+
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
−
width: 100%;
+
#sidebar *:not(html) {
−
margin-bottom: 40px;
+
    -webkit-transform: translate3d(0, 0, 0);
 
}
 
}

Revision as of 11:40, 7 September 2016

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;

}

/*Masthead settings*/ .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);

}

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

   .masthead .caption {
       width:100%;
       height: 300px;
       bottom: .0rem;
       position: absolute;
       background:#000;
       background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0));
       background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0));
       background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0));
       background: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
   }

}

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

}

/*Content settings 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;

}

/*sidebar setting right columns*/ @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;

}

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

   #sidebar,
   .colRight {
       display: none;
   }

}

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

  1. sidebar.affix {
   position: static;

}

/* Apply the affixed behavior in large views */ @media screen and (min-width: 767px) { 

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

}

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

  1. sidebar *:not(html) { 
   -webkit-transform: translate3d(0, 0, 0);

}