Matt Gerrard (Talk | contribs) |
Matt Gerrard (Talk | contribs) |
||
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; | ||
− | + | 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; | ||
− | |||
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-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- | + | 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> | ||
− | < | + | <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"> | + | <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