Difference between revisions of "Team:UCSC/CSS-2"

 
(89 intermediate revisions by the same user not shown)
Line 14: Line 14:
 
#content {margin-left: 0px; margin-top: -9px; padding: 0px; width: 100%;}
 
#content {margin-left: 0px; margin-top: -9px; padding: 0px; width: 100%;}
 
#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;}
 +
#globalWrapper{padding-bottom: 0 !important;}
 
body {background-color: white;}
 
body {background-color: white;}
  
Line 25: Line 26:
 
   --third-bg-color: #D3D3D3; /* light grey */
 
   --third-bg-color: #D3D3D3; /* light grey */
  
−
   --main-div-color: #545454; /* grey */
+
   --main-div-color: #D3D3D3; /* grey */
 
   --navbar-div-color: #444444; /* grey */
 
   --navbar-div-color: #444444; /* grey */
 
   --hover-div-color: #FFFFFF; /* white */
 
   --hover-div-color: #FFFFFF; /* white */
Line 62: Line 63:
 
}
 
}
  
−
li {
+
body, p {
 +
  font-size: 1em !important;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
  line-height: 1em;
 +
  letter-spacing: 0.075em;
 +
}
 +
 
 +
.red {
 +
  color: #e91b63 !important;
 +
}
 +
 
 +
h2 {
 +
  font-size: 2em;
 +
}
 +
 
 +
p {
 +
  margin-top: 0 !important;
 +
  margin-bottom: 0 !important;
 +
}
 +
 
 +
.content p {
 +
  margin-top: 0.6em !important;
 +
  margin-bottom: 2em !important;
 +
  padding-left: 1em !important;
 +
}
 +
 
 +
ul, ol {
 +
/*  text-align: left; */
 +
}
 +
 
 +
ul li {
 
   list-style: none;
 
   list-style: none;
 
}  
 
}  
Line 68: Line 101:
 
.content li {
 
.content li {
 
   margin-top: 2em;
 
   margin-top: 2em;
 +
  padding-left: 3em;
 +
  text-indent: -3em;
 
}
 
}
  
