Difference between revisions of "Template:HFLS H2Z Hangzhou"

Line 31: Line 31:
 
-webkit-perspective: 1000px;
 
-webkit-perspective: 1000px;
 
perspective: 1000px;
 
perspective: 1000px;
−
}
 
−
 
−
.main.menu {
 
−
position: fixed;
 
−
background: none;
 
−
 
−
left: 0; top: 0;
 
−
height: 100%;
 
−
width: 10em;
 
−
 
−
opacity: 0;
 
−
 
−
text-align: center;
 
−
 
−
user-select: none;
 
−
-moz-user-select: none;
 
−
 
−
transition: opacity 0.3s;
 
−
}
 
−
 
−
.main.menu .items {
 
−
margin-top: 6rem;
 
−
}
 
−
 
−
.main.menu .logo {
 
−
display: inline-block;
 
−
 
−
width: 7em;
 
−
height: 7em;
 
−
line-height: 7em;
 
−
text-align: center;
 
−
 
−
margin-bottom: 2rem;
 
−
 
−
border-radius: 50%;
 
−
 
−
background: white;
 
−
}
 
−
 
−
.main.menu .logo i {
 
−
line-height: 2em;
 
−
font-size: 3.5em;
 
−
}
 
−
 
−
.main.menu .item {
 
−
display: inline-block;
 
−
 
−
width: auto;
 
−
 
−
padding: 0 0.5rem;
 
−
 
−
font-weight: bold;
 
−
font-size: 1em;
 
−
 
−
color: rgba(240, 240, 240, 1);
 
−
 
−
margin-top: 2em;
 
−
-webkit-user-select: none;
 
−
user-select: none;
 
−
 
−
cursor: pointer;
 
−
 
−
border-left: 3px solid transparent;
 
−
border-right: 3px solid transparent;
 
−
 
−
transition: border 0.2s;
 
−
}
 
−
 
−
.main.menu .item a:visited {
 
−
text-decoration: none;
 
−
}
 
−
 
−
.main.menu .item.selected,
 
−
.main.menu .item:hover {
 
−
border-left-color: #2980B9;
 
−
}
 
−
 
−
.main.menu .sub-items {
 
−
display: inline-block;
 
−
 
−
margin-top: 0.3rem;
 
−
 
−
height: 0;
 
−
overflow: hidden;
 
−
 
−
transition: height 0.3s;
 
−
}
 
−
 
−
.main.menu .item:hover .sub-items {
 
−
height: auto;
 
−
}
 
−
 
−
.main.menu .sub-item {
 
−
display: inline-block;
 
−
 
−
margin-top: 0.7rem;
 
−
 
−
font-weight: bold;
 
−
font-size: 0.9rem;
 
−
 
−
padding: 0 0.5rem;
 
−
 
−
color: rgba(240, 240, 240, 1);
 
−
 
−
border-right: 3px solid transparent;
 
−
border-left: 3px solid transparent;
 
−
 
−
transition: border 0.2s;
 
−
}
 
−
 
−
.main.menu .sub-item:hover {
 
−
}
 
−
 
−
.main.view.open-menu .main.menu {
 
−
opacity: 1;
 
−
transition: opacity 0.3s 0.3s;
 
 
}
 
}
  
Line 153: Line 37:
 
top: 0; left: 0;
 
top: 0; left: 0;
 
width: 100%; height: 100%;
 
width: 100%; height: 100%;
−
background: rgba(253, 253, 253, 1);
+
background: transparent;
  
 
overflow: auto;
 
overflow: auto;
 
box-shadow: 0 0 20px rgba(0, 0, 0, 1);
 
box-shadow: 0 0 20px rgba(0, 0, 0, 1);
  
−
transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1);
+
transition: all 0.3s cubic-bezier(0.2, 1, 0.2, 1);
−
}
+
−
 
+
−
.main.view.open-menu .main.cont-wrap {
+
−
overflow: hidden;
+
−
}
+
−
 
+
−
.main.view.open-menu .main.cont-wrap {
+
−
left: 18em;
+
 
}
 
}
  
Line 202: Line 78:
 
}
 
}
  
