Evan pepper (Talk | contribs) |
Evan pepper (Talk | contribs) |
||
(87 intermediate revisions by 4 users not shown) | |||
Line 4: | Line 4: | ||
/* This styling below is for the UCSC iGEM 2017 Homepage */ | /* This styling below is for the UCSC iGEM 2017 Homepage */ | ||
− | |||
− | |||
/* This styling below was initially from the Team:UCSC/Assets/Test_Style_css stylesheet */ | /* This styling below was initially from the Team:UCSC/Assets/Test_Style_css stylesheet */ | ||
Line 12: | Line 10: | ||
max-width: 100%; | max-width: 100%; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
− | |||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*styles consistent across pages below:*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | |||
+ | /*.pageflow { | ||
+ | margin-right: 0px; | ||
+ | margin-left: 0px; | ||
+ | margin-top:30px; | ||
+ | background: honeydew; | ||
+ | }*/ | ||
+ | |||
+ | /*h1 { | ||
+ | font-family: 'objektiv-mk1'!important; | ||
+ | font-size: 300%; | ||
+ | font-weight: 300 !important; | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | font-size: 200%; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #page { | ||
+ | background: honeydew; | ||
+ | } | ||
+ | |||
+ | .proj-button { | ||
+ | position: relative; | ||
+ | width: 10%; | ||
+ | } | ||
+ | |||
+ | .proj-button-image { | ||
+ | opacity: 1; | ||
+ | display: inline-block; | ||
+ | width: 14%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .proj-button-desc { | ||
+ | transition: .5s ease; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | background: transparent; | ||
+ | transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%) | ||
+ | } | ||
+ | |||
+ | .proj-button:hover .proj-button-image { | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | |||
+ | .proj-button:hover .proj-button-desc { | ||
+ | opacity: 0.6; | ||
+ | } | ||
+ | |||
+ | .overlap-button-text { | ||
+ | background-color: transparent; | ||
+ | color: black; | ||
+ | font-size: 20px; | ||
+ | font-family: "Objektiv-mk1" !important; | ||
+ | font-weight: 600 !important; | ||
+ | padding: 16px 32px; | ||
+ | } | ||
+ | |||
+ | .pagagraph { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | p { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | font-size: large !important; | ||
+ | } | ||
+ | |||
+ | .firstword { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | font-size: 100px; | ||
+ | } | ||
+ | |||
+ | .titleimg { | ||
+ | vertical-align: middle; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .titlebox { | ||
+ | margin-left: 200px !important; | ||
+ | }*/ | ||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | /*@media (min-width: 1144px) { | ||
+ | .container { | ||
+ | width: 70% !important; | ||
+ | } | ||
+ | .text-container { | ||
+ | width: 60%; | ||
+ | padding-left: 15px; | ||
+ | padding-right: 15px; | ||
+ | } | ||
+ | .titlebox { | ||
+ | width: 80%; | ||
+ | } | ||
+ | figcaption { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | }*/ | ||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | /*@media (max-width: 1144px) { | ||
+ | |||
+ | .titlebox { | ||
+ | margin-left: auto !important; | ||
+ | } | ||
+ | |||
+ | .text-container { | ||
+ | width: 80%; | ||
+ | padding-left: 15px; | ||
+ | padding-right: 15px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | margin-left: 20px !important; | ||
+ | margin-right: 20px !important; | ||
+ | font-size: medium !important; | ||
+ | } | ||
+ | }*/ | ||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | /*@media (max-width: 768px) { | ||
+ | |||
+ | .overlap-button-text { | ||
+ | background-color: rgba(94, 94, 94, 0.5); | ||
+ | border-radius: 60px; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .proj-button-image { | ||
+ | opacity: 1; | ||
+ | display: inline-block; | ||
+ | width: 30%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .proj-button-desc { | ||
+ | transition: .5s ease; | ||
+ | opacity: 1; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%) | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-family: 'objektiv-mk1'; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-family: 'objektiv-mk1'; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | .text-container { | ||
+ | width: 80%; | ||
+ | }*/ | ||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | /*@media (max-width: 576px) { | ||
+ | .proj-button-image { | ||
+ | opacity: 1; | ||
+ | display: inline-block; | ||
+ | width: 60%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .proj-button-desc { | ||
+ | transition: .5s ease; | ||
+ | opacity: 1; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%) | ||
+ | } | ||
+ | |||
+ | .firstword { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | font-size: 70px; | ||
+ | } | ||
+ | |||
+ | .titleimg { | ||
+ | vertical-align: middle; | ||
+ | width: 90%; | ||
+ | } | ||
+ | |||
+ | .text-container { | ||
+ | width: 100%; | ||
+ | margin-left: -15px; | ||
+ | margin-right: -15px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | font-family: 'objektiv-mk1' !important; | ||
+ | margin-left: 10px !important; | ||
+ | margin-right: 10px !important; | ||
+ | font-size: small !important; | ||
+ | } | ||
+ | }*/ | ||
+ | |||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*styles consistent across pages above:*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | |||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*styles consistent across header, and meet the team below:*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ | ||
+ | |||
+ | |||
+ | |||
#globalWrapper { | #globalWrapper { | ||
− | padding:0; | + | padding:0; |
+ | /*margin-bottom: -40px;*/ | ||
} | } | ||
+ | |||
.pad-top { | .pad-top { | ||
padding-top: 60px | padding-top: 60px | ||
Line 40: | Line 293: | ||
} | } | ||
+ | .page{ | ||
+ | background: honeydew; | ||
+ | } | ||
− | p { | + | /*p { |
− | font-weight: 300; | + | margin: 0px !important; |
+ | font-weight: 300 !important; | ||
line-height: 30px; | line-height: 30px; | ||
− | font-size: 120% | + | font-size: 120%; |
− | } | + | font-family: "Objektiv-mk1" !important; |
+ | }*/ | ||
.persondesc { | .persondesc { | ||
font-weight: 300; | font-weight: 300; | ||
Line 101: | Line 359: | ||
height: 100%; | height: 100%; | ||
border:none; | border:none; | ||
+ | margin: 0px; | ||
} | } | ||
Line 179: | Line 438: | ||
#content { | #content { | ||
− | padding:0; | + | padding:0; |
+ | /*margin-bottom: -50px;*/ | ||
} | } | ||
Line 234: | Line 494: | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
− | margin: | + | margin-top: 12px; |
+ | margin-bottom: 12px; | ||
} | } | ||
.face .profile, | .face .profile, | ||
Line 267: | Line 528: | ||
-webkit-filter: blur(10px) | -webkit-filter: blur(10px) | ||
} | } | ||
+ | |||
+ | .person-name { | ||
+ | font-family: 'Objektiv-mk1'; | ||
+ | font-weight: 300; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | background-color: rgba(0, 0, 0, 0.65); | ||
+ | } | ||
+ | |||
+ | @media (max-width: 768px) { | ||
+ | .person-name { | ||
+ | opacity: 1; | ||
+ | position: absolute; | ||
+ | top: -42px; | ||
+ | width: inherit; | ||
+ | height: auto; | ||
+ | background-color: rgba(0, 0, 0, 0); | ||
+ | } | ||
+ | .face:hover .profile, .profilehovered { | ||
+ | opacity: 0; | ||
+ | background-color: rgba(0, 0, 0, 0.65); | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 420px) { | ||
+ | .person-name { | ||
+ | opacity: 1; | ||
+ | position: absolute; | ||
+ | top: -42px; | ||
+ | width: inherit; | ||
+ | height: auto; | ||
+ | background-color: rgba(0, 0, 0, 0); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
.facen { | .facen { | ||
width: 250px; | width: 250px; | ||
Line 388: | Line 686: | ||
/* The styling below was initially within styles tags on the UCSC-Header template */ | /* The styling below was initially within styles tags on the UCSC-Header template */ | ||
#sideMenu, #top_title {display:none;} | #sideMenu, #top_title {display:none;} | ||
− | #content { | + | #content {} |
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | |||
body, | body, | ||
html{ | html{ | ||
margin: 0; | margin: 0; | ||
padding:0; | padding:0; | ||
− | font-family: ' | + | font-family: 'Objektiv-mk1', sans-serif; |
− | + | font-weight: 300; | |
+ | |||
overflow-x: hidden; | overflow-x: hidden; | ||
position: relative; | position: relative; | ||
Line 412: | Line 713: | ||
} | } | ||
#top-section{ | #top-section{ | ||
− | background:#48af5d; | + | background:#48af5d; /* green */ |
margin-left:0 !important; | margin-left:0 !important; | ||
width:100%; | width:100%; | ||
Line 460: | Line 761: | ||
height:56px; | height:56px; | ||
top:14px; | top:14px; | ||
− | background-color: #47a3da; | + | background-color: #47a3da; /* blue */ |
z-index:4; | z-index:4; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
Line 531: | Line 832: | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
.center-block { | .center-block { | ||
display: block; | display: block; | ||
Line 592: | Line 892: | ||
} | } | ||
− | body | + | body { |
− | + | font-family: 'Objektiv-mk1', sans-serif; | |
− | font-family: ' | + | font-weight: 300 !important; |
+ | top: 60px !important; | ||
+ | background: honeydew !important; | ||
} | } | ||
ul.nav a{ | ul.nav a{ | ||
Line 610: | Line 912: | ||
h2 { | h2 { | ||
color:green; | color:green; | ||
− | font-family: ' | + | font-family: 'Objektiv-mk1', sans-serif; |
+ | font-weight: 300; | ||
} | } | ||
h4 { | h4 { | ||
− | + | font-family: 'Objektiv-mk1', sans-serif; | |
− | font-family: ' | + | font-weight: 300; |
} | } | ||
.menu-item{ | .menu-item{ | ||
Line 621: | Line 924: | ||
li.menu-item{ | li.menu-item{ | ||
background: transparent !important; | background: transparent !important; | ||
− | padding-top: | + | padding-top: 18px; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
.logo { | .logo { | ||
− | + | margin-top: 0px; | |
+ | margin-left: 0px; | ||
} | } | ||
a:hover .green-effect{ | a:hover .green-effect{ | ||
Line 659: | Line 947: | ||
</style> | </style> | ||
+ | |||
+ | <!-- <script type="text/javascript"> | ||
+ | |||
+ | $('li.menu-item').on('click', function() { | ||
+ | $('ul.dropdown-menu').toggle(); | ||
+ | }); | ||
+ | </script> --> | ||
</html> | </html> |
Latest revision as of 17:46, 19 October 2017