Template:Team:Duke/CSS
From 2014.igem.org
(Difference between revisions)
(65 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html> | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
+ | |||
+ | <!--THIS STYLE SHEET REPLACES THE HOME TEMPLATE: https://2014.igem.org/Template:Team:DukeHomePage/CSS --> | ||
+ | |||
<head> | <head> | ||
- | <style type="text/css"> | + | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
- | + | <style media="screen" type="text/css"> | |
- | + | /*hide default igem banner and reformat style into blank slate - modified from UVA 2013*/ | |
- | + | ||
- | + | #globalWrapper { | |
- | + | width: 100%; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #top-section { | |
+ | width: 100%; | ||
+ | height:0px; | ||
+ | border:none; | ||
+ | } | ||
- | # | + | #p-logo { |
- | + | display:none; | |
- | + | visibility:hidden; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #search-controls { |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #menubar a | + | #menubar a { |
- | + | color:#000000; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #menubar a:hover{ | |
- | + | text-decoration:none; | |
+ | color:#fff; | ||
} | } | ||
- | + | ||
- | + | .left-menu ul { | |
- | + | background-color:#000000; | |
- | + | margin:0; | |
- | + | padding:0; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .right-menu ul li a { | |
- | + | background-color:#000; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .printfooter { | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #footer-box { | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #catlinks { | |
+ | display:none; | ||
+ | } | ||
- | . | + | .firstHeading { |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #content { | |
- | + | width: 100%; | |
- | + | border:none; | |
- | + | background-color:#000; | |
- | { | + | |
- | + | ||
- | border | + | |
- | background-color: | + | |
- | + | ||
} | } | ||
+ | </style> | ||
- | |||
- | + | <!--BEGIN HERE: This comment marks where actual coding on the main part of the page begins.--> | |
- | + | <style media="screen" type="text/css"> | |
- | + | /*This "bodyContent" style rule controls what the formatting of the page looks like, not body, for some reason. MediaWiki logic, amirite?*/ | |
+ | #bodyContent { | ||
+ | border:none; | ||
+ | background-color:#000; | ||
+ | font-color:#fff; | ||
+ | font-size: 1em; | ||
+ | font-family: Futura, Helvetica; | ||
+ | } | ||
- | + | #bodyContent ul li { | |
- | + | list-style-type:none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | #bodyContent a:hover { | |
- | + | text-decoration:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #bodyContent table { | |
- | + | background-color:#000; | |
- | + | color:#fff; | |
- | + | ||
} | } | ||
- | + | #bodyContent a { | |
- | + | color:#fff; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | /*This formats the stuff at the bottom. */ |
- | + | body { | |
- | + | background-color:#000; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | + | /* Title font */ | |
- | + | .big { | |
- | + | font-size: 4em; | |
- | + | color:#fff; | |
- | + | text-transform:uppercase; | |
- | + | text-align:center; | |
+ | float:center; | ||
} | } | ||
- | . | + | /* Makes the square buttons */ |
- | + | .sq-button { | |
- | + | display:block; | |
- | + | width:100px; | |
- | + | height:100px; | |
+ | border:none; | ||
+ | line-height:50px; | ||
+ | color:#f5f5f5; | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
+ | opacity: 1; | ||
+ | background: #0736A4; | ||
+ | font-size:16px; | ||
+ | font-weight:bold; | ||
+ | overflow:hidden; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -moz-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | /*margins must be half of the change in size*/ | ||
+ | margin: 5px 5px; | ||
+ | line-height:200%; | ||
} | } | ||
- | |||
- | . | + | .sq-button:hover { |
- | + | background-color: #0000ff; | |
- | + | opacity: 1; | |
- | + | width: 110px; | |
- | + | height: 110px; | |
- | + | /*margins must be negative half of the change in size*/ | |
- | + | margin: -5px -5px; | |
- | + | /* Glow effect */ | |
+ | -webkit-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0); | ||
+ | -moz-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0; | ||
+ | box-shadow: 0px 0px 20px rgba(7, 54, 164, 0); | ||
} | } | ||
- | . | + | /* So the logo is out of the way */ |
- | + | .logo { | |
- | + | z-index:200; | |
- | + | padding:20px; | |
+ | margin: 0px 100px 0px 0px; | ||
} | } | ||
- | . | + | .main { |
- | + | position:relative; | |
- | + | z-index:100; | |
- | + | padding:20px; | |
- | + | text-align:center; | |
- | + | ||
} | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
- | |||
- | |||
- | |||
</head> | </head> | ||
+ | <body> | ||
+ | |||
+ | </body> | ||
</html> | </html> |
Latest revision as of 16:33, 14 October 2014