Difference between revisions of "Template:HebrewU/CSS"

Line 1: Line 1:
 
Template:HebrewU/CSS
 
Template:HebrewU/CSS
  
−
/* I-GEM original picture and page frame disabling */
+
/* Disable I-GEM defult properties for blank page */
 +
    #sideMenu, #top_title {display:none;}
 +
    #sideMenu, #sideMenu *, #top_menu_inside, #top_menu_inside *{box-sizing: initial; -webkit-box-sizing: initial;}
 +
    #content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
 +
    #body {background-color:#EDEADC; }
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
         
 
  
−
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+
/* HebrewU Logo change for animation */
−
@media screen and (max-width: 600px) {
+
#huji_logo:hover {
−
    .columnhuji.side, .columnhuji.middle {
+
content: url('https://static.igem.org/mediawiki/2018/7/76/T--HebrewU--logo_animation.png');
−
        width: 100%;
+
−
    }
+
}
−
}
+
  
−
  #sideMenu, #top_title {display:none;}
+
/* Social media Icon design */
−
            #sideMenu, #sideMenu *, #top_menu_inside, #top_menu_inside *{box-sizing: initial; -webkit-box-sizing: initial;}
+
.social_huji a{
−
            #content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
+
color:white;
−
            body {background-color:#EDEADC; }
+
font-size:15px;
−
            #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
float:right;
 +
Padding:10px;
 +
display:inline-block;
 +
}
 +
.fa:hover {
 +
opacity: 0.7;
 +
}
  
−
#ddmenu_hebrewu_social, #ddmenu_hebrewu_social a, #ddmenu_hebrewu_social {  
+
/* Big screen Navbar properties */
−
    float: right;
+
.huji_homebutton {
−
    font: 20px Calibri, Calibri;
+
float: left;
−
    margin-top: 4px;
+
Padding-left: 20px;
−
margin-bottom: 2px;
+
Padding-top: 8px;  
−
margin-right: 3%;
+
−
    max-width: 180px;
+
−
    color: white;
+
−
    padding: 0px 0px 6px 8px;
+
−
 
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* Add a hover effect if you want */
+
−
.fa:hover {
+
−
    opacity: 0.7;
+
−
}
+
−
 
+
−
 
+
−
#huji_logo:hover {
+
−
    content: url('https://static.igem.org/mediawiki/2018/7/76/T--HebrewU--logo_animation.png');
+
 
 
−
}
+
}
−
 
+
−
#ddmenu_hebrewu {
+
#ddmenu_hebrewu {
−
    background:#262d2e;
+
background:#262d2e;
−
    margin: 0;
+
margin: 0;
−
    padding: 0;
+
padding: 0;
−
    height:35px;
+
height:35px;
−
    font: 15px Calibri, Calibri;}
+
font: 15px Calibri, Calibri;
 +
display:absolute;
 +
}
 
      
 
      
−
#ddmenu_hebrewu li {     
+
#ddmenu_hebrewu li {     
−
    float: left;
+
float: left;
−
    list-style: none;
+
list-style: none;
−
    font: 20px Calibri, Calibri;}
+
font: 20px Calibri, Calibri;}
 +
 +
#ddmenu_hebrewu li a { 
 +
background:#262d2e;
 +
font: 20px Calibri, Calibri;
 +
display: block;
 +
padding: 5px 15px;
 +
color: white;
 +
}
 +
 
 +
#ddmenu_hebrewu li a:hover {background: #2c3635;}   
 +
#ddmenu_hebrewu li ul {
 +
margin: 3px 0 0 10px;
 +
padding: 0;
 +
position: absolute;
 +
visibility: hidden;
 +
}
 
   
 
   
−
#ddmenu_hebrewu li a {   
+
#ddmenu_hebrewu li ul li {   
−
    background:#262d2e;
+
display:inline;
−
    display: block;
+
}
−
    padding: 5px 20px;
+
−
    text-decoration: none;
+
−
    color: white;
+
−
}
+
 
   
 
   
−
 
+
#ddmenu_hebrewu li ul li a {
−
+
width: auto;     
−
#ddmenu_hebrewu li a:hover {   
+
background: none;
−
    background: #2c3635;
+
display: inline;
−
}
+
color: black;  
−
   
+
font: 20px Calibri, Calibri;
−
#ddmenu_hebrewu li ul {
+
padding: 2px 10px;
−
    margin: 3px 0 0 10px;
+
}
−
    padding: 0;
+
−
    position: absolute;
+
−
    visibility: hidden;
+
−
}
+
−
+
−
#ddmenu_hebrewu li ul li { 
+
−
    display:inline;
+
−
}
+
−
+
−
#ddmenu_hebrewu li ul li a {
+
−
    width: auto;     
+
−
    background: none;
