Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"

 
(175 intermediate revisions by 4 users not shown)
Line 7: Line 7:
 
background-size: 100%;
 
background-size: 100%;
 
background-repeat: no-repeat;*/
 
background-repeat: no-repeat;*/
 +
margin: 0 auto;
 
}
 
}
  
 
a:focus {outline: 0;}
 
a:focus {outline: 0;}
  
 +
#scrollUp{
 +
z-index:100;
 +
width:100px;
 +
position:fixed;
 +
left: calc(50% + 630px);
 +
bottom: 20px;
 +
transition: bottom 0.7s;
 +
opacity:0;
 +
transition-timing-function: linear;
 +
}
 
h1{
 
h1{
 
font-family: Lato_Bold, Arial, sans-serif;
 
font-family: Lato_Bold, Arial, sans-serif;
Line 51: Line 62:
 
display: inline;
 
display: inline;
 
}
 
}
 +
 +
h6{
 +
font-family: Lato_Bold, Arial, sans-serif;
 +
font-size:20px;
 +
margin:0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h7 {
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
margin: 0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
  
 
.buttons{
 
.buttons{
Line 58: Line 87:
 
.tekst1 {
 
.tekst1 {
 
font-family: Lato_Regular, Arial, sans-serif;  
 
font-family: Lato_Regular, Arial, sans-serif;  
 +
font-size:20px;
 +
color:#000000;
 +
line-height:125%;
 +
}
 +
 +
.tekst2 {
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
font-size:16px;
 +
}
 +
 +
.tekst2i {
 +
font-family: Lato_Light_Italic, Arial, sans-serif;
 
font-size:20px;
 
font-size:20px;
 
}
 
}
Line 69: Line 110:
 
font-family: Lato_Bold_Italic, Arial, sans-serif;
 
font-family: Lato_Bold_Italic, Arial, sans-serif;
 
font-size:20px;
 
font-size:20px;
 +
}
 +
 +
.tekst1I{
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
}
 +
 +
.centreText{
 +
text-align:centre;
 
}
 
}
  
Line 117: Line 167:
 
top:60px;
 
top:60px;
 
width:100%;
 
width:100%;
 +
min-width:1460px;
 
line-height: normal;
 
line-height: normal;
 
}
 
}
Line 147: Line 198:
 
background-size: cover;
 
background-size: cover;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
−
margin-left: 40px;
+
margin-left: 30px;
 
}
 
}
  
Line 153: Line 204:
 
z-index:2;
 
z-index:2;
 
position:relative;
 
position:relative;
−
/*background: #ddeebb;*/
+
height:60px;
 
width:100%;
 
width:100%;
−
}
+
min-width:1460px;
−
#menulinks,#menurechts{
+
−
position:absolute;
+
−
top:0;
+
−
height:60px;
+
 
background-color: rgba(255,255,255,0.3);
 
background-color: rgba(255,255,255,0.3);
 
}
 
}
  
−
#menulinks{
+
#menuTotal{
−
left:0;
+
width:1460px;
−
width: calc((100% - 1450px)/2);
+
height:60px;
 +
display:block;
 +
position:relative;
 +
margin: 0 auto;
 
}
 
}
  
−
#menurechts{
+
#FBTwit{
−
right:0;
+
margin-left: 20px;
−
width: calc((100% - 1450px)/2);
+
float:left;
 
}
 
}
 +
  
 
#menu{
 
#menu{
 
position:relative;
 
position:relative;
−
width:1450px;
+
float:left;
 +
width:1200px;
 
height:60px;
 
height:60px;
−
margin:0 auto;
 
 
display:block;
 
display:block;
−
background-color: rgba(255,255,255,0.3);
+
margin-left:10px;
 
}
 
}
  
Line 186: Line 237:
 
z-index:2;
 
z-index:2;
 
width:100%;
 
width:100%;
−
}
+
min-width:1460px;
−
 
+
−
#submenulinks,#submenurechts{
+
−
position:absolute;
+
−
top:0;
+
−
height:100%;
+
−
width:calc((100% - 1200px) / 2);
+
 
background-color: rgba(255,255,255,0.5);
 
background-color: rgba(255,255,255,0.5);
 
}
 
}
  
−
#submenulinks{
 
−
left:0;
 
−
}
 
−
 
−
#submenurechts{
 
−
right:0;
 
−
}
 
  
 
#submenu{
 
#submenu{
−
background-color: rgba(255,255,255,0.5);
 
 
overflow: hidden;
 
overflow: hidden;
 
position:relative;
 
position:relative;
Line 215: Line 252:
 
}
 
}
  
