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

Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<head>
 
<head>
 
   <meta charset='utf-8'>
 
   <meta charset='utf-8'>
Line 8: Line 7:
 
   <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
 
   <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
 
   <meta name="apple-mobile-web-app-capable" content="yes" />
 
   <meta name="apple-mobile-web-app-capable" content="yes" />
−
   <title>Model</title>
+
   <title>Education</title>
 
</head>
 
</head>
  
Line 20: Line 19:
 
         </div>
 
         </div>
 
         <div class="navbar-list mainlist">
 
         <div class="navbar-list mainlist">
−
            <a class="navbar-list__item " href="https://2020.igem.org/Team:CSU_CHINA">HOME</a>
+
          <a class="navbar-list__item " href="https://2020.igem.org/Team:CSU_CHINA">HOME</a>
−
            <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/project">PROJECT
+
          <div class="navbar-list__item">PROJECT
−
              <div class="navbar-list__menu">
+
            <div class="navbar-list__menu">
−
                <a class="navbar-list__menuItem">Description</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Description">Description</a>
−
                <a class="navbar-list__menuItem">Design</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Design">Design</a>
−
                <a class="navbar-list__menuItem">Results</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Results">Results</a>
−
                <a class="navbar-list__menuItem">Contribution</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Contribution">Contribution</a>
−
                <a class="navbar-list__menuItem">Proof of Concept</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Proof_of_Concept">Proof of Concept</a>
−
                <a class="navbar-list__menuItem">Engineering</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Engineering" >Engineering</a>
−
                <a class="navbar-list__menuItem">Sponsors</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Sponsors" >Sponsors</a>
−
              </div>
+
 
             </div>
 
             </div>
−
            <div class="navbar-list__item" >TEAM
+
          </div>
−
              <div class="navbar-list__menu">
+
          <div class="navbar-list__item" >TEAM
−
                <a class="navbar-list__menuItem">Team Members</a>
+
            <div class="navbar-list__menu">
−
                <a class="navbar-list__menuItem">Attributions</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Team">Team Members</a>
−
                <a class="navbar-list__menuItem">Collaborations</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Attributions">Attributions</a>
−
                <a class="navbar-list__menuItem">Partnership</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Collaborations">Collaborations</a>
−
              </div>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Partnership">Partnership</a>
 
             </div>
 
             </div>
−
            <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">LIB
+
          </div>
−
              <div class="navbar-list__menu">
+
          <div class="navbar-list__item active" href="https://2020.igem.org/Team:CSU_CHINA/team">LAB
−
                <a class="navbar-list__menuItem">Experiments</a>
+
            <div class="navbar-list__menu">
−
                <a class="navbar-list__menuItem">Notebook</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Experiments">Experiments</a>
−
              </div>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Notebook">Notebook</a>
 
             </div>
 
             </div>
−
            <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">PARTS
+
          </div>
−
              <div class="navbar-list__menu">
+
          <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">PARTS
−
                <a class="navbar-list__menuItem">Overview</a>
+
            <div class="navbar-list__menu">
−
                <a class="navbar-list__menuItem">Basic Parts</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Parts">Basic Parts</a>
−
                <a class="navbar-list__menuItem">Composite Parts</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Composite_Part">Composite Parts</a>
−
                <a class="navbar-list__menuItem">Imporved Parts</a>
+
              <a class="navbar-list__menuItem" href="https://2019.igem.org/Team:CSU_CHINA/Part_Collection">Imporved Parts</a>
−
              </div>
+
 
             </div>
 
             </div>
−
            <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/Model">MODEL</a>
+
          </div>
−
            <div class="navbar-list__item active">HUMAN&nbsp;PRACTICES
+
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/Model">MODEL</a>
−
              <div class="navbar-list__menu">
+
          <div class="navbar-list__item">HUMAN&nbsp;PRACTICES
−
                <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Index</a>
+
            <div class="navbar-list__menu">
−
                <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Science Communication</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Index</a>
−
                <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Implementation">Proposed Implementation</a>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Science Communication</a>
−
              </div>
+
              <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Implementation">Proposed Implementation</a>
 
             </div>
 
             </div>
−
            <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/judging_form">JUDGING&nbsp;FORM</a>
+
          </div>
 +
          <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/Safety">SAFETY</a>
 
         </div>
 
         </div>
 
         <div class="navbar-list">
 
         <div class="navbar-list">
Line 70: Line 68:
 
     </div>
 
     </div>
 
     <div class="content-team" id="home">
 
     <div class="content-team" id="home">
−
        <div class="pageHead">
+
      <div class="pageHead">
−
            <div class="pageHead-content">
+
        <div class="pageHead-content">
−
              <h1 class="pageHead-content__title">Education</h1>
+
          <h1 class="pageHead-content__title">Education</h1>
 
               <div class="pageHead-content__description"></div>
 
               <div class="pageHead-content__description"></div>
−
            </div>
+
        </div>
−
          </div>
+
      </div>
−
       <div class="pageContent">
+
       <div class="pageContent" style="padding-top: 4rem">
−
         <div class="pageContent-side">
+
         <div class="pageContent-side" style="opacity: 0;">
 
           <div class="pageContent-navlist" id="navlist">
 
           <div class="pageContent-navlist" id="navlist">
 
             <div class="pageContent-navlist__head">
 
             <div class="pageContent-navlist__head">
