|
|
| Line 10: |
Line 10: |
| | href="https://2020.igem.org/Template:Calgary/Imposter-Landing-2-Style?action=raw&ctype=text/css" | | href="https://2020.igem.org/Template:Calgary/Imposter-Landing-2-Style?action=raw&ctype=text/css" |
| | /> | | /> |
| − | <style>
| |
| − | /* --- [ PROJECT COMPONENTS STYLING ] --- */
| |
| − | /* --- [ PIPELINE PANELS ] --- */
| |
| − |
| |
| − | #bodyContent .content-panel.pipeline h1 {
| |
| − | font-weight: 600;
| |
| − | font-size: 36px;
| |
| − |
| |
| − | line-height: 50px;
| |
| − | letter-spacing: 0.2em;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .content-panel.pipeline h2 {
| |
| − | font-weight: 400;
| |
| − | font-size: 30px;
| |
| − |
| |
| − | line-height: 40px;
| |
| − | letter-spacing: 0.1em;
| |
| − |
| |
| − | margin-bottom: 80px;
| |
| − | }
| |
| − |
| |
| − | .title {
| |
| − | color: #882916;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface {
| |
| − | display: flex;
| |
| − | flex-direction: row;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information {
| |
| − | background-color: #444444;
| |
| − | padding: 60px;
| |
| − | flex: 1;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline
| |
| − | .pipeline-interface
| |
| − | .pipeline-information
| |
| − | .hidden {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information h3 {
| |
| − | display: inline;
| |
| − | font-style: normal;
| |
| − | font-weight: 500;
| |
| − | font-size: 36px;
| |
| − |
| |
| − | line-height: 43px;
| |
| − | align-items: center;
| |
| − |
| |
| − | color: rgb(68, 68, 68);
| |
| − |
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information p {
| |
| − | display: flex;
| |
| − |
| |
| − | font-family: Barlow;
| |
| − | font-style: normal;
| |
| − | font-weight: normal;
| |
| − | font-size: 18px;
| |
| − |
| |
| − | line-height: 25px;
| |
| − |
| |
| − | color: rgb(68, 68, 68);
| |
| − |
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline
| |
| − | .pipeline-interface
| |
| − | .pipeline-information
| |
| − | p:last-child {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information .ast {
| |
| − | font-weight: 600;
| |
| − |
| |
| − | color: #ffa600;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-diagram {
| |
| − | margin-right: 80px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-diagram g:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-diagram g .fixed {
| |
| − | position: absolute;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 900px) {
| |
| − | #bodyContent .content-panel.pipeline h1 {
| |
| − | font-size: 36px;
| |
| − |
| |
| − | line-height: 50px;
| |
| − | letter-spacing: 0.2em;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .content-panel.pipeline h2 {
| |
| − | font-size: 30px;
| |
| − |
| |
| − | line-height: 40px;
| |
| − | letter-spacing: 0.1em;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface {
| |
| − | flex-direction: column;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-diagram {
| |
| − | margin-right: 0px;
| |
| − | margin-bottom: 80px;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information {
| |
| − | padding: 40px;
| |
| − | }
| |
| − |
| |
| − | #proposed-diagram {
| |
| − | max-width: 70vw;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information h3 {
| |
| − | font-size: 30px;
| |
| − |
| |
| − | line-height: 40px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 400px) {
| |
| − | .content-panel.pipeline .pipeline-interface .pipeline-information h3 {
| |
| − | font-size: 24px;
| |
| − |
| |
| − | line-height: 30px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* --- [ MAIN MESSAGE PANEL ] --- */
| |
| − |
| |
| − | .content-panel.main-message {
| |
| − | background-color: #1e6273;
| |
| − | padding: 80px;
| |
| − |
| |
| − | text-align: left;
| |
| − | justify-content: left;
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message > * {
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message h2 {
| |
| − | font-weight: bold;
| |
| − | font-size: 36px;
| |
| − | line-height: 43px;
| |
| − | letter-spacing: 0.05em;
| |
| − | text-transform: uppercase;
| |
| − |
| |
| − | color: rgba(255, 255, 255, 0.6);
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message h1 {
| |
| − | font-size: 48px;
| |
| − | line-height: 58px;
| |
| − | font-weight: bold;
| |
| − | letter-spacing: 0.05em;
| |
| − | text-transform: uppercase;
| |
| − |
| |
| − | color: rgba(255, 255, 255, 0.9);
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message h1 .emphasis {
| |
| − | color: #f1c23f;
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message p {
| |
| − | font-weight: 500;
| |
| − | font-size: 24px;
| |
| − | line-height: 29px;
| |
| − |
| |
| − | color: rgba(255, 255, 255, 0.9);
| |
| − |
| |
| − | max-width: 700px;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 900px) {
| |
| − | .content-panel.main-message h2 {
| |
| − | font-size: 30px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message h1 {
| |
| − | font-size: 36px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.main-message p {
| |
| − | font-size: 21px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* --- [ HIGHLIGHTS STYLING ] --- */
| |
| − |
| |
| − | .content-panel.highlights .article-holder {
| |
| − | display: flex;
| |
| − | flex-direction: row;
| |
| − | margin-top: 20px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-holder .emphasis-quote {
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − |
| |
| − | justify-content: center;
| |
| − |
| |
| − | margin-right: 40px;
| |
| − |
| |
| − | padding: 60px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-holder .emphasis-quote:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-holder .emphasis-quote > * {
| |
| − | margin-bottom: 60px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-holder .emphasis-quote > *:last-child {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.highlights
| |
| − | .article-holder
| |
| − | .emphasis-quote
| |
| − | .quote {
| |
| − | font-weight: 500;
| |
| − | font-size: 36px;
| |
| − | line-height: 43px;
| |
| − | align-items: center;
| |
| − | text-align: center;
| |
| − | letter-spacing: 0.1em;
| |
| − | text-transform: uppercase;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − |
| |
| − | color: #444444;
| |
| − |
| |
| − | max-width: 350px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .articles {
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | justify-content: center;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row {
| |
| − | display: flex;
| |
| − | flex-direction: row;
| |
| − | margin-bottom: 40px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row:last-child {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article {
| |
| − | text-align: left;
| |
| − | justify-content: left;
| |
| − | margin-right: 40px;
| |
| − |
| |
| − | max-width: 350px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article:last-child {
| |
| − | text-align: left;
| |
| − | justify-content: left;
| |
| − | margin-right: 0px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article h2 {
| |
| − | font-weight: 700;
| |
| − | font-size: 18px;
| |
| − | line-height: 22px;
| |
| − | letter-spacing: 0.1em;
| |
| − |
| |
| − | color: #1e6273;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article h1 {
| |
| − | font-weight: 600;
| |
| − | font-size: 24px;
| |
| − | line-height: 29px;
| |
| − | letter-spacing: 0.1em;
| |
| − |
| |
| − | color: #444444;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article p {
| |
| − | font-size: 18px;
| |
| − | line-height: 22px;
| |
| − | letter-spacing: 0.1em;
| |
| − |
| |
| − | color: #444444;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 1000px) {
| |
| − | .content-panel.highlights .article-holder {
| |
| − | flex-direction: column;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-holder .emphasis-quote {
| |
| − | margin-right: 0px;
| |
| − | margin-bottom: 40px;
| |
| − | padding: 30px;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.highlights
| |
| − | .article-holder
| |
| − | .emphasis-quote
| |
| − | .quote {
| |
| − | max-width: 500px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .content-panel.highlights .article-row {
| |
| − | flex-direction: column;
| |
| − | margin-bottom: 40px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article {
| |
| − | margin-right: 0px;
| |
| − | margin-bottom: 40px;
| |
| − |
| |
| − | max-width: 500px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-row .article:last-child {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 400px) {
| |
| − | .content-panel.highlights .article-holder .emphasis-quote {
| |
| − | padding: 0px;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.highlights
| |
| − | .article-holder
| |
| − | .emphasis-quote
| |
| − | .quote {
| |
| − | font-size: 24px;
| |
| − | line-height: 30px;
| |
| − | letter-spacing: 0.1em;
| |
| − | text-transform: uppercase;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.highlights
| |
| − | .article-holder
| |
| − | .emphasis-quote
| |
| − | .quotation {
| |
| − | max-width: 20px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights .article-holder .emphasis-quote > * {
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.highlights
| |
| − | .article-holder
| |
| − | .emphasis-quote
| |
| − | > *:last-child {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons {
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons .component-holder {
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | margin-top: 120px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons .component-holder .component-row {
| |
| − | display: flex;
| |
| − | flex-direction: row;
| |
| − | margin-bottom: 40px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons .component-holder .component-row:last-child {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons .component-holder .component-row > * {
| |
| − | margin-right: 40px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | > *:last-child {
| |
| − | margin-right: 0px;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component {
| |
| − | text-align: center;
| |
| − | max-width: 260px;
| |
| − | min-width: 260px;
| |
| − | max-height: 260px;
| |
| − | min-height: 260px;
| |
| − | padding: 30px;
| |
| − | transform: scale(1);
| |
| − | -webkit-transition: transform 1000ms linear;
| |
| − | -ms-transition: transform 500ms linear;
| |
| − | transition: transform 500ms linear;
| |
| − | cursor: pointer;
| |
| − | background-color: #f0eadf;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component:hover {
| |
| − | transform: scale(1.1);
| |
| − | -webkit-transition: transform 500ms linear;
| |
| − | -ms-transition: transform 500ms linear;
| |
| − | transition: transform 500ms linear;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component:hover
| |
| − | .icon
| |
| − | svg
| |
| − | > * {
| |
| − | stroke: #f8b200;
| |
| − | -webkit-transition: stroke 500ms linear;
| |
| − | -ms-transition: stroke 500ms linear;
| |
| − | transition: stroke 500ms linear;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component:hover
| |
| − | p {
| |
| − | color: #444444;
| |
| − | -webkit-transition: color 500ms linear;
| |
| − | -ms-transition: color 500ms linear;
| |
| − | transition: color 500ms linear;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component
| |
| − | p {
| |
| − | text-align: center;
| |
| − | color: #aaaaaa;
| |
| − | -webkit-transition: color 500ms linear;
| |
| − | -ms-transition: color 500ms linear;
| |
| − | transition: color 500ms linear;
| |
| − | }
| |
| − |
| |
| − | #HQ_page
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component
| |
| − | h2 {
| |
| − | font-weight: 600;
| |
| − | font-size: 16px;
| |
| − | line-height: 24px;
| |
| − | text-transform: uppercase;
| |
| − | font-variant: small-caps;
| |
| − | margin-bottom: 5px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component
| |
| − | .icon {
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | .project-component
| |
| − | .icon
| |
| − | svg
| |
| − | > * {
| |
| − | stroke: #0197ae;
| |
| − | -webkit-transition: stroke 1000ms linear;
| |
| − | -ms-transition: stroke 1000ms linear;
| |
| − | transition: stroke 1000ms linear;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 750px) {
| |
| − | .content-panel.project-icons .component-holder .component-row {
| |
| − | flex-direction: column;
| |
| − | margin-bottom: 40px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons .component-holder .component-row > * {
| |
| − | margin-right: 0px;
| |
| − | margin-bottom: 40px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.project-icons
| |
| − | .component-holder
| |
| − | .component-row
| |
| − | > *:last-child {
| |
| − | margin-right: 0px;
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* --- [ MISCELLANEOUS STYLING ] --- */
| |
| − |
| |
| − | .content-panel.pipeline > h1,
| |
| − | .content-panel.highlights > h1,
| |
| − | .content-panel.project-icons > h1 {
| |
| − | display: flex;
| |
| − |
| |
| − | font-family: Barlow SemiBold;
| |
| − | font-style: normal;
| |
| − | font-weight: 600;
| |
| − | font-size: 48px;
| |
| − |
| |
| − | color: rgb(68, 68, 68);
| |
| − |
| |
| − | line-height: 58px;
| |
| − | letter-spacing: 0.2em;
| |
| − | text-transform: uppercase;
| |
| − | justify-content: center;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline > h2,
| |
| − | .content-panel.highlights > h2,
| |
| − | .content-panel.project-icons > h2 {
| |
| − | display: flex;
| |
| − |
| |
| − | font-family: Barlow Medium;
| |
| − | font-style: normal;
| |
| − | font-weight: 500;
| |
| − | font-size: 36px;
| |
| − |
| |
| − | color: rgba(68, 68, 68, 0.5);
| |
| − |
| |
| − | line-height: 43px;
| |
| − | justify-content: center;
| |
| − | letter-spacing: 0.1em;
| |
| − | text-align: center;
| |
| − |
| |
| − | margin-bottom: 80px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.dynamic-padding {
| |
| − | padding: 80px;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 900px) {
| |
| − | .content-panel.dynamic-padding {
| |
| − | padding: 50px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .content-panel.pipeline > h1,
| |
| − | .content-panel.highlights > h1,
| |
| − | .content-panel.project-icons > h1 {
| |
| − | font-size: 36px;
| |
| − |
| |
| − | line-height: 50px;
| |
| − | }
| |
| − |
| |
| − | .content-panel.pipeline > h2,
| |
| − | .content-panel.highlights > h2. .content-panel.project-icons > h2 {
| |
| − | font-size: 30px;
| |
| − |
| |
| − | line-height: 45px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 400px) {
| |
| − | #bodyContent .content-panel.pipeline > h1,
| |
| − | .content-panel.highlights > h1,
| |
| − | .content-panel.project-icons > h1 {
| |
| − | font-size: 30px;
| |
| − |
| |
| − | line-height: 40px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .content-panel.pipeline > h2,
| |
| − | .content-panel.highlights > h2,
| |
| − | .content-panel.project-icons > h2 {
| |
| − | font-size: 24px;
| |
| − |
| |
| − | line-height: 35px;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| | </head> | | </head> |
| | <body style="background-color: #ffffff; overflow-x: hidden"> | | <body style="background-color: #ffffff; overflow-x: hidden"> |
