Difference between revisions of "Team:Aalto-Helsinki/CSS"

m (trying out new font)
(Undo revision 296376 by Hyrkkal1 (talk))
 
(68 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
/*--------------------------------------------------------------------------------------------------*/
 
/*--------------------------------------------------------------------------------------------------*/
 
/* Fonts and texts */
 
/* Fonts and texts */
 +
 +
@font-face {
 +
    font-family: Arimo;
 +
    src: url(https://static.igem.org/mediawiki/2015/a/a4/Aalto-Helsinki_arimo_regular.ttf);
 +
    src: url('https://static.igem.org/mediawiki/2015/1/17/Aalto-Helsinki_arimo.regular.eot') format('embedded-opentype'),
 +
    src: url('https://static.igem.org/mediawiki/2015/5/52/Aalto-Helsinki_arimowoff.regular.woff') format('woff');
 +
}
 +
 +
@font-face {
 +
    font-family: LeagueGothic;
 +
    src: url(https://static.igem.org/mediawiki/2015/2/2f/Aalto-Helsinki_leaguegothic-regular-webfont.woff) format('woff');
 +
    src: url('https://static.igem.org/mediawiki/2015/b/be/LeagueGothic-Regular.otf') format ('open-type'),
 +
    src: url('https://static.igem.org/mediawiki/2015/7/77/Aalto-Helsinki_leaguegothic-regular.eot') format('embedded-opentype');
 +
}
  
 
p{
 
p{
−
   font-family: Arimo;
+
   font-family: Arimo, sans-serif;
−
   font-size: 10px;
+
   font-size: 14px;
 
}
 
}
 
h1{
 
h1{
−
   font-size: 30px;
+
  font-family: LeagueGothic, sans-serif;
 +
   font-size: 34px;
 
   border-style: none;
 
   border-style: none;
 
}
 
}
 
h2{
 
h2{
−
   font-size: 26px;
+
  font-family: LeagueGothic, sans-serif;
 +
   font-size: 27px;
 
   border-style: none;
 
   border-style: none;
 
}
 
}
 
h3{
 
h3{
−
   font-size: 24px;
+
  font-family: LeagueGothic, sans-serif;
 +
   font-size: 23px;
 
   border-style: none;
 
   border-style: none;
 +
}
 +
h4{
 +
  font-family: LeagueGothic, sans-serif;
 +
  font-size: 17px;
 +
  border-style: none;
 +
}
 +
 +
figcaption{
 +
  font-family: Arimo, sans-serif;
 +
  font-size: 13px;
 +
}
 +
 +
.inlinetext{
 +
  display: inline;
 
}
 
}
  
Line 48: Line 79:
 
   border: 0px;
 
   border: 0px;
 
   position: relative;
 
   position: relative;
 +
  padding-bottom:0;
 +
  margin-bottom:0;
 
}
 
}
  
Line 59: Line 92:
 
   color: #333;
 
   color: #333;
 
   text-align: center;
 
   text-align: center;
−
 
 
−
}
 
−
/* bit bigger text all over */
 
−
p{
 
−
  font-size: 110%;
 
 
}
 
}
  
Line 72: Line 100:
 
   height: 100%; /* For at least Firefox */
 
   height: 100%; /* For at least Firefox */
 
   min-height: 100%;
 
   min-height: 100%;
 +
  margin-bottom:0;
 
}
 
}
 
.site-wrapper-inner {
 
.site-wrapper-inner {
 
   display: table-cell;
 
   display: table-cell;
 
   vertical-align: top;
 
   vertical-align: top;
 +
  margin-bottom:0;
 
}
 
}
 
