Difference between revisions of "Template:BNU-CHINA/CSS/main"

Line 2: Line 2:
 
     background-color: rgb(248, 250, 238);
 
     background-color: rgb(248, 250, 238);
 
     background-image: url("https://static.igem.org/mediawiki/2015/9/98/Bg.jpg");
 
     background-image: url("https://static.igem.org/mediawiki/2015/9/98/Bg.jpg");
 +
}
 +
 +
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
 +
 +
body {
 +
    background-color: rgb(248, 250, 238);
 +
    background-image: url("../img/bg.jpg");
 +
    -webkit-font-smoothing: antialiased;
 
}
 
}
  
Line 125: Line 133:
 
article h2, article h3, article h4, article h5 {
 
article h2, article h3, article h4, article h5 {
 
     font-family: 'Computer Modern Bright Semibold', sans-serif;
 
     font-family: 'Computer Modern Bright Semibold', sans-serif;
 +
    font-weight: bolder;
 
     color: #278A75;
 
     color: #278A75;
 +
}
 +
 +
 +
article h2 {
 +
    font-size: 28px;
 +
    border-bottom: 1px solid #eee;
 +
    cursor: pointer;
 +
    padding: 8px 0;
 +
}
 +
 +
article h2::before {
 +
    content: "❖";
 +
    position: relative;
 +
    padding: 2px;
 +
    display: inline-block;
 +
    margin-right: 8px;
 +
    user-select: none;
 +
    transition: all 0.5s linear;
 +
}
 +
 +
article h2:hover::before {
 +
    transform:rotate(405deg);
 +
}
 +
 +
article h3 {
 +
    font-size: 18px;
 +
    word-spacing: -2px;
 
}
 
}
  
Line 146: Line 182:
 
     font-family: 'Computer Modern Serif', serif;
 
     font-family: 'Computer Modern Serif', serif;
 
     font-size: 1em;
 
     font-size: 1em;
−
}
 
−
 
−
footer {
 
−
    margin: 15px 0 0 0;
 
−
    padding: 1em 0;
 
−
    text-shadow: -1px -1px 0 #fff;
 
−
 
−
}
 
−
 
−
footer img {
 
−
    height: 5em;
 
 
}
 
}
  
Line 168: Line 193:
 
}
 
}
  
−
article > header {
+
article > header.page-header {
 
     font-family: 'Dancing Script', cursive;
 
     font-family: 'Dancing Script', cursive;
 
     /*font-family: "Georgia", serif;*/
 
     /*font-family: "Georgia", serif;*/
 +
    border: none;
 
}
 
}
  
−
.fixed {
+
article > header.page-header h1 {
−
     position: fixed;
+
     font-weight: bold;
 +
    font-size: 48px;
 
}
 
}
  
−
.bs-docs-sidebar ul {
+
article > header h1>small {
−
     background-color: rgba(248, 250, 238, .75);
+
     font-size: 24px;
−
    border-bottom: 4px solid rgb(224, 226, 214);
+
−
    box-shadow: 0 0 6px rgba(120, 120, 120, .5);
+
−
    border-radius: 6px;
+
 
}
 
}
  
−
/* sidebar */
+
.people {
−
.bs-docs-sidebar {
+
     background-color: #fff;
−
     padding-left: 20px;
+
−
    margin-top: 20px;
+
−
    margin-bottom: 20px;
+
 
}
 
}
  
−
/* all links */
+
.people .people-figure {
−
.bs-docs-sidebar .nav > li > a {
+
    border: 3px solid #fff;
−
     color: #999;
+
    cursor: pointer;
 +
    padding: 33.33% 0 0 0;
 +
    margin: 0;
 +
    position: relative;
 +
    overflow: hidden;
 +
}
 +
 
 +
.people .people-figure>p {
 +
     padding: 1em;
 +
    font-size: 1.2em;
 
     font-family: 'Computer Modern Bright Semibold', sans-serif;
 
     font-family: 'Computer Modern Bright Semibold', sans-serif;
−
     /*border-left: 2px solid transparent;*/
+
     font-weight: bold;
−
     padding: 4px 20px;
+
    background-color: transparent;
 +
    position: absolute;
 +
    height: 100%;
 +
    color: transparent;
 +
    top: 0;
 +
    z-index: 101;
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0s;
 +
}
 +
 
 +
.people .people-figure>p:hover {
 +
    background-color: rgba(211, 133, 61, .5);
 +
    color: #fff;
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0.75s;
 +
}
 +
 
 +
.people .people-avatar {
 +
    transition: all 0.6s ease-in-out;
 +
     padding: 1em;
 
     font-size: 1.2em;
 
     font-size: 1.2em;
−
     font-weight: 400;
+
     font-family: serif;
 +
    position: absolute;
 +
    color: transparent;
 +
    top: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-size:cover;
 +
    background-repeat: no-repeat;
 +
    z-index: 100;
 
}
 
}
  
