Difference between revisions of "Template:HK GTC"

 
(95 intermediate revisions by 2 users not shown)
Line 55: Line 55:
 
                     <li>Human Practice</li>
 
                     <li>Human Practice</li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Deep_learning">Deep Learning</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Deep_learning">Deep Learning</a></li>
−
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Awards">Awards</a></li>
 
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 69: Line 68:
 
                 <ul>
 
                 <ul>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Description">Description</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Description">Description</a></li>
−
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Design">Design</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Engineering">Engineering Success</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Proof_Of_Concept">Proof of Concept</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Notebook">Notebook</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Notebook">Notebook</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Results">Experiments and Results</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Results">Experiments and Results</a></li>
−
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Engineering">Engineering</a></li>
 
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Implementation">Implementation</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Implementation">Implementation</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Contribution">Contribution</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 81: Line 81:
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Human_Practices">Integrated Human Practice</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Human_Practices">Integrated Human Practice</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Collaborations">Collaborations</a></li>
 
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Collaborations">Collaborations</a></li>
−
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Education">Education & Engagement</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Partnership">Partnership</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Communication">Education & Communication</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 88: Line 89:
 
<style>
 
<style>
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
 +
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;1,300;1,500&display=swap');
 +
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
  
 
* {
 
* {
Line 106: Line 109:
 
     font-family: "Monastic";
 
     font-family: "Monastic";
 
     src: url("https://static.igem.org/mediawiki/2021/8/83/T--HK_GTC--Monastic.ttf");
 
     src: url("https://static.igem.org/mediawiki/2021/8/83/T--HK_GTC--Monastic.ttf");
 +
}
 +
 +
@font-face {
 +
    font-family: "Garlic";
 +
    src: url("https://static.igem.org/mediawiki/2021/b/bc/T--HK_GTC--Garlic.ttf");
 
}
 
}
  
Line 115: Line 123:
 
     height: fit-content;
 
     height: fit-content;
 
     transition: transform .5s;
 
     transition: transform .5s;
−
     z-index: 3;
+
     z-index: 999;
 
}
 
}
  
Line 132: Line 140:
 
     font-size: 2rem;
 
     font-size: 2rem;
 
     color: #fff;
 
     color: #fff;
 +
    transition: all .25s;
 
     line-height: normal !important;
 
     line-height: normal !important;
 +
    filter: drop-shadow(1px 1px 0px#000);
 
}
 
}
 +
  
 
#my-nav #nav-button {
 
#my-nav #nav-button {
 
     transition: all .25s;
 
     transition: all .25s;
 
     float: right;
 
     float: right;
−
     padding: 1.5rem;
+
    margin: 1rem;
 +
     padding: .5rem;
 +
    filter: drop-shadow(1px 1px 0px#000);
 
}
 
}
  
Line 147: Line 160:
  
 
#my-nav #nav-button line {
 
#my-nav #nav-button line {
−
     stroke: #fff;
+
     stroke: rgb(255, 255, 255);
 
     transition: all .5s;
 
     transition: all .5s;
 +
    stroke-width: 2px;
 
}
 
}
  
Line 226: Line 240:
 
#my-nav #popup li {
 
#my-nav #popup li {
 
     list-style: none;
 
     list-style: none;
−
     padding: .2rem;
+
    margin: 0 !important;
 +
}
 +
 
 +
#my-nav #popup li {
 +
    list-style: none;
 +
     padding: .5rem 1rem;
 +
    margin: 0 !important;
 +
    font-size: 1.8rem !important;
 
}
 
}
  
 
#my-nav #popup h1 {
 
#my-nav #popup h1 {
−
     padding: .6rem
+
     padding: 1rem 0;
 +
    font-size: 2.5rem !important;
 
}
 
}
  
Line 256: Line 278:
 
}
 
}
  
−
#my-top.onscroll{
+
#my-top.onscroll {
−
     background-color: #fff;
+
     background-color: #2a4150;
 
     box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 
     box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 
}
 
}
  
−
#my-top.onscroll a h1{
+
#my-top.onscroll a h1 {
−
     color: #4f4f4f !important;
+
     color: #fff !important;
 +
    filter: none !important;
 +
    font-size: 1rem !important;
 +
    padding: 1rem !important;
 +
}
 +
 
 +
#my-top.onscroll #nav-button line {
 +
    stroke: #fff !important;
 
}
 
}
  
−
#my-top.onscroll #nav-button line{
+
#my-top.onscroll #nav-button {
−
     stroke: #4f4f4f !important;
+
     filter: none !important;
 +
    height: 2rem ;
 +
    padding: 0rem !important;
 +
    margin: .5rem !important;
 
}
 
}
  
Line 290: Line 322:
 
h2,
 
h2,
 
h3,
 
h3,
−
h4 {
+
h4,
 +
h5 {
 
     font-family: "Montserrat", sans-serif !important;
 
     font-family: "Montserrat", sans-serif !important;
 
     padding: 0;
 
     padding: 0;
Line 298: Line 331:
  
 
p {
 
p {
−
     font-family: "Raleway", sans-serif !important;
+
     font-family: "Open Sans", sans-serif !important;
−
}
+
    color: #f4f4f4;
 +
}  
  
 
#my-global-wrapper {
 
#my-global-wrapper {
Line 314: Line 348:
 
     background-color: #93D5DC;
 
     background-color: #93D5DC;
 
     background-image: url("https://static.igem.org/mediawiki/2021/e/e3/T--HK_GTC--welcome_background.png");
 
     background-image: url("https://static.igem.org/mediawiki/2021/e/e3/T--HK_GTC--welcome_background.png");
−
     background-repeat: no-repeat;
+
     background-size: 100% 100%;
 +
    background-position: center;
 
     display: grid;
 
     display: grid;
 
     grid-template-columns: 1fr 1fr;
 
     grid-template-columns: 1fr 1fr;
 
}
 
}
−
 