.cover-container {
 
.cover-container {
Line 113: Line 143:
  
 
/*-------------------------------------------------------------------------------------------------*/
 
/*-------------------------------------------------------------------------------------------------*/
−
/* Journal settings */
+
/* LabBook settings, the table, td and tr settings are in LabBook page! */
  
−
/* The two columns on the page; text entries on the left and pictures on the right. */
 
−
.leftentries{
 
−
  float:left;
 
−
  width:69%;
 
−
}
 
  
−
.rightpics{
+
.white{
−
   float:right;
+
   background: url(https://static.igem.org/mediawiki/2015/6/63/Aalto-Helsinki_arrow_white.png) no-repeat;
−
  width:29%;
+
 
}
 
}
 +
.blue{
 +
  background: url(https://static.igem.org/mediawiki/2015/9/95/Aalto-Helsinki_arrow_blue.png) no-repeat;
 +
  color:white;
 +
}
 +
.red{
 +
  background: url(https://static.igem.org/mediawiki/2015/f/f2/Aalto-Helsinki_arrow_red.png) no-repeat;
 +
  color:white;
 +
}
 +
.whiteup{
 +
  background: url(https://static.igem.org/mediawiki/2015/f/ff/Aalto-Helsinki_arrow_white_up.png) no-repeat;
 +
}
 +
.blueup{
 +
  background: url(https://static.igem.org/mediawiki/2015/9/9b/Aalto-Helsinki_arrow_blue_up.png) no-repeat;
 +
  color:white;
 +
}
 +
.redup{
 +
  background: url(https://static.igem.org/mediawiki/2015/4/46/Aalto-Helsinki_arrow_red_up.png) no-repeat;
 +
  color:white;
 +
}
 +
.whitedown{
 +
  background: url(https://static.igem.org/mediawiki/2015/4/43/Aalto-Helsinki_arrow_white_down.png) no-repeat;
 +
}
 +
.bluedown{
 +
  background: url(https://static.igem.org/mediawiki/2015/e/ea/Aalto-Helsinki_arrow_blue_down.png) no-repeat;
 +
  color:white;
 +
}
 +
.reddown{
 +
  background: url(https://static.igem.org/mediawiki/2015/0/0c/Aalto-Helsinki_arrow_red_down.png) no-repeat;
 +
  color:white;
 +
}
 +
.arrow{
 +
  vertical-align: middle;
 +
  text-align: center;
 +
}
 +
.bottomline{
 +
  border-bottom: 1px solid black;
 +
}
 +
.rightline{
 +
  border-right: 1px solid black;
 +
}
 +
.first{
 +
  width=90px;
 +
}
 +
.heightdiv{
 +
  height: 90px;
 +
  overflow:hidden;
 +
}
 +
.heightdivlow{
 +
  height: 5px !important;
 +
}
 +
 +
/*-------------------------------------------------------------------------------------------------*/
 +
/* Journal settings */
 +
  
 
/*This surrounds the whole entry, has a purple line on the left side*/
 
/*This surrounds the whole entry, has a purple line on the left side*/
Line 198: Line 276:
 
/* Team settings */
 
/* Team settings */
  
−
/*Teampic settings*/
 
  
−
.teampicdiv{
+
/*Styling of member texts.*/
−
  height: 400px;
+
.member{
−
   margin: 20px;
+
   padding-bottom: 20px;
 
}
 
}
−
.teampic{
+
.membername{
−
   max-height:100%;
+
   border-style: none;
−
   max-width: 100%;
+
   padding-top:0;
−
  display: block;
+
−
  margin-left: auto;
+
−
  margin-right: auto;
+
 
}
 
}
−
/*Whole member style*/
+
.memberstudy{
−
.teammember{
+
   margin-top:0;
−
  clear: both;
+
   padding-top:0;
−
   margin-bottom: 30px;
+
−
   margin-top: 30px;
+
 
}
 
}
−
 
+
.memberparagraph{
−
/*Team member pic settings*/
+
   margin-top: 10px;
−
.left{
+
−
  float:left;
+
−
  margin-right:30px;
+
−
}
+
−
.right{
+
−
  float:right;
+
−
  margin-left:30px;
+
−
}
+
−
.memberpicdiv{
+
−
  width: 300px;
+
−
   margin-bottom: 30px;
+
 
}
 
}
 
.memberpic{
 
.memberpic{
−
   max-height:100%;
+
   vertical-align:middle;
−
  max-width: 100%;
+
 
}
 
}
−
 
+
.vertical-align {
−
/*Styling of member text.*/
+
    display: flex;
−
.membertext{
+
    align-items: center;
−
  margin-bottom: 30px;
+
−
  margin-top: 30px;
+
−
}
+
−
.membername{
+
−
  border-style: none;
+
−
  margin-top: 20px;
+
−
}
+
−
/*Styling the description of each member.*/
+
−
.memberdescription{
+
−
  margin-top: 10px;
+
−
  color: #4d4b4b;
+
 
}
 
}
  
 
/*--------------------------------------------------------------------------------------------------*/
 
/*--------------------------------------------------------------------------------------------------*/
 
/* Main menu settings */
 
/* Main menu settings */
−
 
+
#primary_nav_wrap{
−
#centeredmenu {
+
  margin-top:15px
 
   clear:both;
 
   clear:both;
 
   float:left;
 
   float:left;
−
   margin-top:100;  
+
   margin-bottom: 3%;
−
   margin-bottom: 100;
+
   /*margin-left: auto;
−
   margin-left: 10%;
+
  margin-right:auto;*/
 +
   margin-left: -10% !important;
 
   padding:0;
 
   padding:0;
 
   border-top:2px solid #000; /* black line above menu */
 
   border-top:2px solid #000; /* black line above menu */
 
   border-bottom:2px solid #000; /* black line below menu */
 
   border-bottom:2px solid #000; /* black line below menu */
−
   width:80%;
+
   width:120% !important;
−
   font-family:Verdana, Geneva, sans-serif; /* Menu font */
+
   font-family: LeagueGothic; /* Menu font */
−
   font-size:90%; /* Menu text size */
+
   font-weight:normal;
−
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
+
   z-index:5; /* This makes the dropdown menus appear above the page content below */
 
   position:relative;
 
   position:relative;
 
}
 
}
−
 
+
#primary_nav_wrap ul{
−
/* Top menu items */
+
−
#centeredmenu ul {
+
 
   margin:0;
 
   margin:0;
 
   padding:0;
 
   padding:0;
Line 279: Line 327:
 
   right:50%;
 
   right:50%;
 
}
 
}
−
#centeredmenu ul li {
+
#primary_nav_wrap ul a{
−
  margin:0 0 0 1px;
+
−
  padding:0;
+
−
  float:left;
+
−
  position:relative;
+
−
  left:50%;
+
−
  top:1px;
+
−
}
+
−
#centeredmenu ul li a {
+
 
   display:block;
 
   display:block;
 
   margin:0;
 
   margin:0;
Line 296: Line 336:
 
   text-decoration:none;
 
   text-decoration:none;
 
   color:black;
 
   color:black;
−
   font-weight:bold;
+
   /*font-weight:bold;*/
 
   border-bottom:1px solid black;
 
   border-bottom:1px solid black;
 
}
 
}
−
#centeredmenu ul li a:hover {
+
#primary_nav_wrap ul a:hover{
 
   background:white; /* Top menu items background colour */
 
   background:white; /* Top menu items background colour */
−
  color:black;
 
−
  border-bottom:1px solid black;
 
−
}
 
−
#centeredmenu ul li:hover a,
 
−
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
 
−
  background:white; /* Top menu items background colour when hovered*/
 
 
   color:gray;
 
   color:gray;
 
   border-bottom:1px solid black;
 
   border-bottom:1px solid black;
 
}
 
}
−
 
+
#primary_nav_wrap ul li{
−
/* Submenu items */
+
  margin:0 0 0 1px;
−
#centeredmenu ul ul {
+
  padding:0;
 +
  float:left;
 +
  position:relative;
 +
  left:50%;
 +
  top:1px;
 +
}
 +
