Difference between revisions of "Template:BIOSINT Mexico"

Line 837: Line 837:
 
/* --Header */
 
/* --Header */
  
+
body {
 
+
padding-top: 3em;
/* Wrapper */
+
}
  
#wrapper {
+
#header {
 
display: -moz-flex;
 
display: -moz-flex;
 
display: -webkit-flex;
 
display: -webkit-flex;
 
display: -ms-flex;
 
display: -ms-flex;
 
display: flex;
 
display: flex;
-moz-flex-direction: row-reverse;
+
-moz-justify-content: space-between;
-webkit-flex-direction: row-reverse;
+
-webkit-justify-content: space-between;
-ms-flex-direction: row-reverse;
+
-ms-justify-content: space-between;
flex-direction: row-reverse;
+
justify-content: space-between;
-moz-transition: opacity 0.5s ease;
+
background-color: #444;
-webkit-transition: opacity 0.5s ease;
+
border-bottom: solid 1px rgba(160, 160, 160, 0.3);
-ms-transition: opacity 0.5s ease;
+
height: 3.5em;
transition: opacity 0.5s ease;
+
left: 0;
margin: 0 auto;
+
line-height: 3.5em;
max-width: 100%;
+
position: fixed;
opacity: 1;
+
top: 1em;
padding: 4.5em;
+
width: 100%;
width: 90em;
+
z-index: 10000;
 
}
 
}
  
body.is-menu-visible #wrapper {
+
#header a {
opacity: 0.15;
+
color: #fff;
 +
text-decoration: none;
 
}
 
}
  
@media screen and (max-width: 1680px) {
+
#header ul {
 +
list-style: none;
 +
margin: 0;
 +
padding-left: 0;
 +
}
  
#wrapper {
+
#header ul li {
padding: 4em;
+
display: inline-block;
 +
padding-left: 0;
 
}
 
}
  
 +
#header h1 {
 +
height: inherit;
 +
line-height: inherit;
 +
padding: 0 0 0 1.5em;
 +
white-space: nowrap;
 
}
 
}
  
@media screen and (max-width: 1280px) {
+
#header h1 a {
 +
font-size: 0.7em;
 +
}
 +
 
 +
#header .links {
 +
-moz-flex: 1;
 +
-webkit-flex: 1;
 +
-ms-flex: 1;
 +
flex: 1;
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
height: inherit;
 +
line-height: inherit;
 +
margin-left: 1.5em;
 +
overflow: hidden;
 +
padding-left: 1.5em;
 +
}
  
#wrapper {
+
#header .links ul li {
display: block;
+
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
line-height: 1;
 +
margin-left: 1em;
 +
padding-left: 1em;
 
}
 
}
  
 +
#header .links ul li:first-child {
 +
border-left: 0;
 +
margin-left: 0;
 +
padding-left: 0;
 +
}
 +
 +
#header .links ul li a {
 +
border-bottom: 0;
 +
font-family: "Raleway", Helvetica, sans-serif;
 +
font-size: 0.7em;
 +
font-weight: 400;
 +
letter-spacing: 0.25em;
 +
text-transform: uppercase;
 +
}
 +
 +
#header .main {
 +
height: inherit;
 +
line-height: inherit;
 +
text-align: right;
 
}
 
}
  
@media screen and (max-width: 736px) {
+
#header .main ul {
 +
height: inherit;
 +
line-height: inherit;
 +
}
 +
 
 +
#header .main ul li {
 +
border-left: solid 1px rgba(160, 160, 160, 0.3);
 +
height: inherit;
 +
line-height: inherit;
 +
white-space: nowrap;
 +
}
 +
 
 +
#header .main ul li > * {
 +
display: block;
 +
float: left;
 +
}
 +
 
 +
#header .main ul li > a {
 +
text-decoration: none;
 +
border-bottom: 0;
 +
color: #aaaaaa;
 +
overflow: hidden;
 +
position: relative;
 +
text-indent: 4em;
 +
width: 4em;
 +
}
 +
 
 +
#header .main ul li > a:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
#header .main ul li > a:before {
 +
display: block;
 +
height: inherit;
 +
left: 0;
 +
line-height: inherit;
 +
position: absolute;
 +
text-align: center;
 +
text-indent: 0;
 +
top: 0;
 +
width: inherit;
 +
}
 +
 
 +
#header form {
 +
margin: 0;
 +
}
  
#wrapper {
+
#header form input {
padding: 1.5em;
+
display: inline-block;
 +
height: 2.5em;
 +
position: relative;
 +
top: -2px;
 +
vertical-align: middle;
 
}
 
}
  
 +
#header #search {
 +
-moz-transition: all 0.5s ease;
 +
-webkit-transition: all 0.5s ease;
 +
-ms-transition: all 0.5s ease;
 +
transition: all 0.5s ease;
 +
max-width: 0;
 +
opacity: 0;
 +
overflow: hidden;
 +
padding: 0;
 +
white-space: nowrap;
 
}
 
}
  
body.single #wrapper {
+
#header #search input {
display: block;
+
width: 12em;
 +
}
 +
 
 +
#header #search.visible {
 +
max-width: 12.5em;
 +
opacity: 1;
 +
padding: 0 0.5em 0 0;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
#header .links {
 +
display: none;
 +
}
 +
 
 
}
 
}
 +
 +
@media screen and (max-width: 736px) {
 +
 +
#header {
 +
height: 2.75em;
 +
line-height: 2.75em;
 +
}
 +
 +
#header h1 {
 +
padding: 0 0 0 1em;
 +
}
 +
 +
#header .main .search {
 +
display: none;
 +
}
 +
 +
}
 +
 +
/* Wrapper */
 +
 +
  
 
/* Main */
 
/* Main */

Revision as of 09:21, 19 October 2016

WIKI IGEM 2016