−
/* #welcome h1{
 
−
    color: #fff;
 
−
    width: 100%;
 
−
    text-align: center;
 
−
    padding-top:300px;
 
−
    animation-name: floaty;
 
−
    animation-duration: 1s;
 
−
    animation-iteration-count: infinite;
 
−
    animation-timing-function:cubic-bezier(0.59, 0.01, 0.4, 0.93);
 
−
} */
 
  
 
.welcome-center {
 
.welcome-center {
Line 343: Line 367:
 
#welcome .left h1 {
 
#welcome .left h1 {
 
     font-family: "Monastic" !important;
 
     font-family: "Monastic" !important;
 +
    color: #000 !important;
 
     font-size: 6rem;
 
     font-size: 6rem;
 
     padding: 1rem;
 
     padding: 1rem;
Line 374: Line 399:
 
#welcome .left p {
 
#welcome .left p {
 
     font-size: 2.5rem;
 
     font-size: 2.5rem;
 +
    font-family: "Montserrat" !important;
 
     font-weight: 200;
 
     font-weight: 200;
 
     width: 100%;
 
     width: 100%;
Line 379: Line 405:
 
     text-align: left;
 
     text-align: left;
 
     margin: 0;
 
     margin: 0;
 +
    color: #4f4f4f !important;
 
}
 
}
  
Line 395: Line 422:
 
     position: relative;
 
     position: relative;
 
     background-image: url("https://static.igem.org/mediawiki/2021/d/d9/T--HK_GTC--webpage--extended.jpg");
 
     background-image: url("https://static.igem.org/mediawiki/2021/d/d9/T--HK_GTC--webpage--extended.jpg");
−
     background-repeat:repeat-y;
+
     background-size: auto 100%;
−
     background-position: center;
+
     background-position: left;
−
     background-size: cover;
+
     background-repeat: round;
 
}
 
}
  
−
#desc .desc-block{
+
#desc .desc-block {
 
     position: absolute;
 
     position: absolute;
−
     transform: translate(-50%,-50%);
+
     transform: translate(-50%, -50%);
 
     width: 70%;
 
     width: 70%;
−
     top:50%;
+
     top: 50%;
−
     left:50%;
+
     left: 50%;
 
}
 
}
  
 
#desc h1 {
 
#desc h1 {
 +
    font-family: 'Garlic', sans-serif !important;
 
     color: #fff;
 
     color: #fff;
 
     font-size: 3rem;
 
     font-size: 3rem;
−
    font-family: 'Montserrat', sans-serif;
 
 
     text-align: center;
 
     text-align: center;
 
     width: 100%;
 
     width: 100%;
−
     padding: 2rem 0 ;
+
     padding: 2rem 0;
 
}
 
}
  
 
#desc p {
 
#desc p {
 
     color: #fff;
 
     color: #fff;
−
     font-size: 1.5rem;
+
     font-size: 1.2rem;
 
     text-align: center;
 
     text-align: center;
 
}
 
}
Line 432: Line 459:
 
     grid-template-columns: 2fr 1fr;
 
     grid-template-columns: 2fr 1fr;
 
     background-image: url("https://static.igem.org/mediawiki/2021/b/b5/T--HK_GTC--webpage_extend_2.png");
 
     background-image: url("https://static.igem.org/mediawiki/2021/b/b5/T--HK_GTC--webpage_extend_2.png");
−
     background-repeat: no-repeat;
+
     background-size: 100% 100%;
−
     background-position:center;
+
     background-position: center;
−
    background-size: cover;
+
−
    background-color: #1BA784;
+
 
     color: #f4f4f4;
 
     color: #f4f4f4;
 
}
 
}
Line 604: Line 629:
 
     transition: opacity .5s;
 
     transition: opacity .5s;
 
     opacity: 0;
 
     opacity: 0;
 +
}
 +
 +
#bottle-guide h1 {
 +
    text-align: center;
 +
}
 +
 +
.bottle-desc p {
 +
    line-height: 1.8rem;
 
}
 
}
  
 
.bottle-desc .img {
 
.bottle-desc .img {
 
     width: 400px;
 
     width: 400px;
−
     height: 300px;
+
     height: 225px;
 
     margin-top: 3rem;
 
     margin-top: 3rem;
 
     margin-left: 1rem;
 
     margin-left: 1rem;
Line 621: Line 654:
 
}
 
}
  
 +
#bottle-project-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/4/4d/T--HK_GTC--res2.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
  
 +
#bottle-team-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/7/73/T--HK_GTC--team_photo.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
#bottle-dl-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/6/6d/T--HK_GTC--dl_1.mp4");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
#bottle-hp-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/c/c3/T--HK_GTC--cp2.jpeg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
  
  
Line 754: Line 809:
 
}
 
}
  
−
.ihp-content{
+
.hp-intro {
 +
    width: 80%;
 +
    margin: auto;
 +
    margin-top: 5rem;
 +
}
 +
 
 +
.hp-intro p {
 +
    font-size: 1.3rem !important;
 +
    text-align: center !important;
 +
    color: #4f4f4f !important;
 +
    font-style: italic;
 +
    font-weight: bold;
 +
}
 +
 
 +
.hp-intro .single-image-with-desc img {
 +
    margin-top: 3rem;
 +
    width: 80%;
 +
}
 +
 
 +
.ihp-content {
 
     width: 70%;
 
     width: 70%;
 
     margin: auto;
 
     margin: auto;
Line 761: Line 835:
 
}
 
}
  
−
.ihp-content h2{
+
.ihp-content h2 {
 
     font-size: 2rem;
 
     font-size: 2rem;
 
     border-left: #1BA784 solid 6px;
 
     border-left: #1BA784 solid 6px;
Line 770: Line 844:
 
}
 
}
  