#primary_nav_wrap ul li:hover{
 +
background:#f6f6f6
 +
}
 +
#primary_nav_wrap ul ul{
 
   display:none; /* Sub menus are hiden by default */
 
   display:none; /* Sub menus are hiden by default */
 
   position:absolute;
 
   position:absolute;
−
   top:2em;
+
   top:100%;
−
   left:0;
+
   left:auto;
−
  right:auto; /*resets the right:50% on the parent ul */
+
  /*right:auto; *//*resets the right:50% on the parent ul */
−
   width:10em; /* width of the drop-down menus */
+
   width:10em;
 
}
 
}
−
#centeredmenu ul ul li {
+
#primary_nav_wrap ul ul li{
−
  left:auto; /*resets the left:50% on the parent li */
+
float:none;
−
  margin:0; /* Reset the 1px margin from the top menu */
+
width:200px
−
  clear:left;
+
−
  width:100%;
+
 
}
 
}
−
/*Submenu items when they can be seen, not when hovered over them*/
+
#primary_nav_wrap ul ul a{
−
#centeredmenu ul ul li a,
+
line-height:120%;
−
#centeredmenu ul li.active li a,
+
padding:10px 15px;
−
#centeredmenu ul li:hover ul li a,
+
        font-size: 1em;
−
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
+
−
  font-size:1em;
