Team:Concordia

From 2013.igem.org

(Difference between revisions)
(Creating basic page)
Line 1: Line 1:
-
[[Image:Concordia_team.png|Your team picture]]<br/><br/>
+
<html>
-
<font size=9 face="Tahoma"><center>'''Concordia's design team'''</center></font><br/><br/>
+
  <head>
-
<font size=2 face="Verdana"><center>Check out the [[Team:Concordia/Project|Project]] page for more info on our project.</center></font>
+
    <style>
-
<!--- The Mission, Experiments --->
+
      /* Reset MediaWiki CSS */
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;}
 +
#top-section {
 +
    border: none;
 +
    height: 0px;}
 +
#content {
 +
    border: none;}
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
/* Radial menu CSS */
-
!align="center"|[[Team:Concordia|Home]]
+
* { margin: 0; padding: 0; }
-
!align="center"|[[Team:Concordia/Team|Team]]
+
body {
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Concordia Official Team Profile]
+
overflow: hidden;
-
!align="center"|[[Team:Concordia/Project|Project]]
+
background: url('../images/geometry.png');
-
!align="center"|[[Team:Concordia/Parts|Parts Submitted to the Registry]]
+
}
-
!align="center"|[[Team:Concordia/Modeling|Modeling]]
+
/* generic styles for button & circular menu */
-
!align="center"|[[Team:Concordia/Notebook|Notebook]]
+
.ctrl {
-
!align="center"|[[Team:Concordia/Safety|Safety]]
+
position: absolute;
-
!align="center"|[[Team:Concordia/Attributions|Attributions]]
+
top: 30%; left: 30%;
-
|}
+
font: 1.5em/1.13 Verdana, sans-serif;
-
<br/><br/>
+
transition: .5s;
-
[[Image:Concordia_logo.png|center]]
+
}
-
<br/><br/>
+
/* generic link styles */
 +
a.ctrl, .ctrl a {
 +
display: block;
 +
opacity: .56;
 +
background: #c9c9c9;
 +
color: #7a8092;
 +
background-image: url('../images/logo_b_w.png');
 +
background-size: 12.5em;
 +
background-repeat: no-repeat;
 +
text-align: center;
 +
vertical-align: center;
 +
text-decoration: none;
 +
text-shadow: 0 -1px dimgrey;
 +
}
 +
a.ctrl:hover, a.ctrl:focus {
 +
background-image: url('../images/logo.png');
 +
opacity: 1;
 +
}
 +
 
 +
.ctrl a:hover, .ctrl a:focus {
 +
        opacity: 1;
 +
}
 +
a.ctrl:focus, .ctrl a:focus { outline: none; }
 +
.button {
 +
z-index: 2;
 +
margin: -.625em;
 +
width: 12.5em; height: 12.5em;
 +
border-radius: 50%;
 +
box-shadow: 0 0 3px 1px white;
 +
}
 +
/* circular menu */
 +
.tip {
 +
z-index: 1;
 +
/**outline: dotted 1px white;/**/
 +
margin: -5em;
 +
margin-left: -9em;
 +
left: 37%;
 +
top: 30%;
 +
width: 25em; height: 25em;
 +
transform: scale(.001);
 +
-ms-transform: scale(.001);
 +
-webkit-transform: scale(.001);
 +
list-style: none;
 +
opacity: 0;
 +
}
 +
 
 +
/* the ends of the menu */
 +
/*
 +
.tip:before, .tip:after {
 +
position: absolute;
 +
top: 34.3%;
 +
width: .5em; height: 14%;
 +
opacity: .56;
 +
background: #c9c9c9;
 +
content: '';
 +
}
 +
.tip:before {
 +
left: 5.4%;
 +
border-radius: .25em 0 0 .25em;
 +
box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey,
 +
inset 0 1px 1px white, inset 0 -1px 1px white;
 +
transform: rotate(-75deg);
 +
}
 +
.tip:after {
 +
right: 5.4%;
 +
border-radius: 0 .25em .25em 0;
 +
box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey,
 +
inset 0 1px 1px white, inset 0 -1px 1px white;
 +
transform: rotate(75deg);
 +
}
 +
*/
 +
/* make the menu appear on click */
 +
.button:focus + .tip {
 +
        transform: scale(1);
 +
        -ms-transform: scale(1);
 +
        -webkit-transform: scale(1);
 +
        opacity: 1;
 +
}
 +
/* slices of the circular menu */
 +