−
.ihp-content p{
+
.block p{
 +
    color: #4f4f4f !important;
 +
}
 +
 
 +
.ihp-content p {
 
     padding: 1rem;
 
     padding: 1rem;
 +
    color: #4f4f4f !important;
 
     line-height: 2rem;
 
     line-height: 2rem;
 
}
 
}
 +
 +
#ihp-res .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/d/de/T--HK_GTC--ihp.prof.ngo2.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
#ihp-hp .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/4/4a/T--HK_GTC--ihp-sharing-session.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
#ihp-di .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/b/b6/T--HK_GTC--ihp.clearbot1.hp.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 +
  
 
/* Attribute and Team*/
 
/* Attribute and Team*/
Line 788: Line 887:
 
}
 
}
  
−
.brief-team{
+
.brief-team {
 
     width: 100%;
 
     width: 100%;
 
     height: 70vh;
 
     height: 70vh;
Line 795: Line 894:
 
}
 
}
  
−
.brief-team img{
+
.brief-team img {
 
     width: 80%;
 
     width: 80%;
 
     margin-top: 4rem;
 
     margin-top: 4rem;
Line 803: Line 902:
 
}
 
}
  
−
.brief-team .brief-team-right{
+
.brief-team .brief-team-right {
 
     padding: 4rem;
 
     padding: 4rem;
 
     text-align: left;
 
     text-align: left;
 
}
 
}
  
−
.brief-team .brief-team-right h1{
+
.brief-team .brief-team-right h1 {
 
     text-align: left;
 
     text-align: left;
 
     font-size: 3rem;
 
     font-size: 3rem;
Line 814: Line 913:
 
}
 
}
  
−
.brief-team .brief-team-right p{
+
.brief-team .brief-team-right p {
 
     line-height: 2rem;
 
     line-height: 2rem;
 +
    font-size: 1rem !important;
 +
    color: #4f4f4f;
 
}
 
}
  
Line 836: Line 937:
 
     height: 100%;
 
     height: 100%;
 
     background-color: #f5f5f5;
 
     background-color: #f5f5f5;
−
     left: 50%;
+
     position: relative;
 +
    overflow: hidden;
 
}
 
}
 +
 +
.card-display img {
 +
    display: block;
 +
    width: 100%;
 +
    height: 100%;
 +
    object-fit: cover;
 +
    /* or object-fit: contain; */
 +
}
 +
 +
  
 