−
/* nested links */
+
.people .people-figure p:hover + .people-avatar {
−
.bs-docs-sidebar .nav .nav > li > a {
+
     background-position: center;
−
    padding-top: 1px;
+
−
    padding-bottom: 1px;
+
−
    padding-left: 30px;
+
−
     font-size: 1em;
+
 
}
 
}
  
−
/* active & hover links */
+
.people .people-figure .people-intro {
−
.bs-docs-sidebar .nav > .active > a,
+
    padding: 1em;
−
.bs-docs-sidebar .nav > li > a:hover,
+
    font-size: 1.2em;
−
.bs-docs-sidebar .nav > li > a:focus {
+
     font-family: 'Dancing Script', cursive;
−
     color: #278A75;
+
     font-weight: bold;
−
     text-decoration: none;
+
 
     background-color: transparent;
 
     background-color: transparent;
−
     /*border-left-color: #278A75;*/
+
     position: absolute;
 +
    height: 100%;
 +
    top: 0;
 +
    z-index: 101;
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0s;
 
}
 
}
  
−
/* all active links */
+
.people .people-figure .people-intro:hover {
−
.bs-docs-sidebar .nav > .active > a,
+
    background-color: rgba(211, 133, 61, .5);
−
.bs-docs-sidebar .nav > .active:hover > a,
+
    transition-property: all;
−
.bs-docs-sidebar .nav > .active:focus > a {
+
    transition-duration: 0.6s;
−
     font-weight: normal;
+
    transition-timing-function: ease-out;
 +
     transition-delay: 0.75s;
 
}
 
}
  
−
/* nested active links */
+
.people .people-figure .people-intro:hover + .people-avatar {
−
.bs-docs-sidebar .nav .nav > .active > a,
+
     background-position: center;
−
.bs-docs-sidebar .nav .nav > .active:hover > a,
+
−
.bs-docs-sidebar .nav .nav > .active:focus > a {
+
−
     font-weight: normal;
+
 
}
 
}
  
−
/* hide inactive nested list */
+
.people .people-figure .people-intro > h1 {
−
.bs-docs-sidebar .nav ul.nav {
+
     font-family: 'Dancing Script', cursive;
−
     display: none;
+
    font-weight: lighter;
 +
    color: white;
 +
    padding: 0 0 8px 0;
 +
    margin: 0;
 +
    font-size: 32px;
 
}
 
}
  
−
/* show active nested list */
+
.people .people-figure .people-intro > p {
−
.bs-docs-sidebar .nav > .active > ul.nav {
+
    font-family: 'Computer Modern Bright Semibold', sans-serif;
−
     display: block;
+
    color: transparent;
 +
    font-weight: normal;
 +
    padding: 0;
 +
    margin: 0;
 +
    font-size: 16px;
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0s;
 +
    line-height: 28px;
 +
}
 +
 
 +
.people .people-figure .people-intro:hover > p {
 +
     color: white;
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0.75s;
 
}
 
}

Revision as of 02:35, 15 September 2015

  1. mw-content-text {
   background-color: rgb(248, 250, 238);
   background-image: url("Bg.jpg");

}

@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

body { 

   background-color: rgb(248, 250, 238);
   background-image: url("../img/bg.jpg");
   -webkit-font-smoothing: antialiased;

}

.navbar-siren { 

   border: none;
   border-radius: 0;
   background-color: rgba(255, 255, 255, .95);
   box-shadow: 0 4px 0 #eb9745;

}

.navbar-siren .navbar-nav { 

   display: table-row;

}

.navbar-siren .navbar-nav > li { 

   transition: box-shadow 2s, background-color 0.25s;

   float: none;
   cursor: pointer;
   display: table-cell;
   vertical-align: middle;
   font-family: "Raleway Thin", sans-serif;
   font-size: 1.2em;
   box-shadow: 0 4px 0 #eb9745;
   /*border-bottom: 4px solid transparent;*/

}

.navbar-siren .navbar-nav > li.active { 

   box-shadow: 0 4px 0 #D3853D;
   /*border-bottom: 4px solid #eb9745;*/

}

.navbar-siren .navbar-nav > li > a { 

   transition: color 0.25s;
   color: #1e0501;

}

.navbar-siren .navbar-nav > li:hover > a { 

   color: white;

}

.navbar-siren .navbar-nav li .dropdown-menu { 

   min-width: 150%;
   text-align: left;
   padding: 0;
   border: 0;
   background-color: #D3853D;
   border-radius: 0;
   box-shadow: 1px 3px 2px rgba(120, 120, 120, .5);

}

