|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <!-- | | <!-- |
| - | This version attempts to add the ability for CSS switching | + | This version attempts to implement external stylesheets for |
| | --> | | --> |
| | <head> | | <head> |
| Line 11: |
Line 11: |
| | | | |
| | | | |
| - | <link rel='stylesheet' type='text/css' href='https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw&ctype=text/css' /> | + | <link rel='stylesheet' type='text/css' media="only screen and (min-device-width:481px)" href='https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw&ctype=text/css' /> |
| | | | |
| | <style> | | <style> |
| Line 200: |
Line 200: |
| | } | | } |
| | | | |
| - | /*Desktop styles*/
| |
| - | @media only screen and (min-device-width:481px){
| |
| - |
| |
| - | /***Nav styling***/
| |
| - | #nav{
| |
| - | list-style: none;
| |
| - | width: 180px;
| |
| - | margin: 0px 10px 0px 10px;
| |
| - | padding: 20px 0px 20px 10px;
| |
| - | text-indent: 0;
| |
| - | float: left;
| |
| - |
| |
| - | /*Background colours*/
| |
| - | background: #202020; /*backup colour in case gradients fail*/
| |
| - | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/
| |
| - | -ms-filter:
| |
| - | "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333')"; /* for IE 8*/
| |
| - | background: -webkit-gradient(linear, left top, right top, from(#202020), to(#333333)); /* for webkit browsers */
| |
| - | background: -moz-linear-gradient(left, #202020, #333); /* for firefox 3.6+ */
| |
| - | background: linear-gradient(left, #202020 0%, #333333 100%); /*standard*/
| |
| - | }
| |
| - | /*To be moved to JQ block*/
| |
| - | #menu-icon{
| |
| - | display: none;
| |
| - | }
| |
| - | #nav li{
| |
| - | height: auto;
| |
| - | padding: 0;
| |
| - | }
| |
| - | /*submenu styling*/
| |
| - | #nav li a{
| |
| - | display: block;
| |
| - | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
| |
| - | color: white;
| |
| - | font-size: 1.5em;
| |
| - | line-height: 1.2em; /*line spacing between submenu rows*/
| |
| - | text-indent: 0.8em;
| |
| - | letter-spacing: 0.08em;
| |
| - | }
| |
| - | #nav li a.dropheader{
| |
| - | text-indent: 0;
| |
| - | margin-top: 1.3em;
| |
| - | }
| |
| - | /*primary menu styling*/
| |
| - | #nav li > a{
| |
| - | display: block;
| |
| - | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
| |
| - | font-size: 1.8em;
| |
| - | color: white;
| |
| - | line-height: 40px; /*centers the text vertically*/
| |
| - | }
| |
| - | /*arrows to signify dropout menus; to be moved to JQ block*/
| |
| - | #nav li a.drop:after{
| |
| - | content: '>';
| |
| - | padding-right: 20px;
| |
| - | color: #BBB;
| |
| - | display: inline;
| |
| - | float: right;
| |
| - | }
| |
| - | #nav li a:hover, #nav li a:hover::after{
| |
| - | display: block;
| |
| - | text-decoration: none;
| |
| - | color: #43bbff;
| |
| - | }
| |
| - | /*mega dropdown styling*/
| |
| - | #nav li div{
| |
| - | position: absolute;
| |
| - | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
| |
| - | -ms-filter:
| |
| - | "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
| |
| - | background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
| |
| - | background: -moz-linear-gradient(left, #333333, #424242); /* for firefox 3.6+ */
| |
| - | background: linear-gradient(left, #333333 0%, #424242 100%); /*standard*/
| |
| - | }
| |
| - | /*1-column styles*/
| |
| - | #nav li div.col_1{
| |
| - | left: -999px;
| |
| - | width: auto;
| |
| - | padding-bottom: 1.5em;
| |
| - | }
| |
| - | #nav li div.col_1 a{
| |
| - | display: block;
| |
| - | padding: 0 1.5em;
| |
| - | }
| |
| - | #nav li:hover div.col_1{
| |
| - | left: 205px;
| |
| - | margin-top: -55px;
| |
| - | }
| |
| - | /*2-column styles*/
| |
| - | #nav li div.col_2{
| |
| - | width: auto;
| |
| - | left: -999em;
| |
| - | padding-bottom: 1.5em;
| |
| - | height: auto;
| |
| - | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
| |
| - | -ms-filter:
| |
| - | "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
| |
| - | background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
| |
| - | background: -moz-linear-gradient(left, #202020, #333); /* for firefox 3.6+ */
| |
| - | }
| |
| - | #nav li div.col_l, #nav li div.col_r{
| |
| - | position: relative;
| |
| - | width: auto;
| |
| - | float: left;
| |
| - | background: transparent;
| |
| - | padding-left: 20px;
| |
| - | padding-right: 20px;
| |
| - | }
| |
| - | #nav li div.col_l a, #nav li div.col_r a{
| |
| - | display: block;
| |
| - | }
| |
| - | #nav li:hover div.col_2{
| |
| - | left: 205px;
| |
| - | margin-top: -55px;
| |
| - | }
| |
| - |
| |
| - | /***End nav styling***/
| |
| - |
| |
| - | /***Headerimage***/
| |
| - | #headerimage{
| |
| - | width: 947px;
| |
| - | position: relative;
| |
| - | left: 10px;
| |
| - | margin-bottom: 10px;
| |
| - | margin-top: -20px;
| |
| - | }
| |
| - | #css-full{
| |
| - | display: none;
| |
| - | }
| |
| - | #css-mobi{
| |
| - | display: block;
| |
| - | top: 0px;
| |
| - | }
| |
| - |
| |
| - | /***Logo styling***/
| |
| - | #logo{
| |
| - | position: absolute;
| |
| - | top: 40px;
| |
| - | left: 650px;
| |
| - | }
| |
| - |
| |
| - | #logo img{
| |
| - | width: 300px;
| |
| - | }
| |
| - |
| |
| - | /***Body styling***/
| |
| - | h1{
| |
| - | font-size: 2.5em;
| |
| - | }
| |
| - | h2{
| |
| - | font-size: 1.8em;
| |
| - | }
| |
| - |
| |
| - | }
| |
| | | | |
| | </style> | | </style> |
Header Stuff!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis eleifend interdum. Pellentesque libero magna, dignissim vitae blandit et, tincidunt nec felis. Proin et risus eget lectus lacinia mollis. Quisque rhoncus posuere lectus, eget vestibulum dolor feugiat bibendum. Vestibulum scelerisque commodo eros, in vulputate arcu tempus varius. Donec ornare malesuada mi vitae rhoncus. Nulla facilisi.
Subheader Stuff!
Viverra nisl a bibendum. Etiam cursus ultrices arcu, pretium sodales tellus euismod id. Pellentesque congue aliquam urna, commodo iaculis massa pellentesque eget. Vivamus et sem non massa tincidunt ultrices. Sed luctus justo nec dui venenatis sodales. Proin sit amet risus nibh. In hac habitasse platea dictumst. Sed pretium egestas augue, sed varius nibh consequat ac. In orci.
"