.card-display .card {
 
.card-display .card {
Line 853: Line 965:
  
 
.card .mem-name {
 
.card .mem-name {
−
     padding: 2rem;
+
     padding: 1rem;
 
     height: 100%;
 
     height: 100%;
 +
    z-index: 1;
 
}
 
}
  
−
.card .mem-desc{
+
.card .mem-desc {
 
     position: absolute;
 
     position: absolute;
 
     width: 100%;
 
     width: 100%;
Line 869: Line 982:
 
}
 
}
  
−
.card .mem-desc:hover{
+
.card .mem-desc:hover {
−
     opacity: .7;
+
     opacity: .8;
 
}
 
}
  
−
.card .mem-desc:hover p{
+
.card .mem-desc:hover p {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
.card .mem-desc p{
+
.card .mem-desc p {
 
     width: 80%;
 
     width: 80%;
−
     margin:auto;
+
    font-size: 1rem !important;
 +
     margin: auto;
 
     position: absolute;
 
     position: absolute;
 
     top: 50%;
 
     top: 50%;
 
     left: 50%;
 
     left: 50%;
 
     transform: translate(-50%, -50%);
 
     transform: translate(-50%, -50%);
 +
    color: #4f4f4f;
 
}
 
}
  
−
.card.leader .mem-name h1{
+
.card.leader .mem-name h1 {
 
     color: #fff !important;
 
     color: #fff !important;
 
}
 
}
Line 905: Line 1,020:
  
 
.card-display .leader {
 
.card-display .leader {
−
     background-color: goldenrod;
+
     background-color: #1BA784;
−
     height: 80vh;
+
     height: 60vh;
 +
    width: 70%;
 
     color: #fff;
 
     color: #fff;
 +
    margin: auto;
 +
}
 +
 +
.card-display .leader h1{
 +
    font-size: 1rem;
 
}
 
}
  
Line 918: Line 1,039:
  
 
.card.pi .mem-name-pi {
 
.card.pi .mem-name-pi {
−
     padding: 1rem;
+
     padding: 7rem 4rem;
 
}
 
}
  
Line 931: Line 1,052:
  
 
.card.pi .mem-name-pi p {
 
.card.pi .mem-name-pi p {
 +
    font-size: 1rem !important;
 
     line-height: 1.5rem;
 
     line-height: 1.5rem;
 +
    color: #4f4f4f;
 
}
 
}
  
  
 
.card-display.sub-leader {
 
.card-display.sub-leader {
−
     grid-template-columns: 1fr 1fr 1fr 1fr;
+
     grid-template-columns: 1fr 1fr 1fr;
 
}
 
}
  
Line 945: Line 1,068:
 
}
 
}
  
−
.card-display.sub-leader .card .mem-name h1{
+
.card-display.sub-leader .card .mem-name h1 {
 
     font-size: 1rem !important;
 
     font-size: 1rem !important;
 
     line-height: normal !important;
 
     line-height: normal !important;
 
}
 
}
−
 
  
−
.card-display.member{
+
 
 +
.card-display.member {
 
     display: grid;
 
     display: grid;
 
     grid-template-columns: 1fr 1fr 1fr 1fr;
 
     grid-template-columns: 1fr 1fr 1fr 1fr;
Line 958: Line 1,081:
 
}
 
}
  
−
.card-display.member .card{
+
.card-display.member .card {
 
     grid-template-columns: 1fr;
 
     grid-template-columns: 1fr;
 
     grid-template-rows: 8fr 1fr;
 
     grid-template-rows: 8fr 1fr;
Line 965: Line 1,088:
 
}
 
}
  
−
.card-display.member .card .mem-name h1{
+
.card-display.member .card .mem-name h1 {
 
     font-size: 1rem;
 
     font-size: 1rem;
 
     margin: 0%;
 
     margin: 0%;
Line 971: Line 1,094:
 
}
 
}
  
 +
.card-display.small-cards {
 +
    display: block;
 +
}
  
 +
.card-display.small-cards .card {
 +
    display: block;
 +
    background-color: #fff;
 +
    width: 60%;
 +
    height: fit-content;
 +
    border-radius: 2rem;
 +
}
  
 +
.card-display.small-cards .card .mem-name {
 +
    padding: 1rem;
 +
}
 +
 +
.card-display.small-cards .card .mem-name h1 {
 +
    text-align: start;
 +
    font-size: 1.5rem;
 +
}
 +
 +
.card-display.small-cards .card .desc p {
 +
    text-align: start;
 +
    padding: 2rem;
 +
    color: #4f4f4f;
 +
}
 +
 +
.card-display.small-cards-2 {
 +
    grid-template-columns: 1fr 1fr;
 +
}
 +
 +
.card-display.small-cards-2 .card {
 +
    display: block;
 +
    background-color: #fff;
 +
    width: 90%;
 +
    height: 17rem;
 +
    border-radius: 2rem;
 +
    display: block;
 +
    position: relative;
 +
}
 +
 +
.card-display.small-cards-2 .card .mem-name {
 +
    height: fit-content;
 +
    padding: 1rem;
 +
}
 +
 +
.card-display.small-cards-2 .card .mem-name h1 {
 +
    text-align: start;
 +
    font-size: 1.5rem !important;
 +
}
 +
 +
.card-display.small-cards-2 .card .desc p {
 +
    text-align: start;
 +
    padding: 2rem;
 +
    font-size: 1rem !important;
 +
    color: #4f4f4f;
 +
}
 +
 +
.card-display.small-cards-2 .card.with-img {
 +
    display: grid;
 +
    grid-template-columns: 1fr 2fr;
 +
}
 +
 +
.card-display.small-cards-2 .card.with-img .ad-desc {
 +
    height: 17rem;
 +
}
 +
 +
.card-display.small-cards-2 .card.with-img .img {
 +
    height: 17rem;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/* Attribution */
 +
 +
.attri-wrapper {
 +
    width: 90%;
 +
    margin: auto;
 +
    height: fit-content;
 +
}
 +
 +
.attri-card {
 +
    width: 70%;
 +
    margin: auto;
 +
    display: block;
 +
    margin: 3rem auto;
 +
    border-radius: 3rem;
 +
    overflow: hidden;
 +
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 +
}
 +
 +
 +
.attri-card .attri-content {
 +
    padding: 3rem;
 +
    background-color: #fff;
 +
}
 +
 +
.attri-card .attri-content h1 {
 +
    font-size: 2rem;
 +
    padding: 1rem;
 +
    color: #2a4150;
 +
    border-bottom: solid 1px #1BA784 !important;
 +
}
 +
 +
.attri-card .attri-content ul {
 +
    list-style: none;
 +
    padding: 1rem;
 +
}
 +
 +
.attri-card .attri-content ul li {
 +
    padding: .2rem 0;
 +
    font-family: "Open Sans", sans-serif;
 +
}
 +
 +
.attri-card .attri-content ul li::before {
 +
    content: "\2713";
 +
    color: #1BA784;
 +
    display: inline-block;
 +
    width: 1rem;
 +
}
  
  
 
/* Actual WIKI Pages*/
 
/* Actual WIKI Pages*/
  
 +
 +
.to-top{
 +
    position: fixed;
 +
    bottom: 0;
 +
    right: 0;
 +
    padding: 1rem;
 +
    font-size: 3rem;
 +
    transition: transform .2s;
 +
}
 +
 +
.to-top a{
 +
    text-decoration: none;
 +
    color: #4f4f4f;
 +
}
 +
 +
.to-top:hover{
 +
    transform: translateY(-5px);
 +
}
  
 
.section-selector {
 
.section-selector {
Line 1,000: Line 1,263:
 
.section-selector li {
 
.section-selector li {
 
     list-style: none;
 
     list-style: none;
−
     font-family: "Raleway", sans-serif;
+
     font-family: "Open Sans", sans-serif;
 
     padding: .4rem;
 
     padding: .4rem;
 
}
 
}
Line 1,008: Line 1,271:
 
     color: #4f4f4f;
 
     color: #4f4f4f;
 
     font-size: 1.1rem;
 
     font-size: 1.1rem;
−
     font-weight: bold;
+
     font-weight: 400;
 +
    line-height: .8rem;
 
     transition: all .1s;
 
     transition: all .1s;
 
}
 
}
Line 1,024: Line 1,288:
 
.section-selector li:hover a {
 
.section-selector li:hover a {
 
     color: #fff;
 
     color: #fff;
 +
    font-weight: 500;
 
}
 
}
  
Line 1,033: Line 1,298:
  
 
.section-heading {
 
.section-heading {
−
     background-color: #4f4f4f;
+
     background-color: #5d7296;
−
     height: 30rem;
+
     height: 50vh;
 
     position: relative;
 
     position: relative;
 
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
−
     background-image: url("../img/_MG_0041.JPG");
+
     background-image: url("");
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
     background-size: 100% auto;
+
     background-size: cover;
−
     background-attachment: fixed;
+
     background-position: 100%;
 
     z-index: 2;
 
     z-index: 2;
 
}
 
}
Line 1,047: Line 1,312:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
     background-color: #4f4f4f;
+
     background-color: #2a4150;
−
     opacity: .5;
+
     opacity: .8;
 
}
 
}
  
Line 1,059: Line 1,324:
 
     transform: translate(-50%, -50%);
 
     transform: translate(-50%, -50%);
 
     z-index: 10;
 
     z-index: 10;
 +
}
 +
 +
