Template:UCR/Breaking-RNA/HEAD: Difference between revisions
No edit summary |
No edit summary |
||
(42 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html lang=''> | <html lang=''> | ||
<head> | <head> | ||
Line 21: | Line 19: | ||
#globalWrapper{ | #globalWrapper{ | ||
width: | width: 80%; | ||
margin: | margin-left: 10%; | ||
position: absolute; | position: absolute; | ||
} | } | ||
Line 34: | Line 32: | ||
h1,h2,h3,p,ul,li { | h1,h2,h3,p,ul,li { | ||
font-family: 'Open Sans', sans-serif; | font-family: 'Open Sans', sans-serif; | ||
font-weight: | font-weight: 300; | ||
color: Black; | color: Black; | ||
text-align: justify; | |||
} | } | ||
h1 | |||
{ | |||
text-align: center; | |||
} | |||
h3 | |||
{ | |||
font-size: 20px; | |||
position: relative; | |||
text-align:center; | |||
} | |||
p | |||
{ | |||
font-size: 16px; | |||
line-height: 30px; | |||
padding: 10px 150px; | |||
} | |||
#objectives | |||
{ | |||
} | |||
#objectives ul | |||
{ | |||
padding: 0 0 0 30%; | |||
margin: 0 auto; | |||
} | |||
#objectives li | |||
{ | |||
font-size: 18px; | |||
list-style: none; | |||
line-height: 30px; | |||
} | |||
#submenu | |||
{ | |||
margin: 0px 40px 0px 22px; | |||
} | |||
#submenu a | |||
{ | |||
color: black; | |||
text-decoration: underline; | |||
} | |||
#submenu a:hover | |||
{ | |||
color: rgba(255,255,255,0.99); | |||
} | |||
#submenu ul | |||
{ | |||
text-align: center; | |||
padding: 8px 0px; | |||
border: 3px solid black; | |||
background: rgba(70,150,70,0.8); | |||
<!--background: url(http://openwetware.org/images/8/8c/Breaking_RNA_Background.png); | |||
background-size: cover;--> | |||
} | |||
#submenu li | |||
{ | |||
font-size: 18px; | |||
color: black; | |||
padding: 0px 20px; | |||
display: inline-block; | |||
} | |||
#supplemenu | |||
{ | |||
margin: 0px 40px 0px 22px; | |||
} | |||
#supplemenu a | |||
{ | |||
color: black; | |||
text-decoration: underline; | |||
} | |||
#supplemenu a:hover | |||
{ | |||
color: rgba(255,255,255,0.99); | |||
} | |||
#supplemenu ul | |||
{ | |||
text-align: center; | |||
padding: 15px 0px; | |||
border: 3px solid black; | |||
background: rgba(70,150,70,0.8); | |||
} | |||
#supplemenu li | |||
{ | |||
font-size: 18px; | |||
color: black; | |||
padding: 0px 10px; | |||
display: inline-block; | |||
} | |||
#floatmenu | |||
{ | |||
position: fixed; | |||
bottom: 0; | |||
width: 78%; | |||
font-size: 18px; | |||
color: black; | |||
padding: 0px 10px; | |||
background: rgba(70,150,70,1); | |||
border: 3px solid black; | |||
} | |||
#floatmenu td | |||
{ | |||
text-align: center; | |||
height: 36px; | |||
} | |||
#floatmenu td:hover | |||
{ | |||
background: white; | |||
} | |||
#button | |||
{ | |||
border-left: 3px solid black; | |||
} | |||
#floatmenu a | |||
{ | |||
text-decoration: none; | |||
color: black; | |||
} | |||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); | @import url(http://fonts.googleapis.com/css?family=Open+Sans:700); | ||
Line 57: | Line 167: | ||
padding: 0; | padding: 0; | ||
line-height: 1; | line-height: 1; | ||
text-align:center; | |||
display: block; | display: block; | ||
zoom: 1; | zoom: 1; | ||
Line 72: | Line 183: | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
line-height: 1; | |||
} | } | ||
#cssmenu.align-right ul li { | #cssmenu.align-right ul li { | ||
Line 85: | Line 197: | ||
padding: 15px 25px; | padding: 15px 25px; | ||
font-family: 'Open Sans', sans-serif; | font-family: 'Open Sans', sans-serif; | ||
font-weight: | font-weight: 300; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
font-size: 14px; | font-size: 14px; | ||
Line 96: | Line 208: | ||
} | } | ||
#cssmenu ul li a:hover { | #cssmenu ul li a:hover { | ||
color: # | color: #f2ff00; | ||
} | } | ||
#cssmenu ul li a:hover:before { | #cssmenu ul li a:hover:before { | ||
Line 120: | Line 232: | ||
height: 3px; | height: 3px; | ||
width: 0; | width: 0; | ||
background: # | background: #f2ff00; | ||
-webkit-transition: width .25s; | -webkit-transition: width .25s; | ||
-moz-transition: width .25s; | -moz-transition: width .25s; | ||
Line 132: | Line 244: | ||
} | } | ||
#cssmenu ul li.active a { | #cssmenu ul li.active a { | ||
color: # | color: #f2ff00; | ||
} | } | ||
#cssmenu ul li.active a:before { | #cssmenu ul li.active a:before { | ||
Line 145: | Line 257: | ||
} | } | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
#supplemenu ul li { | |||
float: none; | |||
display: block; | |||
} | |||
#supplemenu ul li a { | |||
width: 100%; | |||
} | |||
#cssmenu ul li { | #cssmenu ul li { | ||
float: none; | float: none; | ||
Line 167: | Line 286: | ||
} | } | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 23:30, 25 October 2014
<html lang=""> <head>
<meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>Breaking RNA</title>
<style>
- column-one,.toc {
display: none;
} body.mediawiki {
background: url(http://openwetware.org/images/8/8c/Breaking_RNA_Background.png); background-size: cover;
}
- globalWrapper{
width: 80%; margin-left: 10%; position: absolute;
}
- content{
margin: 0px;
<!-- background: #e6e6e6; -->
background: white;
}
h1,h2,h3,p,ul,li {
font-family: 'Open Sans', sans-serif; font-weight: 300; color: Black; text-align: justify;
} h1
{ text-align: center; }
h3
{ font-size: 20px; position: relative; text-align:center; }
p
{ font-size: 16px; line-height: 30px; padding: 10px 150px; }
- objectives
{ }
- objectives ul
{ padding: 0 0 0 30%; margin: 0 auto; }
- objectives li
{ font-size: 18px; list-style: none; line-height: 30px; }
- submenu
{ margin: 0px 40px 0px 22px; }
- submenu a
{ color: black; text-decoration: underline; }
- submenu a:hover
{ color: rgba(255,255,255,0.99); }
- submenu ul
{ text-align: center; padding: 8px 0px; border: 3px solid black; background: rgba(70,150,70,0.8);
<!--background: url(http://openwetware.org/images/8/8c/Breaking_RNA_Background.png);
background-size: cover;-->
}
- submenu li
{ font-size: 18px; color: black; padding: 0px 20px; display: inline-block; }
- supplemenu
{ margin: 0px 40px 0px 22px; }
- supplemenu a
{ color: black; text-decoration: underline; }
- supplemenu a:hover
{ color: rgba(255,255,255,0.99); }
- supplemenu ul
{ text-align: center; padding: 15px 0px; border: 3px solid black; background: rgba(70,150,70,0.8);
}
- supplemenu li
{ font-size: 18px; color: black; padding: 0px 10px; display: inline-block; }
- floatmenu
{ position: fixed; bottom: 0; width: 78%; font-size: 18px; color: black; padding: 0px 10px; background: rgba(70,150,70,1); border: 3px solid black; }
- floatmenu td
{ text-align: center; height: 36px; }
- floatmenu td:hover
{ background: white; }
- button
{ border-left: 3px solid black; }
- floatmenu a
{ text-decoration: none; color: black; }
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
background: url(http://openwetware.org/images/8/8c/Breaking_RNA_Background.png); background-size: cover; width: auto; border: 3px solid rgba(0,0,0,0.8);
} #cssmenu ul { list-style: none; margin: 0; padding: 0; line-height: 1;
text-align:center;
display: block; zoom: 1; } #cssmenu ul:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #cssmenu ul li { display: inline-block; padding: 0; margin: 0;
line-height: 1;
} #cssmenu.align-right ul li { float: right; } #cssmenu.align-center ul { text-align: center; } #cssmenu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: 'Open Sans', sans-serif; font-weight: 300; text-transform: uppercase; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #cssmenu ul li a:hover { color: #f2ff00; } #cssmenu ul li a:hover:before { width: 100%; } #cssmenu ul li a:after { content: ""; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } #cssmenu ul li a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #f2ff00; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #cssmenu ul li.last > a:after, #cssmenu ul li:last-child > a:after { display: none; } #cssmenu ul li.active a { color: #f2ff00; } #cssmenu ul li.active a:before { width: 100%; } #cssmenu.align-right li.last > a:after, #cssmenu.align-right li:last-child > a:after { display: block; } #cssmenu.align-right li:first-child a:after { display: none; } @media screen and (max-width: 768px) {
#supplemenu ul li {
float: none; display: block; } #supplemenu ul li a { width: 100%; } #cssmenu ul li { float: none; display: block; } #cssmenu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #ffffff; } #cssmenu ul li.last > a, #cssmenu ul li:last-child > a { border: 0; } #cssmenu ul li a:after { display: none; } #cssmenu ul li a:before { display: none; } }
</style>
</head>
<body>
</body>
</html>