.navbar-siren .navbar-nav li.dropdown .dropdown-menu { 

   transition: visibility 0s, opacity 0.25s;
   display: block;
   opacity: 0;
   visibility: hidden;

}

.navbar-siren .navbar-nav li.dropdown:hover .dropdown-menu { 

   opacity: 1;
   visibility: visible;

}

.navbar-siren .navbar-nav li.dropdown .dropdown-menu li > a { 

   font-family: "Raleway Thin", sans-serif;
   font-size: 1.2em;
   padding: 1em;
   color: #fff;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:hover { 

   background-color: #eb9745;

}

.navbar-siren .navbar-nav li .dropdown-menu li:hover { 

   /*box-shadow: 0 1px 6px rgba(120,120,120,.15);*/

}


.navbar-siren .navbar-nav li .dropdown-menu li > a::after { 

   content: "";
   display: block;
   width: 0;
   height: 1px;
   transition: all 0.5s ease-out;
   background-color: transparent;

}


.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after { 

   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: rgba(255,255,255,.5);

}


.navbar-siren .navbar-nav > li:hover { 

   /*border-bottom: 4px solid #D3853D;*/
   box-shadow: 0 4px 0 #D3853D;



   transition: box-shadow 0.25s, background-color 0.25s;
   background-color: #D3853D;

}

.navbar-siren .navbar-nav > li > a:hover { 

   background-color: transparent;
   color: white;

}

.content > article { 

   opacity: .95;
   padding: 2em 4em;
   min-width: 640px;
   background-color: #fff;
   box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);

}

article h2, article h3, article h4, article h5 { 

   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: bolder;
   color: #278A75;

}


article h2 { 

   font-size: 28px;
   border-bottom: 1px solid #eee;
   cursor: pointer;
   padding: 8px 0;

}

article h2::before { 

   content: "❖";
   position: relative;
   padding: 2px;
   display: inline-block;
   margin-right: 8px;
   user-select: none;
   transition: all 0.5s linear;

}

article h2:hover::before { 

   transform:rotate(405deg);

}

article h3 { 

   font-size: 18px;
   word-spacing: -2px;

}

article figure { 

   padding: 1em 0;

}

article figure img { 

   max-width: 100%;

}

article figure figcaption { 

   text-align: center;
   font-family: 'Computer Modern Serif', serif;
   color: #278A75;
   padding: 0.5em;

}

article p, article blockquote { 

   font-family: 'Computer Modern Serif', serif;
   font-size: 1em;

}

article a { 

   color: #278A75;

}

article a:hover { 

   color: #D3853D;
   text-decoration: none;

}

article > header.page-header { 

   font-family: 'Dancing Script', cursive;
   /*font-family: "Georgia", serif;*/
   border: none;

}

article > header.page-header h1 { 

   font-weight: bold;
   font-size: 48px;

}

article > header h1>small { 

   font-size: 24px;

}

.people { 

   background-color: #fff;

}

.people .people-figure { 

   border: 3px solid #fff;
   cursor: pointer;
   padding: 33.33% 0 0 0;
   margin: 0;
   position: relative;
   overflow: hidden;

}

.people .people-figure>p { 

   padding: 1em;
   font-size: 1.2em;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: bold;
   background-color: transparent;
   position: absolute;
   height: 100%;
   color: transparent;
   top: 0;
   z-index: 101;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure>p:hover { 

   background-color: rgba(211, 133, 61, .5);
   color: #fff;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.people .people-avatar { 

   transition: all 0.6s ease-in-out;
   padding: 1em;
   font-size: 1.2em;
   font-family: serif;
   position: absolute;
   color: transparent;
   top: 0;
   width: 100%;
   height: 100%;
   background-size:cover;
   background-repeat: no-repeat;
   z-index: 100;

}

.people .people-figure p:hover + .people-avatar { 

   background-position: center;

}

.people .people-figure .people-intro { 

   padding: 1em;
   font-size: 1.2em;
   font-family: 'Dancing Script', cursive;
   font-weight: bold;
   background-color: transparent;
   position: absolute;
   height: 100%;
   top: 0;
   z-index: 101;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure .people-intro:hover { 

   background-color: rgba(211, 133, 61, .5);
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.people .people-figure .people-intro:hover + .people-avatar { 

   background-position: center;

}

.people .people-figure .people-intro > h1 { 

   font-family: 'Dancing Script', cursive;
   font-weight: lighter;
   color: white;
   padding: 0 0 8px 0;
   margin: 0;
   font-size: 32px;

}

.people .people-figure .people-intro > p { 

   font-family: 'Computer Modern Bright Semibold', sans-serif;
   color: transparent;
   font-weight: normal;
   padding: 0;
   margin: 0;
   font-size: 16px;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;
   line-height: 28px;

}

.people .people-figure .people-intro:hover > p { 

   color: white;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}