.section-wrapper {
 +
    width: 80%;
 +
    margin: auto;
 
}
 
}
  
Line 1,064: Line 1,334:
 
     float: right;
 
     float: right;
 
     padding: 6rem;
 
     padding: 6rem;
 +
    width: 80%;
 +
    margin: auto;
 +
    text-align: justify;
 
}
 
}
  
−
.section-contents h2 {
+
.section-contents-mid{
 +
    width: 80%;
 +
    margin: auto;
 +
    padding: 6rem;
 +
}
 +
 
 +
.section-contents-mid p{
 +
    width: 80%;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents img {
 +
    width: 100%;
 +
}
 +
 
 +
.section-contents h1{
 
     line-height: normal !important;
 
     line-height: normal !important;
 
     padding: 0;
 
     padding: 0;
 
     margin: 0;
 
     margin: 0;
 +
    margin: 2rem 0 !important;
 +
    font-size: 2rem;
 +
    font-weight: bold;
 +
    padding-left: 1rem;
 +
    border-left: #2a4150 6px solid;
 +
}
 +
 +
.section-contents h2, .section-contents-mid h2 {
 +
    line-height: normal !important;
 +
    padding: 0;
 +
    margin: 0;
 +
    margin: 2rem 0 !important;
 
     font-size: 2rem;
 
     font-size: 2rem;
 
     font-weight: bold;
 
     font-weight: bold;
Line 1,076: Line 1,376:
 
}
 
}
  
−
.section-contents h3{
+
.section-contents h3 {
 
     border-left: #1BA784 6px solid;
 
     border-left: #1BA784 6px solid;
 
     font-size: 1.2rem;
 
     font-size: 1.2rem;
−
     margin-top: 1rem !important;
+
     margin: 1rem 0 !important;
 
     padding-left: 1rem;
 
     padding-left: 1rem;
 
}
 
}
  
−
.section-contents p {
+
.section-contents h4 {
 +
    border-left: #8dc6fc 6px solid;
 +
    font-size: 1.1rem;
 +
    margin: 1rem 0 !important;
 +
    padding-left: 1rem;
 +
}
 +
 
 +
.section-contents h5 {
 +
    border-left: #c5e2db 6px solid;
 +
    font-size: 1rem;
 +
    margin: 1rem 0 !important;
 +
    padding-left: 1rem;
 +
}
 +
 
 +
.section-contents p , .section-contents-mid p{
 +
    font-size: 1.1rem !important;
 +
    line-height: 1.8rem !important;
 +
    color: #4f4f4f;
 +
    padding: 2rem 0;
 +
    overflow-wrap: break-word;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents .intro {
 +
    font-style: italic;
 +
    font-weight: bold;
 +
    line-height: 1.7rem !important;
 +
    text-align: justify;
 +
}
 +
 
 +
.section-contents ul {
 
     font-size: 1.2rem !important;
 
     font-size: 1.2rem !important;
 +
    font-family: "Raleway", sans-serif;
 
     line-height: 1.6rem !important;
 
     line-height: 1.6rem !important;
−
     padding: 4rem;
+
     padding: 1rem;
 +
}
 +
 
 +
.section-contents video {
 +
    width: 80%;
 +
    display: block;
 +
    height: auto;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents table, th, td{
 +
    border: 2px solid #000;
 +
    border-collapse: collapse;
 +
}
 +
 
 +
.section-contents table{
 +
    margin:auto;
 +
}
 +
 
 +
.section-contents ul{
 +
    padding: 1rem;
 +
}
 +
 
 +
.section-contents li{
 +
    font-family: "Open Sans";
 +
    font-size: 1.1rem;
 +
    color: #4f4f4f;
 +
    padding-top: 1rem;
 +
}
 +
 
 +
.section-contents th,td{
 +
    padding: 1rem;
 
}
 
}
  
 
.single-image-with-desc {
 
.single-image-with-desc {
 
     display: block;
 
     display: block;
 +
    padding: 2rem;
 
}
 
}
  
  
 
.single-image-with-desc img {
 
.single-image-with-desc img {
−
     width: 60%;
+
     width: 80%;
 
     margin: auto;
 
     margin: auto;
 
}
 
}
  
 
.single-image-with-desc p {
 
.single-image-with-desc p {
−
     font-size: 1rem !important;
+
     font-size: .8rem !important;
 
     text-align: center !important;
 
     text-align: center !important;
−
     padding: 1rem !important;  
+
     padding: .5rem !important;
 +
    line-height: normal !important;
 +
    margin: auto;
 
}
 
}
 +
 +
.section-contents.large-img .single-image-with-desc {
 +
    padding: 1rem 0 ;
 +
}
 +
 +
.section-contents.large-img .single-image-with-desc img{
 +
    padding: 0;
 +
    width: 100%;
 +
}
 +
 +
.section-contents.nb p{
 +
    padding: 0 ;
 +
}
 +
  
 
.two-image-with-desc {
 
.two-image-with-desc {
 
     display: block;
 
     display: block;
 
     width: 100%;
 
     width: 100%;
 +
    padding: 2rem;
 +
    overflow: hidden;
 
}
 
}
  
Line 1,120: Line 1,501:
  
 
.two-image-with-desc p {
 
.two-image-with-desc p {
−
     font-size: 1rem !important;
+
     font-size: .8rem !important;
 
     text-align: center !important;
 
     text-align: center !important;
−
     padding: 1rem !important;  
+
     padding: .1rem !important;
 +
    line-height: 1.1rem !important;
 +
    margin: auto;
 
}
 
}
  
−
.clear{
+
.section-contents.exp-res .two-image-with-desc p{
−
     clear: both;
+
     text-align: start !important;
 
}
 
}
  
 +
.section-wrapper iframe.edu-mat{
 +
    width: 90%;
 +
    height: 80vh;
 +
    display: block;
 +
    padding: 4rem;
 +
    margin: auto;
 +
}
  
 +
.clear {
 +
    clear: both;
 +
}
 +
 +
hr {
 +
    width: 80%;
 +
    margin: auto;
 +
}
  
  
Line 1,151: Line 1,549:
  
 
/* responsive */
 
/* responsive */
−
 
−
@keyframes floaty {
 
−
    0% {
 
−
        transform: translateY(0px);
 
−
    }
 
−
 
−
    50% {
 
−
        transform: translateY(10px);
 
−
    }
 
−
 
−
    100% {
 
−
        transform: translateY(0px);
 
−
    }
 
−
}
 
−
 
 
@media (max-width: 1400px) {
 
@media (max-width: 1400px) {
 
     #welcome {
 
     #welcome {
Line 1,178: Line 1,561:
 
     #welcome .left h1 {
 
     #welcome .left h1 {
 
         font-size: 5rem;
 
         font-size: 5rem;
 +
        padding: 0;
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
Line 1,193: Line 1,577:
 
         width: auto;
 
         width: auto;
 
         margin-top: 4rem;
 
         margin-top: 4rem;
 +
    }
 +
 +
    .bottle-desc h1 {
 +
        font-size: 4rem !important;
 +
        text-align: center;
 +
    }
 +
 +
    .bottle-desc p {
 +
        font-size: 1rem !important;
 +
        text-align: center;
 +
    }
 +
 +
    .bottle-desc .img {
 +
        margin: auto;
 +
        margin-top: 2rem;
 +
    }
 +
 +
    .card-display {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 +
    .card-display.two-card {
 +
        grid-template-columns: 1fr 1fr;
 +
    }
 +
 +
    .card-display.sub-leader {
 +
        grid-template-columns: 1fr 1fr 1fr;
 +
    }
 +
 +
    .card-display.member {
 +
        grid-template-columns: 1fr 1fr 1fr;
 +
    }
 +
 +
    .card-display.small-cards-2{
 +
        display: block;
 +
    }
 +
}
 +
 +
@media (max-width: 1100px) {
 +
 +
    .bottle-desc .img {
 +
        display: none !important;
 +
    }
 +
 +
    .card-display.sub-leader {
 +
        grid-template-columns: 1fr 1fr;
 +
    }
 +
 +
    .brief-team {
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
        margin-top: 2rem;
 +
    }
 +
 +
    .brief-team .brief-team-right h1 {
 +
        line-height: normal !important;
 +
        font-size: 2rem;
 +
    }
 +
 +
    .brief-team .brief-team-right p {
 +
        line-height: 1.2rem;
 +
        font-size: 1rem;
 +
    }
 +
 +
    .card.pi{
 +
        grid-template-columns: 1fr;
 +
    }
 +
 +
    .single-image-with-desc {
 +
        display: block;
 +
        padding: 0;
 
     }
 
     }
 
      
 
      
 +
   
 +
    .single-image-with-desc img {
 +
        width: 100%;
 +
        margin: auto;
 +
    }
 +
 
}
 
}
  
−
@media (max-width: 800px) {
+
 
 +
@media (max-width: 900px) {
 
     #bot-nav {
 
     #bot-nav {
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
Line 1,206: Line 1,668:
 
         display: none;
 
         display: none;
 
     }
 
     }
 +
 +
    .attri-card {
 +
        width: 90vw;
 +
        grid-template-columns: 1fr;
 +
        grid-template-rows: 3fr 1fr;
 +
    }
 +
 +
    .attri-card .right-attri h1 {
 +
        font-size: 1.2rem;
 +
    }
 +
 +
    .attri-card .right-attri ul li {
 +
        margin: .5rem;
 +
    }
 +
 +
 +
    .section-heading h1 {
 +
        font-size: 2rem;
 +
        text-align: center;
 +
    }
 +
 +
    .section-selector {
 +
        float: none;
 +
        width: 80%;
 +
        height: fit-content;
 +
        padding: 1rem;
 +
        margin-bottom: 2rem;
 +
        background-color: #e6f3f3;
 +
        margin: 1rem auto;
 +
        border-radius: 1rem;
 +
    }
 +
 +
    .section-selector h1 {
 +
        font-size: 1.5rem;
 +
        padding: 1rem 0;
 +
    }
 +
 +
    .section-selector ul {
 +
        width: 100%;
 +
        padding: 0;
 +
    }
 +
 +
    .section-selector ul li a {
 +
        font-size: 1rem;
 +
        font-weight: lighter;
 +
    }
 +
 +
    .right-section {
 +
        width: 100%;
 +
        float: none;
 +
        padding: none;
 +
        height: fit-content;
 +
        margin-bottom: 5rem;
 +
    }
 +
 +
    .right-section * {
 +
        margin-bottom: 1rem;
 +
    }
 +
 +
    .right-section .section-contents {
 +
        width: 100%;
 +
        padding: 0;
 +
        float: none;
 +
    }
 +
 +
    .right-section .section-contents h1 {
 +
        font-size: 1.7rem;
 +
        margin-left: 1rem !important;
 +
    }
 +
 +
    .right-section .section-contents h2 {
 +
        font-size: 1.5rem;
 +
        margin-left: 1rem !important;
 +
    }
 +
 +
    .right-section .section-contents p {
 +
        font-size: 1rem !important;
 +
        padding-bottom: 3.5rem;
 +
        line-height: 1.6rem !important;
 +
        width: 90%;
 +
    }
 +
 +
    .card.pi {
 +
        grid-template-rows: 2fr 1fr;
 +
        grid-template-columns: 1fr;
 +
        width: 90%;
 +
        height: 100vh;
 +
    }
 +
 +
    .card-display.member {
 +
        display: grid;
 +
        grid-template-columns: 1fr 1fr;
 +
        gap: 0;
 +
        width: 90%;
 +
    }
 +
 +
    .card-display.two-card {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 +
 +
    .card.pi .mem-name-pi * {
 +
        text-align: start;
 +
        padding: 1rem;
 +
    }
 +
 +
    .card.pi .mem-name-pi {
 +
        text-align: start;
 +
        padding: 1rem;
 +
    }
 +
 +
    .card.pi .mem-name-pi h1 {
 +
        font-size: 2rem;
 +
    }
 +
 +
    .card-display.small-cards-2 .card .desc p{
 +
        padding: 0rem 2rem;
 +
    }
 +
 +
    .card-display.small-cards-2 {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 +
}
 +
 +
@media (max-width: 800px) {
 +
 +
    .card-display.small-cards-2 .card .mem-name h1{
 +
        font-size: 1.1rem;
 +
    }
 +
 +
    .card-display.small-cards-2 .card{
 +
        grid-template-columns: 1fr !important;
 +
    }
 +
 +
    .card-display.small-cards-2 .card.with-img{
 +
        height: fit-content;
 +
        display: block;
 +
    }
 +
 +
    .card-display.small-cards-2 .card.with-img .ad-desc{
 +
        height: fit-content;
 +
        padding: 2rem;
 +
    }
 +
 +
    .card-display.small-cards-2 .card.with-img .img{
 +
        height: fit-content;
 +
    }
 +
 +
    .card-display.sub-leader {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
}
 
}
  
Line 1,216: Line 1,831:
 
     #popup {
 
     #popup {
 
         width: 100vw !important;
 
         width: 100vw !important;
−
         padding:0 !important;
+
         padding: 0 !important;
 
     }
 
     }
  
−
     #popup #back-button{
+
     #popup #back-button {
−
         padding:2rem !important;
+
         padding: 2rem !important;
 
     }
 
     }
  