−
.content li:before {
+
.float-toc li {
 +
  padding-left: 0;
 +
  text-indent: 0;
 +
}
 +
 
 +
.content ul li:before {
 
   content: '';  display: inline-block;
 
   content: '';  display: inline-block;
−
   height: 7em;  width: 7em;
+
   height: 3em;  width: 3em;
 
   background-image: url(https://static.igem.org/mediawiki/2018/b/bf/T--UCSC--PoPPY-Flower.png);
 
   background-image: url(https://static.igem.org/mediawiki/2018/b/bf/T--UCSC--PoPPY-Flower.png);
 
   background-size: contain;  background-repeat: no-repeat;
 
   background-size: contain;  background-repeat: no-repeat;
Line 78: Line 118:
 
}
 
}
  
 +
.centerIcons li {
 +
  position: relative;
 +
  padding-left: 4em;
 +
  text-indent: 0;
 +
}
 +
 +
.centerIcons li:before {
 +
  position: absolute;
 +
  top: calc(50% - 1.5em);
 +
  left: 0;
 +
}
 +
 +
.float-toc li:before {
 +
  display: none;
 +
}
 +
 +
ul.big-list {
 +
  display: inline-block;
 +
  text-align: left;
 +
}
 +
 +
ul.big-list li {
 +
  color: #a0a09f !important;
 +
  font-size: 1.5em !important;
 +
}
 +
 +
ul.big-list li:before {
 +
  height: 7rem;  width: 7rem;
 +
}
  
 
/*-----NAV BAR THEME-----*/
 
/*-----NAV BAR THEME-----*/
Line 88: Line 157:
 
   width: 100%;
 
   width: 100%;
 
   position: fixed;
 
   position: fixed;
 +
  top: 16px; /* Height of iGEM navbar */
 
   z-index: 10001;
 
   z-index: 10001;
 
   -ms-flex-line-pack: center;
 
   -ms-flex-line-pack: center;
Line 93: Line 163:
 
   -ms-flex-wrap: wrap;
 
   -ms-flex-wrap: wrap;
 
       flex-wrap: wrap;
 
       flex-wrap: wrap;
−
  margin: 0px 0px 0px 0px;
+
/*  margin: -1px 0px 0px 0px; */ /* needs -1px top margin now for some reason...? */
 
   background-color: var(--navbar-div-color, #adaabe94);
 
   background-color: var(--navbar-div-color, #adaabe94);
 
   color: var(--navbar-txt-color, white);
 
   color: var(--navbar-txt-color, white);
 
   font-size: 17px;
 
   font-size: 17px;
 +
  font-size: calc(14px + (17 - 14) * ((100vw - 1020px) / (1600 - 1020))) !important;
 
   line-height: 100%;
 
   line-height: 100%;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
Line 150: Line 221:
 
.topnav .nav-links-container a:not(.nav-logo) {
 
.topnav .nav-links-container a:not(.nav-logo) {
 
   padding: 14px 16px; /* Might need to change */
 
   padding: 14px 16px; /* Might need to change */
 +
/*  font-size: calc(14px + (17 - 14) * ((100vw - 1020px) / (1600 - 1020))) !important; */
 
}
 
}
  
Line 182: Line 254:
 
   min-width: 160px;
 
   min-width: 160px;
 
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
  z-index: -1;
+
/*  z-index: -1; */
 
   background-color: var(--navbar-div-color, #adaabe94);
 
   background-color: var(--navbar-div-color, #adaabe94);
 
}
 
}
Line 216: Line 288:
 
/*===== BASIC PAGE CLASSES =====*/ /* TODO: remove all "section-title" / "p-title" classes once switched to h1-6 */
 
/*===== BASIC PAGE CLASSES =====*/ /* TODO: remove all "section-title" / "p-title" classes once switched to h1-6 */
  
−
h3 {
+
.flex-row h2, .flex-row h3, .flex-row h4, .flex-row h6 { /* Anchor jump offset */
−
  font-size: 1.5em !important;
+
−
}
+
−
 
+
−
h4 {
+
−
  font-size: 1.5em !important;
+
−
  color: var(--sectionTitle-txt-color, #0C5798);
+
−
}
+
−
 
+
−
h5 {
+
−
  font-size: 1.25em !important;
+
−
}
+
−
 
+
−
h6 {
+
−
  font-size: 1.25em !important;
+
−
  color: var(--sectionTitle-txt-color, #0C5798);
+
−
}
+
−
 
+
−
.flex-row h3, .flex-row h4, .flex-row h6 { /* Anchor jump offset */
+
 
   padding-top: calc(75px + 0.5em);
 
   padding-top: calc(75px + 0.5em);
 
   margin-top: -75px;
 
   margin-top: -75px;
 +
  margin-bottom: 1em !important;
 
}
 
}
  
Line 324: Line 379:
 
   position: -webkit-sticky; /* Safari */
 
   position: -webkit-sticky; /* Safari */
 
   position: sticky;
 
   position: sticky;
−
   top: calc(45px + 5vh);
+
   top: calc(45px + 25vh);
 
   z-index: 100;
 
   z-index: 100;
 
   margin-top: 5vh;
 
   margin-top: 5vh;
 
   margin-bottom: calc(-1000px - 16px - 5vh); /* height of toc to compensate */
 
   margin-bottom: calc(-1000px - 16px - 5vh); /* height of toc to compensate */
 
   height: 1000px; /* big enough to hold list of any size */
 
   height: 1000px; /* big enough to hold list of any size */
−
   width: 15vw;
+
   width: 10vw;
 
   min-width: 200px;
 
   min-width: 200px;
 
   padding: 5px;
 
   padding: 5px;
−
   padding-left: 2vw;
+
   padding-left: 1vw;
 
   text-align: right;
 
   text-align: right;
 +
  font-size: 80%;
 
   transition: .3s;
 
   transition: .3s;
 +
}
 +
 +
.toc-right .float-toc {
 +
  float: right;
 +
  padding: 5px;
 +
  padding-right: 1vw;
 +
  text-align: center;
 +
}
 +
 +
.toc-container {
 +
  background-color: #EEEEEE;
 +
  border-radius: 5px;
 +
}
 +
 +
.toc-container h3 {
 +
  text-align: center;
 
}
 
}
  
Line 348: Line 420:
 
}
 
}
  
−
.float-toc h6 {
+
.float-toc h3 {
−
  padding: 0;
+
/*  padding: 0; */
−
  padding-top: 75px; /* anchor jump offset */
+
/*  padding-top: 75px;*/ /* anchor jump offset */
−
  margin-top: -75px;
+
/*  margin-top: -75px;*/
−
 
+
  background-color: #DDDDDD;
−
}
+
−
 
+
−
.float-page-list h5 {
+
−
  color: var(--main-div-color, #545454);
+
 
}
 
}
  
 
.float-toc li, .float-page-list li {
 
.float-toc li, .float-page-list li {
 
   list-style-type: none;
 
   list-style-type: none;
 +
  margin: 0;
 
}
 
}
  
Line 366: Line 435:
 
   display: block;
 
   display: block;
 
/*  padding: calc((100vh - 150px - 20px*10)/(2*11)) 1em; */
 
/*  padding: calc((100vh - 150px - 20px*10)/(2*11)) 1em; */
−
   padding: calc((100vh - (150px + 84px) - 30px*9)/(2*9)) 1em; /* In Style of page, replace "9"s with number of items in list */ /* calc((viewportHeight - (spaceAboveFirstItem + footerHeight) - heightOfTextAndSpaces*numberOfItems)/(twoPaddings*numberOfItems)) */
+
   padding: calc((100vh - (150px + 84px) - 30px*10)/(2*10)) 1em; /* In Style of page, replace "9"s with number of items in list */ /* calc((viewportHeight - (spaceAboveFirstItem + footerHeight) - heightOfTextAndSpaces*numberOfItems)/(twoPaddings*numberOfItems)) */
 
   border-radius: 7px;
 
   border-radius: 7px;
−
  background-color: var(--main-div-color, #545454);
+
/*  background-color: var(--main-div-color, #545454); */
 
   color: white !important;
 
   color: white !important;
 +
  color: var(--main-txt-color, #707070) !important;
 
   transition: .3s;
 
   transition: .3s;
 
   text-decoration: none;
 
   text-decoration: none;
Line 387: Line 457:
  
 
.float-toc a {
 
.float-toc a {
−
  padding: calc((100vh - (150px + 84px) - 30px*9)/(4*9)) 1em; /* In Style of page, replace "9"s with number of items in list */ /* calc((viewportHeight - (spaceAboveFirstItem + footerHeight) - heightOfTextAndSpaces*numberOfItems)/(twoPaddings*numberOfItems)) */
+
/*  padding: calc((100vh - (150px + 84px) - 30px*9)/(4*9)) 1em;*/ /* In Style of page, replace "9"s with number of items in list */ /* calc((viewportHeight - (spaceAboveFirstItem + footerHeight) - heightOfTextAndSpaces*numberOfItems)/(twoPaddings*numberOfItems)) */
−
  background-color: #f11346; /* poppy red, darker */
+
/*  background-color: #f11346;*/ /* poppy red, darker */
−
  background-color: #e91b63; /* poppy red, darker */
+
/*  background-color: #e91b63;*/ /* poppy red, darker */
 
}
 
}
  
 
.float-toc a:hover {
 
.float-toc a:hover {
−
  background-color: var(--main-div-color, #444444);
+
/*  background-color: var(--second-bg-color, #d3d3d3); */
 +
  color: #e91b63 !important;
 
}
 
}
  
Line 462: Line 533:
 
}
 
}
  
−
.toc-body .flex-row { /* TODO: delete .flex-row.toc-width once confirmed first works */
+
.toc-body .flex-row {
−
   padding: 0 20%;
+
  padding: 0 10vw 0 calc(225px + 1vw + 5vw);
 +
}
 +
 
 +
.toc-right .flex-row {
 +
   padding: 0 calc(225px + 1vw + 5vw) 0 10vw;
 
}
 
}
  
Line 471: Line 546:
 
   padding: 0 1em;
 
   padding: 0 1em;
 
   margin: 0 2.5vw;  
 
   margin: 0 2.5vw;  
 +
}
 +
 +
.flex-col:not(.noMin) {
 
   min-width: 15em;
 
   min-width: 15em;
 
}
 
}
Line 477: Line 555:
 
   padding: 0;
 
   padding: 0;
 
   margin: 0;
 
   margin: 0;
−
}
 
−
 
−
h1, .section-title, .flex-col .section-title {
 
−
  text-align: center !important;
 
−
  font-size: 2em !important;
 
−
}
 
−
 
−
h2, .section-title, .flex-col .section-title {
 
−
  text-align: center !important;
 
−
  font-size: 2em !important;
 
 
}
 
}
  
 
.flex-col p:not(.image-inpage-title) {
 
.flex-col p:not(.image-inpage-title) {
−
  text-align: left !important;
+
/*  text-align: left !important; */
 
}
 
}
  
