Difference between revisions of "Template:UNSW Australia/Basics"

 
(48 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
  
<div class="top" onclick="scrollTop()">
+
<div class="top">
 
   <img width="60px" height="60px" src="https://static.igem.org/mediawiki/2018/6/66/T--UNSW_Australia--Top.png">
 
   <img width="60px" height="60px" src="https://static.igem.org/mediawiki/2018/6/66/T--UNSW_Australia--Top.png">
 
</div>
 
</div>
  
<script>
+
<style>
 +
.to-load h2 {
 +
  font-family: 'Open Sans', sans-serif;
 +
  color: #212121;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
  font-size: 1.8rem;
 +
  letter-spacing: -1px;
 +
  line-height: 1;
 +
  text-shadow: #EDEDED 3px 2px 0;
 +
  position: relative;
 +
}
  
// When the user clicks on the button, scroll to the top of the document
+
.mjx-box {
function scrollTop() {
+
  padding: 20px 0;
    document.body.scrollTop = 0; // For Safari
+
}
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+
 
 +
.MJXc-display {
 +
  font-size: 160%;
 +
}
 +
 
 +
.vertical-align {
 +
  postion: relative;
 +
  top: 50%;
 +
  transform: translateY(-50%);
 +
}
 +
 
 +
.vertical-align-margin {
 +
  margin: auto 5px;
 +
}
 +
 
 +
 
 +
.shadow-text {
 +
  font-family: 'Open Sans', sans-serif;
 +
  color: #212121;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
  letter-spacing: -3px;
 +
  line-height: 1;
 +
  text-shadow: #EDEDED 3px 2px 0;
 +
  position: relative;
 +
}
 +
 
 +
#references h2 {
 +
  border-top: 1px solid #dbdbdb;
 +
}
 +
 
 +
h2 {
 +
  margin-top: 30px;
 +
}
 +
 
 +
h3 {
 +
  margin-top: 20px;
 +
font-family: 'Open Sans', sans-serif;
 +
}
 +
 
 +
.box h2, .box h3 {
 +
  margin-top: 5px !important;
 +
font-family: 'Open Sans', sans-serif;
 +
}
 +
 
 +
.second-li {
 +
  font-size: 80%;
 +
  line-height: 1.4rem;
 +
}
 +
 
 +
#content ul, #content ol {
 +
  font-size: 120%;
 +
  margin-bottom: 20px !important;
 
}
 
}
</script>
 
  
<style>
 
 
.top {
 
.top {
 
   position: fixed;
 
   position: fixed;
Line 31: Line 92:
 
.pointer {
 
.pointer {
 
   cursor: pointer;
 
   cursor: pointer;
 +
}
 +
 +
.click {
 +
  display: flex;
 +
  justify-content: center;
 +
  margin: 0;
 +
  position: relative;
 +
  top: -30px;
 
}
 
}
  
Line 37: Line 106:
 
height: 120px;
 
height: 120px;
 
border-radius: 100px;
 
border-radius: 100px;
background-color: grey;
 
 
margin: 20px;
 
margin: 20px;
 
color: #dbdbdb;
 
color: #dbdbdb;
Line 53: Line 121:
 
color: black;
 
color: black;
 
opacity: 1;
 
opacity: 1;
 +
}
 +
 +
.no-margin {
 +
  margin-top: 0px;
 
}
 
}
  
Line 66: Line 138:
  
 
.box {
 
.box {
border: 1px solid #F0F0F0;
 
 
margin: 50px 10px;
 
margin: 50px 10px;
 
padding: 5px 20px;
 
padding: 5px 20px;
Line 81: Line 152:
 
background-size: cover;
 
background-size: cover;
 
background-position: center;
 
background-position: center;
background-color: #dbdbdb;
 
 
}
 
}
  
 
.image-box {
 
.image-box {
 +
  margin-top: 20px;
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
Line 90: Line 161:
  
 
.image-box img {
 
.image-box img {
  margin: 5px 5%;
 
  width: 90%;
 
 
   object-fit: scale-down;
 
   object-fit: scale-down;
 
}
 
}
Line 97: Line 166:
 
.figure-legend {
 
.figure-legend {
 
   text-align: center !important;
 
   text-align: center !important;
   font-size: 0.9 rem !important;
+
   font-size: 0.9rem !important;
 
   font-family: 'Open Sans' !important;
 
   font-family: 'Open Sans' !important;
 +
  margin-bottom: 40px !important;
 +
}
 +
 +
.table-legend {
 +
  text-align: center !important;
 +
  font-size: 0.9rem !important;
 +
  font-family: 'Open Sans' !important;
 +
  margin-top: 40px !important;
 
}
 
}
  
 
table {
 
table {
 
   font-size: 0.9rem;
 
   font-size: 0.9rem;
 +
}
 +
 +
.box h2, .box h3 {
 +
  padding-top: 5px !important;
 
}
 
}
  
Line 109: Line 190:
 
}
 
}
  
 +
li ol li {
 +
  font-size: 80%;
 +
}
 
</style>
 
</style>
 +
 +
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
 +
 +
<script>
 +
jQuery(document).ready(function() {
 +
var offset = 250;
 +
var duration = 300;
 +
jQuery(window).scroll(function() {
 +
if (jQuery(this).scrollTop() > offset) {
 +
jQuery(‘.top’).fadeIn(1 sec);
 +
} else {
 +
jQuery(‘.top’).fadeOut(1 sec);
 +
}
 +
});
 +
 +
jQuery(‘.top’).click(function(event) {
 +
event.preventDefault();
 +
jQuery(‘html, body’).animate({scrollTop: 0}, 1 sec);
 +
return false;
 +
})
 +
});
 +
</script>
 +
 
</html>
 
</html>

Latest revision as of 23:37, 17 October 2018