Difference between revisions of "Team:UCSC/CSS"

@@ 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 39: / Line 40: @@
    --second-txt-font: 'roboto', sans-serif; /* 'Ailerons-Typeface' didn't work. Figure out how to use font from ttf files? */
-  --sectionTitle-txt-color: #f52153; /* poppy red */
+/*  --sectionTitle-txt-color: #f52153; */ /* poppy red */
+  --sectionTitle-txt-color: #e91b63; /* poppy pink */
    --referenceLink-txt-color: #0C5798; /* grey blue */
 }
@@ Line 166: / Line 168: @@
    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 200: / Line 202: @@
 /*===== BASIC PAGE CLASSES =====*/ /* TODO: remove all "section-title" / "p-title" classes once switched to h1-6 */
-h1, .flex-row, .section-title, .flex-col .section-title, .flex-row p:not(.image-inpage-title):not(.p-title){
+h1, h3, h5, .flex-row, .section-title, .flex-col .section-title, .flex-row p:not(.image-inpage-title):not(.p-title){
    font-family: var(--main-txt-font) !important;
 /*  font-family: 'roboto' !important; */
@@ Line 238: / Line 240: @@
 }
-.flex-row h6 { /* Anchor jump offset */
+.flex-row h3, .flex-row h4, .flex-row h6 { /* Anchor jump offset */
    padding-top: calc(75px + 0.5em);
    margin-top: -75px;
@@ Line 323: / Line 325: @@
-/*-- Table of Contents --*/
+/*----- Table of Contents -----*/ /* TODO: clean up unused code after switching to "toc" and "page-list" */
-.float-toc, .float-toc-r {
+.float-toc, .float-page-list {
    display: block;
    position: -webkit-sticky; /* Safari */
@@ Line 334: / Line 336: @@
    margin-bottom: calc(-1000px - 16px - 5vh); /* height of toc to compensate */
    height: 1000px; /* big enough to hold list of any size */
-   width: 20vw;
+   width: 15vw;
+  min-width: 200px;
    padding: 5px;
    padding-left: 2vw;
    text-align: right;
+  transition: .3s;
 }
-/* Right Side ToC */
+.float-page-list {
-.float-toc-r {
+  display: none !important;
+}
+/* Page Lists (not used) */
+.float-page-list {
    float: right;
    padding: 5px;
@@ Line 347: / Line 355: @@
 }
-.float-toc h5, .float-toc-r h6 {
+.float-toc h6 {
    padding: 0;
+  padding-top: 75px; /* anchor jump offset */
+  margin-top: -75px;
 }
-.float-toc h5 {
+.float-page-list h5 {
    color: var(--main-div-color, #545454);
 }
-.float-toc li, .float-toc-r li {
+.float-toc li, .float-page-list li {
    list-style-type: none;
 }
-.float-toc a, .float-toc-r a {
+.float-toc a, .float-page-list a {
    display: block;
 /*  padding: calc((100vh - 150px - 20px*10)/(2*11)) 1em; */
@@ Line 370: / Line 381: @@
 }
-.float-toc a:hover {
+.float-page-list.team-pages {
+  display: none;
+}
+.float-toc.team-pages a {
+/*  padding: calc((100vh - (150px + 84px) - 30px*5)/(2*5)) 1em; */
+}
+.float-page-list a:hover {
    background-color: #f52153; /* poppy red */
 }
-.float-toc-r 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)) */
    background-color: #f11346; /* poppy red, darker */
+  background-color: #e91b63; /* poppy red, darker */
 }
-.float-toc-r a:hover {
+.float-toc a:hover {
    background-color: var(--main-div-color, #444444);
 }
@@ Line 410: / Line 430: @@
 .scroll-to-top img {
-   width: calc(85px + (20 * ((100vw - 800px) / 800)));
+   width: calc(35px + (20 * ((100vw - 800px) / 800)));
+  padding: 10px;
+  margin: -10px;
+  opacity: 0.25;
+  transition: .3s;
+}
+.scroll-to-top img:hover {
+  opacity: 1;
 }
@@ Line 441: / Line 469: @@
 }
-div.toc-body .flex-row { /* TODO: delete .flex-row.toc-width once confirmed first works */
+.toc-body .flex-row { /* TODO: delete .flex-row.toc-width once confirmed first works */
-   padding: 0 25%;
+   padding: 0 20%;
 }
@@ Line 453: / Line 481: @@
 }
-div.toc-body .flex-col {
+.toc-body .flex-col {
    padding: 0;
    margin: 0;
@@ Line 571: / Line 599: @@
    display: block;
    max-width: 30vw;
+  min-width: 250px;
    margin-left: auto;
    margin-right: auto;
@@ Line 587: / Line 616: @@
    margin-right: 1em;
    margin-left: 0;
+}
+.image-inpage.large {
+  max-width: 75%;
 }
@@ Line 632: / Line 665: @@
      color: white;
      padding: 18px 20px;
-     width: 19%;
+     width: 20%;
      text-align: center;
      text-decoration: none;
@@ Line 645: / Line 678: @@
 .buttonnotebook2:hover {
+    background-color: #e91b63;
+}
+.buttonnotebook3 {
+    background-color: #464646;
+    color: white;
+    padding: 18px 20px;
+    width: 50%;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    cursor: pointer;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+    float: left;
+    margin-bottom: 20px;
+}
+.buttonnotebook3:hover {
+    background-color: #e91b63;
+}
+.buttonnotebook4 {
+    background-color: #464646;
+    color: white;
+    padding: 18px 20px;
+    width: 25%;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    cursor: pointer;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+    float: left;
+    margin-bottom: 20px;
+}
+.buttonnotebook4:hover {
      background-color: #e91b63;
 }
@@ Line 879: / Line 954: @@
    font-family: var(--main-txt-font) !important;
 /*  font-family: 'roboto' !important; */
+  max-height: 75px; /* fix bug where footer sometimes takes up whole page height */
 }
@@ Line 940: / Line 1,016: @@
 /*===== SCREEN RESPONSIVENESS (MOBILE VERSION) =====*/
-/* 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) */
+/* 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: 1010px) {
+@media screen and (max-width: 1150px) {
    .topnav .nav-logo {
      margin-left: 5px;
+  }
+  .buttonnotebook2 {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
    }
@@ Line 1,012: / Line 1,094: @@
 }
+/*----- Tablet Sized Responsiveness ----*/
+@media screen and (max-width: 1300px) {
+  .toc-body .flex-row {
+    padding: 0 5% 0 calc(200px + 5%);
+  }
+}
 /* Responsive features of other page elements */
 @media screen and (max-width: 800px) {
-.scroll-image{
+.image-inpage.floatL, .image-inpage.floatR {
-   display: none;
+   float: none;
+  margin-right: auto;
+  margin-left: auto;
+}
+.image-inpage.large {
+  max-width: 95%;
+}
+.scroll-to-top {
+  display: block;
 }
-.float-toc, .float-toc-r {
+.float-toc, .float-page-list {
    display: inline;
    float: none;
@@ Line 1,026: / Line 1,128: @@
 }
-.float-toc {
+.float-page-list {
    display: none;
 }
@@ Line 1,074: / Line 1,176: @@
 .flex-col, .flex-row .flex-col.small-divide, .flex-row .flex-col.small-divide a {
-  width: 90%;
+/*  width: 90%; */
-   padding: 0 0 !important;
+   padding: 0 2.5% !important;
    margin: 5% 5%;
 }
@@ Line 1,400: / Line 1,502: @@
    margin-right:2vh;
 }
 /*----------------------------------------------------------------------------------*/
+/**************** table **********************/
+table, th, td {
+    border: 1px solid black;
+    border-collapse: collapse;
+}
+th, td {
+    padding: 5px;
+}
+th {
+    text-align: left;
+/*************************/
 </style>

Difference between revisions of "Team:UCSC/CSS"

Latest revision as of 18:17, 16 October 2018