−
/* menu open! */
+
.bg-layer {
−
.main.open-menu .main.top-btn-set {
+
position: absolute;
 +
 +
left: 0; top: 0;
 +
height: 100%;
 +
width: 100%;
 +
 +
background: rgb(253, 253, 253);
 +
 +
transition: left 0.3s cubic-bezier(0.2, 1, 0.2, 1);
 +
}
 +
 
 +
.main.nav {
 +
z-index: 1;
 +
position: fixed;
 +
padding: 3em;
 +
width: 100%;
 +
 
color: white;
 
color: white;
−
opacity: 1;
+
 +
display: -webkit-flex;
 +
display: flex;
 +
 +
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
align-items: center;
 +
 +
font-weight: bold;
 +
white-space: nowrap;
 +
 +
text-transform: uppercase;
 +
 +
transition: padding 0.3s;
 
}
 
}
  
−
.main.open-menu .main.top-btn-set .show-on-menu.btn {
+
.main.nav .logo-name {
−
opacity: 1;
+
cursor: pointer;
−
pointer-events: auto;
+
 +
vertical-align: middle;
 +
 +
font-size: 1.5em;
 
}
 
}
  
−
.main.open-menu .menu-btn .fa:before {
+
.main.nav .link-set {
−
content: "\f00d";
+
vertical-align: middle;
 +
margin-left: 3em;
 +
 +
white-space: nowrap;
 +
 +
-webkit-box-flex: 1;
 +
-ms-flex: 1;
 +
flex: 1;
 +
 +
transition: margin 0.3s;
 
}
 
}
  
−
/*
+
.main.nav .link-set .link-item {
−
.csstransforms3d .main.view.open-menu .main.cont-wrap {
+
margin-right: 0.5em;
−
-webkit-transform: translate3d(10em, 0, -200px);
+
padding: 0.7em 1em;
−
transform: translate3d(10em, 0, -200px);
+
cursor: pointer;
 +
 +
border: 2px solid transparent;
 +
background: transparent;
 +
color: white;
 +
 +
white-space: nowrap;
 +
 +
transition: border-color 0.3s, background 0.3s 0.2s, color 0.3s 0.2s, padding 0.3s;
 +
}
  
−
border-radius: 3px;
+
.main.nav .link-set .link-item:hover,
 +
.main.nav .link-set .link-item.selected {
 +
border-color: white;
 +
background: white;
 +
color: black !important;
 
}
 
}
−
*/
+
 
−
</style>
+
.main.nav.reversed {
 +
padding: 2em;
 +
background: white;
 +
color: rgb(70, 70, 70);
 +
 +
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 +
}
 +
 
 +
.main.nav.reversed .logo-name {
 +
 
 +
}
 +
 
 +
.main.nav.reversed .link-set {
 +
margin-left: 2em;
 +
}
 +
 
 +
.main.nav.reversed .link-set .link-item {
 +
}
 +
 
 +
.main.nav.reversed .link-set .link-item:hover,
 +
.main.nav.reversed .link-set .link-item.selected {
 +
border-color: rgb(70, 70, 70);
 +
background: rgb(70, 70, 70);
 +
color: white !important;
 +
}</style>
 
<style>.fullscr {
 
<style>.fullscr {
 
height: 100vh;
 
height: 100vh;
Line 235: Line 189:
 
background-size: cover;
 
background-size: cover;
 
background-position: 50% 50%;
 
background-position: 50% 50%;
 +
}
 +
 +
.img.framed {
 +
width: 100%;
 +
 +
background: rgb(250, 250, 250);
 +
 +
border-radius: 5px;
 +
border: 1px solid rgba(0, 0, 0, 0.08);
 +
overflow: hidden;
 +
box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
 +
 +
outline: none;
 +
 +
margin: 1rem 0;
 
}
 
}
  
Line 244: Line 213:
 
padding: 3rem 0;
 
padding: 3rem 0;
 
text-align: center;
 
text-align: center;
 +
}
 +
 +
.article {
 +
display: inline-block;
 +
max-width: 50rem;
 +
text-align: left;
 
}
 
}
 
</style>
 
</style>
Line 282: Line 257:
 
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.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>
 
<script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
 +
 +
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
 +
 +
 
</head>
 
</head>
  
Line 306: Line 285:
 
// if (Modernizr.csstransforms3d) {
 
// if (Modernizr.csstransforms3d) {
 
