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

@@ Line 14: / Line 14: @@
 #content {margin-left: 0px; margin-top: -9px; padding: 0px; width: 100%;}
 #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
+#globalWrapper{padding-bottom: 0 !important;}
 body {background-color: white;}
@@ Line 25: / Line 26: @@
    --third-bg-color: #D3D3D3; /* light grey */
-   --main-div-color: #545454; /* grey */
+   --main-div-color: #D3D3D3; /* grey */
    --navbar-div-color: #444444; /* grey */
    --hover-div-color: #FFFFFF; /* white */
@@ Line 59: / Line 60: @@
    font-weight: 300 !important;
    font-weight: lighter !important; /* needed for some phones to display light version of font */
-  font-size: 1em !important;
    color: var(--main-txt-color) !important;
+}
+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;
 }
-li {
+ul, ol {
+/*  text-align: left; */
+}
+ul li {
    list-style: none;
 }
@@ Line 73: / Line 101: @@
 .content li {
    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;
    height: 3em;  width: 3em;
@@ Line 81: / Line 116: @@
    background-size: contain;  background-repeat: no-repeat;
    vertical-align: middle;
+}
+.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;
 }
@@ Line 105: / Line 157: @@
    width: 100%;
    position: fixed;
+  top: 16px; /* Height of iGEM navbar */
    z-index: 10001;
    -ms-flex-line-pack: center;
@@ Line 110: / Line 163: @@
    -ms-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);
    color: var(--navbar-txt-color, white);
    font-size: 17px;
+  font-size: calc(14px + (17 - 14) * ((100vw - 1020px) / (1600 - 1020))) !important;
    line-height: 100%;
    text-transform: uppercase;
@@ Line 167: / Line 221: @@
 .topnav .nav-links-container a:not(.nav-logo) {
    padding: 14px 16px; /* Might need to change */
+/*  font-size: calc(14px + (17 - 14) * ((100vw - 1020px) / (1600 - 1020))) !important; */
 }
@@ Line 199: / Line 254: @@
    min-width: 160px;
    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);
 }
@@ Line 233: / Line 288: @@
 /*===== 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);
    margin-top: -75px;
+  margin-bottom: 1em !important;
 }
@@ Line 341: / Line 379: @@
    position: -webkit-sticky; /* Safari */
    position: sticky;
-   top: calc(45px + 5vh);
+   top: calc(45px + 25vh);
    z-index: 100;
    margin-top: 5vh;
@@ Line 349: / Line 387: @@
    min-width: 200px;
    padding: 5px;
-   padding-left: 2vw;
+   padding-left: 1vw;
    text-align: right;
+  font-size: 80%;
    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 365: / 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 {
    list-style-type: none;
+  margin: 0;
 }
@@ Line 383: / Line 435: @@
    display: block;
 /*  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;
 /*  background-color: var(--main-div-color, #545454); */
@@ Line 405: / Line 457: @@
 .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: #e91b63;*/ /* poppy red, darker */
@@ Line 411: / Line 463: @@
 .float-toc a:hover {
-  background-color: var(--main-div-color, #444444);
+/*  background-color: var(--second-bg-color, #d3d3d3); */
    color: #e91b63 !important;
 }
@@ Line 481: / 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 490: / Line 546: @@
    padding: 0 1em;
    margin: 0 2.5vw;
+}
+.flex-col:not(.noMin) {
    min-width: 15em;
 }
@@ Line 496: / Line 555: @@
    padding: 0;
    margin: 0;
-}
-h2 {
-  font-size: 2em !important;
 }
 .flex-col p:not(.image-inpage-title) {
-  text-align: left !important;
+/*  text-align: left !important; */
 }
@@ Line 540: / Line 595: @@
    justify-content: center !important;
    text-align: center !important;
+}
+.center-vert {
+  display: flex;
+  align-items: center;
 }
@@ Line 548: / Line 608: @@
 .content-divider {
    justify-content: center;
+  margin: 5vh auto;
 }
@@ Line 566: / Line 627: @@
    background: #333;
    width: 60%;
+  margin-top: 2em;
    margin-left: 20%;
 }
@@ Line 601: / 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 {
@@ Line 612: / 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;
-   margin-right: 0;
+   margin-right: 0 !important;
-   margin-left: 1em;
+   margin-left: 1em !important;
 }
-.image-inpage.floatL {
+.image-inpage.floatL, .floatL {
    float: left;
-   margin-right: 1em;
+   margin-right: 1em !important;
-   margin-left: 0;
+   margin-left: 0 !important;
 }
 .image-inpage.large {
-   max-width: 75%;
+   max-width: 100%;
+}
+.image-inpage.large.vert {
+  max-height: 60vh;
+  width: auto;
 }
@@ Line 645: / Line 765: @@
      text-align: left !important;
      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;
 }
@@ Line 792: / Line 921: @@
    margin: auto;
    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;
    background-color: var(--main-bg-color);
@@ Line 916: / Line 1,045: @@
 .FullNames {
    text-align: center !important;
-   font-size:1.3em !important;
+   font-size: 1.3em !important;
-   color: black;
+   color: black !important;
    margin-top: -15px !important;
    font-family: var(--main-txt-font) !important;
@@ Line 925: / Line 1,054: @@
 .PersDesc {
    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: 'roboto' !important; */
@@ Line 962: / Line 1,092: @@
    justify-content: center;
    background: black;
+  padding: 12px 0;
    font-family: var(--main-txt-font) !important;
 /*  font-family: 'roboto' !important; */
@@ Line 1,021: / Line 1,152: @@
    text-align: center !important;
    font-size: 17px !important;
+}
+.mobile-show {
+  display: none;
 }
@@ Line 1,027: / 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! */
-@media screen and (max-width: 1150px) {
+@media screen and (max-width: 1200px) {
    .topnav .nav-logo {
      margin-left: 5px;
@@ Line 1,109: / Line 1,244: @@
 @media screen and (max-width: 1300px) {
    .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,118: / Line 1,257: @@
 @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;
-   margin-right: auto;
+   margin-right: auto !important;
-   margin-left: auto;
+   margin-left: auto !important;
 }
@@ Line 1,132: / Line 1,283: @@
 }
-.float-toc, .float-page-list {
+.float-toc, .toc-right .float-toc, .float-page-list {
    display: inline;
    float: none;
@@ Line 1,215: / Line 1,366: @@
 /* 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 {

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

Latest revision as of 00:45, 18 October 2018