Difference between revisions of "Team:UCSC/CSS"
| (774 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| + | {{:Team:UCSC/CSS-Fonts}} | ||
<html> | <html> | ||
<head> | <head> | ||
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
</head> | </head> | ||
<style> | <style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | /* | + | /* Remove iGEM site settings */ |
| − | + | ||
| − | + | #home_logo, #sideMenu {display: none;} | |
| − | + | #sideMenu, #top_title, .patrollink {display: none;} | |
| − | } | + | #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;} | ||
| + | |||
| + | /*-----Define main theme variables-----*/ | ||
:root { | :root { | ||
| − | + | --main-theme-color: #FFFFFF; /* white */ | |
| − | + | ||
| − | + | ||
| − | + | --main-bg-color: #FFFFFF; /* white */ | |
| − | + | --second-bg-color: #515151; /* dark grey */ | |
| − | + | --third-bg-color: #D3D3D3; /* light grey */ | |
| − | + | --main-div-color: #545454; /* grey */ | |
| + | --navbar-div-color: #444444; /* grey */ | ||
| + | --hover-div-color: #FFFFFF; /* white */ | ||
| + | --active-div-color: #084172; /* not used */ | ||
| + | |||
| + | --main-txt-color: #545454; /* grey */ | ||
| + | --navbar-txt-color: #FFFFFF; /* white */ | ||
| + | --hover-txt-color: #555555; /* dark grey */ | ||
| + | --active-txt-color: #0C5798; /* not used */ | ||
| + | |||
| + | --main-txt-font: 'roboto300', sans-serif; /* 'catamaranregular' not working. */ | ||
| + | /* --main-txt-font: CatamaranReg; */ | ||
| + | --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: #e91b63; /* poppy pink */ | ||
| + | --referenceLink-txt-color: #0C5798; /* grey blue */ | ||
} | } | ||
| − | + | body { | |
| − | + | background-color: var(--main-bg-color) !important; | |
| − | + | font-family: var(--main-txt-font) !important; | |
| + | /* font-family: 'roboto' !important; */ | ||
| + | color: var(--main-txt-color) !important; | ||
| + | |||
| + | font-weight: lighter !important; /* needed for some phones to display light version of font */ | ||
| + | font-size: 100%; | ||
| + | line-height: normal !important; | ||
} | } | ||
| + | h1, h2, h3, h4, h5, h6 { | ||
| + | font-weight: 300 !important; | ||
| + | } | ||
| + | |||
| + | html, body { | ||
| + | overflow-x: hidden; /* Gets ride of extra space on mobile browsers. Also removes ability to access iGEM menus on small screens... And prevents the sticky position from working, so "overflow-x: visible;" must be added to <body> of pages with table of contents!!! */ | ||
| + | scroll-behavior: smooth; /* Only works on Firefox and Chrome */ | ||
| + | } | ||
/*-----NAV BAR THEME-----*/ | /*-----NAV BAR THEME-----*/ | ||
| − | /* | + | /* Style the top navigation bar */ |
| − | + | #myTopnav { | |
| − | + | display: -webkit-box; | |
| − | + | display: -ms-flexbox; | |
| − | + | display: flex; | |
| + | width: 100%; | ||
| + | position: fixed; | ||
| + | z-index: 10001; | ||
| + | -ms-flex-line-pack: center; | ||
| + | align-content: center; | ||
| + | -ms-flex-wrap: wrap; | ||
| + | flex-wrap: wrap; | ||
| + | margin: 0px 0px 0px 0px; | ||
| + | background-color: var(--navbar-div-color, #adaabe94); | ||
| + | color: var(--navbar-txt-color, white); | ||
| + | font-size: 17px; | ||
| + | line-height: 100%; | ||
| + | text-transform: uppercase; | ||
} | } | ||
| − | /* Style the | + | /* Style the first layer of items within the navbar, excluding the logo (links, dropdowns) */ |
| − | .topnav | + | .topnav > .nav-links-container { |
| − | + | display: -webkit-box; | |
| − | + | display: -ms-flexbox; | |
| − | + | display: flex; | |
| − | + | -ms-flex-wrap: wrap; | |
| − | + | flex-wrap: wrap; | |
| − | + | -webkit-box-pack: end; | |
| − | + | -ms-flex-pack: end; | |
| + | justify-content: flex-end; | ||
| + | -webkit-box-align: baseline; | ||
| + | -ms-flex-align: baseline; | ||
| + | align-items: baseline; | ||
| + | color: var(--navbar-txt-color, white); | ||
| + | text-align: center; | ||
| + | text-decoration: none; | ||
} | } | ||
| − | /* | + | /* Style the navbar logo */ |
| − | . | + | .topnav > .nav-logo { |
| − | + | display: block; | |
| − | + | float: left; | |
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | -ms-grid-row-align: center; | ||
| + | align-items: center; | ||
| + | margin-left: 10px; | ||
| + | margin-right: auto; | ||
| + | /* margin-top: 10px; */ | ||
| + | /* height: 45px; Written in the HTML. */ | ||
| + | /* width: auto; Written in the HTML. */ | ||
} | } | ||
| − | .topnav | + | /* Remove bullets from lists in navigation bar */ |
| − | + | .topnav * { | |
| + | list-style-type: none !important; | ||
| + | list-style-image: none !important; | ||
| + | font-weight: normal !important; /* needed for some phones to display light version of font */ | ||
} | } | ||
| − | .topnav | + | /* Style the links inside the navigation bar */ |
| − | + | .topnav .nav-links-container a:not(.nav-logo), .topnav .nav-links-container > .dropdown { | |
| + | color: var(--navbar-txt-color, white); | ||
| + | text-decoration: none; | ||
} | } | ||
| − | .topnav | + | /* Proper link spacing (also makes the entire button clickable) */ |
| − | + | .topnav .nav-links-container a:not(.nav-logo) { | |
| − | + | padding: 14px 16px; /* Might need to change */ | |
} | } | ||
| − | /* Hide the link that should open and close the | + | /* Hide the link-icon that should open and close the navbar on small screens */ |
| − | .topnav .icon { | + | .topnav > .menu-icon { |
| − | + | display: none; | |
| + | color: var(--navbar-txt-color); | ||
| + | font-size: 25px; | ||
} | } | ||
| − | /* | + | /* Style dropdown carets */ |
| − | . | + | .fa-caret-down:before { |
| − | + | margin-left: 5px; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
/* Style the dropdown button to fit inside the topnav */ | /* Style the dropdown button to fit inside the topnav */ | ||
| − | + | .dropbtn { | |
| − | + | display: -webkit-box; | |
| − | + | display: -ms-flexbox; | |
| − | + | display: flex; | |
| − | + | border: none; | |
| − | + | outline: none; | |
| − | + | font-family: inherit; | |
| − | + | cursor: default; | |
| − | + | ||
| − | + | ||
} | } | ||
/* Style the dropdown content (hidden by default) */ | /* Style the dropdown content (hidden by default) */ | ||
.dropdown-content { | .dropdown-content { | ||
| − | + | display: none; | |
| − | + | position: fixed; | |
| − | + | margin: 0px !important; | |
| − | + | min-width: 160px; | |
| − | + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| − | + | /* z-index: -1; */ | |
| + | background-color: var(--navbar-div-color, #adaabe94); | ||
| + | } | ||
| + | |||
| + | /* Show the dropdown menu when the user moves the mouse over the dropdown button */ | ||
| + | .dropdown:hover .dropdown-content { | ||
| + | display: block; | ||
} | } | ||
/* Style the links inside the dropdown */ | /* Style the links inside the dropdown */ | ||
.dropdown-content a { | .dropdown-content a { | ||
| − | + | color: var(--navbar-txt-color, white); | |
| − | + | margin-top: -5px; | |
| − | + | /* margin-left: -27px; for Chrome testing environment*/ | |
| − | + | text-decoration: none; | |
| − | + | display: block; | |
| − | + | text-align: left; | |
} | } | ||
| − | /* | + | /* Style topnav links and the dropdown button on hover */ |
| − | .topnav a:hover, .dropdown:hover .dropbtn { | + | .topnav a:hover:not(.nav-logo):not(.menu-icon), .dropdown:hover .dropbtn a { |
| − | + | background-color: var(--hover-div-color, white); | |
| − | + | color: var(--hover-txt-color, #444444); | |
} | } | ||
| − | /* | + | /* Style dropdown links on hover */ |
.dropdown-content a:hover { | .dropdown-content a:hover { | ||
| − | + | background-color: var(--hover-div-color, white); | |
| − | + | color: var(--hover-txt-color, #444444); | |
} | } | ||
| − | /* | + | |
| − | . | + | /*===== BASIC PAGE CLASSES =====*/ /* TODO: remove all "section-title" / "p-title" classes once switched to h1-6 */ |
| + | |||
| + | 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; */ | ||
| + | font-size: 1em !important; | ||
| + | color: var(--main-txt-color) !important; | ||
| + | } | ||
| + | |||
| + | h1, .section-title, .flex-col .section-title { | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | } | ||
| + | |||
| + | h3, .p-title, .flex-row .p-title { | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | font-size: 1.5em !important; | ||
| + | } | ||
| + | |||
| + | h4, .p-title, .flex-row .p-title { | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | font-size: 1.5em !important; | ||
| + | color: var(--sectionTitle-txt-color, #0C5798); | ||
| + | } | ||
| + | |||
| + | h5, .p-title, .flex-row .p-title { | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | font-size: 1.25em !important; | ||
| + | } | ||
| + | |||
| + | h6, .p-title, .flex-row .p-title { | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | 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; | ||
| + | } | ||
| + | |||
| + | .p-2-title{ | ||
| + | font-size: 1.1em !important; | ||
| + | color: var(--sectionTitle-txt-color, #0C5798); | ||
| + | } | ||
| + | |||
| + | .p-3-title{ | ||
| + | font-size: 1em !important; | ||
| + | color: var(--sectionTitle-txt-color, #0C5798); | ||
| + | } | ||
| + | |||
| + | .header-title, .flex-row { | ||
| + | display: flex; | ||
| + | flex-flow: row wrap; | ||
| + | justify-content: center; | ||
| + | } | ||
| + | |||
| + | .header-image, .header-title { | ||
| + | justify-content: center; | ||
| + | font-size: 3em; | ||
| + | line-height: normal !important; | ||
| + | } | ||
| + | |||
| + | #title_meetTheTeam { | ||
| + | top: 55%; | ||
| + | } | ||
| + | |||
| + | /* Keeps image centered and at a reasonable size with all screen sizes */ | ||
| + | .header-image { | ||
| + | height: calc(100vh - 45px); | ||
| + | width: 100%; | ||
| + | background-position: bottom right; /* default. overide in html if needed */ | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: cover; | ||
| + | margin-top:-7px; | ||
| + | } | ||
| + | |||
| + | #header_image_humanPractices, #header_image_targetOrganism { | ||
| + | background-position: left; | ||
| + | } | ||
| + | |||
| + | #header_image_team { | ||
| + | background-position: top; | ||
| + | } | ||
| + | |||
| + | .header-title { | ||
| + | position: relative; | ||
| + | text-align: center !important; | ||
| + | font-size: calc(60px + (70 - 60) * ((100vw - 800px) / (1600 - 800))) !important; | ||
| + | color: white !important; | ||
| + | /* font-family: var(--main-txt-font) !important; */ | ||
| + | font-family: var(--second-txt-font) !important; /* test font */ | ||
| + | margin-top: -7px; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | } | ||
| + | |||
| + | |||
| + | .header-title-progress { | ||
| + | position: relative; | ||
| + | text-align: center !important; | ||
| + | font-size: calc(30px + (40 - 30) * ((100vw - 800px) / (1600 - 800))) !important; | ||
| + | color: white !important; | ||
| + | /* font-family: var(--main-txt-font) !important; */ | ||
| + | margin-top: -7px; | ||
| + | top: 45%; | ||
| + | left: 50%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | } | ||
| + | |||
| + | .footer-map-image { | ||
| + | height: calc(12vh); | ||
| + | width: 100%; | ||
| + | background-position: top left; /* default. overide in html if needed */ | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: cover; | ||
| + | margin-top:-7px; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*----- Table of Contents -----*/ /* TODO: clean up unused code after switching to "toc" and "page-list" */ | ||
| + | |||
| + | .float-toc, .float-page-list { | ||
| + | display: block; | ||
| + | position: -webkit-sticky; /* Safari */ | ||
| + | position: sticky; | ||
| + | top: calc(45px + 5vh); | ||
| + | z-index: 100; | ||
| + | margin-top: 5vh; | ||
| + | margin-bottom: calc(-1000px - 16px - 5vh); /* height of toc to compensate */ | ||
| + | height: 1000px; /* big enough to hold list of any size */ | ||
| + | width: 15vw; | ||
| + | min-width: 200px; | ||
| + | padding: 5px; | ||
| + | padding-left: 2vw; | ||
| + | text-align: right; | ||
| + | transition: .3s; | ||
| + | } | ||
| + | |||
| + | .float-page-list { | ||
| + | display: none !important; | ||
| + | } | ||
| + | |||
| + | /* Page Lists (not used) */ | ||
| + | .float-page-list { | ||
| + | float: right; | ||
| + | padding: 5px; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | .float-toc h6 { | ||
| + | padding: 0; | ||
| + | padding-top: 75px; /* anchor jump offset */ | ||
| + | margin-top: -75px; | ||
| + | |||
| + | } | ||
| + | |||
| + | .float-page-list h5 { | ||
| + | color: var(--main-div-color, #545454); | ||
| + | } | ||
| + | |||
| + | .float-toc li, .float-page-list li { | ||
| + | list-style-type: none; | ||
| + | } | ||
| + | |||
| + | .float-toc a, .float-page-list a { | ||
| + | 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)) */ | ||
| + | border-radius: 7px; | ||
| + | background-color: var(--main-div-color, #545454); | ||
| + | color: white !important; | ||
| + | transition: .3s; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | .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 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 a:hover { | ||
| + | background-color: var(--main-div-color, #444444); | ||
| + | } | ||
| + | |||
| + | |||
| + | /*-- Scrolling style --*/ | ||
| + | |||
| + | .scroll-image { | ||
| + | position: relative; | ||
| + | top: 65vh; | ||
| + | left: 50vw; | ||
| + | width: calc(85px + (20 * ((100vw - 800px) / 800))); | ||
| + | transform: translate(-50%, -50%); | ||
| + | } | ||
| + | |||
| + | #scroll_image_homePage { | ||
| + | position: absolute; | ||
| + | top: 75%; | ||
| + | left: 78.5%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | } | ||
| + | |||
| + | .scroll-to-top { | ||
| + | display: none; /* start out not displaying. JS switches to show/hide on scroll. */ | ||
| + | position: fixed; | ||
| + | bottom: 2.5vh; | ||
| + | right: 2.5vh; | ||
| + | z-index: 9999; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top img { | ||
| + | width: calc(35px + (20 * ((100vw - 800px) / 800))); | ||
| + | padding: 10px; | ||
| + | margin: -10px; | ||
| + | opacity: 0.25; | ||
| + | transition: .3s; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top img:hover { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top2 { | ||
| + | position: fixed; | ||
| + | bottom: 2.5vh; | ||
| + | right: 2.5vh; | ||
| + | z-index: 9999; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top2 img { | ||
| + | width: calc(85px + (20 * ((100vw - 800px) / 800))); | ||
| + | } | ||
| + | |||
| + | |||
| + | /* id to jump to for scroll links. Padding with subtracted margin brings the jump to slightly above the actual element. */ | ||
| + | #top_row { | ||
| + | padding-top: 5vh; | ||
| + | margin-top: -5vh; | ||
| + | } | ||
| + | |||
| + | .flex-row { | ||
| + | margin-top: 40px; | ||
| + | justify-content: space-around; | ||
| + | padding: 0; | ||
| + | } | ||
| + | |||
| + | .toc-body { | ||
| + | min-height: 200vh; /* Shouldn't be an issue once pages have content, but makes sure page is tall enough to fit a full height for header image and a full height for ToC, so footer stays at the bottom. */ | ||
| + | } | ||
| + | |||
| + | .toc-body .flex-row { /* TODO: delete .flex-row.toc-width once confirmed first works */ | ||
| + | padding: 0 20%; | ||
| + | } | ||
| + | |||
| + | /* spaces out columns evenly for any number of columns */ | ||
| + | .flex-col { | ||
| + | flex: 1; | ||
| + | padding: 0 1em; | ||
| + | margin: 0 2.5vw; | ||
| + | min-width: 15em; | ||
| + | } | ||
| + | |||
| + | .toc-body .flex-col { | ||
| + | padding: 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) { | ||
| + | text-align: left !important; | ||
| + | } | ||
| + | |||
| + | /* Class when you don't want as much space between columns */ | ||
| + | .flex-row .flex-col.small-divide { | ||
| + | margin-left: 0; | ||
| + | margin-right: 0; | ||
| + | padding: 1vw; | ||
| + | } | ||
| + | |||
| + | .p-2-title { | ||
| + | font-size: 1.2em !important; | ||
| + | color: var(--sectionTitle-txt-color, #0C5798); | ||
| + | font-weight: normal !important; | ||
| + | } | ||
| + | |||
| + | .p-3-title { | ||
| + | font-size: 1.2em !important; | ||
| + | color: var(--sectionTitle-txt-color, #0C5798); | ||
| + | font-weight: normal !important; | ||
| + | margin-left:3em !important; | ||
| + | } | ||
| + | |||
| + | .week-title { | ||
| + | color:#ff5e0e; | ||
| + | font-size: 150% !important; | ||
| + | } | ||
| + | |||
| + | .week { | ||
| + | padding-top: 10vh; | ||
| + | margin-top: -10vh; | ||
| + | } | ||
| + | |||
| + | /* Class to assign when you want elements centered */ | ||
| + | .centered, .centered p { | ||
| + | justify-content: center !important; | ||
| + | text-align: center !important; | ||
| + | } | ||
| + | |||
| + | .flex-row .flex-col.small-divide a { | ||
| + | padding: 0 0 !important; | ||
| + | } | ||
| + | |||
| + | .content-divider { | ||
| + | justify-content: center; | ||
| + | } | ||
| + | |||
| + | /* Keeps image centered and reasonably sized */ | ||
| + | .content-divider img { | ||
| + | display: block; | ||
| + | margin: 0px auto; | ||
| + | max-width: 60vw; | ||
| + | max-height: 20vh; | ||
| + | width: auto; | ||
| + | height: auto; | ||
| + | } | ||
| + | |||
| + | /* References container */ | ||
| + | .hr-ref { | ||
| + | border: 0; | ||
| + | height: 1px; | ||
| + | background: #333; | ||
| + | width: 60%; | ||
| + | margin-left: 20%; | ||
| + | } | ||
| + | |||
| + | .ref-container { | ||
| + | margin: 10px 5vw; | ||
| + | /* border: 2px solid red; | ||
| + | border-radius: 20px; */ | ||
| + | padding: 0 20px; | ||
| + | } | ||
| + | |||
| + | .ref-container ol { | ||
| + | margin-left: 20%; | ||
| + | margin-right: 20%; | ||
| + | line-height: .75em; | ||
| + | } | ||
| + | |||
| + | .ref-container ol li { | ||
| + | padding-left: 2em; | ||
| + | text-indent: -2em; | ||
| + | font-size: 0.5em; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | .ref-container ol li a { | ||
| + | text-decoration: none; | ||
| + | color: var(--referenceLink-txt-color, #0c5798); | ||
| + | color: #4d789e; | ||
| + | } | ||
| + | |||
| + | .ref-container ol li a:hover { | ||
| + | /* color: var(--sectionTitle-txt-color, #005198); */ | ||
| + | text-decoration: underline; | ||
| + | text-decoration-color: var(--second-bg-color,#515151); | ||
| + | } | ||
| + | |||
| + | |||
| + | .image-inpage { | ||
| + | display: block; | ||
| + | max-width: 30vw; | ||
| + | min-width: 250px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | border: 3px solid #510013; | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | .image-inpage.floatR { | ||
| + | float: right; | ||
| + | margin-right: 0; | ||
| + | margin-left: 1em; | ||
| + | } | ||
| + | |||
| + | .image-inpage.floatL { | ||
| + | float: left; | ||
| + | margin-right: 1em; | ||
| + | margin-left: 0; | ||
| + | } | ||
| + | |||
| + | .image-inpage.large { | ||
| + | max-width: 75%; | ||
| + | } | ||
| + | |||
| + | .image-inpage-title { | ||
| + | margin: 10px; | ||
display: block; | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | color: #f52153; | ||
| + | text-align: center !important; | ||
} | } | ||
| + | .image-inpage-caption { | ||
| + | margin: 10px; | ||
| + | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | color: black; | ||
| + | text-align: left !important; | ||
| + | font-size: .75em; | ||
| + | } | ||
| − | + | .buttonnotebook { | |
| + | background-color: #464646; | ||
| + | color: white; | ||
| + | padding: 18px 20px; | ||
| + | width: 30%; | ||
| + | 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; | ||
| + | } | ||
| − | . | + | .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; | 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%; | width: 25%; | ||
| − | + | text-align: center; | |
| − | background-color: # | + | 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; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*-----Team Page Classes-----*/ /* TODO: adapt for mobile. 2 or 3 people per row? */ | ||
| + | |||
| + | #team_header_picture { | ||
| + | position: relative; | ||
| + | justify-content: center; | ||
| + | } | ||
| + | |||
| + | #team_header_picture img { | ||
| + | float: center; | ||
| + | max-width: none; | ||
| + | max-height: 95vh; | ||
| + | width: 80%; | ||
| + | margin: 0 10%; | ||
| + | border: 3px solid black; | ||
| + | } | ||
| + | |||
| + | .text-overlay-container { | ||
| + | position: absolute; | ||
| + | top: 90%; | ||
| + | left:50%; | ||
| + | width: 100%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .text-overlay-container p { | ||
| + | display: inline-flex; | ||
| + | width: 80%; | ||
| + | background-color: #FFFFFFDD !important; | ||
| + | justify-content: center; | ||
| + | text-align: center !important; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | font-size: 2.25em !important; | ||
| + | font-size: calc(40px + (50 - 40) * ((100vw - 800px) / (1600 - 800))) !important; | ||
| + | } | ||
| + | |||
| + | .column { | ||
| + | float: left; | ||
| + | width: 25%; | ||
| + | padding: 0px; | ||
| + | background-color: var(--main-bg-color); | ||
} | } | ||
/* Clearfix (clear floats) */ | /* Clearfix (clear floats) */ | ||
.row::after { | .row::after { | ||
| − | + | content: ""; | |
| − | + | clear: both; | |
| − | + | display: table; | |
| − | + | background-color: var(--main-bg-color); | |
} | } | ||
| Line 167: | Line 786: | ||
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: | + | background-color: var(--main-bg-color); |
} | } | ||
| Line 198: | Line 817: | ||
color: black; | color: black; | ||
} | } | ||
| + | |||
| + | /* Slideshow container2 */ | ||
| + | .slideshow-container2 { | ||
| + | width: 115%; | ||
| + | position: relative; | ||
| + | margin: auto; | ||
| + | overflow:hidden; | ||
| + | border-top:3px solid #4f0014; | ||
| + | border-bottom:3px solid #4f0014; | ||
| + | border-left:3px solid #4f0014; | ||
| + | border-right: 3px solid #4f0014; | ||
| + | background-color: var(--main-bg-color); | ||
| + | } | ||
| + | |||
| + | /* Slideshow container3 */ | ||
| + | .slideshow-container3 { | ||
| + | width: 100%; | ||
| + | position: relative; | ||
| + | margin: auto; | ||
| + | overflow:hidden; | ||
| + | border-top:3px solid #4f0014; | ||
| + | border-bottom:3px solid #4f0014; | ||
| + | border-left:3px solid #4f0014; | ||
| + | border-right: 3px solid #4f0014; | ||
| + | background-color: var(--main-bg-color); | ||
| + | background-size: contain; | ||
| + | } | ||
| + | |||
| + | /* Next & previous buttons (Human Practices) */ | ||
| + | .prev2, .next2 { | ||
| + | cursor: pointer; | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | width: auto; | ||
| + | padding: 16px; | ||
| + | margin-top: -22px; | ||
| + | color: #f92855BF !important; | ||
| + | color: #f92855; | ||
| + | font-weight: bold; | ||
| + | font-size: 18px; | ||
| + | transition: 0.6s ease; | ||
| + | border-radius: 0 3px 3px 0; | ||
| + | background-color: #FFFFFF99 !important; | ||
| + | background-color: #FFFFFF; | ||
| + | user-select: none; | ||
| + | } | ||
| + | |||
| + | /* Position the "next button" to the right */ | ||
| + | .next2 { | ||
| + | right: 0; | ||
| + | border-radius: 3px 0 0 3px; | ||
| + | } | ||
| + | |||
| + | /* On hover, add a grey background color */ | ||
| + | .prev2:hover, .next2:hover { | ||
| + | background-color: #FFFFFFE6 !important; | ||
| + | background-color: #FFFFFF; | ||
| + | } | ||
| + | |||
/* The dots/bullets/indicators */ | /* The dots/bullets/indicators */ | ||
| Line 214: | Line 892: | ||
background-color: #717171; | background-color: #717171; | ||
} | } | ||
| + | |||
/* Fading animation */ | /* Fading animation */ | ||
| Line 221: | Line 900: | ||
animation-name: fade; | animation-name: fade; | ||
animation-duration: 1.5s; | animation-duration: 1.5s; | ||
| − | background-color: | + | background-color: var(--main-bg-color); |
} | } | ||
| + | /* Text Styles */ | ||
.FullNames { | .FullNames { | ||
| − | text-align: center; | + | text-align: center !important; |
| − | font-size: | + | font-size:1.3em !important; |
| − | margin-top:- | + | color: black; |
| − | + | margin-top: -15px !important; | |
| − | color: | + | font-family: var(--main-txt-font) !important; |
| + | /* font-family: 'roboto' !important; */ | ||
| + | } | ||
| + | |||
| + | .PersDesc { | ||
| + | text-align: center !important; | ||
| + | font-size:1.15em !important; | ||
| + | margin-top:5px !important; | ||
| + | color: black; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
} | } | ||
| Line 236: | Line 926: | ||
to {opacity: 1} | to {opacity: 1} | ||
} | } | ||
| + | |||
@keyframes fade { | @keyframes fade { | ||
from {opacity: .75} | from {opacity: .75} | ||
| Line 254: | Line 945: | ||
| + | /*-----Footer-----*/ | ||
| + | |||
| + | #footer_row { | ||
| + | /* border: 2px solid red; temp for testing */ | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | background: black; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | max-height: 75px; /* fix bug where footer sometimes takes up whole page height */ | ||
| + | } | ||
| + | |||
| + | .footer-section-title { | ||
| + | font-size: calc(25px + (35 - 25) * ((100vw - 800px) / (1600 - 800))) !important; | ||
| + | color: white; | ||
| + | } | ||
| + | |||
| + | .footer-col { | ||
| + | flex: 1; | ||
| + | /* border: 2px solid blue; temp for testing */ | ||
| + | padding: 1em 1em; | ||
| + | } | ||
| + | |||
| + | .footer-col, .footer-col p, .footer-col a { | ||
| + | /* font-size: 1.5em; */ | ||
| + | text-align: center !important; | ||
| + | } | ||
| + | |||
| + | #mail_icon, .social-icons { | ||
| + | font-size: 36px; | ||
| + | color: white; | ||
| + | padding-top: 12px; | ||
| + | padding-bottom: 12px; | ||
| + | } | ||
| + | |||
| + | #contact_address { | ||
| + | font-size: 1.65vw !important; | ||
| + | font-size: calc(14px + (26 - 14) * ((100vw - 800px) / (1600 - 800))) !important; /* Scales between 14px and 26px. Credit: https://www.madebymike.com.au/writing/fluid-type-calc-examples/ */ | ||
| + | color: white; | ||
| + | } | ||
| + | |||
| + | .sponsors { | ||
| + | width: 20%; | ||
| + | } | ||
| Line 259: | Line 994: | ||
.workInProgress { | .workInProgress { | ||
| − | + | padding: 25px; | |
| − | + | padding-top: 100px; | |
| − | + | border-radius: 0px; | |
| − | + | /* border-style: dashed; | |
| − | + | border-color: var(--hover-div-color); | |
| − | + | border-width: medium; */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | background-color: var(--main-div-color); | |
| − | + | align-content: center; | |
| + | align-items: center; | ||
| + | align-self: center; | ||
} | } | ||
.workInProgress p { | .workInProgress p { | ||
| − | + | color: white !important; | |
| − | + | text-align: center !important; | |
| + | font-size: 17px !important; | ||
} | } | ||
| − | |||
| − | /* When the screen is less than | + | /*===== SCREEN RESPONSIVENESS (MOBILE VERSION) =====*/ |
| − | @media screen and (max-width: | + | |
| − | + | /* 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) { | |
| − | + | .topnav .nav-logo { | |
| − | + | margin-left: 5px; | |
| − | . | + | } |
| − | + | ||
| + | .buttonnotebook2 { | ||
display: block; | display: block; | ||
| + | width: 100%; | ||
| + | margin-bottom: 10px; | ||
| + | } | ||
| + | |||
| + | .topnav .menu-icon { | ||
| + | display: block; | ||
| + | position: absolute; | ||
| + | right: 10px; | ||
| + | top: 10px; | ||
| + | } | ||
| + | |||
| + | .dropbtn { | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | .topnav .dropdown-icon { | ||
| + | display: block; | ||
| + | position: relative; | ||
| + | margin-left: auto; | ||
| + | } | ||
| + | |||
| + | .topnav .nav-links-container {display: none;} | ||
| + | |||
| + | .topnav, .topnav .nav-links-container, .topnav .nav-links-container .dropdown { | ||
| + | flex-direction: column; | ||
| + | width: 100% | ||
| + | align-items: center; | ||
| + | } | ||
| + | |||
| + | .topnav, .topnav .nav-links-container a, .topnav .nav-links-container .dropdown { | ||
| + | width: 100% | ||
| + | } | ||
| + | |||
| + | .dropdown:hover .dropdown-content { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | .topnav .nav-links-container .dropdown-contentshow a { | ||
| + | padding-top: 5px; | ||
| + | padding-bottom: 5px; | ||
| + | } | ||
| + | |||
| + | .topnav .nav-links-container .dropdown:focus { | ||
| + | background-color: red; | ||
| + | color: blue; | ||
} | } | ||
| − | |||
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ | /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ | ||
| − | |||
.topnav.responsive { | .topnav.responsive { | ||
| − | + | position: relative; | |
| − | + | /* background-color: var(--navbar-div-color); */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | |||
| + | .topnav.responsive .nav-links-container {display: initial;} | ||
| + | |||
.topnav.responsive a { | .topnav.responsive a { | ||
float: none; | float: none; | ||
| Line 310: | Line 1,084: | ||
text-align: left; | text-align: left; | ||
} | } | ||
| + | |||
.topnav.responsive .dropdown {float: none;} | .topnav.responsive .dropdown {float: none;} | ||
.topnav.responsive .dropdown-content {position: relative;} | .topnav.responsive .dropdown-content {position: relative;} | ||
.topnav.responsive .dropdown .dropbtn { | .topnav.responsive .dropdown .dropbtn { | ||
| − | display: | + | display: flex; |
width: 100%; | width: 100%; | ||
text-align: left; | text-align: left; | ||
} | } | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| + | /*----- 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) { | ||
| + | |||
| + | .image-inpage.floatL, .image-inpage.floatR { | ||
| + | float: none; | ||
| + | margin-right: auto; | ||
| + | margin-left: auto; | ||
| + | } | ||
| + | |||
| + | .image-inpage.large { | ||
| + | max-width: 95%; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | .float-toc, .float-page-list { | ||
| + | display: inline; | ||
| + | float: none; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .float-page-list { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | div.toc-body .flex-row { /* TODO: delete .flex-row.toc-width once confirmed first works */ | ||
| + | padding: 0 1em; | ||
| + | } | ||
| + | |||
| + | /* Footer responsive */ | ||
| + | .address-of-our-team { | ||
| + | font-size: 2.5vw; | ||
| + | } | ||
| + | |||
| + | .footer-section-title { | ||
| + | font-size: 6vw !important; | ||
| + | font-size: calc(25px + (45 - 25) * ((100vw - 0px) / (800 - 0))) !important; /* formula credit above */ | ||
| + | } | ||
| + | |||
| + | #mail_icon, .social-icons { | ||
| + | font-size: calc(25px + (45 - 25) * ((100vw - 0px) / (800 - 0))) !important; | ||
| + | } | ||
| + | |||
| + | #contact_address { | ||
| + | font-size: 3vw !important; | ||
| + | font-size: calc(12px + (26 - 14) * ((100vw - 0px) / (800 - 0))) !important; | ||
| + | } | ||
| + | |||
| + | .sponsors { | ||
| + | width: 30%; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* Team Page responsive changes */ | ||
| + | .text-overlay-container>p { | ||
| + | font-size: 5vw !important; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* Info Pages responsive */ | ||
| + | .header-title { | ||
| + | font-weight: lighter !important; | ||
| + | } | ||
| + | |||
| + | .flex-row:not(#country_list):not(#footer_row) { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | .flex-col, .flex-row .flex-col.small-divide, .flex-row .flex-col.small-divide a { | ||
| + | /* width: 90%; */ | ||
| + | padding: 0 2.5% !important; | ||
| + | margin: 5% 5%; | ||
| + | } | ||
| + | |||
| + | #country_list { | ||
| + | margin-top: -4vh; | ||
| + | } | ||
| + | |||
| + | #country_list .flex-col { | ||
| + | margin: 2% 2.5%; | ||
| + | } | ||
| + | |||
| + | /* Slideshow container2 */ | ||
| + | .slideshow-container2 { | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | } /*=== END OF MAIN RESPONSIVE ===*/ | ||
| + | |||
| + | #noprint { | ||
| + | background-color: grey; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*----------------------------------------------------------------------------------*/ | ||
| + | |||
| + | /* 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 { | ||
| + | position: relative; | ||
| + | width: 10%; | ||
| + | text-decoration: none !important; | ||
| + | } | ||
| + | |||
| + | .home-header-image { | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | margin: auto; | ||
| + | } | ||
| + | |||
| + | .body_image_left { | ||
| + | display: block; | ||
| + | width: 20%; | ||
| + | margin-left: 10%; | ||
| + | |||
| + | } | ||
| + | |||
| + | .body_image_center { | ||
| + | display: block; | ||
| + | margin-left:auto !important; | ||
| + | margin-right:auto !important; | ||
| + | width: 20% !important; | ||
| + | } | ||
| + | |||
| + | .body_image_right { | ||
| + | display:block; | ||
| + | margin-left: 70%; | ||
| + | width:20%; | ||
| + | } | ||
| + | |||
| + | /* Three image containers (use 25% for four, and 50% for two, etc) */ | ||
| + | .column_body { | ||
| + | float: left; | ||
| + | width: 25%; | ||
| + | padding: 0px; | ||
| + | background-color: var(--main-bg-color) !important; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | } | ||
| + | |||
| + | .column_body2 { | ||
| + | float: left; | ||
| + | width: 20%; | ||
| + | padding: 0px; | ||
| + | background-color: var(--main-bg-color) !important; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | } | ||
| + | |||
| + | /* Clear floats after image containers */ | ||
| + | .row_body::after { | ||
| + | content: ""; | ||
| + | clear: both; | ||
| + | display: table; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | display:flex; | ||
| + | } | ||
| + | |||
| + | .main_paragraph { | ||
| + | padding-left: 1%; | ||
| + | padding-right: 1%; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | } | ||
| + | |||
| + | .text_left { | ||
| + | width:50%; | ||
| + | float:left; | ||
| + | padding-left:2%; | ||
| + | padding-right:2%; | ||
| + | padding-bottom:3% | ||
| + | } | ||
| + | |||
| + | .text_right { | ||
| + | width: 50%; | ||
| + | float:right; | ||
| + | padding-left:2%; | ||
| + | padding-right:2%; | ||
| + | padding-bottom:3%; | ||
| + | } | ||
| + | |||
| + | .main_image { | ||
| + | background-color: var(--main-theme-color); | ||
| + | width:100%; | ||
| + | |||
| + | } | ||
| + | |||
| + | .video-container { | ||
| + | position: relative; | ||
| + | color: white; | ||
| + | /* margin-top: -19vh; align to navbar. found a better way. */ | ||
| + | } | ||
| + | |||
| + | .video-centered-right-up { | ||
| + | position: absolute; | ||
| + | top: 40%; | ||
| + | left: 75%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | } | ||
| + | |||
| + | .vCover { | ||
| + | text-align: center; | ||
| + | vertical-align: middle; | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | |||
| + | .image_container { | ||
| + | position: relative; | ||
| + | width: 50%; | ||
| + | } | ||
| + | |||
| + | .image_container2 { | ||
| + | position: relative; | ||
| + | width: 75%; | ||
| + | } | ||
| + | |||
| + | .image_box { | ||
| + | opacity: 1; | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | transition: .5s ease; | ||
| + | backface-visibility: hidden; | ||
| + | } | ||
| + | |||
| + | .middle-details { | ||
| + | transition: .5s ease; | ||
| + | opacity: 0; | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | left: 60%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | -ms-transform: translate(-50%, -50%); | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .image_container:hover .image_box { | ||
| + | opacity: 0.2; | ||
| + | } | ||
| + | |||
| + | .image_container:hover .middle-details { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .image_container2:hover .image_box { | ||
| + | opacity: 0.2; | ||
| + | } | ||
| + | |||
| + | .image_container2:hover .middle-details { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .middle-text { | ||
| + | color: black; | ||
| + | font-size: 300%; | ||
| + | font-family: var(--main-txt-font) !important; | ||
| + | /* font-family: 'roboto' !important; */ | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | div#preload { display: none; } | ||
| + | |||
| + | /*************** Map PopOut ****************/ | ||
| + | |||
| + | .popup { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | cursor: pointer; | ||
| + | -webkit-user-select: none; | ||
| + | -moz-user-select: none; | ||
| + | -ms-user-select: none; | ||
| + | user-select: none; | ||
| + | } | ||
| + | |||
| + | /* The actual popup */ | ||
| + | .popup .popuptext { | ||
| + | visibility: hidden; | ||
| + | width: 160px; | ||
| + | background-color: #555; | ||
| + | color: #fff; | ||
| + | text-align: center; | ||
| + | border-radius: 6px; | ||
| + | padding: 8px 0; | ||
| + | position: relative; | ||
| + | z-index: 1; | ||
| + | bottom: 125%; | ||
| + | left: 50%; | ||
| + | margin-left: -80px; | ||
| + | top: -25vh; | ||
| + | } | ||
| + | |||
| + | /* Popup arrow */ | ||
| + | .popup .popuptext::after { | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | top: 100%; | ||
| + | left: 50%; | ||
| + | margin-left: -5px; | ||
| + | border-width: 5px; | ||
| + | border-style: solid; | ||
| + | border-color: #555 transparent transparent transparent; | ||
| + | } | ||
| + | |||
| + | /* Toggle this class - hide and show the popup */ | ||
| + | .popup .show { | ||
| + | visibility: visible; | ||
| + | -webkit-animation: fadeIn 1s; | ||
| + | animation: fadeIn 1s; | ||
| + | } | ||
| + | |||
| + | /* Add animation (fade in the popup) */ | ||
| + | @-webkit-keyframes fadeIn { | ||
| + | from {opacity: 0;} | ||
| + | to {opacity: 1;} | ||
| + | } | ||
| + | |||
| + | @keyframes fadeIn { | ||
| + | from {opacity: 0;} | ||
| + | to {opacity:1 ;} | ||
| + | } | ||
| + | |||
| + | /***********Quotation Code**********************/ | ||
| + | /**https://www.kirstencassidy.com/css-fancy-quotes**/ | ||
| + | .quotation{ | ||
| + | font-size: 30px; | ||
| + | //margin: 0 auto; | ||
| + | quotes: "\201C""\201D""\2018""\2019"; | ||
| + | padding: 10px 20px; | ||
| + | line-height: 1.4; | ||
| + | margin-left:-2.5em; | ||
| + | margin-right:-3.5em; | ||
| + | } | ||
| + | |||
| + | .quotation:before { | ||
| + | content: open-quote; | ||
| + | display: inline; | ||
| + | height: 0; | ||
| + | line-height: 0; | ||
| + | left: -10px; | ||
| + | position: relative; | ||
| + | top: 18px; | ||
| + | color: #fa99b0; | ||
| + | font-size: 3em; | ||
| + | font-family: times !important; | ||
| + | } | ||
| + | .quotation::after { | ||
| + | content: close-quote; | ||
| + | display: inline; | ||
| + | height: 0; | ||
| + | line-height: 0; | ||
| + | left: 10px; | ||
| + | position: relative; | ||
| + | top: 29px; | ||
| + | color: #fa99b0; | ||
| + | font-size: 3em; | ||
| + | font-family: times !important; | ||
| + | } | ||
| + | |||
| + | footer:not(#footer_row){ | ||
| + | margin:0; | ||
| + | text-align: right; | ||
| + | font-size: 1.5em; | ||
| + | font-style: italic; | ||
| + | margin-top: -0.5em; | ||
| + | } | ||
| + | |||
| + | .iconImage { | ||
| + | width: 10vh; | ||
| + | margin-right:2vh; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*----------------------------------------------------------------------------------*/ | ||
| + | |||
| + | /**************** table **********************/ | ||
| + | table, th, td { | ||
| + | border: 1px solid black; | ||
| + | border-collapse: collapse; | ||
| + | } | ||
| + | th, td { | ||
| + | padding: 5px; | ||
| + | } | ||
| + | th { | ||
| + | text-align: left; | ||
| + | /*************************/ | ||
</style> | </style> | ||
| + | |||
| + | <script language="JavaScript"> | ||
| + | |||
| + | <!-- Fade in/out scroll button when transitioning from/to top of screen --> | ||
| + | var amountScrolledA = 100; | ||
| + | var amountScrolledB = 1000; | ||
| + | $(window).scroll(function () { | ||
| + | if ($(window).scrollTop() > amountScrolledA) { | ||
| + | $('a.scroll-to-top').fadeIn('slow'); | ||
| + | } else { | ||
| + | $('a.scroll-to-top').fadeOut('slow'); | ||
| + | } | ||
| + | <!-- Fade in/out floating table of contents when transitioning from/to top of screen --> <!-- Not used with Sticky Positioning --> | ||
| + | if ($(window).scrollTop() > amountScrolledB) { | ||
| + | $('div.float-toc').fadeIn('slow'); | ||
| + | } else { | ||
| + | $('div.float-toc').fadeOut('slow'); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | <!-- Make table of contents stick to side when scrolling down --> | ||
| + | <!-- window.onscroll = function() {scrollStick()}; | ||
| + | |||
| + | var navbar = document.getElementById("float_toc"); | ||
| + | var sticky = navbar.offsetTop; | ||
| + | |||
| + | function scrollStick() { | ||
| + | if (window.pageYOffset >= sticky) { | ||
| + | navbar.classList.add("sticky") | ||
| + | } else { | ||
| + | navbar.classList.remove("sticky"); | ||
| + | } | ||
| + | } --> | ||
| + | |||
| + | <!-- Scroll to top is in footer --> | ||
| + | |||
| + | </script> | ||
| + | |||
| + | <!-- Global site tag (gtag.js) - Google Analytics --> | ||
| + | <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123707927-1"></script> | ||
| + | <script> | ||
| + | window.dataLayer = window.dataLayer || []; | ||
| + | function gtag(){dataLayer.push(arguments);} | ||
| + | gtag('js', new Date()); | ||
| + | |||
| + | gtag('config', 'UA-123707927-1'); | ||
| + | </script> | ||
| + | |||
</html> | </html> | ||
Latest revision as of 18:17, 16 October 2018