Difference between revisions of "Team:CSU CHINA/Education"

Line 92: Line 92:
 
           <h2 class="pageContent-main__title">Synthetic Biology Day(Changsha No. 21 Middle School)</h2>
 
           <h2 class="pageContent-main__title">Synthetic Biology Day(Changsha No. 21 Middle School)</h2>
 
         </div>
 
         </div>
 +
        <div class="pageContent-side"></div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
Line 97: Line 98:
 
</body>
 
</body>
 
<style>
 
<style>
−
  .MathJax nobr>span.math>span{border-left-width:0 !important};
+
    .MathJax nobr>span.math>span{border-left-width:0 !important};
−
  html,
+
    html,
−
  body {
+
    body {
−
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+
      font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
−
      Roboto, 'Helvetica Neue', Arial, sans-serif;
+
        Roboto, 'Helvetica Neue', Arial, sans-serif;
−
    font-size: 16px;
+
      font-size: 16px;
−
    word-spacing: 1px;
+
      word-spacing: 1px;
−
    -ms-text-size-adjust: 100%;
+
      -ms-text-size-adjust: 100%;
−
    -webkit-text-size-adjust: 100%;
+
      -webkit-text-size-adjust: 100%;
−
    -moz-osx-font-smoothing: grayscale;
+
      -moz-osx-font-smoothing: grayscale;
−
    -webkit-font-smoothing: antialiased;
+
      -webkit-font-smoothing: antialiased;
−
    box-sizing: border-box;
+
      box-sizing: border-box;
−
    width: 100%;
+
−
    background-color: #fff;
+
−
    min-height: 100vh;
+
−
    padding: 0;
+
−
    margin: 0;
+
−
    overflow-x: hidden;
+
−
    overflow-y: auto;
+
−
  }
+
−
 
+
−
  ::-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!important;
+
−
    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;
+
−
    overflow: hidden;
+
−
  }
+
−
  #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)!important;
+
−
    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;
+
−
    line-height: 5.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)!important;
+
−
    color: var(--dark);
+
−
  }
+
−
 
+
−
  #pagecontent {
+
−
    padding: 2rem 5%;
+
−
    position: relative;
+
−
    flex-shrink: 0;
+
−
    flex: 1;
+
−
    max-width: 100%;
+
−
  }
+
−
 
+
−
  #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: 8rem;
+
−
    background: transparent;
+
−
    padding:1rem;
+
−
    border: none;
+
−
  }
+
−
  .pageContent-side .mytoc .toc_list{
+
−
    font-size: .9rem;
+
−
    color: #888;
+
−
    line-height: 1.5rem;
+
−
  }
+
−
  .pageContent-side .mytoc .toc_list .toclist__item{
+
−
    color: #888;
+
−
    text-decoration: none;
+
−
  }
+
−
  .pageContent-side .mytoc .toc_list .toclist__item:hover{
+
−
    color: var(--primary)
+
−
  }
+
−
  @media screen and (max-width: 800px) {
+
−
    #home>.screen>#group1>.title {
+
 
       width: 100%;
 
       width: 100%;
 +
      background-color: #fff;
 +
      min-height: 100vh;
 +
      padding: 0;
 +
      margin: 0;
 +
      overflow-x: hidden;
 +
      overflow-y: auto;
 
     }
 
     }
−
 
+
 
 +
    ::-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 {
 
     #navbar>.logo {
−
       padding: 0.5rem 0;
+
      width: 100%;
 +
       padding: .5rem 0 0 0;
 +
      text-align: center;
 
     }
 
     }
−
 
+
 
 
     #collapse {
 
     #collapse {
−
       height: 0;
+
       padding: 0 3%;
 +
      display: flex;
 +
      flex-direction: row;
 +
      transition: all .3s;
 +
    }
 +
    #content{
 +
      width: 100%;
 +
      padding: 0!important;
 +
      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;
 
       overflow: hidden;
 
       overflow: hidden;
 
     }
 
     }
−
 
+
    #collapse>.navbar-list>.navbar-list__item:hover{
−
     #navlist {}
+
      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)!important;
 +
      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 {
 
     #home>.pageContent>.pageContent-side {
−
       display: none;
+
      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)!important;
 +
      color: var(--dark);
 +
    }
 +
 
 +
    #pagecontent {
 +
      padding: 2rem 5%;
 +
      position: relative;
 +
      flex-shrink: 0;
 +
      flex: 1;
 +
      max-width: 60%;
 +
    }
 +
 
 +
    #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: 8rem;
 +
      background: transparent;
 +
      padding:1rem;
 +
      border: none;
 +
    }
 +
    .pageContent-side .mytoc .toc_list{
 +
      font-size: .9rem;
 +
      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{
−
     #home>.screen>#group1 {
+
       color: var(--primary)
−
       padding-top: 5vh;
+
 
     }
 
     }
−
 
+
     @media screen and (max-width: 800px) {
−
     #home>.pageContent>.pageContent-main>.profilelist>.profile {
+
      #home>.screen>#group1>.title {
−
      width: calc(100% / 3)
+
        width: 100%;
 +
      }
 +
 
 +
      #navbar>.logo {
 +
        padding: 0.5rem 0;
 +
      }
 +
 
 +
      #collapse {
 +
        height: 0;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      #navlist {}
 +
 
 +
      #home>.pageContent>.pageContent-side {
 +
        display: none;
 +
      }
 +
 
 +
      #home>.screen>#group1 {
 +
        padding-top: 5vh;
 +
      }
 +
 
 +
      #home>.pageContent>.pageContent-main>.profilelist>.profile {
 +
        width: calc(100% / 3)
 +
      }
 
     }
 
     }
−
  }
 
 
</style>
 
</style>
  
 
</html>
 
</html>

Revision as of 00:24, 27 October 2020

Model

Education

Overview

Being undergraduate iGEMers, we understand the inspiration that synthetic biology can kindle in young minds. To enlighten younger generations, we delivered lectures to students of various grades, explaining the profound in simple terms.

Synthetic Biology Day(Changsha No. 21 Middle School)