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

Revision as of 06:32, 16 September 2015

/*****

   Background
           *****/

mw-content-text, body {

   background-image: url("");
   -webkit-font-smoothing: antialiased;

}

.content.container {

   margin-top: 24px;

}

/*****

   Header
       *****/

.navbar-siren {

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

}

/*****

   Header: navigation
                   *****/

.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: 18px;
   box-shadow: 0 4px 0 #eb9745;

}

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

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

}

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

   box-shadow: 0 4px 0 #D3853D;

}

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

   text-align: center;
   transition: color 0.25s;
   color: #000;

}

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

   color: white;

}

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

   background-color: transparent;
   color: white;

}

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

   margin: 0 auto 6px auto;
   display: block;
   width: 36px;
   height: 36px;

}

.navbar-siren .navbar-nav > li svg * {

   transition: all 0.25s;

}

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

   stroke: #fff;
   fill: #D3853D;

}

.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);
   transition: visibility 0s, opacity 0.25s;
   display: block;
   opacity: 0;
   visibility: hidden;

}

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

   opacity: 1;
   visibility: visible;

}

.navbar-siren .navbar-nav li.open a.dropdown-toggle {

   background: transparent;

}

.navbar-siren .navbar-nav li a.dropdown-toggle {

   background: transparent;

}

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

   font-family: "Raleway Thin", sans-serif;
   font-size: 18px;
   padding: 16px;
   color: #fff;

}

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

   background-color: #eb9745;

}

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

   background-color: #ffa44c;

}

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

}

/*****

   Header: logo
             *****/

.navbar-siren .navbar-header {

   display: inline-block;

}

.navbar-siren .navbar-logo {

   height: auto;

}

.navbar-siren .navbar-logo img {

   width: 240px;

}

/*****

   Article
        *****/

.content > article {

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

}

/*****

   Article: reference
                   *****/

.reference {

   margin: 48px 0 24px 0;

}

.reference:before {

   color: #278A75;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-size: 24px;
   content: "Reference";

}

globalWrapper .reference > ol, .reference > ol {

   margin: 0;
   padding: 0;
   list-style-type: none;
   counter-reset: counter;

}

.reference > ol li {

   font-family: 'Computer Modern Serif', serif;
   margin: 6px 0;

}

.reference > ol li::before {

   margin-right: 4px;
   letter-spacing: 2px;
   display: inline-block;
   font-family: 'Computer Modern Serif', serif;
   content: '[' counter(counter) ']';
   counter-increment: counter;

}

/*****

   Article: header
                *****/

article > header.page-header {

   text-align: center;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-style: italic;
   letter-spacing: -1px;
   border: none;

}

article > header.page-header::before {

   content: "";
   display: block;
   border-radius: 24px;
   position: relative;
   width: 0;
   padding-left: 48px;
   margin: auto;
   height: 48px;
   background-color: #eee;

}

article > header.page-header h1 {

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

}

article > header h1 > small {

   display: block;
   margin: 12px 0;
   font-size: 24px;
   letter-spacing: 1px;

}

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

   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: 500;
   color: #a5682f;

}

article h2 {

   font-size: 24px;
   border-bottom: 1px solid #eee;
   cursor: pointer;

}

article h3 {

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

}

/*****

   Article: figure
                *****/

article figure {

   padding: 16px 0;

}

article figure img {

   max-width: 100%;

}

article figure figcaption {

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

}

/*****

   Article: paragraph
                   *****/

article p, article blockquote {

   font-family: 'Computer Modern Serif', serif;
   font-size: 14px;

}

/*****

   Article: link
              *****/

article a {

   color: #278A75;

}

article a:hover {

   color: #D3853D;
   text-decoration: none;

}

/*****

   Team: people
             *****/

.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: 16px;
   font-size: 18px;
   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: 16px;
   font-size: 18px;
   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: 16px;
   font-size: 18px;
   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;

}

/*****

   Article: video
               *****/

article video {

   width: 480px;
   height: 270px;
   background-color: #000;
   background-size: 100% 100%;
   display : block;
   margin: 25px auto;

}

/*****

   Home: wrapper
              *****/

.wrapper {

   position: relative;

}

.wrapper img {

   width: 100%;

}

.wrapper .wrapper-text {

   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   padding: 10% 20% 20% 20%;
   color: white;

}

.wrapper .wrapper-text h1 {

   text-align: center;
   font-size: 72px;
   color: rgba(255, 255, 255, .75);
   font-family: 'Computer Modern Bright Semibold', sans-serif;

}

.wrapper .wrapper-text p {

   padding: 24px 48px;
   font-size: 24px;
   line-height: 32px;
   font-family: "Raleway Thin", sans-serif;
   font-weight: 700;
   color: rgba(255, 255, 255, .9);
   background-color: rgba(41, 30, 21, .15);
   box-shadow: 0 0 24px rgba(0, 0, 0, .5);
   border: 1px solid rgba(180, 180, 180, .5);
   transition: all 0.6s ease-in-out;
   border-radius: 1px;

}

.wrapper .wrapper-text p:hover {

   background-color: rgba(255, 255, 255, .15);
   color: #fff;
   border: 1px solid transparent;
   box-shadow: 0 0 24px rgba(0, 0, 0, .5);

}

/*****

   Responsive: iPad
              *****/

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

   .container {
       width: 100%;
       margin: 0;
       padding: 0;
   }

   .content.container {
       margin: 0;
   }

   .navbar-siren {
       box-shadow: none;
       border-bottom: 4px solid black;
   }

   .navbar-siren .container {
       padding: 0;
       margin: 0 0 0 -15px;
   }

   .navbar-siren .navbar-header {
       text-align: center;
   }

   .navbar-siren .navbar-nav > li {
       box-shadow: none;
   }

   .navbar-siren .navbar-nav > li {
       font-size: 15px;
   }

   .navbar-siren .navbar-nav > li.active {
       box-shadow: none;
   }

   .navbar-siren .navbar-nav > li svg {
       margin: 8px auto 4px auto;
       width: 32px;
       height: 32px;
   }

   article.col-md-12 {
       margin: 0;
       box-shadow: none;
       width: 100%;
   }

   .wrapper .wrapper-text {
       padding: 10% 15%;
   }

   .wrapper .wrapper-text h1 {
       font-size: 36px;
   }

   .wrapper .wrapper-text p {
       font-size: 18px;
       line-height: 24px;
       padding: 12px 24px;
   }

   article p {
       font-size: 18px;
   }

   article h2 {
       font-size: 48px;
   }

   article h2 {
       font-size: 36px;
   }

}

@media screen and (min-width: 640px) and (max-width: 1024px) {

   .navbar-siren .navbar-nav > li {
       vertical-align: top;
   }

   .caret {
       font-size: 6px;
   }

}

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

   .navbar-siren .navbar-nav > li {
       height: 50px;
       font-size: 14px;
   }

   .navbar-siren .navbar-nav > li svg {
       display: none;
   }

   .navbar-siren .navbar-nav > li a:first-child{
       padding-left: 15px;
   }

   .navbar-siren .navbar-nav > li a{
       margin-top: 10px;
       padding: 10px 2px;
   }

   .navbar-siren {
       height: auto;
       border-bottom: 1px solid black;
   }

   .caret {
       display: none;
   }

}