+
−
  font-weight:normal; /* resets the bold set for the top level menu items */
+
−
  background:white;
+
−
  color:gray;
+
−
  line-height:1.4em; /* overwrite line-height value from top menu */
+
−
  border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
+
 
}
 
}
−
/*Submenu items when hovered over them*/
+
#primary_nav_wrap ul ul ul{
−
#centeredmenu ul ul li a:hover,
+
top:0;
−
#centeredmenu ul li.active ul li a:hover,
+
left:55%;
−
#centeredmenu ul li:hover ul li a:hover,
+
−
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
+
−
  background:white; /* Sub menu items background colour */
+
−
  color:black;
+
 
}
 
}
−
 
+
#primary_nav_wrap ul li:hover > ul{
−
/* Flip the last submenu so it stays within the page */
+
display:block
−
#centeredmenu ul ul.last {
+
−
  left:auto; /* reset left:0; value */
+
−
  right:0; /* Set right value instead */
+
 
}
 
}
  
−
/* Make the sub menus appear on hover */
+
/*--------------------------------------------------------------------------------------------------*/
−
#centeredmenu ul li:hover ul,
+
/* Side navigation on the top always! */
−
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
+
 
−
  display:block; /* Show the sub menus */
+
#sidenav {
 +
    z-index: 10 !important;
 
}
 
}
 +
 
/*---------------------------------------------------------------------------------------------------*/
 
/*---------------------------------------------------------------------------------------------------*/
  

Latest revision as of 12:59, 17 September 2015


/*--------------------------------------------------------------------------------------------------*/ /* Fonts and texts */

@font-face { 

   font-family: Arimo;
   src: url(https://static.igem.org/mediawiki/2015/a/a4/Aalto-Helsinki_arimo_regular.ttf);
   src: url('https://static.igem.org/mediawiki/2015/1/17/Aalto-Helsinki_arimo.regular.eot') format('embedded-opentype'),
   src: url('https://static.igem.org/mediawiki/2015/5/52/Aalto-Helsinki_arimowoff.regular.woff') format('woff');

}

@font-face { 

   font-family: LeagueGothic;
   src: url(https://static.igem.org/mediawiki/2015/2/2f/Aalto-Helsinki_leaguegothic-regular-webfont.woff) format('woff');
   src: url('https://static.igem.org/mediawiki/2015/b/be/LeagueGothic-Regular.otf') format ('open-type'),
   src: url('https://static.igem.org/mediawiki/2015/7/77/Aalto-Helsinki_leaguegothic-regular.eot') format('embedded-opentype');

}

p{ 

 font-family: Arimo, sans-serif;
 font-size: 14px;

} h1{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 34px;
 border-style: none;

} h2{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 27px;
 border-style: none;

} h3{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 23px;
 border-style: none;

} h4{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 17px;
 border-style: none;

}

figcaption{ 

 font-family: Arimo, sans-serif;
 font-size: 13px;

}

.inlinetext{ 

 display: inline;

}

/*--------------------------------------------------------------------------------------------------*/ /* Links */ a:focus, a:hover { 

 color: #333;

} a, a:link, a:visited{ 

 color: #7a7a7a;

}


/*--------------------------------------------------------------------------------------------------*/ /* 

* Base structure
*/

/*This was a ready heading on our page, we don't want it and this is the only way to not use it*/ .firstHeading{ 

 display: none;

} /*Tried to make the content width the whole page... Not the stupid box*/

  1. globalWrapper, #content{
 width: 100%;
 border: 0px;
 position: relative;
 padding-bottom:0;
 margin-bottom:0;

}

html, body { 

 height: 100%;
 /*background: url("../images/background.png") no-repeat;*//*We don't currently have our background image*/
 background-size: 100% 180%;

} body { 

 color: #333;
 text-align: center;

}

/* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { 

 display: table;
 width: 100%;
 height: 100%; /* For at least Firefox */
 min-height: 100%;
 margin-bottom:0;

} .site-wrapper-inner { 

 display: table-cell;
 vertical-align: top;
 margin-bottom:0;

} .cover-container { 

 margin-top: 140px;
 margin-right: auto;
 margin-left: auto;

} .cover2-container { 

 margin-top: 50px;
 margin-right: auto;
 margin-left: auto;

} .inner-container { 

 margin-top: 100px;
 margin-right: 20%;
 margin-left: 20%;
 text-align: left;

} /* Padding for spacing */ .inner { 

 padding: 30px;

}