−
#menu1{
 
−
margin-left:calc(((100% - (8 * 11%))/2) - 105px);
 
−
}
 
  
−
#menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a, #menu3, #menu2, #menu4, #menu5, #menu6, #menu7, #menu8, #menu9 {
+
#menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a {
 +
width:9%;
 +
padding-left: calc(13% / 8);
 
position:relative;
 
position:relative;
 
font-family: Lato_Bold, Arial, sans-serif;
 
font-family: Lato_Bold, Arial, sans-serif;
Line 232: Line 268:
 
}
 
}
  
−
#submenu a{
 
−
width:12%;
 
−
}
 
  
 
#menu1{
 
#menu1{
−
width:9%;
+
padding-left:0 !important;
 
}
 
}
−
#menu2{
+
 
−
width:9%;
+
#menu6, #menu7{
−
}
+
width:12% !important;
−
#menu3{
+
 
−
width:9%;
+
−
}
+
−
#menu4{
+
−
width:9%;
+
−
}
+
−
#menu5{
+
−
width:9%;
+
−
}
+
−
#menu6{
+
−
width:11%;
+
−
}
+
−
#menu7{
+
−
width:11%;
+
−
}
+
−
#menu8{
+
−
width:9%;
+
−
}
+
−
#menu9{
+
−
width:9%;
+
 
}
 
}
  
Line 268: Line 282:
 
}
 
}
  
−
#sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover, #sub6 > a:hover, #sub7 > a:hover, #sub8 > a:hover{
+
#sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover, #sub6 > a:hover, #sub7 > a:hover, #sub8, #sub9 > a:hover{
 
color: #9DC671;
 
color: #9DC671;
 
}
 
}
  
−
#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8{
+
#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{
 
width:100%;
 
width:100%;
 
height:100%;
 
height:100%;
Line 278: Line 292:
  
 
#sub2a{
 
#sub2a{
−
margin-left:calc(((100% - (8 * 10%)) / 2));
+
padding-left:0 !important;
 
}
 
}
 
#sub3a{
 
#sub3a{
−
margin-left:calc(((100% - (8 * 10%)) / 2));
+
padding-left:0 !important;
 
}
 
}
 
#sub4a{
 
#sub4a{
−
margin-left:calc(((100% - (8 * 10% + 3%)) / 2) + 2 * 10% + 1.5%);
+
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 1.5 ) !important;
 
}
 
}
 
#sub5a{
 
#sub5a{
−
margin-left:calc(((100% - (8 * 10% + 3%)) / 2) + 3.5 * 10% + 3%);
+
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 3) !important;
 
}
 
}
 
#sub6a{
 
#sub6a{
−
margin-left:calc(((100% - (8 * 10% + 3%)) / 2) + 3.5 * 10% + 3%);
+
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 3.5) !important;
 
}
 
}
 
#sub7a{
 
#sub7a{
−
margin-left:calc(((100% - (8 * 10% + 3%)) / 2) + 3.5 * 10% + 3%);
+
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 5.5 + 4.5%) !important;
 
}
 
}
 
#sub8a{
 
#sub8a{
−
margin-left:calc(((100% - (8 * 10% + 3%)) / 2) + 3.5 * 10% + 3%);
+
padding-left:0 !important;
 +
margin-left:0 !important;
 +
}
 +
#sub9a{
 +
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 6.5) !important;
 
}
 
}
  
−
#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8{
+
#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{
 
display:none;
 
display:none;
 
}
 
}
Line 322: Line 345:
 
}
 
}
 
#twitter_logo{
 
#twitter_logo{
−
/*height:60px;*/
+
height:60px;
−
height:100%;
+
float:left;
−
float:right;
+
  
 
}
 
}
Line 338: Line 360:
 
}
 
}
 
#facebook_logo{
 
#facebook_logo{
−
/*height:50px;*/
 
 
height:100%;
 
height:100%;
−
float:right;
+
float:left;
 
}
 
}
 
/* Content Menu*/
 
/* Content Menu*/
 
.contentLink, .contentLink:visited, .contentLink:hover, .contentLink:active{
 
.contentLink, .contentLink:visited, .contentLink:hover, .contentLink:active{
−
text-decoration: underline;
+
font-family: Lato_Regular, Arial, sans-serif;  
 
color:black;
 
color:black;
 +
}
 +
.contentKop{
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
font-size:15px;
 
}
 
}
 
.contentList{
 
.contentList{
−
list-style: initial;
+
list-style: disc;
 +
list-syle-image: none;
 
margin-left: 30px;
 
margin-left: 30px;
 
margin-bottom: 0;
 
margin-bottom: 0;
Line 354: Line 380:
 
}
 
}
 