−
     #popup h1{
+
     #popup h1 {
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
Line 1,232: Line 1,847:
 
     }
 
     }
  
−
     header #my-nav #my-top a h1{
+
     header #my-nav #my-top a h1 {
 
         font-size: 1.2rem;
 
         font-size: 1.2rem;
 
     }
 
     }
Line 1,238: Line 1,853:
 
     nav li {
 
     nav li {
 
         text-align: center;
 
         text-align: center;
−
    }
 
−
 
−
    #nav-button {
 
−
        height: 2.3rem;
 
 
     }
 
     }
  
Line 1,247: Line 1,858:
 
         cursor: pointer;
 
         cursor: pointer;
 
         height: 2rem !important;
 
         height: 2rem !important;
−
        padding-top: 1.5rem !important;
 
 
     }
 
     }
 +
 +
    #my-top.onscroll a h1 {
 +
        font-size: .7rem !important;
 +
    }
 +
   
 +
    #my-top.onscroll #nav-button {
 +
        filter: none !important;
 +
        height: 1.5rem !important;
 +
    }
 +
   
  
 
     /* homepage */
 
     /* homepage */
Line 1,262: Line 1,882:
  
 
     #welcome .left h1 {
 
     #welcome .left h1 {
−
         font-size: 2rem;
+
         font-size: 1.6rem;
 +
        padding: 1rem 0;
 
         text-align: center;
 
         text-align: center;
 +
        margin: auto;
 
     }
 
     }
  
 
     #welcome .left p {
 
     #welcome .left p {
 
         font-size: 1rem;
 
         font-size: 1rem;
 +
        margin: 0;
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
  
 
     #desc {
 
     #desc {
