Difference between revisions of "Template:HKJS S/css/TeamPage"

 
Line 15: Line 15:
 
     }
 
     }
 
.main_photo{
 
.main_photo{
background-image: url("https://static.igem.org/mediawiki/2018/a/a9/T--HKJS_S--TeamGroupPhoto.png");
+
background-image: url("https://static.igem.org/mediawiki/2018/4/44/T--HKJS_S--Team_logo.png");
 
background-repeat:no-repeat;
 
background-repeat:no-repeat;
 
         height: 100vh;
 
         height: 100vh;

Latest revision as of 03:53, 18 October 2018

.extra_space{

display:none;

} body, html {

   height: 100%;
   margin: 0px;

}

div.thumbinner {

       border: 1px solid #cccccc;
       padding: 0px ;
       background-color: transparent;
       text-align: center;
       overflow: hidden
   }

.main_photo{ background-image: url("T--HKJS_S--Team_logo.png"); background-repeat:no-repeat;

       height: 100vh;
       width: 80%;
      margin-left: 15%;

background-position: center; background-size: contain;

       text-align: center;


} /*body{ background-image: url("T--HKJS_S--black.png"); background-repeat:no-repeat; height: 100vh;

       width: 100%;

background-position: center; background-size: cover;

       text-align: center;


}*/

  1. div_body{
       width: 100%;
        margin-left: 0px;
       margin-right: 0px;
       height:100vh;
       position: relative;
       color: transparent;

}

  1. content , #bodyContent, .igem_2018_team_content, .igem_2018_column_wrapper, #mw-content-text{
     height:100%
     background: none;
     background-color: transparent;
     width: 100%;
     margin: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     padding: 0px 0px 0px 0px;

} .top{ position: relative; top: 10%; width: 60%; margin: auto; } .bottom{ position: relative; top: 85vh; width: 50%; margin: auto; } .whole{ width:80%; padding: 5px; margin-left: 17%; margin-right: 2px; } .wrap {

   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, .125);
   border-radius: .25rem

} .img {

   width: 100%;
   border-top-left-radius: calc(.25rem - 1px);
   border-top-right-radius: calc(.25rem - 1px);

} .wrap > .list-group:first-child .list-group-item:first-child {

   border-top-left-radius: .25rem;
   border-top-right-radius: .25rem

}

.wrap > .list-group:last-child .list-group-item:last-child {

   border-bottom-right-radius: .25rem;
   border-bottom-left-radius: .25rem

}

.wrap_text {

   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   padding: 1.25rem

} .text:last-child {

   margin-bottom: 0

} .row {

   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;

}

.row .wrap {

   margin-bottom: 15px

}

@media (min-width:576px) {

   .row {
       -ms-flex-flow: row wrap;
       flex-flow: row wrap;
       margin-right: -15px;
       margin-left: -15px
   }
   .row .wrap {
       display: -ms-flexbox;
       display: flex;
       -ms-flex: 1 0 0%;
       flex: 1 0 0%;
       -ms-flex-direction: column;
       flex-direction: column;
       margin-right: 15px;
       margin-bottom: 0;
       margin-left: 15px
   }

} .title{ margin-left: 5%; margin-top: 20px; margin-bottom: 20px; }

.card-group {

   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column

}

.card-group > .card {

   margin-bottom: 15px

}

@media (min-width:576px) {

   .card-group {
       -ms-flex-flow: row wrap;
       flex-flow: row wrap
   }
   .card-group > .card {
       -ms-flex: 1 0 0%;
       flex: 1 0 0%;
       margin-bottom: 0
   }
   .card-group > .card + .card {
       margin-left: 0;
       border-left: 0
   }
   .card-group > .card:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0
   }
   .card-group > .card:first-child .card-header, .card-group > .card:first-child .card-img-top {
       border-top-right-radius: 0
   }
   .card-group > .card:first-child .card-footer, .card-group > .card:first-child .card-img-bottom {
       border-bottom-right-radius: 0
   }
   .card-group > .card:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0
   }
   .card-group > .card:last-child .card-header, .card-group > .card:last-child .card-img-top {
       border-top-left-radius: 0
   }
   .card-group > .card:last-child .card-footer, .card-group > .card:last-child .card-img-bottom {
       border-bottom-left-radius: 0
   }
   .card-group > .card:only-child {
       border-radius: .25rem
   }
   .card-group > .card:only-child .card-header, .card-group > .card:only-child .card-img-top {
       border-top-left-radius: .25rem;
       border-top-right-radius: .25rem
   }
   .card-group > .card:only-child .card-footer, .card-group > .card:only-child .card-img-bottom {
       border-bottom-right-radius: .25rem;
       border-bottom-left-radius: .25rem
   }
   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
       border-radius: 0
   }
   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer,
   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header,
   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top {
       border-radius: 0
   }

}

.card-columns .wrap {

   margin-bottom: .75rem

}

@media (min-width:576px) {

   .card-columns {
       -webkit-column-count: 3;
       -moz-column-count: 3;
       column-count: 3;
       -webkit-column-gap: 1.25rem;
       -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
       orphans: 1;
       widows: 1
   }
   .card-columns .wrap {
       display: inline-block;
       width: 100%
   }

}