Difference between revisions of "Template:CIEI-BJ"

Line 12,579: Line 12,579:
 
}
 
}
 
/*# sourceMappingURL=bootstrap.css.map */
 
/*# sourceMappingURL=bootstrap.css.map */
 +
 +
  </style>
 +
  <style>
 +
  /* --------------------------------
 +
 +
Primary style
 +
 +
-------------------------------- */
 +
html * {
 +
  -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 +
}
 +
 +
*, *:after, *:before {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
}
 +
 +
body {
 +
  font-size: 100%;
 +
  font-family: "Bitter", sans-serif;
 +
  color: #f5f4ed;
 +
  background-color: #795d6b;
 +
}
 +
 +
a {
 +
  color: #e86256;
 +
  text-decoration: none;
 +
}
 +
 +
/* --------------------------------
 +
 +
Modules - reusable parts of our design
 +
 +
-------------------------------- */
 +
.cd-container {
 +
  width: 90%;
 +
  max-width: 768px;
 +
  height:3000px;
 +
  margin: 2em auto;
 +
  display:block
 +
}
 +
.cd-container::after {
 +
  /* clearfix */
 +
  content: '';
 +
  display: table;
 +
  clear: both;
 +
}
 +
 +
/* --------------------------------
 +
 +
Main components
 +
 +
-------------------------------- */
 +
header {
 +
  background: #5c4751;
 +
  height: 100px;
 +
  text-align: center;
 +
}
 +
header h1 {
 +
  font-size: 20px;
 +
  font-size: 1.25rem;
 +
  font-weight: bold;
 +
  font-family: "Open Sans", sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: bold;
 +
  padding-top: 1.6em;
 +
  margin-bottom: .2em;
 +
}
 +
header p {
 +
  font-size: 13px;
 +
  font-size: 0.8125rem;
 +
  color: #957484;
 +
}
 +
@media only screen and (min-width: 1024px) {
 +
  header {
 +
    height: 200px;
 +
  }
 +
  header h1 {
 +
    font-size: 30px;
 +
    font-size: 1.875rem;
 +
    padding-top: 2.6em;
 +
  }
 +
}
 +
 +
main p {
 +
  font-size: 14px;
 +
  font-size: 1rem;
 +
  line-height: 22px;
 +
}
 +
@media only screen and (min-width: 1024px) {
 +
  main p {
 +
    font-size: 14px;
 +
    font-size: 1rem;
 +
  }
 +
}
 +
 +
.cd-top {
 +
  display: inline-block;
 +
  height: 40px;
 +
  width: 40px;
 +
  position: fixed;
 +
  bottom: 40px;
 +
  right: 10px;
 +
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 +
  /* image replacement properties */
 +
  overflow: hidden;
 +
  text-indent: 100%;
 +
  white-space: nowrap;
 +
  background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  -webkit-transition: all 0.3s;
 +
  -moz-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
 +
.cd-top.cd-is-visible {
 +
  /* the button becomes visible */
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
.cd-top.cd-fade-out {
 +
  /* Èç¹ûÓû§¼ÌÐøÏòϹö¶¯,Õâ¸ö°´Å¥µÄ͸Ã÷¶È»á±äµÃ¸üµÍ */
 +
  opacity: .5;
 +
}
 +
.no-touch .cd-top:hover {
 +
  background-color: #e86256;
 +
  opacity: 1;
 +
}
 +
@media only screen and (min-width: 768px) {
 +
  .cd-top {
 +
    right: 20px;
 +
    bottom: 20px;
 +
  }
 +
}
 +
@media only screen and (min-width: 1024px) {
 +
  .cd-top {
 +
    height: 60px;
 +
    width: 60px;
 +
    right: 30px;
 +
    bottom: 30px;
 +
  }
 +
}
  
 
   </style>
 
   </style>
 +
  <script language="javascript">
 +
  jQuery(document).ready(function($){
 +
// browser window scroll (in pixels) after which the "back to top" link is shown
 +
var offset = 300,
 +
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
 +
offset_opacity = 1200,
 +
//duration of the top scrolling animation (in ms)
 +
scroll_top_duration = 700,
 +
//grab the "back to top" link
 +
$back_to_top = $('.cd-top');
 +
 +
//hide or show the "back to top" link
 +
$(window).scroll(function(){
 +
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
 +
if( $(this).scrollTop() > offset_opacity ) {
 +
$back_to_top.addClass('cd-fade-out');
 +
}
 +
});
 +
 +
//smooth scroll to top
 +
$back_to_top.on('click', function(event){
 +
event.preventDefault();
 +
$('body,html').animate({
 +
scrollTop: 0 ,
 +
}, scroll_top_duration
 +
);
 +
});
 +
 +
});
 +
  </script>
 
   <script language="javascript">
 
   <script language="javascript">
 
   /*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */
 
   /*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */

Revision as of 18:53, 14 October 2016

Template