−
         grid-column: 1fr;
+
         grid-template-columns: 1fr;
 +
    }
 +
 
 +
    #desc .desc-block {
 +
        width: 80%;
 
     }
 
     }
 +
  
  
 
     #desc p {
 
     #desc p {
−
         font-size: 1rem;
+
         font-size: .8rem;
 
         position: relative;
 
         position: relative;
 
         text-align: center;
 
         text-align: center;
−
         width: 90%;
+
         width: 100%;
 
         margin: auto;
 
         margin: auto;
 
         top: 0;
 
         top: 0;
Line 1,303: Line 1,931:
 
     }
 
     }
  
−
     .brief-team{
+
     .two-image-with-desc {
 +
        padding: 1rem 0;
 +
    }
 +
 
 +
    .two-image-with-desc .im-group{
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
−
        height: fit-content;
 
−
        margin-top: 2rem;
 
 
     }
 
     }
  
−
     .brief-team .brief-team-right h1{
+
     .brief-team .brief-team-right{
−
         line-height: normal !important;
+
         padding: 2rem;
−
         font-size: 2rem;
+
         text-align: justify;
 
     }
 
     }
  
−
     .brief-team .brief-team-right p{
+
     .brief-team .brief-team-right h1{
−
         line-height: 1.2rem;
+
         text-align: center;
−
        font-size: 1rem;
+
 
     }
 
     }
  
 
     .position {
 
     .position {
−
         font-size: 4rem;
+
         font-size: 2rem;
 
         text-align: center;
 
         text-align: center;
 
         padding-top: 6rem;
 
         padding-top: 6rem;
Line 1,343: Line 1,972:
 
         height: 100%;
 
         height: 100%;
 
         background-color: #f5f5f5;
 
         background-color: #f5f5f5;
−
        left: 50%;
 
 
     }
 
     }
  
 
     .card .mem-name {
 
     .card .mem-name {
−
         padding: 1rem;  
+
         padding: 1rem;
 
     }
 
     }
  
Line 1,358: Line 1,986:
 
     }
 
     }
  
−
     .card-display p {
+
     .card-display .card .mem-desc p {
−
         text-align: center;
+
         text-align: justify;
−
         font-size: .9rem;
+
         font-size: .8rem !important;
 +
        line-height: normal;
 
     }
 
     }
  
 
     .card.leader {
 
     .card.leader {
−
         background-color: goldenrod;
+
         height: 70vh;
 
         width: 100%;
 
         width: 100%;
−
        height: 70vh;
 
 
     }
 
     }
  