Line 85: Line 83:
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <div class="pageContent-main" id="pagecontent">
+
         <div class="pageContent-main" id="pagecontent"></div>
−
          <h2 class="pageContent-main__title">Overview</h2>
+
        <div class="pageContent-side">
−
           <div class="pageContent-main__textBox">
+
           <div class="mytoc">
−
             <p>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.</p>
+
             <div class="toc_list" id="toclist"></div>
 
           </div>
 
           </div>
−
          <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>
 
   </div>
 
   </div>
−
</body>
+
  <script>
−
<style>
+
     (window.onload=function(){
−
     .MathJax nobr>span.math>span{border-left-width:0 !important};
+
        createTOC()
−
     html,
+
     })
−
     body {
+
     window.onscroll = function(){
−
      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;
+
−
      overflow-x: hidden;
+
−
      overflow-y: auto;
+
−
    }
+
  
−
    ::-webkit-scrollbar {
 
−
      display: none;
 
 
     }
 
     }
−
 
+
     function createTOC(){
−
     *,
+
   
−
    *:before,
+
       let titles = document.getElementById('pagecontent').getElementsByClassName('pageContent-main__title')
−
    *:after {
+
      let toc_list = document.getElementById('toclist')
−
       box-sizing: border-box;
+
      while (toc_list.firstChild) {
−
       margin: 0;
+
        let oldNode = toc_list.removeChild(toc_list.firstChild);
 +
        oldNode = null;
 +
       }
 +
      for(let i in titles){
 +
        let text = titles[i].textContent.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');  
 +
        titles[i].id=text
 +
        if(!!text){
 +
          console.log(text)
 +
          let toc_item = document.createElement('div')
 +
          toc_item.setAttribute('class', 'toclist__item')
 +
          let link = document.createElement('a')
 +
          link.href="#"+text
 +
          let t = document.createTextNode(text)
 +
          link.appendChild(t)
 +
          toc_item.appendChild(link)
 +
          toc_list.appendChild(toc_item)
 +
        }
 +
      }
 
     }
 
     }
−
    
+
   </script>
−
     :root {
+
     <script>
−
       --primary: #074E9F;
+
       (function () {
−
      --primary-transparent: rgba(7, 78, 159, 0.5);
+
    var body = document.body.textContent;
−
       --blue: #6DBFFF;
+
    if (body.match(/(?:\$|\\\(|\\\[|\\begin\{.*?})/)) {
−
       --yellow: #FFC93C;
+
       if (!window.MathJax) {
−
       --dark: #0d2b4d;
+
        window.MathJax = {
−
       --title-color: #004290;
+
        };
−
       --text-color: #00244E;
+
       }
 +
       var script = document.createElement('script');
 +
       script.src = 'https://2020.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
 +
       document.head.appendChild(script);
 
     }
 
     }
−
    
+
   })();
−
     #navbar {
+
  </script>
−
      position: absolute;
+
</body>
−
      left: 0;
+
<style>
−
      top: 0;
+
  .MathJax nobr>span.math>span{border-left-width:0 !important};
 +
  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;
 +
    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;
 +
    cursor: pointer;
 +
    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;
 +
    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%;
 +
    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 .table{
 +
    border-top: 2px #333 solid;
 +
    border-bottom: 2px #333 solid;
 +
    border-left: none;
 +
    border-right: none;
 +
    font-size: .9rem;
 +
    line-height: 1rem;
 +
    width: 100%;
 +
  }
 +
 
 +
  #pagecontent .pageContent-main__textBox .table tr,
 +
  #pagecontent .pageContent-main__textBox .table td{
 +
    border:none;
 +
  }
 +
 
 +
  #pagecontent .pageContent-main__textBox .image {
 +
    width: 80%;
 +
    margin: 2rem 10%;
 +
  }
 +
  .pageContent-side .mytoc{
 +
    position: -webkit-sticky;
 +
    position: sticky;
 +
    top: 12rem;
 +
    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{
 +
    color: var(--primary)
 +
  }
 +
  @media screen and (max-width: 800px) {
 +
    #home>.screen>#group1>.title {
 
       width: 100%;
 
       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 {
−
      width: 100%;
+
       padding: 0.5rem 0;
−
       padding: .5rem 0 0 0;
+
−
      text-align: center;
+
 
     }
 
     }
−
 
+
 
 
     #collapse {
 
     #collapse {
−
       padding: 0 3%;
+
       height: 0;
−
      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{
+
 
−
      overflow: visible;
+
     #navlist {}
−
    }
+
 
−
     #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 {
 
     #home>.pageContent>.pageContent-side {
−
       width: 20%;
+
       display: none;
−
      max-width: 200px;
+
−
      flex-shrink: 0;
+
 
     }
 
     }
−
 
+
 
−
     #navlist {
+
     #home>.screen>#group1 {
−
      background-color: var(--dark);
+
       padding-top: 5vh;
−
       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 {
+
     #home>.pageContent>.pageContent-main>.profilelist>.profile {
−
      padding: 1rem 0 1rem 0;
+
      width: calc(100% / 3)
−
    }
+
−
 
+
−
    #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{
+
−
      color: var(--primary)
+
−
    }
+
−
    @media screen and (max-width: 800px) {
+
−
      #home>.screen>#group1>.title {
+
−
        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 08:20, 27 October 2020

Education

Education