|
|
| (3 intermediate revisions by the same user not shown) |
| Line 7: |
Line 7: |
| | | | |
| | <head> | | <head> |
| − | <meta charset="utf-8" />
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
| |
| − | <meta name="csu_china" content="csu_china" />
| |
| − | <title>Team:csu_china</title>
| |
| − | <!-- Favicon-->
| |
| − | <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
| |
| − | <!-- Font Awesome icons (free version)-->
| |
| − | <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
| |
| − | <!-- Google fonts-->
| |
| − | <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
| |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
| |
| − | <!-- Core theme CSS (includes Bootstrap)-->
| |
| | | | |
| − | <script src="http://code.jquery.com/jquery-latest.js"></script>
| |
| − | <script src="https://2021.igem.org/wiki/index.php?title=Template:CSU_CHINA/JS/script&action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2021.igem.org/wiki/index.php?title=Template:CSU_CHINA/JS/scripts&action=raw&ctype=text/javascript"></script>
| |
| | </head> | | </head> |
| | | | |
| | <body> | | <body> |
| − | <style>
| + | <h2 class="pageContent-main__title"> |
| − | .MathJax nobr>span.math>span {
| + | |
| − | border-left-width: 0
| + | |
| − | }
| + | |
| − |
| + | |
| − | ;
| + | |
| − | html,
| + | |
| − | body {
| + | |
| − | font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
| + | |
| − | font-size: 16px;
| + | |
| − | word-spacing: 1px;
| + | |
| − | -ms-text-size-adjust: 100%;
| + | |
| − | -webkit-text-size-adjust: 100%;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | box-sizing: border-box;
| + | |
| − | width: 100%;
| + | |
| − | background-color: #fff;
| + | |
| − | min-height: 100vh;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | ::-webkit-scrollbar {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | *,
| + | |
| − | *:before,
| + | |
| − | *:after {
| + | |
| − | box-sizing: border-box;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | :root {
| + | |
| − | --primary: #074E9F;
| + | |
| − | --primary-transparent: rgba(7, 78, 159, 0.5);
| + | |
| − | --blue: #6DBFFF;
| + | |
| − | --yellow: #FFC93C;
| + | |
| − | --dark: #0d2b4d;
| + | |
| − | --title-color: #004290;
| + | |
| − | --text-color: #00244E;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navbar {
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | top: 0;
| + | |
| − | width: 100%;
| + | |
| − | /* background-color: */
| + | |
| − | background: var(--primary-transparent);
| + | |
| − | backdrop-filter: blur(8px);
| + | |
| − | -webkit-backdrop-filter: blur(8px);
| + | |
| − | transition: all .3s;
| + | |
| − | z-index: 999;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navbar>.logo {
| + | |
| − | width: 100%;
| + | |
| − | padding: .5rem 0 0 0;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse {
| + | |
| − | padding: 0 3%;
| + | |
| − | display: flex;
| + | |
| − | flex-direction: row;
| + | |
| − | transition: all .3s;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content {
| + | |
| − | width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #top_title {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list {
| + | |
| − | flex-shrink: 0;
| + | |
| − | padding: .5rem;
| + | |
| − | display: flex;
| + | |
| − | flex-shrink: 0;
| + | |
| − | text-align: center;
| + | |
| − | flex-direction: row;
| + | |
| − | vertical-align: center;
| + | |
| − | align-items: center;
| + | |
| − | text-align: center;
| + | |
| − | justify-content: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.mainlist {
| + | |
| − | flex: 1;
| + | |
| − | /* overflow-y: hidden;
| + | |
| − | overflow-x: auto; */
| + | |
| − | /* overflow: auto; */
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list>.navbar-list__item {
| + | |
| − | font-size: .9rem;
| + | |
| − | line-height: 1.5rem;
| + | |
| − | color: #ffffff;
| + | |
| − | font-weight: bold;
| + | |
| − | padding: .3rem 1rem;
| + | |
| − | /* flex: 1; */
| + | |
| − | text-decoration: none;
| + | |
| − | margin: 0 .3rem;
| + | |
| − | font-family: San Francisco Display;
| + | |
| − | transition: all .3s;
| + | |
| − | border-radius: 2rem;
| + | |
| − | position: relative;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list>.navbar-list__item:hover {
| + | |
| − | overflow: visible;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list>.navbar-list__item .navbar-list__menu {
| + | |
| − | position: absolute;
| + | |
| − | top: 2.2rem;
| + | |
| − | background-color: #ffffff;
| + | |
| − | border-radius: 5px;
| + | |
| − | box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1);
| + | |
| − | width: 10rem;
| + | |
| − | left: calc(50% - 5rem);
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list>.navbar-list__item .navbar-list__menuItem {
| + | |
| − | padding: .5rem 1rem;
| + | |
| − | color: #333;
| + | |
| − | display: block;
| + | |
| − | text-decoration: none;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list>.active,
| + | |
| − | #collapse>.navbar-list>.navbar-list__item:hover {
| + | |
| − | background-color: var(--yellow);
| + | |
| − | color: var(--primary);
| + | |
| − | }
| + | |
| − |
| + | |
| − | #collapse>.navbar-list>.teamname {
| + | |
| − | font-size: 1.5rem;
| + | |
| − | color: var(--yellow);
| + | |
| − | }
| + | |
| − |
| + | |
| − | #logo {
| + | |
| − | width: 2.5rem;
| + | |
| − | height: 2.5rem;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home {
| + | |
| − | width: 100%;
| + | |
| − | min-height: 100vh;
| + | |
| − | background-color: #ffffff;
| + | |
| − | display: flex;
| + | |
| − | flex-direction: column;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageHead {
| + | |
| − | height: 80vh;
| + | |
| − | width: 100%;
| + | |
| − | position: relative;
| + | |
| − | background-position-y: top;
| + | |
| − | background-position-x: center;
| + | |
| − | background-size: cover;
| + | |
| − | background-image: url('/static/images/lab.png');
| + | |
| − | display: flex;
| + | |
| − | flex-direction: column;
| + | |
| − | justify-content: flex-end;
| + | |
| − | z-index: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageHead::before {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 80vh;
| + | |
| − | background-color: rgba(0, 36, 78, .5);
| + | |
| − | z-index: -1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageHead>.pageHead-content {
| + | |
| − | text-align: center;
| + | |
| − | display: flex;
| + | |
| − | flex-direction: column;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageHead>.pageHead-content>.pageHead-content__title {
| + | |
| − | font-size: 5rem;
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageHead>.pageHead-content>.pageHead-content__description {
| + | |
| − | margin: 6rem 10% 4rem 10%;
| + | |
| − | font-size: 1rem;
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageContent {
| + | |
| − | display: flex;
| + | |
| − | flex-direction: row;
| + | |
| − | min-height: 60vh;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #home>.pageContent>.pageContent-side {
| + | |
| − | width: 20%;
| + | |
| − | max-width: 200px;
| + | |
| − | flex-shrink: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navlist {
| + | |
| − | background-color: var(--dark);
| + | |
| − | padding: 2rem .5rem 4rem .5rem;
| + | |
| − | min-height: 55vh;
| + | |
| − | border-bottom-right-radius: 2rem;
| + | |
| − | position: relative;
| + | |
| − | text-align: center;
| + | |
| − | display: flex;
| + | |
| − | flex-direction: column;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navlist>.pageContent-navlist__head {
| + | |
| − | padding: 1rem 0 1rem 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navlist>.pageContent-navlist__head>.logo {
| + | |
| − | margin: 1rem auto;
| + | |
| − | width: 3.5rem;
| + | |
| − | height: 3.5rem;
| + | |
| − | border-radius: 50%;
| + | |
| − | background-color: #dfdfdf;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navlist>.pageContent-navlist__head>.title {
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 1.5rem;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navlist>.pageContent-navlist__item {
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 1rem;
| + | |
| − | padding: .6rem .1rem;
| + | |
| − | margin: .1rem 0;
| + | |
| − | text-align: center;
| + | |
| − | width: 100%;
| + | |
| − | transition: all .3s;
| + | |
| − | text-decoration: none;
| + | |
| − | border-radius: 3px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #navlist>.pageContent-navlist__item:hover,
| + | |
| − | #navlist>.active {
| + | |
| − | background-color: var(--yellow);
| + | |
| − | color: var(--dark);
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent {
| + | |
| − | padding: 2rem 5%;
| + | |
| − | position: relative;
| + | |
| − | flex-shrink: 0;
| + | |
| − | flex: 1;
| + | |
| − | max-width: 70%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__title {
| + | |
| − | font-size: 2rem;
| + | |
| − | line-height: 2.5rem;
| + | |
| − | color: var(--dark);
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | width: 95%;
| + | |
| − | margin: 3rem auto 2rem auto;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__subtitle {
| + | |
| − | font-size: 1.5rem;
| + | |
| − | line-height: 2.5rem;
| + | |
| − | color: var(--dark);
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | width: 95%;
| + | |
| − | margin: 3rem auto 2rem auto;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__title::after {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | width: 100%;
| + | |
| − | height: 3px;
| + | |
| − | background-color: var(--dark);
| + | |
| − | left: 0;
| + | |
| − | bottom: -1rem;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__textBox {
| + | |
| − | width: 90%;
| + | |
| − | margin: 1rem 5% 3rem 5%;
| + | |
| − | color: var(--text-color);
| + | |
| − | font-size: 1rem;
| + | |
| − | line-height: 1.5rem;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__textBox p {
| + | |
| − | margin-bottom: 1.1rem;
| + | |
| − | font-size: 1.1rem;
| + | |
| − | line-height: 1.8rem;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__textBox .name {
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #pagecontent .pageContent-main__textBox .image {
| + | |
| − | width: 80%;
| + | |
| − | margin: 2rem 10%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .pageContent-side .mytoc {
| + | |
| − | position: -webkit-sticky;
| + | |
| − | position: sticky;
| + | |
| − | top: 12rem;
| + | |
| − | background: transparent;
| + | |
| − | padding: 1.5rem;
| + | |
| − | border: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .pageContent-side .mytoc .toc_list {
| + | |
| − | font-size: .8rem;
| + | |
| − | color: #888;
| + | |
| − | line-height: 1.5rem;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .pageContent-side .mytoc .toc_list .toclist__item a {
| + | |
| − | color: #888;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .pageContent-side .mytoc .toc_list .toclist__item a:hover {
| + | |
| − | color: var(--primary)
| + | |
| − | }
| + | |
| − |
| + | |
| − | @media screen and (max-width: 800px) {
| + | |
| − | #home>.screen>#group1>.title {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | #navbar>.logo {
| + | |
| − | padding: 0.5rem 0;
| + | |
| − | }
| + | |
| − | #collapse {
| + | |
| − | height: 0;
| + | |
| − | }
| + | |
| − | #home>.pageContent>.pageContent-side {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | #home>.screen>#group1 {
| + | |
| − | padding-top: 5vh;
| + | |
| − | }
| + | |
| − | #home>.pageContent>.pageContent-main>.profilelist>.profile {
| + | |
| − | width: calc(100% / 3)
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <h2 class="pageContent-main__title">
| + | |
| | <!--put tile here, <h2>title</h2>, class="pageContent-main__title" means it is the main title--> | | <!--put tile here, <h2>title</h2>, class="pageContent-main__title" means it is the main title--> |
| | GI | | GI |
GI is a kind of light-activated protein. If you shine blue light on it, it will change its own structure and will be able to combined with LOV.
GI is a photosensitive protein, under the exposure of 450nm blue light, its structure will alter and can form a dimer with LOV. We used GI as a part of our blue light switch.
Fig.1 The model diagram of GIP-miR21T-GI-GAL4-4XmiR21TC
The duration of the combination of GI and LOV after the blue light exposure will alter as the illuminate method and the intensity of the blue light differ. We used strong light for a 30min exposure and then use weak light for another 30min
exposure.
[1]Masayuki Yazawa , Amir M Sadaghiani, Brian Hsueh.Induction of protein-protein interactions in live cells using light[J].Nat Biotechnol. 2009 Oct;27(10):941-5.
