Difference between revisions of "Team:Northwestern/css/home"

Line 5: Line 5:
 
margin-right: 5px;
 
margin-right: 5px;
 
margin-bottom: 20px;
 
margin-bottom: 20px;
padding-left: 110px;
+
padding-left: 120px;
 
padding-right: 110px;
 
padding-right: 110px;
 
font-family: josefin-sans;
 
font-family: josefin-sans;
font-style: normal;}
+
font-style: normal;
 +
}
 
#home a {
 
#home a {
 
color: #000000;
 
color: #000000;
Line 185: Line 186:
 
.ch-item:hover .ch-info p {
 
.ch-item:hover .ch-info p {
 
opacity: 1;
 
opacity: 1;
 +
}
 +
.refs {
 +
font-size: 9pt !important;
 
}
 
}
 
#home footer {
 
#home footer {
 
margin-top: 40px;
 
margin-top: 40px;
 +
margin-bottom: 100px;
 +
}
 +
#home video {
 +
width: 100%;
 +
height: 100%;
 +
}
 +
#home div video {
 +
margin-left: auto;
 +
margin-right: auto;
 
}
 
}

Revision as of 01:30, 17 October 2016

@charset "UTF-8";

  1. home {

margin-top: 20px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; padding-left: 120px; padding-right: 110px; font-family: josefin-sans; font-style: normal; }

  1. home a {

color: #000000; text-decoration: underline; }

  1. home a:hover {

color: #000000; font-style: italic; text-decoration: none; }

  1. home article .divider {

display: block; max-height: 30px; margin-top: 30px; margin-bottom: 30px; } .ch-grid { margin-right: 0; margin-left: 0; margin-bottom: 0; list-style: none; display: block; text-align: center; width: 100%; margin-top: 20px; padding-left: 0px; }

.ch-grid:after, .ch-item:before { content: ;

   display: table;

}

.ch-grid:after { clear: both; }

.ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; } .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

.ch-img-1 { background-image: url(T--Northwestern--OMVs.png); background-repeat: no-repeat; background-position: center center; background-size: cover; }

.ch-img-2 { background-image: url(T--Northwestern--NU_arch.png); background-repeat: no-repeat; background-position: center center; background-size: cover; }

.ch-img-3 { background-image: url(T--Northwestern--SaCas9.png); background-repeat: no-repeat; background-position: center center; background-size: contain; }

.ch-info { position: absolute; background: rgba(10,8,71, 0.8); width: inherit; height: inherit; border-radius: 50%; opacity: 0;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;

-webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0);

-webkit-backface-visibility: hidden;

}

.ch-info h3.ch-bubble { color: #fff !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-size: 22px !important; margin: 0 30px !important; padding: 45px 0 0 0 !important; height: 140px !important; font-family: josefin-sans;

       text-align: center !important;

text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); font-style: normal; font-weight: 100; }

.ch-info p { color: #fff; padding: 10px 5px !important; font-style: italic !important; margin: 0 30px !important; font-size: 12px !important;

       text-align: center !important;

border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; -webkit-transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s; -ms-transition: all 1s ease-in-out 0.4s; transition: all 1s ease-in-out 0.4s; font-family: josefin-sans; font-weight: 100; }

.ch-info p a.ch-bubble{ color: #fff !important; text-decoration: none !important; color: rgba(255,255,255,0.7) !important; font-style: normal !important;

       text-align: center !important;

font-weight: 700 !important; text-transform: uppercase !important; font-size: 9px !important; letter-spacing: 1px !important; padding-top: 4px !important; font-family: josefin-sans; }

.ch-info p a.ch-bubble:hover { color: #bf83a5 !important; text-decoration: none !important; font-style: normal !important; color: rgba(191,131,165, 0.8) !important; }

.ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } .ch-item:hover .ch-info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }

.ch-item:hover .ch-info p { opacity: 1; } .refs { font-size: 9pt !important; }

  1. home footer {

margin-top: 40px; margin-bottom: 100px; }

  1. home video {

width: 100%; height: 100%; }

  1. home div video {

margin-left: auto; margin-right: auto; }