#infoTab{
 
#infoTab{
−
top:35%;
 
 
z-index:9;
 
z-index:9;
 
margin-left: 0;
 
margin-left: 0;
Line 370: Line 395:
 
text-align:center;
 
text-align:center;
 
font-size:20px;
 
font-size:20px;
 +
font-family: Lato_Bold, Arial, sans-serif;
 
}
 
}
 
#infoTabContent{
 
#infoTabContent{
Line 402: Line 428:
  
 
.activiteit {
 
.activiteit {
−
font-family: Aleo_Regular, Arial, sans-serif;  
+
font-family: Lato_Regular, Arial, sans-serif;  
 
font-size:20px;
 
font-size:20px;
 
align:center;
 
align:center;
Line 410: Line 436:
 
list-style-type: disc;
 
list-style-type: disc;
 
list-style-image: initial;
 
list-style-image: initial;
 +
}
 +
 +
.tourButton{
 +
display:inline-block;
 +
position:absolute;
 +
top:10px;
 +
right:10px;
 +
}
 +
 +
#wikiTourList {
 +
list-style-type:disc;
 +
margin-left:10px;
 +
}
 +
 +
#wikiTour {
 +
position:fixed;
 +
left: calc(50% + 640px);
 +
top: 200px;
 +
width:230px;
 +
opacity:0.4;
 +
}
 +
 +
#nextChapter, #previousChapter, #moreDepth {
 +
border-radius: 15px;
 +
position:relative;
 +
padding:12px;
 +
background-color: #b0c4de;
 +
margin: 5px 0px;
 
}
 
}
  
 
</html>
 
</html>

Latest revision as of 01:16, 21 November 2015