// }
 
// }
 +
 +
$(".main.cont-wrap").scroll(function () {
 +
if ($(".main.cont-wrap").scrollTop() > 5) {
 +
$(".main.nav").addClass("reversed");
 +
} else {
 +
if (!$(".main.nav").hasClass("always"))
 +
$(".main.nav").removeClass("reversed");
 +
}
 +
});
 +
 +
window.menu = {};
 +
 +
window.menu.setItem = function (name) {
 +
$(".main.nav").addClass("always reversed");
 +
$(".main.nav .link-item.selected").removeClass("selected");
 +
$(".main.nav .link-item." + name).addClass("selected");
 +
};
  
 
var glob = window;
 
var glob = window;
Line 389: Line 385:
 
};
 
};
 
})();
 
})();
 +
 +
var bgeff = new BGEffect(".bg-layer");
 +
 +
bgeff.start();
 
});
 
});
 
</script>
 
</script>
Line 409: Line 409:
  
 
<div class="main view">
 
<div class="main view">
−
<div class="main menu">
+
<div class="main nav">
−
<div class="items">
+
<a class="logo-name">Aquamade</a>
−
<div class="logo"><i class="fa fa-bath"></i></div><br>
+
<span class="link-set">
−
<div style="text-align: center; display: inline-block; width: auto;">
+
<a class="nav link-item selected">Home</a>
−
<div class="item item-home">
+
<a class="nav link-item">Project</a>
−
<a href="/Team:HFLS_H2Z_Hangzhou">HOME</a>
+
<a class="nav link-item">Parts</a>
−
</div><br>
+
<a class="nav link-item">Modelling</a>
−
+
<a class="nav link-item team">Team</a>
−
<div class="item item-project">
+
<a class="nav link-item">Human Practices</a>
−
<a href="/Team:HFLS_H2Z_Hangzhou/project">PROJECT</a><!-- <br>
+
</span>
−
<div class="sub-items">
+
−
<div class="sub-item">OVERVIEW</div><br>
+
−
<div class="sub-item">RESULTS</div><br>
+
−
<div class="sub-item">PROFF</div>
+
−
</div> -->
+
−
</div><br>
+
−
+
−
<div class="item item-parts">
+
−
<a href="/Team:HFLS_H2Z_Hangzhou/parts">PARTS</a>
+
−
</div><br>
+
−
+
−
<div class="item item-model">
+
−
<a href="/Team:HFLS_H2Z_Hangzhou/model">MODELLING</a>
+
−
</div><br>
+
−
+
−
<div class="item item-hprac">
+
−
<a href="/Team:HFLS_H2Z_Hangzhou/hp">HUMAN PRACTICES</a>
+
−
</div><br>
+
−
 
+
−
<div class="item item-note">
+
−
<a target="_blank" href="http://note.aquamade.wiki">NOTEBOOK</a>
+
−
</div><br>
+
−
+
−
<div class="item item-team">
+
−
<a href="/Team:HFLS_H2Z_Hangzhou/team">TEAM</a>
+
−
</div><br>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="main top-btn-set">
+
−
<div class="main btn menu-btn"><i class="fa fa-bars"></i></div
+
−
><div class="main btn info-btn show-on-menu"><i class="fa fa-question-circle"></i></div>
+
 
</div>
 
</div>
  
 +
<div class="bg-layer"></div>
 +
 
<div class="main cont-wrap">
 
<div class="main cont-wrap">
  

Revision as of 01:34, 24 October 2017

Template loop detected: Template:HFLS H2Z Hangzhou<!DOCTYPE html>

Aquamade Home Achievement
Parts Collaborations
Project
Overview Background Design Enzyme Genetic Circuits Performance Chassis Selection
Modeling
Models Software
Safety Team
Member Attribution
Notebook
Protocols Interlab
Human Practices
Public Outreach Integrated

Team Members

Jianan Li
Qingrui Sun
Yiming Rong
Jiayue Guo
Zhiyuan Lu
Meiqi Yuan
Zhengyao Lin
Caiyi Feng
Shuyun Zhang
Tenghao Huang
Yining Huang
Yanyue Zhu

Sponsors

<!DOCTYPE html>
Aquamade Home Project Parts Modelling Team Human Practices