−
     .card.pi {
+
     .card-display.sub-leader .card {
−
         grid-template-rows: 2fr 1fr;
+
         grid-template-rows: 9fr 1fr;
−
        grid-template-columns: 1fr;
+
         width: 80%;
−
         width: 90%;
+
−
        height: 150vh;
+
 
     }
 
     }
  
 
     .card-display.member{
 
     .card-display.member{
−
        display: grid;
 
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
−
        gap: 0;
 
−
        width: 90%;
 
 
     }
 
     }
  
−
     .card.pi .mem-name-pi * {
+
     .card.pi{
−
         text-align: start;
+
         height: fit-content;
−
         padding: 1rem;
+
         display: block;
 
     }
 
     }
  
−
     .card.pi .mem-name-pi h1 {
+
     .card.pi .img{
−
         font-size: 2rem;
+
         height: fit-content;
 +
        position: relative;
 
     }
 
     }
  
−
 
+
     .card.pi .mem-name-pi{
−
     .card-display.sub-leader {
+
         display: block;
−
         grid-template-columns: 1fr;
+
 
     }
 
     }
  
−
     .card-display.sub-leader .card {
+
     .card.pi .mem-name-pi h1{
−
         grid-template-rows: 9fr 1fr;
+
         font-size: 1.3rem;
−
        width: 80%;
+
 
     }
 
     }
  
−
     footer {
+
     .card.pi .mem-name-pi p{
−
         grid-template-columns: 1fr;
+
         font-size: .8rem !important;
−
        height: fit-content;
+
 
     }
 
     }
  
−
    .section-heading h1 {
 
−
        font-size: 2rem;
 
−
        text-align: center;
 
−
    }
 
  
−
     .section-selector {
+
     .card-display.small-cards .card {
−
        float: none;
+
 
         width: 90%;
 
         width: 90%;
−
        height: fit-content;
 
−
        padding: 1rem;
 
−
        margin-bottom: 2rem;
 
 
     }
 
     }
  
−
     .section-selector h1 {
+
     .card-display.small-cards-2 .card{
−
        font-size: 1.5rem;
+
         height: 35vh;
−
         padding: 1rem 0;
+
 
     }
 
     }
  
−
     .section-selector ul {
+
     .card-display.small-cards-2 .card .mem-name h1{
−
         width: 100%;
+
         font-size: 1rem !important;
−
        padding: 0;
+
 
     }
 
     }
  
−
     .section-selector ul li a {
+
     .card-display.small-cards-2 .card .ad-desc .mem-name{
−
         font-size: 1rem;
+
         padding: 1rem 0 !important;
 
     }
 
     }
  
−
     .right-section {
+
     .card-display.small-cards-2 .card .ad-desc .mem-name h1{
−
         width: 100%;
+
         font-size: 1rem !important;
−
        float: none;
+
         padding: 0 !important;
−
         padding: none;
+
−
        height: fit-content;
+
−
        margin-bottom: 5rem;
+
 
     }
 
     }
  
−
     .right-section * {
+
     .card-display.small-cards-2 .card .ad-desc .desc p{
−
         margin-bottom: 1rem;
+
         padding: 0 !important;
 +
        font-size: .8rem !important;
 
     }
 
     }
  
−
     .right-section .section-contents {
+
     .card-display.small-cards-2 .card .desc p{
−
         width: 100%;
+
         font-size: .8rem !important;
−
        padding: 0;
+
−
        float: none;
+
 
     }
 
     }
  
−
     .right-section .section-contents h2 {
+
     footer {
−
         font-size: 1.5rem;
+
         grid-template-columns: 1fr;
−
         margin-left: 1rem !important;
+
         height: fit-content;
 
     }
 
     }
  
−
     .right-section .section-contents p {
+
     .attri-card .attri-content ul li {
 +
        padding: .2rem 0;
 
         font-size: 1rem !important;
 
         font-size: 1rem !important;
−
         padding: 1rem;
+
         line-height: normal;
−
        width: 90%;
+
 
     }
 
     }
 +
   
 +
  
 
     /* hp */
 
     /* hp */
 +
 +
    .hp-intro p {
 +
        font-size: 1rem !important;
 +
        text-align: center !important;
 +
        font-style: italic;
 +
        font-weight: bold;
 +
    }
 +
 +
    .hp-intro .single-image-with-desc img {
 +
        margin-top: 3rem;
 +
        width: 100%;
 +
        border-radius: 1rem;
 +
    }
  
 
     .block {
 
     .block {
Line 1,520: Line 2,142:
 
     padding: 0;
 
     padding: 0;
 
     background-color: #f4f4f4;
 
     background-color: #f4f4f4;
−
    color: #000000;
 
−
    font-family: 'Roboto', sans-serif;
 
 
     font-size: 100% !important;
 
     font-size: 100% !important;
 
}
 
}
  
−
#globalWrapper{
+
#globalWrapper {
−
  height: fit-content;
+
    height: fit-content;
−
  padding:0 !important;
+
    padding: 0 !important;
 
}
 
}
  
Line 1,538: Line 2,158:
 
<script>
 
<script>
 
window.onload = function () {
 
window.onload = function () {
 +
 +
    var top = document.querySelector("#my-top");
 +
    window.addEventListener("scroll", ()=>{
 +
        top.classList.toggle("onscroll", window.scrollY > 300);
 +
    });
  
 
     //original navigation
 
     //original navigation
Line 1,600: Line 2,225:
 
         });
 
         });
 
     };
 
     };
−
 
−
    //navbar on scroll
 
−
 
−
    var top = document.querySelector("#my-top");
 
−
    window.addEventListener("scroll", ()=>{
 
−
        top.classList.toggle("onscroll", window.scrollY > 300);
 
−
    });
 
  
 
     //bottle navigation
 
     //bottle navigation

Latest revision as of 09:39, 21 October 2021

HK_GTC 2021 Homepage