body{ line-height: normal; /*background-color: #FCFCD5; background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png"); background-attachment: fixed; background-size: 100%; background-repeat: no-repeat;*/ margin: 0 auto; } a:focus {outline: 0;} #scrollUp{ z-index:100; width:100px; position:fixed; left: calc(50% + 630px); bottom: 20px; transition: bottom 0.7s; opacity:0; transition-timing-function: linear; } h1{ font-family: Lato_Bold, Arial, sans-serif; font-size:40px; margin: 0; font-weight: normal; display: inline; } h2{ font-family: Lato_Bold_Italic, Arial, sans-serif; font-size: 25px; margin: 0; font-weight: normal; display: inline; } h3 { font-family: Lato_Italic, Arial, sans-serif; font-size:26px; margin: 0; font-weight: normal; display: inline; } h4{ font-family: Lato_Bold, Arial, sans-serif; font-size:26px; margin:0; font-weight: normal; display: inline; } h5 { font-family: Lato_Italic, Arial, sans-serif; font-size:20px; text-decoration: underline; margin: 0; font-weight: normal; display: inline; } h6{ font-family: Lato_Bold, Arial, sans-serif; font-size:20px; margin:0; font-weight: normal; display: inline; } h7 { font-family: Lato_Italic, Arial, sans-serif; font-size:20px; margin: 0; font-weight: normal; display: inline; } .buttons{ display:inline-block; } .tekst1 { font-family: Lato_Regular, Arial, sans-serif; font-size:20px; color:#000000; line-height:125%; } .tekst2 { font-family: Lato_Regular, Arial, sans-serif; font-size:16px; } .tekst2i { font-family: Lato_Light_Italic, Arial, sans-serif; font-size:20px; } .tekst1B{ font-family: Lato_Bold, Arial, sans-serif; font-size:20px; } .tekst1BI{ font-family: Lato_Bold_Italic, Arial, sans-serif; font-size:20px; } .tekst1I{ font-family: Lato_Italic, Arial, sans-serif; font-size:20px; } .centreText{ text-align:centre; } .caption{ font-family: Lato_Italic, Arial, sans-serif; font-size:16px; } .spoilerbutton { display:inline; } .spoiler { display:none; margin-top: 20px; margin-bottom:20px; overflow:hidden; background: #f5f5f5; margin-left:50px; } .spoilerimage { float: right; margin: 5px 5px 0px 30px; text-align: justify; } .spoilerimagec { display: block; margin-top:10px; margin-left: auto; margin-right: auto } #background{ height:100%; width:100%; position:fixed; /*background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png"); background-size: cover;*/ top:0; left:0; } #body{ z-index:1; position:absolute; top:60px; width:100%; min-width:1460px; line-height: normal; } #container{ margin:0 auto; margin-bottom: 110px; position:relative; /*border-radius:15px 30px 30px 15px; FB/Twitter komt er nog onder vandaan*/ background-image: url("https://static.igem.org/mediawiki/2015/c/ca/TU_Eindhoven_grey_bf.png"); background-color: white; box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); min-height:1000px; width:1200px; padding-bottom: 50px; } #containercontent{ width:80%; margin-left: 10%; } #menuigemlogo{ height:100%; width:76px; float: left; display:block; background-image: url('https://static.igem.org/mediawiki/2015/1/16/TU_Eindhoven_iGEM_Logo.png'); background-size: cover; background-repeat: no-repeat; margin-left: 30px; } #menuwrapper{ z-index:2; position:relative; height:60px; width:100%; min-width:1460px; background-color: rgba(255,255,255,0.3); } #menuTotal{ width:1460px; height:60px; display:block; position:relative; margin: 0 auto; } #FBTwit{ margin-left: 20px; float:left; } #menu{ position:relative; float:left; width:1200px; height:60px; display:block; margin-left:10px; } #submenuwrapper{ position:relative; z-index:2; width:100%; min-width:1460px; background-color: rgba(255,255,255,0.5); } #submenu{ overflow: hidden; position:relative; z-index: 2; width:1200px; height:0px; margin:0 auto; transition: height 0.2s; } #menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a { width:9%; padding-left: calc(13% / 8); position:relative; font-family: Lato_Bold, Arial, sans-serif; /*font-weight: bold;*/ text-align: center; line-height: 60px; height:60px; display:block; text-decoration: none; float: left; color: #004415; } #menu1{ padding-left:0 !important; } #menu6, #menu7{ width:12% !important; } #menutwitter, #menufacebook { padding-right: 0 !important; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover, #sub6 > a:hover, #sub7 > a:hover, #sub8, #sub9 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{ width:100%; height:100%; } #sub2a{ padding-left:0 !important; } #sub3a{ padding-left:0 !important; } #sub4a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 1.5 ) !important; } #sub5a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 3) !important; } #sub6a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 3.5) !important; } #sub7a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 5.5 + 4.5%) !important; } #sub8a{ padding-left:0 !important; margin-left:0 !important; } #sub9a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 6.5) !important; } #sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{ display:none; } /*Twitter #facebookandtwitter{ width:calc((100% - (5 * 15%)) / 2); height:100%; float:right; background-color: red; } */ #twitter{ z-index:-1; top:0; display: none; right:-120px; position:absolute; height:500px; width:500px; } #twitter_logo{ height:60px; float:left; } /*FB*/ #facebook{ z-index:-1; top:0; display: none; right:-120px; position:absolute; height:500px; width:500px; } #facebook_logo{ height:100%; float:left; } /* Content Menu*/ .contentLink, .contentLink:visited, .contentLink:hover, .contentLink:active{ font-family: Lato_Regular, Arial, sans-serif; color:black; } .contentKop{ font-family: Lato_Regular, Arial, sans-serif; font-size:15px; } .contentList{ list-style: disc; list-syle-image: none; margin-left: 30px; margin-bottom: 0; margin-top: 0; } #infoTab{ z-index:9; margin-left: 0; position: fixed; width:350px; transition: transform 1s; } #infoTabTitle{ border-bottom: solid 1px black; float:right; width:80%; height:50px; background: rgba(255, 255, 255, 0.5); line-height:40px; text-align:center; font-size:20px; font-family: Lato_Bold, Arial, sans-serif; } #infoTabContent{ float:right; width:80%; background: rgba(230, 230, 230, 0.5); text-align:left; } .contentMenuImg{ margin-right:2px; transform: rotate(-180deg); transform-origin: 50% 50%; height:20px; } #contentToggle{ box-sizing: border-box; background: rgba(255, 255, 255, 0.5); width:20%; float:right; border-left: solid 1px black; } #contentToggleImg{ position:relative; display:block; width:25px; height:38px; margin: 0 auto; transform: rotate(0deg); top: calc((100% - 38px) / 2); } .activiteit { font-family: Lato_Regular, Arial, sans-serif; font-size:20px; align:center; } .activiteitlijst{ list-style-type: disc; list-style-image: initial; } .tourButton{ display:inline-block; position:absolute; top:10px; right:10px; } #wikiTourList { list-style-type:disc; margin-left:10px; } #wikiTour { position:fixed; left: calc(50% + 640px); top: 200px; width:230px; opacity:0.4; } #nextChapter, #previousChapter, #moreDepth { border-radius: 15px; position:relative; padding:12px; background-color: #b0c4de; margin: 5px 0px; }