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

(Created page with " body { overflow-x: hidden; →‎prevent sidescroll on narrow devices: } #MYbody { position: fixed; overflow-...")
 
Line 1: Line 1:
−
        body {
+
body {
−
            overflow-x: hidden; /*prevent sidescroll on narrow devices*/
+
    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;
+
−
        }
+
−
       
+
−
        /*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;
+
−
            }
+
−
        }
+
−
       
+
−
        #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;
+
−
            }
+
−
        }
+
−
       
+
−
        #sidebar {
+
−
            margin-left: 0px;
+
−
        }
+
  
−
       
+
#MYbody {
−
        #sidebar.nav li a {
+
    position: fixed;
−
            color: #999;
+
    overflow-x: hidden;
−
            font-size: .9em;
+
    overflow-y: scroll;
−
            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 {
+
−
            background-color: transparent;
+
−
            list-style: circle;
+
−
            border-left-width: 3px;
+
−
            border-left-style: solid;
+
−
            border-left-color: #990000;
+
−
        }
+
  
−
        #sidebar.nav li a.nav-active {
+
a,
−
            color:black;
+
a:visited {
−
        }
+
    color: #555;
−
       
+
}
−
        /* Undo the affixed behavior in mobile views */
+
−
        #sidebar.affix {
+
−
            position: static;
+
−
        }
+
  
−
        /* Apply the affixed behavior in large views */
+
a:hover,
−
        @media screen and (min-width: 767px) {
+
a:focus {
 +
    color: #990000;
 +
}
  
−
            /* affix-top: The affix-top class should be inline to the page. */
+
/*Masthead settings*/
−
            #sidebar.affix-top {
+
.masthead { /*control height*/
−
                width:200px;
+
    height: 300px;
−
            /* 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. */
+
.masthead .caption { /*control shadowing*/
−
            #sidebar.affix-bottom {
+
    width:100%;
−
                position: absolute;
+
    height: 300px;
−
                width: 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);
 +
}
 +
 
 +
@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;
 +
}
 
          
 
          
−
         /*Fixes dissapear reappear of sidebar when scrolling on iPad */
+
.masthead .caption > div {
−
        #sidebar *:not(html) {  
+
    margin-top: 2em;
−
            -webkit-transform: translate3d(0, 0, 0);
+
}
−
        }
+
 
 +
.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;
 +
    }
 +
}
 +
 
 +
#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;
 +
    }
 +
}
 +
 
 +
#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 {
 +
    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: #990000;
 +
}
 +
 
 +
/* Undo the affixed behavior in mobile views */
 +
#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 */
 +
#sidebar *:not(html) {  
 +
    -webkit-transform: translate3d(0, 0, 0);
 +
}

Revision as of 10:37, 25 August 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 {
   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: #990000;

}

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

}