Difference between revisions of "Team:Stockholm/navigation"

(Created page with "<!-- Container classes --> .container-fluid { height: auto; max-width: 1100px; min-width: 700px; position: relative; top: 100px; } <!-- Typography --> h1 { font-family: 'Nunit...")
 
 
(121 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<!-- Container classes -->
+
<html>
 +
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,700,500' rel='stylesheet' type='text/css'>
  
−
.container-fluid {
+
<body class="homepage">
−
height: auto;
+
<div id="page-wrapper">
−
max-width: 1100px;
+
−
min-width: 700px;
+
−
position: relative;
+
−
top: 100px;
+
−
}
+
  
−
<!-- Typography -->
+
<!-- Header -->
 +
<center><div id="header-wrapper">
 +
<div id="header" class="container">
 +
 +
<!-- Nav -->
 +
<nav id="nav">
 +
<div class="title noselect">iGEM STOCKHOLM</div>
 +
<ul>
 +
<li><a class="icon-home" href="https://2015.igem.org/Team:Stockholm"><span>Home</span></a></li>
 +
<li><a class="icon-users" href="https://2015.igem.org/Team:Stockholm/Team"><span>Team</span></a></li>
 +
<li><a class="icon-lab" href="https://2015.igem.org/Team:Stockholm/Description"><span>Project</span></a></li>
 +
<li><a class="icon-clipboard" href="https://2015.igem.org/Team:Stockholm/Results"><span>Results</span></a></li>
 +
<li><a class="icon-bubbles2" href="https://2015.igem.org/Team:Stockholm/Practices"><span>Practices</span></a></li>
 +
<li><a class="icon-earth" href="https://2015.igem.org/Team:Stockholm/Collaborations"><span>Collaborations</span></a></li>
 +
<li><a class="icon-gift" href="https://2015.igem.org/Team:Stockholm/Attributions"><span>Attributions</span></a></li>
 +
</ul>
 +
</nav>
 +
</div>
 +
 +
 +
</div>
 +
</div></center>
  
−
h1 {
+
<style type="text/css">
−
font-family: 'Nunito', sans-serif;
+
−
font-weight: bold;
+
−
font-size: 1.875em;
+
−
text-align: left;
+
−
border-bottom: none;
+
−
}
+
  
−
p {
+
#contentSub, #footer-box, #catlinks, #search-controls,
−
font-family: 'Nunito', sans-serif;  
+
#p-logo, .printfooter, .firstHeading, .visualClear {
−
font-size: 0.875em;
+
display: none;
−
text-align: left;
+
}
−
}
+
 
 +
.noselect {
 +
-webkit-touch-callout: none;
 +
-webkit-user-select: none;
 +
-khtml-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
}
 +
 
 +
.title {
 +
font-family: Roboto, sans-serif;
 +
font-weight: 900;
 +
font-size: 4em;
 +
text-align: center;
 +
border-bottom: none;
 +
color: #DD9F3B;
 +
margin-bottom: 0.3em;
 +
padding-top: 1em;
 +
}
 +
 
 +
 
 +
body {
 +
 +
background-color: #fafafb;
 +
}
 +
 
 +
#globalWrapper, #content {
 +
max-width: 750px;
 +
min-width: 750px;
 +
width: 100%;
 +
height: auto;
 +
border: 0px;
 +
background-color: #fafafb;
 +
margin: auto;
 +
font-size: 135%;
 +
-webkit-box-shadow: 3px 3px 5px 6px #414141;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 +
-moz-box-shadow: 3px 3px 5px 6px #414141;  /* Firefox 3.5 - 3.6 */
 +
box-shadow: 3px 3px 5px 6px #414141;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 +
}
 +
 
 +
@font-face {
 +
font-family: 'icomoon';
 +
src:url('https://static.igem.org/mediawiki/2015/c/c1/Sthlm_Icomoon2.eot');
 +
src:url('https://static.igem.org/mediawiki/2015/c/c1/Sthlm_Icomoon2.eot') format('embedded-opentype'),
 +
url('https://static.igem.org/mediawiki/2015/2/2f/Sthlm_Icomoon2.ttf') format('truetype'),
 +
url('https://static.igem.org/mediawiki/2015/d/d6/Sthlm_Icomoon2.woff') format('woff');
 +
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
 
 +
[class^="icon-"], [class*=" icon-"] {
 +
font-family: 'icomoon';
 +
speak: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
line-height: 1;
 +
 
 +
/* Better Font Rendering =========== */
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
}
 +
 
 +
.icon-home:before {
 +
content: "\e600";
 +
}
 +
.icon-bubbles2:before {
 +
content: "\e601";
 +
}
 +
.icon-users:before {
 +
content: "\e602";
 +
}
 +
.icon-gift:before {
 +
content: "\e603";
 +
}
 +
.icon-lab:before {
 +
content: "\e604";
 +
}
 +
.icon-clipboard:before {
 +
content: "\e605";
 +
}
 +
.icon-earth:before {
 +
    content: "\e606";
 +
}
 +
 
 +
#nav {
 +
position: absolute;
 +
left: 0;
 +
width: 100%;
 +
min-width: 750px;
 +
margin: auto;
 +
cursor: normal;
 +
}
 +
 
 +
#nav > ul > li > a {
 +
border: 0;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
color: #777;
 +
outline: 0;
 +
}
 +
 
 +
#nav > ul > li > a:before {
 +
display: inline-block;
 +
background: #878787;
 +
color: #e4e4e4;
 +
width: 1.65em;
 +
height: 1.65em;
 +
border-radius: 1.65em;
 +
line-height: 1.65em;
 +
text-align: center;
 +
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
 +
margin-right: 0.75em;
 +
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
-o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
-ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
}
 +
 
 +
#nav > ul > li > a > span {
 +
-moz-transition: color 0.25s ease-in-out;
 +
-webkit-transition: color 0.25s ease-in-out;
 +
-o-transition: color 0.25s ease-in-out;
 +
-ms-transition: color 0.25s ease-in-out;
 +
transition: color 0.25s ease-in-out;
 +
}
 +
 
 +
#nav > ul > li.active > a:before, #nav > ul > li:hover > a:before {
 +
background: #DD9F3B;
 +
color: #fff;
 +
}
 +
 
 +
#nav > ul > li.active > a > span, #nav > ul > li:hover > a > span {
 +
color: #DD9F3B;
 +
}
 +
 
 +
#nav {
 +
margin: auto;
 +
padding-top: 0px;
 +
position: absolute;
 +
}
 +
 
 +
#nav > ul > li {
 +
display: inline-block;
 +
padding-right: 2em;
 +
padding-top: 1em;
 +
}
 +
 
 +
#nav > ul > li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
#nav > ul > li > a {
 +
display: block;
 +
}
 +
 
 +
#nav > ul > li > a > span {
 +
font-size: 0.85em;
 +
letter-spacing: 3px;
 +
}
 +
 
 +
#nav > ul > li > ul {
 +
display: none;
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
</body>
 +
</html>

Latest revision as of 01:19, 17 September 2015