.slice {
 +
overflow: hidden;
 +
position: absolute;
 +
/**outline: dotted 1px yellow;/**/
 +
width: 50%; height: 50%;
 +
transform-origin: 100% 100%;
 +
-ms-transform-origin: 100% 100%;
 +
-webkit-transform-origin: 100% 100%;
 +
}
 +
/*
 +
* rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A°
 +
* where A is the angle of 1 slice (30° in this case)
 +
* k is the number of the slice (in {1,2,3,4,5} here)
 +
* and n is the number of slices (5 in this case)
 +
* formula works for odd number of slices (n odd)
 +
* for even number of slices (n even) the rotation angle is (k - n/2)*A°
 +
*
 +
* after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30°
 +
*/
 +
.slice:first-child {
 +
    transform: rotate(-45deg) skewY(60deg);
 +
    -ms-transform: rotate(-45deg) skewY(60deg);
 +
    -webkit-transform: rotate(-45deg) skewY(60deg);
 +
}
 +
.slice:nth-child(2) {
 +
    transform: rotate(-15deg) skewY(60deg);
 +
    -ms-transform: rotate(-15deg) skewY(60deg);
 +
    -webkit-transform: rotate(-15deg) skewY(60deg);
 +
}
 +
.slice:nth-child(3) {
 +
    transform: rotate(15deg) skewY(60deg);
 +
    -ms-transform: rotate(15deg) skewY(60deg);
 +
    -webkit-transform: rotate(15deg) skewY(60deg);
 +
}
 +
.slice:nth-child(4) {
 +
    transform: rotate(45deg) skewY(60deg);
 +
    -ms-transform: rotate(45deg) skewY(60deg);
 +
    -webkit-transform: rotate(45deg) skewY(60deg);
 +
}
 +
.slice:last-child {
 +
    transform: rotate(75deg) skewY(60deg);
 +
    -ms-transform: rotate(75deg) skewY(60deg);
 +
    -webkit-transform: rotate(75deg) skewY(60deg);
 +
}
 +
/* covers for the inner part of the links so there's no hover trigger between
 +
  star button & menu links; give them a red background to see them */
 +
.slice:after {
 +
position: absolute;
 +
top: 32%; left: 32%;
 +
width: 136%; height: 136%;
 +
border-radius: 50%;
 +
/* "unskew" = skew by minus the same angle by which parent was skewed */
 +
transform: skewY(-60deg);
 +
content: '';
 +
}
 +
/* menu links */
 +
.slice a {
 +
width: 200%; height: 200%;
 +
border-radius: 50%;
 +
box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
 +
/* "unskew" & rotate by -A°/2 */
 +
transform: skewY(-60deg) rotate(-15deg);
 +
-ms-transform: skewY(-60deg) rotate(-15deg);
 +
-webkit-transform: skewY(-60deg) rotate(-15deg);
 +
background: /* lateral separators */
 +
linear-gradient(75deg,
 +
transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
 +
linear-gradient(-75deg,
 +
transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
 +
/* make sure inner part is transparent */
 +
radial-gradient(rgba(127,127,127,0) 49%,
 +
rgba(255,255,255,.7) 51%, #c9c9c9 52%);
 +
background-size: 15% 15%, 15% 15%, cover;
 +
line-height: 3;
 +
vertical
 +
}
 +
/* arrow for middle link */
 +
.slice:nth-child(3) a:after {
 +
position: absolute;
 +
top: 13%; left: 50%;
 +
margin: -.25em;
 +
width: .5em; height: .5em;
 +
box-shadow: 2px 2px 2px white;
 +
transform: rotate(45deg);
 +
-ms-transform: rotate(45deg);
 +
-webkit-transform: rotate(45deg);
 +
background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
 +
content: '';
 +
}
 +
</style>
 +
    <title>Index page</title>
 +
    <link href="../css/base.css" rel="stylesheet" type="text/css">
 +
  </head>
 +
  <body>
 +
    <a class='button ctrl' href='#' tabindex='1'></a>
 +
<ul class='tip ctrl'>
 +
<li class='slice'><a href='#'>Project</a></li>
 +
<li class='slice'><a href='#'>Team</a></li>
 +
<li class='slice'><a href='#'>HP</a></li>
 +
<li class='slice'><a href='#'>Notebook</a></li>
 +
<li class='slice'><a href='#'>Other</a></li>
 +
<!-- <li class='slice'><a href='#'>Notebook</a></li>
 +
<li class='slice'><a href='#'>Safety</a></li>-->
 +
</ul>
 +
 
 +
</body></html>

Revision as of 02:39, 26 August 2013

Index page

Retrieved from "http://2013.igem.org/Team:Concordia"