+
−
    display: inline;
+
−
    color: black;  
+
−
    font: 20px Calibri, Calibri;
+
−
    padding: 2px 10px;
+
−
}
+
 
   
 
   
−
#ddmenu_hebrewu li ul li a:hover {   
+
#ddmenu_hebrewu li ul li a:hover {   
−
    background: none;
+
background: none;
−
    color: #106375;  
+
color: #106375;  
−
    padding: 2px 10px;
+
padding: 2px 10px;
−
}
+
}
  
−
/* Homebutton 10% space */
 
−
.huji_homebutton {
 
−
    float: left;
 
−
    width: 13%;
 
−
    Padding-left: 20px;
 
−
    Padding-top: 4px;
 
  
−
}
 
  
 +
/* Content position and style */
 +
.columnhuji.middle {
 +
width: 80%;
 +
background-color:#edeadc;
 +
color:black;
 +
Padding-left:10%;
 +
Padding-top:3%;
  
−
.columnhuji {
+
}
−
    float: left;
+
−
    padding: 10px;
+
h2.ahuji {
−
    background-color:#EDEADC;
+
font: 30px Calibri, Calibri;
−
    color:#EDEADC;
+
text-align: center;
 +
}
 +
 +
h2.chuji {
 +
font: 20px Calibri, Calibri;
 +
text-align: center;
 +
}
 +
 +
p.ahuji {
 +
font: 18px Calibri, Calibri;
 +
margin-left:5%;
 +
margin-right:5%;
 +
text-align:justify;
 +
}
 +
 +
p.bhuji {
 +
font: 18px Calibri, Calibri;
 +
text-align:center;
 +
}
  
−
}
+
/* Group image style */
 +
.centerhujiimg {
 +
margin: auto;
 +
width: 60%;
 +
text-align: center;
 +
}
  
−
.columnhuji.side {
+
/* Responsive navbar for small screens */
−
    width: 12%;
+
#ddmenu_hebrewu .icon {
−
    background-color:#EDEADC;
+
  display: none;
−
    color:#EDEADC;
+
  color:white;
 +
}
  
−
}
 
  
−
/* Middle column */
+
    .b_huji_small_subnav {
−
.columnhuji.middle {
+
width: 100%;
−
    width: 70%;
+
background:#edeadc;
−
    background-color:#edeadc;
+
height:35px;
−
     padding: 10px;
+
font: 15px Calibri, Calibri;
−
     
+
color: black;
−
}
+
border:none;
 +
 +
}
 +
 +
     .b_huji_small_subnav:hover {
 +
width: 100%;
 +
background:#262d2e;
 +
height:35px;
 +
font: 15px Calibri, Calibri;
 +
color:white;
 +
border:none;
 +
}
 +
 +
.huji_small_navbar {
 +
width: 100%;
 +
background:#262d2e;
 +
height:35px;
 +
font: 15px Calibri, Calibri;
 +
color: white;
 +
border:none;
 +
}
  
−
/* Clear floats after the columns */
+
.active, .huji_small_navbar:hover {
−
.rowhuji:after {
+
background-color:#131717;  
−
    content: "";
+
}
−
    display: table;
+
−
    clear: both;
+
−
}
+
  
−
/* content style */
+
.huji_small_navbar_panel {
 +
display: none;
 +
background-color: white;
 +
overflow: hidden;
 +
}
  
 +
@media screen and (max-width: 1000px) {
 +
#ddmenu_hebrewu li {display: none;}
 +
#ddmenu_hebrewu a.icon {
 +
float: left;
 +
display: block;
 +
}
 +
}
  
−
h2.ahuji {
+
  .huji_smallnav {
−
    font: 30px Calibri, Calibri;
+
display:none; 
−
    text-align: center;
+
  }
−
}
+
 
 +