/*--------------------------------------------------------------------------------------------------*/ /* 

* Cover
*/

.cover { 

 padding: 0 20px;

} .cover .btn-lg { 

 padding: 10px 20px;
 font-weight: bold;

}

/*-------------------------------------------------------------------------------------------------*/ /* LabBook settings, the table, td and tr settings are in LabBook page! */


.white{ 

 background: url(Aalto-Helsinki_arrow_white.png) no-repeat;

} .blue{ 

 background: url(Aalto-Helsinki_arrow_blue.png) no-repeat;
 color:white;

} .red{ 

 background: url(Aalto-Helsinki_arrow_red.png) no-repeat;
 color:white;

} .whiteup{ 

 background: url(Aalto-Helsinki_arrow_white_up.png) no-repeat;

} .blueup{ 

 background: url(Aalto-Helsinki_arrow_blue_up.png) no-repeat;
 color:white;

} .redup{ 

 background: url(Aalto-Helsinki_arrow_red_up.png) no-repeat;
 color:white;

} .whitedown{ 

 background: url(Aalto-Helsinki_arrow_white_down.png) no-repeat;

} .bluedown{ 

 background: url(Aalto-Helsinki_arrow_blue_down.png) no-repeat;
 color:white;

} .reddown{ 

 background: url(Aalto-Helsinki_arrow_red_down.png) no-repeat;
 color:white;

} .arrow{ 

 vertical-align: middle; 
 text-align: center;

} .bottomline{ 

 border-bottom: 1px solid black;

} .rightline{ 

 border-right: 1px solid black;

} .first{ 

 width=90px;

} .heightdiv{ 

 height: 90px; 
 overflow:hidden;

} .heightdivlow{ 

 height: 5px !important;

}

/*-------------------------------------------------------------------------------------------------*/ /* Journal settings */


/*This surrounds the whole entry, has a purple line on the left side*/ .entry{ 

 border-left-style: solid;
 border-color: #639FAB;
 border-width: 2px;
 margin: 0px;
 padding: 10px 0 0 25px; 
 position: relative;
 z-index: 0;
 /*padding-left: 5px;
 border-left-style: solid;*/

}

