Difference between revisions of "Template:HFLS H2Z Hangzhou"

Line 1: Line 1:
 
<html>
 
<html>
 
 
<head>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Line 17: Line 16:
 
font-size: 1rem;
 
font-size: 1rem;
  
z-index: 99999;
+
font-family: Brandon;
  
 
background: rgba(24, 24, 24, 1);
 
background: rgba(24, 24, 24, 1);
Line 36: Line 35:
  
 
text-align: center;
 
text-align: center;
font-family: Brandon;
 
  
 
user-select: none;
 
user-select: none;
Line 55: Line 53:
 
line-height: 7em;
 
line-height: 7em;
 
text-align: center;
 
text-align: center;
 +
 +
margin-bottom: 1rem;
  
 
border-radius: 50%;
 
border-radius: 50%;
Line 84: Line 84:
 
cursor: pointer;
 
cursor: pointer;
  
border-right: 3px solid transparent;
 
 
border-left: 3px solid transparent;
 
border-left: 3px solid transparent;
 +
border-right: 3px solid transparent;
  
 
transition: border 0.2s;
 
transition: border 0.2s;
 
}
 
}
  
 +
.main.menu .item.selected,
 
.main.menu .item:hover {
 
.main.menu .item:hover {
border-right-color: #2980B9;
+
border-left-color: #2980B9;
 
}
 
}
  
Line 175: Line 176:
 
}
 
}
 
*/
 
*/
 +
</style>
 +
<style>.fullscr {
 +
height: 100%;
 +
width: 100%;
 +
}
 +
 +
.img {
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
background-position: 50% 50%;
 +
}
 
</style>
 
</style>
 
<style>@charset "UTF-8";
 
<style>@charset "UTF-8";
Line 189: Line 201:
 
}
 
}
 
</style>
 
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
+
<style>@charset "UTF-8";
 +
 
 +
@font-face {
 +
font-family: Veneer;
 +
src: url("https://static.igem.org/mediawiki/2017/d/d7/T--HFLS_H2Z_Hangzhou--font_veneer_regular_woff.woff") format("woff"),
 +
url("https://static.igem.org/mediawiki/2017/f/f1/T--HFLS_H2Z_Hangzhou--font_veneer_regular_ttf.ttf") format("truetype"),
 +
url("https://static.igem.org/mediawiki/2017/6/60/T--HFLS_H2Z_Hangzhou--font_veneer_regular_eot.eot") format("embedded-opentype"),
 +
url("https://static.igem.org/mediawiki/2017/b/bd/T--HFLS_H2Z_Hangzhou--font_veneer_regular_svg.svg") format("svg"),
 +
url("https://static.igem.org/mediawiki/2017/0/0e/T--HFLS_H2Z_Hangzhou--font_veneer_regular_otf.otf") format("opentype"),
 +
url("fallback.ttf") format("truetype");
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
</style>
  
 
<script>/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */
 
<script>/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */
Line 241: Line 266:
 
.on("load", vcent.update)
 
.on("load", vcent.update)
 
.on("resize", vcent.update);
 
.on("resize", vcent.update);
 +
 +
setInterval(vcent.update, 50);
 
})();
 
})();
 
</script>
 
</script>
 +
 +
<!-- porbably need to change these to static files -->
 +
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
 +
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css">
 +
<script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
 
</head>
 
</head>
  
 
<script>
 
<script>
 +
window.ADEBUG = true;
 +
 
$(document).ready(function () {
 
$(document).ready(function () {
 
// alert(Modernizr.csstransforms3d);
 
// alert(Modernizr.csstransforms3d);
Line 276: Line 310:
 
}
 
}
  
$(".main.menu-btn").click(toggleMenu);
+
$(".main.menu-btn")
 +
.click(toggleMenu)
 +
.popup({
 +
content: "Menu",
 +
position: "right center",
 +
on: "manual"
 +
}).popup("show");
 +
 
 +
setTimeout(function () {
 +
$(".main.menu-btn").popup("hide");
 +
}, 3000);
  
 
// remove some weird components
 
// remove some weird components
Line 286: Line 330:
 
setBtnColor: function (color) {
 
setBtnColor: function (color) {
 
$(".main.menu-btn").css("color", color);
 
$(".main.menu-btn").css("color", color);
 +
},
 +
 +
selectItem: function (name) {
 +
$(".main.menu .selected").removeClass("selected");
 +
$(".main.menu .item.item-" + name).addClass("selected");
 
}
 
}
 
};
 
};
 
});
 
});
 +
</script>
 +
 +
<script>
 +
/* just for debug */
 +
if (ADEBUG) {
 +
$(document).ready(function () {
 +
$.ajax({
 +
url: "sub/home.html",
 +
success: function (dat) {
 +
$(".main.cont-wrap").append(dat);
 +
}
 +
});
 +
});
 +
}
 
</script>
 
</script>
  
Line 295: Line 358:
 
<div class="items vcenter">
 
<div class="items vcenter">
 
<div class="logo"><i class="fa fa-bath"></i></div><br>
 
<div class="logo"><i class="fa fa-bath"></i></div><br>
<div class="item">HOME</div><br>
+
<div class="item item-home">HOME</div><br>
<div class="item">TEAM</div><br>
+
<div class="item item-project">PROJECT</div><br>
<div class="item">PARTS</div><br>
+
<div class="item item-parts">PARTS</div><br>
<div class="item">HUMAN PRACTICES</div>
+
<div class="item item-model">MODELLING</div><br>
 +
<div class="item item-hprac">HUMAN PRACTICES</div><br>
 +
<div class="item item-team">TEAM</div><br>
 
</div>
 
</div>
 
</div>
 
</div>
Line 306: Line 371:
 
><div class="main btn info-btn show-on-menu"><i class="fa fa-question-circle"></i></div>
 
><div class="main btn info-btn show-on-menu"><i class="fa fa-question-circle"></i></div>
 
</div>
 
</div>
 +
 
<div class="main cont-wrap">
 
<div class="main cont-wrap">
 
 
  
 
<!-- Concat with content -->
 
<!-- Concat with content -->
  
 
</html>
 
</html>

Revision as of 14:26, 16 June 2017