Line 527: Line 595:
 
   justify-content: center !important;
 
   justify-content: center !important;
 
   text-align: center !important;
 
   text-align: center !important;
 +
}
 +
 +
.center-vert {
 +
  display: flex;
 +
  align-items: center;
 
}
 
}
  
Line 535: Line 608:
 
.content-divider {
 
.content-divider {
 
   justify-content: center;
 
   justify-content: center;
 +
  margin: 5vh auto;
 
}
 
}
  
Line 553: Line 627:
 
   background: #333;
 
   background: #333;
 
   width: 60%;
 
   width: 60%;
 +
  margin-top: 2em;
 
   margin-left: 20%;
 
   margin-left: 20%;
 
}
 
}
Line 588: Line 663:
 
}
 
}
  
 +
.hex-header h2 {
 +
  margin-bottom: 0 !important;
 +
}
 +
 +
.hex-header h2:before {
 +
  content: ''; display: inline-block;
 +
  height: 3em; width: 3em;
 +
  background-image: url(https://static.igem.org/mediawiki/2018/8/8d/T--UCSC--Hexagon.png);
 +
  background-size: contain; background-repeat: no-repeat;
 +
  vertical-align: middle;
 +
}
 +
 +
.hex-header.bigHex h2:before {
 +
  height: 5em; width: 5em;
 +
}
 +
 +
.hex-header.hex0 h2:before {
 +
  background-image: url(https://static.igem.org/mediawiki/2018/d/da/T--UCSC--Hexagon-0.png);
 +
}
 +
 +
.hex-header.hex1 h2:before {
 +
  background-image: url(https://static.igem.org/mediawiki/2018/7/79/T--UCSC--Hexagon-1.png);
 +
}
 +
 +
.hex-header.hex2 h2:before {
 +
  background-image: url(https://static.igem.org/mediawiki/2018/5/5f/T--UCSC--Hexagon-2.png);
 +
}
 +
 +
.hex-header.hex3 h2:before {
 +
  background-image: url(https://static.igem.org/mediawiki/2018/1/13/T--UCSC--Hexagon-3.png);
 +
}
 +
 +
.imageCont {
 +
  max-width: 95%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
.imageCont.floatR, .imageCont.floatL {
 +
  max-width: 60%;
 +
}
 +
 +
.imageCont p {
 +
  text-align: center !important;
 +
  font-size: 85% !important;
 +
}
  
 
.image-inpage {
 
.image-inpage {
Line 599: Line 720:
 
}
 
}
  
−
.image-inpage.floatR {
+
.image-inpage.vert {
 +
  min-width: 0;
 +
  max-height: 30vh;
 +
  min-height: 100px;
 +
  width: auto;
 +
}
 +
 
 +
.image-inpage.floatR, .floatR {
 
   float: right;
 
   float: right;
−
   margin-right: 0;
+
   margin-right: 0 !important;
−
   margin-left: 1em;
+
   margin-left: 1em !important;
 
}
 
}
  
−
.image-inpage.floatL {
+
.image-inpage.floatL, .floatL {
 
   float: left;
 
   float: left;
−
   margin-right: 1em;
+
   margin-right: 1em !important;
−
   margin-left: 0;
+
   margin-left: 0 !important;
 
}
 
}
  
 
.image-inpage.large {
 
.image-inpage.large {
−
   max-width: 75%;
+
   max-width: 100%;
 +
}
 +
 
 +
.image-inpage.large.vert {
 +
  max-height: 60vh;
 +
  width: auto;
 
}
 
}
  
Line 632: Line 765:
 
     text-align: left !important;
 
     text-align: left !important;
 
     font-size: .75em;
 
     font-size: .75em;
 +
}
 +
 +
.image-p, .content .image-p, .flex-col .image-p {
 +
  background-color: #464646;
 +
  color: white !important;
 +
  text-align: center !important;
 +
  border-radius: 40px;
 +
  padding: 0.5em 1.5em !important;
 +
  font-size: calc(14px + (18 - 14) * ((100vw - 800px) / (1600 - 800))) !important;
 +
}
 +
 +
.noBorder {
 +
  border: none;
 
}
 
}
  
Line 775: Line 921:
 
   margin: auto;
 
   margin: auto;
 
   overflow:hidden;
 
   overflow:hidden;
−
   border-top:3px solid black;
+
   border-top: 3px solid black;
−
   border-bottom:3px solid black;  
+
   border-bottom: 3px solid black;  
−
   border-left:1.5px solid black;  
+
   border-left: 1.5px solid black;  
 
   border-right: 1.5px solid black;
 
   border-right: 1.5px solid black;
 
   background-color: var(--main-bg-color);
 
   background-color: var(--main-bg-color);
Line 899: Line 1,045:
 
.FullNames {
 
.FullNames {
 
   text-align: center !important;
 
   text-align: center !important;
−
   font-size:1.3em !important;
+
   font-size: 1.3em !important;
−
   color: black;
+
   color: black !important;
 
   margin-top: -15px !important;
 
   margin-top: -15px !important;
 
   font-family: var(--main-txt-font) !important;  
 
   font-family: var(--main-txt-font) !important;  
Line 908: Line 1,054:
 
.PersDesc {
 
.PersDesc {
 
   text-align: center !important;  
 
   text-align: center !important;  
−
   font-size:1.15em !important;  
+
   font-size: 1.15em !important;  
−
   margin-top:5px !important;  
+
   margin-top: 5px !important;  
−
   color: black;
+
   margin-bottom: 0.5em !important;
 +
/*  color: black !important; */
 
   font-family: var(--main-txt-font) !important;  
 
   font-family: var(--main-txt-font) !important;  
 
/*  font-family: 'roboto' !important; */
 
/*  font-family: 'roboto' !important; */
Line 945: Line 1,092:
 
   justify-content: center;
 
   justify-content: center;
 
   background: black;
 
   background: black;
 +
  padding: 12px 0;
 
   font-family: var(--main-txt-font) !important;  
 
   font-family: var(--main-txt-font) !important;  
 
/*  font-family: 'roboto' !important; */
 
/*  font-family: 'roboto' !important; */
Line 1,004: Line 1,152:
 
   text-align: center !important;
 
   text-align: center !important;
 
   font-size: 17px !important;
 
   font-size: 17px !important;
 +
}
 +
 +
.mobile-show {
 +
  display: none;
 
}
 
}
  
Line 1,010: Line 1,162:
  
 
/* When the screen is less than x pixels wide, hide all navbar links. Show the link that should open and close the topnav (.menu-icon). If changing max-width, make sure to change JavaScript dropdown conditions in UCSC/NavBar as well! */
 
/* When the screen is less than x pixels wide, hide all navbar links. Show the link that should open and close the topnav (.menu-icon). If changing max-width, make sure to change JavaScript dropdown conditions in UCSC/NavBar as well! */
−
@media screen and (max-width: 1150px) {
+
@media screen and (max-width: 1200px) {
 
   .topnav .nav-logo {
 
   .topnav .nav-logo {
 
     margin-left: 5px;
 
     margin-left: 5px;
Line 1,092: Line 1,244:
 
@media screen and (max-width: 1300px) {
 
@media screen and (max-width: 1300px) {
 
   .toc-body .flex-row {
 
   .toc-body .flex-row {
−
     padding: 0 5% 0 calc(200px + 5%);
+
     padding: 0 5vw 0 calc(200px + 5vw);
 +
  }
 +
 
 +
  .toc-right .flex-row {
 +
    padding: 0 calc(200px + 5vw) 0 5vw;
 
   }
 
   }
  
Line 1,101: Line 1,257:
 
@media screen and (max-width: 800px) {
 
@media screen and (max-width: 800px) {
  
−
.image-inpage.floatL, .image-inpage.floatR {
+
.mobile-show {
 +
  display: inherit;
 +
}
 +
 
 +
.mobile-hide {
 +
  display: none;
 +
}
 +
 
 +
ul:not(.dropdown-contentshow) {
 +
  margin-left: 2px !important;
 +
}
 +
 
 +
.image-inpage.floatL, .image-inpage.floatR, .floatL, .floatR {
 
   float: none;
 
   float: none;
−
   margin-right: auto;
+
   margin-right: auto !important;
−
   margin-left: auto;
+
   margin-left: auto !important;
 
}
 
}
  
Line 1,115: Line 1,283:
 
}
 
}
  
−
.float-toc, .float-page-list {
+
.float-toc, .toc-right .float-toc, .float-page-list {
 
   display: inline;
 
   display: inline;
 
   float: none;
 
   float: none;
Line 1,198: Line 1,366:
 
/* Home Page */
 
/* Home Page */
  
−
h1 {
 
−
  font-size: 200% !important;
 
−
/*  font-family: var(--main-txt-font) !important; */
 
−
  font-family: 'roboto500' !important;
 
−
}
 
−
 
−
h2 {
 
−
  font-size: 200% !important;
 
−
/*  font-family: var(--main-txt-font) !important; */
 
−
  font-family: 'roboto500' !important;
 
−
  color: var(--sectionTitle-txt-color, #0C5798);
 
−
}
 
−
 
−
 
−
 
−
h3, h2 {
 
−
  font-family: var(--main-txt-font) !important;
 
−
/*  font-family: 'roboto300' !important; */
 
−
}
 
  
 
.proj-button {
 
.proj-button {

Latest revision as of 00:45, 18 October 2018