/*The small picture in front of every entry*/ .entrylogo{ 

 width: 16px;
 left: -8px;
 z-index: 1;
 position: absolute;

} .entrylogobig{ 

 width: 24px;
 left: -12px;
 z-index: 1;
 position: absolute;

} /*Styling for the text in the entry*/ .entrytext{ 

 display: inline;

} /*How the day is displayed*/ .day{ 

 border-style: none;
 display: inline;

} /*Styling for month*/ .month{ 

 height:35px;
 padding: 0 0 0 5px; 
 position: relative;
 z-index: 0;
 border-left-style: solid;
 border-color: #639FAB;
 border-width: 2px;

} .monthlogo{ 

 display:inline;
 width: 60px;
 left: -30px;
 z-index: 2;
 position: absolute;

} /*Styling the pictures in the journal so that there is also the left line so that it aligns with others.*/ .journalpic{ 

 width:95%;
 /*height:30%;*/
 float:right; /*trying out photo positions */
 margin:10px 0 0 5px;
 /*padding: 0 0 0 5px;*/

} /*Journal pics when mouse is over them*/ /*.journalpic:hover{ 

 width:50%;
 height:50%;
 padding: 0 25% 0 25%;
 border-left-style: solid;
 border-color: #639FAB;

}*/

/*--------------------------------------------------------------------------------------------------*/ /* Team settings */


/*Styling of member texts.*/ .member{ 

 padding-bottom: 20px;

} .membername{ 

 border-style: none;
 padding-top:0;

} .memberstudy{ 

 margin-top:0;
 padding-top:0;

} .memberparagraph{ 

 margin-top: 10px;

} .memberpic{ 

 vertical-align:middle;

} .vertical-align { 

   display: flex;
   align-items: center;

}

/*--------------------------------------------------------------------------------------------------*/ /* Main menu settings */

  1. primary_nav_wrap{
  margin-top:15px
  clear:both;
  float:left;
  margin-bottom: 3%;
  /*margin-left: auto;
  margin-right:auto;*/
  margin-left: -10% !important;
  padding:0;
  border-top:2px solid #000; /* black line above menu */
  border-bottom:2px solid #000; /* black line below menu */
  width:120% !important;
  font-family: LeagueGothic; /* Menu font */
  font-weight:normal;
  z-index:5; /* This makes the dropdown menus appear above the page content below */
  position:relative;

}

  1. primary_nav_wrap ul{
  margin:0;
  padding:0;
  list-style:none;
  float:right;
  position:relative;
  right:50%;

}

  1. primary_nav_wrap ul a{
  display:block;
  margin:0;
  padding:.6em .5em .4em;
  font-size:1.3em;
  line-height:1em;
  background:white;
  text-decoration:none;
  color:black;
  /*font-weight:bold;*/
  border-bottom:1px solid black;

}

  1. primary_nav_wrap ul a:hover{
  background:white; /* Top menu items background colour */
  color:gray;
  border-bottom:1px solid black;

}

  1. primary_nav_wrap ul li{
  margin:0 0 0 1px;
  padding:0;
  float:left;
  position:relative;
  left:50%;
  top:1px;

}

  1. primary_nav_wrap ul li:hover{

background:#f6f6f6 }

  1. primary_nav_wrap ul ul{
  display:none; /* Sub menus are hiden by default */
  position:absolute;
  top:100%;
  left:auto;
 /*right:auto; *//*resets the right:50% on the parent ul */
  width:10em;

}

  1. primary_nav_wrap ul ul li{

float:none; width:200px }

  1. primary_nav_wrap ul ul a{

line-height:120%; padding:10px 15px; 

       font-size: 1em;

}

  1. primary_nav_wrap ul ul ul{

top:0; left:55%; }

  1. primary_nav_wrap ul li:hover > ul{

display:block }

/*--------------------------------------------------------------------------------------------------*/ /* Side navigation on the top always! */

  1. sidenav {
   z-index: 10 !important;

}

/*---------------------------------------------------------------------------------------------------*/

/* 

* Affix and center
*/

@media (min-width: 768px) { 

   /* Pull out the header and footer */
 
 .mastfoot {
   position: relative;
   bottom: 0;
 }
 /* Start the vertical centering */
 .site-wrapper-inner {
   vertical-align: middle;
 }
 /* Handle the widths */
 .masthead,
 .cover-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 },
 .mastfoot,
 .cover2-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 }

}

@media (min-width: 992px) { 

 .masthead,
 .cover-container {
   width: 700px;
 }
 .mastfoot,
 .cover2-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 }

}