Difference between revisions of "Team:Aalto-Helsinki/CSS"
m |
(changed the navbar) |
||
Line 236: | Line 236: | ||
/*--------------------------------------------------------------------------------------------------*/ | /*--------------------------------------------------------------------------------------------------*/ | ||
/* Main menu settings */ | /* Main menu settings */ | ||
− | + | #primary_nav_wrap{ | |
− | # | + | margin-top:15px |
clear:both; | clear:both; | ||
float:left; | float:left; | ||
− | + | margin-bottom: 3%; | |
− | margin-bottom: | + | |
margin-left: auto; | margin-left: auto; | ||
margin-right:auto; | margin-right:auto; | ||
Line 253: | Line 252: | ||
position:relative; | position:relative; | ||
} | } | ||
− | + | #primary_nav_wrap ul{ | |
− | + | ||
− | # | + | |
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
Line 263: | Line 260: | ||
right:50%; | right:50%; | ||
} | } | ||
− | # | + | #primary_nav_wrap ul a{ |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display:block; | display:block; | ||
margin:0; | margin:0; | ||
Line 283: | Line 272: | ||
border-bottom:1px solid black; | border-bottom:1px solid black; | ||
} | } | ||
− | # | + | #primary_nav_wrap ul a:hover{ |
background:white; /* Top menu items background colour */ | background:white; /* Top menu items background colour */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
color:gray; | color:gray; | ||
border-bottom:1px solid black; | border-bottom:1px solid black; | ||
} | } | ||
− | + | #primary_nav_wrap ul li{ | |
− | + | margin:0 0 0 1px; | |
− | # | + | 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: | + | top:100%; |
− | left: | + | left:auto; |
− | + | /*right:auto; *//*resets the right:50% on the parent ul */ | |
− | width:10em; | + | width:10em; |
} | } | ||
− | # | + | #primary_nav_wrap ul ul li{ |
− | + | float:none; | |
− | + | width:200px | |
− | + | ||
− | + | ||
} | } | ||
− | + | #primary_nav_wrap ul ul a{ | |
− | # | + | line-height:120%; |
− | + | padding:10px 15px; | |
− | + | font-size: 1em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #primary_nav_wrap ul ul ul{ | |
− | + | top:0; | |
− | # | + | left:55%; |
− | + | ||
− | + | ||
} | } | ||
− | + | #primary_nav_wrap ul li:hover > ul{ | |
− | + | display:block | |
− | # | + | |
− | + | ||
− | + | ||
} | } | ||
/*---------------------------------------------------------------------------------------------------*/ | /*---------------------------------------------------------------------------------------------------*/ |
Revision as of 11:20, 11 August 2015
/*--------------------------------------------------------------------------------------------------*/
/* Fonts and texts */
@font-face {
font-family: Arimo; src: url(https://static.igem.org/mediawiki/2015/a/a4/Aalto-Helsinki_arimo_regular.ttf);
}
@font-face {
font-family: LeagueGothic; src: url(https://static.igem.org/mediawiki/2015/b/be/LeagueGothic-Regular.otf);
}
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*/
- globalWrapper, #content{
width: 100%; border: 0px; position: relative;
}
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%;
} .site-wrapper-inner {
display: table-cell; vertical-align: top;
} .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;
}
/*-------------------------------------------------------------------------------------------------*/ /* 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 */
- primary_nav_wrap{
margin-top:15px clear:both; float:left; margin-bottom: 3%; margin-left: auto; margin-right:auto; padding:0; border-top:2px solid #000; /* black line above menu */ border-bottom:2px solid #000; /* black line below menu */ width:100%; font-family: LeagueGothic; /* Menu font */ font-weight:normal; z-index:1000; /* This makes the dropdown menus appear above the page content below */ position:relative;
}
- primary_nav_wrap ul{
margin:0; padding:0; list-style:none; float:right; position:relative; right:50%;
}
- 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;
}
- primary_nav_wrap ul a:hover{
background:white; /* Top menu items background colour */ color:gray; border-bottom:1px solid black;
}
- primary_nav_wrap ul li{
margin:0 0 0 1px; 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 */ position:absolute; top:100%; left:auto; /*right:auto; *//*resets the right:50% on the parent ul */ width:10em;
}
- primary_nav_wrap ul ul li{
float:none; width:200px }
- primary_nav_wrap ul ul a{
line-height:120%; padding:10px 15px;
font-size: 1em;
}
- primary_nav_wrap ul ul ul{
top:0; left:55%; }
- primary_nav_wrap ul li:hover > ul{
display:block } /*---------------------------------------------------------------------------------------------------*/
/*
* 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 */ }
}