Difference between revisions of "Template:UBonn HBRS/css/main"

(Fix)
(Fix images)
Line 117: Line 117:
 
}
 
}
  
−
.img-100, .img-100 img {
+
.img-100, .img-100 img, .img-50 img {
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 133: Line 133:
 
width: 33.3333%;
 
width: 33.3333%;
 
}
 
}
−
.half-img {
+
.img-50 {
 
width: 100%;
 
width: 100%;
 
float: none;
 
float: none;

Revision as of 22:54, 12 October 2016

/** Main Styles iGEM-Team Bonn

feel free to use stuff from here but please give credit

  • /

/* * * * * * * * * * * * * * * * * * * * * * * * * Team Bonn Template

  • * * * * * * * * * * * * * * * * * * * * * * * */

html { position: relative; }

body { margin-bottom: 60px !important; padding-top: 16px !important; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; background-color: #FFF; }

header { padding: 12px 0; background: #F8F8F8; border-bottom: 1px solid #EEE; }

.footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #EEE; }

  1. scrollTop img {

display: inline-block; height: 1em; margin-bottom: 4px; vertical-align: middle; transition: 100ms linear; filter: brightness( 90% ); }

  1. scrollTop:hover img, #scrollTop:focus img {

filter: brightness( 70% ); }

.container .text-muted { margin: 20px 0; }

div.container.main { margin: 12px auto; }

.main { margin: 0 auto !important; padding-bottom: 15px; background: #FFF; }

.nav-link-img a { display: block; background: transparent; transition: 200ms linear; }

.nav-link-img:hover a, .nav-link-img:focus a { background: #FFF; }

.nav-link-img img { transition: 200ms linear; filter: grayscale( 100% ); filter: brightness( 68% ); }

.nav-link-img.active img, .nav-link-img:hover img, .nav-link-img:focus img { filter: grayscale( 0% ); filter: brightness( 100% ); }

  1. sideNav a {

color: #337AB7; }

  1. sideNav a:hover {

color: #23527C; }

.blue-title { color: #39C; }

  1. logo, .nav-link-img {

padding: 0.4% !important; }

  1. logo {

text-align: center; }

  1. title {

line-height: 1.1em; color: #222; }

.img-50 { width: 50%; float: left; }

.img-50.right { float: right; }

.img-100, .img-100 img, .img-50 img { width: 100%; }

/** 

* MEDIA-QUERIES
*/

@media (max-width: 767px) { #title { margin: 4% 0 0 0; text-align: center; font-size: 4em; } #logo>img { width: 33.3333%; } .img-50 { width: 100%; float: none; } }

@media (min-width: 768px) { #title { margin: 1% 0 0 0; font-size: 1.6em; } }

@media (min-width: 992px) { #title { margin: 1.4% 0 0 0; font-size: 2em; } }

@media (min-width: 1200px) { #title { margin: 1.8% 0 0 0; font-size: 2.2em; } }

/** 

* CALLOUTS
*/

.callout { border-color: #EEE; border-image: none; border-radius: 3px; border-style: solid; border-width: 1px 1px 1px 5px; margin: 20px 0; padding: 20px; background: #FFF; }

.callout-info { border-left-color: #1b809e; }

/** 

* SIDENAV
*/
  1. sideNav {margin-top: 20px}
  2. sideNav li>a {padding: 6px 0 6px 6px}
  3. sideNav li>a:hover {padding-left: 4px;background: transparent;border-left: 2px solid #39C}
  4. sideNav li.active>a {padding-left: 4px;font-weight: bold;border-left: 2px solid #39C}

.NsideNav_h3, .sideNav_h4 {display: none !important} .sideNav_h3 {padding-left: 12px}

h1, h2, h3 {margin: 0; padding: 20px 0 10px 0}