Difference between revisions of "Template:Freiburg/CSS"
| Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
| + | |||
| + | |||
/* ============= Resetting css coming from wiki itself ============= */ | /* ============= Resetting css coming from wiki itself ============= */ | ||
body { | body { | ||
| Line 31: | Line 33: | ||
#mainContainer { | #mainContainer { | ||
| − | + | margin: 0; | |
| − | + | width: 100%; | |
} | } | ||
| Line 112: | Line 114: | ||
font-family: Candara; | font-family: Candara; | ||
src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf) format('truetype'); | src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf) format('truetype'); | ||
| − | + | font-weight: normal; | |
| − | + | font-style: italic; | |
} | } | ||
| Line 137: | Line 139: | ||
font-family: Roboto; | font-family: Roboto; | ||
src: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf) format('truetype'); | src: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf) format('truetype'); | ||
| − | + | font-weight: normal; | |
| − | + | font-style: italic; | |
} | } | ||
@font-face { | @font-face { | ||
font-family: Roboto; | font-family: Roboto; | ||
src: url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf) format('truetype'); | src: url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf) format('truetype'); | ||
| − | + | font-weight: bold; | |
| − | + | font-style: italic; | |
} | } | ||
| Line 157: | Line 159: | ||
#menubar { | #menubar { | ||
font-size: 16px; | font-size: 16px; | ||
| − | + | background-color: #5781bd; | |
| − | + | display: table; | |
| − | + | width: 100%; | |
| − | + | height: 70px; | |
| − | + | border-collapse: collapse; | |
| − | + | border: none; | |
} | } | ||
| Line 168: | Line 170: | ||
/*The sub (and subsubs) items of the menu*/ | /*The sub (and subsubs) items of the menu*/ | ||
#menubar ul li ul li{ | #menubar ul li ul li{ | ||
| − | + | width: 200px; | |
| − | + | height: 30px; | |
| − | + | margin-top: 2px; | |
} | } | ||
/*The first (horizontal) line of menu items*/ | /*The first (horizontal) line of menu items*/ | ||
#menubar > ul{ | #menubar > ul{ | ||
| − | + | position: relative; | |
| − | + | margin-top: 25; | |
| − | + | left: 50%; | |
| − | + | display: block; | |
| − | + | transform: translate(-50%,0%); | |
} | } | ||
#menubar ul ul { | #menubar ul ul { | ||
| − | + | background-color: #5781bd; | |
| − | + | display: none; | |
| − | + | position: absolute; | |
| − | + | margin-left: 0px; | |
| − | + | float: left; | |
| − | + | margin-top:0px; | |
} | } | ||
#menubar ul ul li{ | #menubar ul ul li{ | ||
| − | + | display: block; | |
| − | + | margin-left: 0px; | |
} | } | ||
#menubar ul li { | #menubar ul li { | ||
| − | + | width: 100px; | |
| − | + | display: table-cell; | |
| − | + | font-family: "Roboto",sans-serif; | |
} | } | ||
#menubar ul a{ | #menubar ul a{ | ||
| − | + | text-decoration: none; | |
| − | + | color: #FFFFFF; | |
| − | + | font-style: bold; | |
| − | + | text-align: left; | |
} | } | ||
#menubar ul a:visited{ | #menubar ul a:visited{ | ||
| − | + | display: block; | |
| − | + | text-decoration: none; | |
| − | + | color: #FFFFFF; | |
| − | + | font-style: bold; | |
} | } | ||
#menubar ul li:hover > ul{ | #menubar ul li:hover > ul{ | ||
| − | + | color: #EEEE00; | |
| − | + | display: block; | |
| − | + | padding-top: 0px; | |
| − | + | padding-left: 20px; | |
} | } | ||
#menubar ul li:hover{ | #menubar ul li:hover{ | ||
| − | + | color: #EEEE00; | |
} | } | ||
| Line 316: | Line 318: | ||
h1, h2, h3{ | h1, h2, h3{ | ||
| − | + | font-family: "Roboto", sans-serif; | |
color: #c1002a; | color: #c1002a; | ||
font-size: 25px; | font-size: 25px; | ||
| Line 328: | Line 330: | ||
/* ============= Full Width Banners ============= */ | /* ============= Full Width Banners ============= */ | ||
#banner_home{ | #banner_home{ | ||
| − | + | margin:0; | |
| − | + | padding: 0px; | |
| − | + | background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg"); | |
| − | + | background-repeat: no-repeat; | |
| − | + | background-size: cover; | |
| − | + | width: 100%; | |
| − | + | height: 400px; | |
} | } | ||
#banner_team{ | #banner_team{ | ||
| − | + | margin:0; | |
| − | + | padding: 0px; | |
| − | + | background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg"); | |
| − | + | background-repeat: no-repeat; | |
| − | + | background-size: cover; | |
| − | + | width: 100%; | |
| − | + | height: 400px; | |
} | } | ||
#banner_labjournal{ | #banner_labjournal{ | ||
| − | + | margin:0; | |
| − | + | padding: 0px; | |
| − | + | background-image: url("https://static.igem.org/mediawiki/2015/d/dc/Labjournal.jpg"); | |
| − | + | background-repeat: no-repeat; | |
| − | + | background-size: cover; | |
| − | + | width: 100%; | |
| − | + | height: 400px; | |
} | } | ||
| Line 413: | Line 415: | ||
} | } | ||
.memberPicture{ | .memberPicture{ | ||
| − | + | width: 227px; | |
| − | + | height: 341px; | |
} | } | ||
.profile-name { | .profile-name { | ||
| − | + | font-size: 120%; | |
| − | + | color: #c1012a; | |
| − | + | font-style: bold; | |
} | } | ||
.profile-question{ | .profile-question{ | ||
| − | + | color: #004c97; | |
} | } | ||
.flippanel_row{ | .flippanel_row{ | ||
| − | + | margin-top: 25px; | |
| − | + | display: flex; | |
} | } | ||
/* | /* | ||
| Line 435: | Line 437: | ||
| − | /* | + | /* ======================= content boxes =================== */ |
.content_box{ | .content_box{ | ||
border: 3px solid #5781BD; | border: 3px solid #5781BD; | ||
| Line 446: | Line 448: | ||
} | } | ||
| + | /* ====================== image boxes =================== */ | ||
.image_box{ | .image_box{ | ||
overflow: hidden; | overflow: hidden; | ||
| + | |||
} | } | ||
| + | |||
| + | /* define slider box */ | ||
| + | div#slider { | ||
| + | width: 60%; | ||
| + | max-width: 1000px; | ||
| + | overflow: hidden; | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | |||
| + | div#slider figure{ | ||
| + | position: relative; | ||
| + | width: 500%; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | font-size: 0; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | div#slider figure img{ | ||
| + | width: 20%; | ||
| + | height: auto; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | /* animate slider */ | ||
| + | @keyframes slidy { | ||
| + | 0% { left: 0%; } | ||
| + | 20% { left: 0%; } | ||
| + | 25% { left: -100%; } | ||
| + | 45% { left: -100%; } | ||
| + | 50% { left: -200%; } | ||
| + | 70% { left: -200%; } | ||
| + | 75% { left: -300%; } | ||
| + | 95% { left: -300%; } | ||
| + | 100% { left: -400%; } | ||
| + | } | ||
| + | |||
| + | div#slider figure { | ||
| + | left: 0; | ||
| + | text-align: left; | ||
| + | animation: 30s slidy infinite; | ||
| + | } | ||
| + | |||
| + | /* =================== END of image box =================== */ | ||
.tags{ | .tags{ | ||
| Line 462: | Line 510: | ||
} | } | ||
| − | /* | + | /* =================== define images with caption =================== */ |
.flexbox{ | .flexbox{ | ||
| Line 475: | Line 523: | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
| + | |||
| + | |||
</style> | </style> | ||
</html> | </html> | ||
Revision as of 10:58, 29 August 2015