|
|
Line 5: |
Line 5: |
| <script src="https://2019.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script> | | <script src="https://2019.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script> |
| <style> | | <style> |
− | | + | .expand-on-hover:hover { |
− | | + | |
− | | + | |
− | | + | |
− | /* --- [ HIGHLIGHTS STYLING ] --- */
| + | |
− | | + | |
− | .content-panel.highlights .article-holder { | + | |
− | display: flex;
| + | |
− | flex-direction: row;
| + | |
− | margin-top: 80px;
| + | |
− | }
| + | |
− | | + | |
− | .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;
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | .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: #00C2FF;
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | .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: #f3f3f3;
| + | |
− | }
| + | |
− | | + | |
− | .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;
| + | |
− | }
| + | |
− | | + | |
− | .content-panel.project-icons .component-holder .component-row .project-component {
| + | |
− | text-align: center;
| + | |
− | max-width: 260px;
| + | |
− | padding: 30px;
| + | |
− | transform: scale(1);
| + | |
− | -webkit-transition: transform 1000ms linear;
| + | |
− | -ms-transition: transform 500ms linear;
| + | |
− | transition: transform 500ms linear;
| + | |
− | cursor: pointer;
| + | |
− | background-color: white;
| + | |
− | }
| + | |
− | | + | |
− | .content-panel.project-icons .component-holder .component-row .project-component:hover {
| + | |
| transform: scale(1.1); | | transform: scale(1.1); |
| -webkit-transition: transform 500ms linear; | | -webkit-transition: transform 500ms linear; |
Line 279: |
Line 13: |
| } | | } |
| | | |
− | .content-panel.project-icons .component-holder .component-row .project-component:hover .icon svg > * { | + | .expand-on-hover:hover .icon svg > * { |
| stroke: #F8B200; | | stroke: #F8B200; |
| -webkit-transition: stroke 500ms linear; | | -webkit-transition: stroke 500ms linear; |
Line 286: |
Line 20: |
| } | | } |
| | | |
− | .content-panel.project-icons .component-holder .component-row .project-component:hover p { | + | .expand-on-hover:hover p { |
| color: #444444; | | color: #444444; |
| -webkit-transition: color 500ms linear; | | -webkit-transition: color 500ms linear; |
| -ms-transition: color 500ms linear; | | -ms-transition: color 500ms linear; |
| transition: color 500ms linear; | | transition: color 500ms linear; |
− | }
| |
− |
| |
− | .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;
| |
− | }
| |
− |
| |
− | .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: #00C2FF;
| |
− | -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;
| |
− | }
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | .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> | | </style> |
Line 501: |
Line 92: |
| | | |
| | | |
− | <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" > <a href="https://2019.igem.org/Team:Calgary/Model/EmulsionPrediction"> | + | <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 expand-on-hover" > <a href="https://2019.igem.org/Team:Calgary/Model/EmulsionPrediction"> |
| <div class="container__sources"> | | <div class="container__sources"> |
| <img src="https://static.igem.org/mediawiki/2019/3/31/T--Calgary--ternaryPhaseGIF.gif" width="25%"style="margin-left: auto; margin-right: auto; display: block;"/> | | <img src="https://static.igem.org/mediawiki/2019/3/31/T--Calgary--ternaryPhaseGIF.gif" width="25%"style="margin-left: auto; margin-right: auto; display: block;"/> |