.b_huji_small_nav {
 +
width: 100%;
 +
background:#262d2e;
 +
height:35px;
 +
font: 15px Calibri, Calibri;
 +
color: white;  
 +
border:none;
 +
display:none; 
  
−
h2.chuji {
+
}
−
    font: 20px Calibri, Calibri;
+
−
    text-align: center;
+
@media screen and (min-width: 1000px) {
−
}
+
 +
.huji_small_navbar {
 +
display:none; 
  
−
p.ahuji {
+
}
−
    font: 18px Calibri, Calibri;
+
−
margin-left:5%;
+
    .b_huji_small_subnav {
−
margin-right:5%;
+
width: 100%;
−
text-align:justify;
+
background:#edeadc;
−
}
+
height:35px;
−
 
+
font: 15px Calibri, Calibri;
−
p.bhuji {
+
color: black;  
−
    font: 18px Calibri, Calibri;
+
border:none;
−
text-align:center;
+
−
}
+
}
−
 
+
−
/* button1 style */
+
−
 
+
−
.buttonhuji {
+
−
font: 18px Calibri, Calibri;
+
−
    border: none;
+
−
    color: white;
+
−
    padding: 10px 32px;
+
−
    text-align: center;
+
−
    display: inline-block;
+
−
    font-size: 15px;
+
−
    margin: 2px 2px;
+
−
    -webkit-transition-duration: 0.4s; /* Safari */
+
−
    transition-duration: 0.4s;
+
−
    cursor: pointer;
+
−
}
+
−
 
+
−
.buttonhuji1 {
+
−
    background-color: #fdfaf2;
+
−
    color: black;
+
−
    border: 2px solid #829c8c;
+
−
}
+
−
 
+
−
.buttonhuji1:hover {
+
−
    background-color: #829c8c;
+
−
    color: white;
+
−
}
+
−
 
+
−
/* Group image style style */
+
−
 
+
−
.centerhujiimg {
+
−
    margin: auto;
+
−
    width: 60%;
+
−
text-align: center;
+
 
}
 
}

Revision as of 17:04, 25 September 2018

Template:HebrewU/CSS

/* Disable I-GEM defult properties for blank page */ 

    #sideMenu, #top_title {display:none;}
    #sideMenu, #sideMenu *, #top_menu_inside, #top_menu_inside *{box-sizing: initial; -webkit-box-sizing: initial;}
    #content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
    #body {background-color:#EDEADC; }
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }


/* HebrewU Logo change for animation */ #huji_logo:hover { content: url('https://static.igem.org/mediawiki/2018/7/76/T--HebrewU--logo_animation.png');

}

/* Social media Icon design */ .social_huji a{ color:white; font-size:15px; float:right; Padding:10px; display:inline-block; } .fa:hover { opacity: 0.7; }

/* Big screen Navbar properties */ .huji_homebutton { float: left; Padding-left: 20px; Padding-top: 8px;

}

#ddmenu_hebrewu { background:#262d2e; margin: 0; padding: 0; height:35px; font: 15px Calibri, Calibri; display:absolute; }

#ddmenu_hebrewu li { float: left; list-style: none; font: 20px Calibri, Calibri;}

#ddmenu_hebrewu li a { background:#262d2e; font: 20px Calibri, Calibri; display: block; padding: 5px 15px; color: white; }

#ddmenu_hebrewu li a:hover {background: #2c3635;} #ddmenu_hebrewu li ul { margin: 3px 0 0 10px; padding: 0; position: absolute; visibility: hidden; }

#ddmenu_hebrewu li ul li { display:inline; }

#ddmenu_hebrewu li ul li a { width: auto; background: none; display: inline; color: black; font: 20px Calibri, Calibri; padding: 2px 10px; }

#ddmenu_hebrewu li ul li a:hover { background: none; color: #106375; padding: 2px 10px; }


/* Content position and style */ .columnhuji.middle { width: 80%; background-color:#edeadc; color:black; Padding-left:10%; Padding-top:3%;

}

h2.ahuji { font: 30px Calibri, Calibri; text-align: center; }

h2.chuji { font: 20px Calibri, Calibri; text-align: center; }

p.ahuji { font: 18px Calibri, Calibri; margin-left:5%; margin-right:5%; text-align:justify; }

p.bhuji { font: 18px Calibri, Calibri; text-align:center; }

/* Group image style */ .centerhujiimg { margin: auto; width: 60%; text-align: center; }

/* Responsive navbar for small screens */ #ddmenu_hebrewu .icon { display: none; color:white; } 


   .b_huji_small_subnav {

width: 100%; background:#edeadc; height:35px; font: 15px Calibri, Calibri; color: black; border:none; 

	}

   .b_huji_small_subnav:hover {

width: 100%; background:#262d2e; height:35px; font: 15px Calibri, Calibri; color:white; border:none; 

	}

	.huji_small_navbar {

width: 100%; background:#262d2e; height:35px; font: 15px Calibri, Calibri; color: white; border:none; }

.active, .huji_small_navbar:hover { background-color:#131717; }

.huji_small_navbar_panel { display: none; background-color: white; overflow: hidden; }

@media screen and (max-width: 1000px) { #ddmenu_hebrewu li {display: none;} #ddmenu_hebrewu a.icon { float: left; display: block; } } 

 	.huji_smallnav {

display:none; 

 	}
 
	.b_huji_small_nav {

width: 100%; background:#262d2e; height:35px; font: 15px Calibri, Calibri; color: white; border:none; display:none; 

	}

@media screen and (min-width: 1000px) {

.huji_small_navbar { display:none;

}

.b_huji_small_subnav { width: 100%; background:#edeadc; height:35px; font: 15px Calibri, Calibri; color: black; border:none; 

	}

}