Difference between revisions of "Team:UCSC/CSS"

 
(47 intermediate revisions by 2 users 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 39: Line 40:
 
   --second-txt-font: 'roboto', sans-serif; /* 'Ailerons-Typeface' didn't work. Figure out how to use font from ttf files? */
 
   --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 */
 
   --referenceLink-txt-color: #0C5798; /* grey blue */
 
}
 
}
Line 166: Line 168:
 
   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 200: Line 202:
 
/*===== 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 */
  
−
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: var(--main-txt-font) !important;  
 
/*  font-family: 'roboto' !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);
 
   padding-top: calc(75px + 0.5em);
 
   margin-top: -75px;
 
   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;
 
   display: block;
 
   position: -webkit-sticky; /* Safari */
 
   position: -webkit-sticky; /* Safari */
Line 334: Line 336:
 
   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: 20vw;
+
   width: 15vw;
 +
  min-width: 200px;
 
   padding: 5px;
 
   padding: 5px;
 
   padding-left: 2vw;
 
   padding-left: 2vw;
 
   text-align: right;
 
   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;
 
   float: right;
 
   padding: 5px;
 
   padding: 5px;
Line 347: Line 355:
 
}
 
}
  
−
.float-toc h5, .float-toc-r h6 {
+
.float-toc h6 {
 
   padding: 0;
 
   padding: 0;
 +
  padding-top: 75px; /* anchor jump offset */
 +
  margin-top: -75px;
 +
 
}
 
}
  
−
.float-toc h5 {
+
.float-page-list h5 {
 
   color: var(--main-div-color, #545454);
 
   color: var(--main-div-color, #545454);
 
}
 
}
  
−
.float-toc li, .float-toc-r li {
+
.float-toc li, .float-page-list li {
 
   list-style-type: none;
 
   list-style-type: none;
 
}
 
}
  
−
.float-toc a, .float-toc-r a {
+
.float-toc a, .float-page-list a {
 
   display: block;
 
   display: block;
 
/*  padding: calc((100vh - 150px - 20px*10)/(2*11)) 1em; */
 
/*  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 */
 
   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)) */
 
   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 */
 
}
 
}
  
−
.float-toc-r a:hover {
+
.float-toc a:hover {
 
   background-color: var(--main-div-color, #444444);
 
   background-color: var(--main-div-color, #444444);
 
}
 
}
Line 410: Line 430:
  
 
.scroll-to-top img {
 
.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;
 
   padding: 0;
 
   margin: 0;
 
   margin: 0;
Line 570: Line 598:
 
.image-inpage {
 
.image-inpage {
 
   display: block;
 
   display: block;
−
  float: left;
 
 
   max-width: 30vw;
 
   max-width: 30vw;
−
   margin-right: 1em;
+
   min-width: 250px;
−
/*  margin-left: auto;
+
  margin-left: auto;
−
   margin-right: auto; */
+
   margin-right: auto;  
 
   border: 3px solid #510013;
 
   border: 3px solid #510013;
 
   color: black;
 
   color: black;
Line 583: Line 610:
 
   margin-right: 0;
 
   margin-right: 0;
 
   margin-left: 1em;
 
   margin-left: 1em;
 +
}
 +
 +
.image-inpage.floatL {
 +
  float: left;
 +
  margin-right: 1em;
 +
  margin-left: 0;
 +
}
 +
 +
.image-inpage.large {
 +
  max-width: 75%;
 
}
 
}
  
Line 621: Line 658:
  
 
.buttonnotebook:hover {
 
.buttonnotebook:hover {
 +
    background-color: #e91b63;
 +
}
 +
 +
.buttonnotebook2 {
 +
    background-color: #464646;
 +
    color: white;
 +
    padding: 18px 20px;
 +
    width: 20%;
 +
    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;
 +
}
 +
 +
.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;
 
     background-color: #e91b63;
 
}
 
}
Line 855: Line 954:
 
   font-family: var(--main-txt-font) !important;  
 
   font-family: var(--main-txt-font) !important;  
 
/*  font-family: 'roboto' !important; */
 
/*  font-family: 'roboto' !important; */
 +
  max-height: 75px; /* fix bug where footer sometimes takes up whole page height */
 
}
 
}
  
Line 916: Line 1,016:
 
/*===== SCREEN RESPONSIVENESS (MOBILE VERSION) =====*/
 
/*===== 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 {
 
   .topnav .nav-logo {
 
     margin-left: 5px;
 
     margin-left: 5px;
 +
  }
 +
 +
  .buttonnotebook2 {
 +
    display: block;
 +
    width: 100%;
 +
    margin-bottom: 10px;
 
   }
 
   }
  
Line 988: 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 */
 
/* Responsive features of other page elements */
 
@media screen and (max-width: 800px) {
 
@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;
 
   display: inline;
 
   float: none;
 
   float: none;
Line 1,002: Line 1,128:
 
}
 
}
  
−
.float-toc {
+
.float-page-list {
 
   display: none;
 
   display: none;
 
}
 
}
Line 1,050: Line 1,176:
  
 
.flex-col, .flex-row .flex-col.small-divide, .flex-row .flex-col.small-divide a {
 
.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%;
 
   margin: 5% 5%;
 
}
 
}
Line 1,376: Line 1,502:
 
   margin-right:2vh;
 
   margin-right:2vh;
 
}
 
}
 +
  
 
/*----------------------------------------------------------------------------------*/
 
/*----------------------------------------------------------------------------------*/
 +
 +
/**************** table **********************/
 +
table, th, td {
 +
    border: 1px solid black;
 +
    border-collapse: collapse;
 +
}
 +
th, td {
 +
    padding: 5px;
 +
}
 +
th {
 +
    text-align: left;
 +
/*************************/
  
 
</style>
 
</style>

Latest revision as of 18:17, 16 October 2018