Difference between revisions of "Template:HK GTC"

Line 4: Line 4:
 
</header>
 
</header>
 
<style>
 
<style>
 +
*{
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
    font-size: 100%;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
 +
 +
header{
 +
    font-family: 'Raleway', serif !important;
 +
}
 +
 +
@font-face {
 +
    font-family: "Monastic";
 +
    src: url("../fonts/Monastic.ttf");
 +
}
 +
 +
/* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
 +
 +
#my-nav{
 +
    position: fixed;
 +
    width: 100%;
 +
    height: 10vh;
 +
    transition: transform .5s;
 +
    z-index: 3;
 +
}
 +
 +
#my-nav #top{
 +
    position: absolute;
 +
    top:0;
 +
    left:0;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
#my-nav #top h1{
 +
    float: left;
 +
    padding:2rem;
 +
    font-size: 2rem;
 +
    color: #fff;
 +
}
 +
#my-nav #nav-button{
 +
    transition: all .25s;
 +
    float: right;
 +
    padding: 2rem;
 +
}
 +
 +
#my-nav #nav-button:hover{
 +
    cursor: pointer;
 +
    height:3rem;
 +
}
 +
 +
#my-nav #nav-button line{
 +
    stroke: #fff;
 +
    transition: all .5s;
 +
}
 +
 +
#my-nav #nav-button:hover line{
 +
    stroke: #eeeeee;
 +
}
 +
 +
#my-nav #back-button{
 +
    width: fit-content;
 +
}
 +
 +
#my-nav #back-button:hover{
 +
    cursor: pointer;
 +
}
 +
 +
#my-nav .inline{
 +
    display: inline;
 +
}
 +
 +
#my-nav .inline h1{
 +
    padding-right: 0 !important;
 +
}
 +
 +
#my-nav #my-nav.logo{
 +
    width: 6rem;
 +
    height: 6rem;
 +
}
 +
 +
#my-nav #popup{
 +
    position: fixed;
 +
    width:25%;
 +
    height:100%;
 +
    right:0;
 +
    transform: translateX(100%);
 +
    padding: 2.5rem;
 +
    background-color: #ffffff;
 +
    font-size: 2rem;
 +
    font-weight: 200;
 +
    transition: all .5s;
 +
    opacity: 0;
 +
    color: #4f4f4f !important;
 +
}
 +
 +
#my-nav #popup a{
 +
    width: 100%;
 +
    height: 100%;
 +
    text-decoration: none;
 +
    color:#4f4f4f;
 +
    font-weight: 200;
 +
    transition: all .25s;
 +
}
 +
 +
#my-nav #popup li{
 +
    transition: all .25s;
 +
}
 +
 +
#my-nav #popup li:hover{
 +
    cursor: pointer;
 +
    color: #f4f4f4;
 +
    background-color: #1BA784;
 +
    font-weight: 400;
 +
}
 +
 +
#my-nav #popup li:hover a{
 +
    color: #f4f4f4;
 +
    font-weight: 400;
 +
}
 +
 +
 +
#my-nav #current-page{
 +
    font-weight: bold;
 +
}
 +
 +
#my-nav #popup nav,#my-nav #popup ul,#my-nav #popup li{
 +
    list-style-type: none;
 +
    width: 100%;
 +
    padding: .6rem;
 +
}
 +
 +
#my-nav #popup h1 {
 +
    padding: .6rem
 +
}
 +
 +
#my-nav .navShow{
 +
    transform: translateX(0%) !important;
 +
    opacity: 1 !important;
 +
}
 +
 +
#my-nav .inactive{
 +
    display:none;
 +
}
 +
 +
#my-nav .show{
 +
    transition: opacity .25s;
 +
    opacity: 1;
 +
}
 +
 +
#my-nav .fade-out{
 +
    transition: opacity .25s;
 +
    opacity : 0 !important;
 +
}
 +
 +
#my-nav .rotate{
 +
    transform: rotate(90deg);
 +
}
 +
 +
 +
 +
 +
 +
html{
 +
    scroll-behavior: smooth;
 +
}
 +
 +
html, body{
 +
    background-color: #f4f4f4;
 +
}
 +
 +
body{
 +
    position: absolute;
 +
    width: 100%;
 +
}
 +
 +
#my-global-wrapper{
 +
    width: 100%;
 +
    height: max-content;
 +
    font-family: 'Raleway', serif !important;
 +
}
 +
 +
#welcome{
 +
    position: relative;
 +
    height: 100vh;
 +
    width: 100%;
 +
    font-size: 6rem;
 +
    background-color: #93D5DC;
 +
    background-image: url("../img/Main\ page\ background.png");
 +
    display: grid;
 +
    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);
 +
} */
 +
 +
.center{
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 +
#welcome .left{
 +
    padding: 4rem;
 +
    position: relative;
 +
}
 +
 +
#welcome .left h1{
 +
    font-family: "Monastic";
 +
    font-size: 6rem;
 +
    padding: 1rem;
 +
    letter-spacing: 1rem;
 +
}
 +
 +
#welcome .left .bar{
 +
    height: .6rem;
 +
    width: 60%;
 +
    margin: auto;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
}
 +
 +
#welcome .left .bar .leftcolor{
 +
    width: 110%;
 +
    height: 100%;
 +
    background-color: #71aada;
 +
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
 +
}
 +
 +
#welcome .left .bar .rightcolor{
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: #cee5f7;
 +
}
 +
 +
#welcome .left p{
 +
    font-size: 2.5rem;
 +
    font-weight: 200;
 +
    padding: 1rem;
 +
}
 +
 +
#welcome .right{
 +
    position: relative;
 +
}
 +
 +
#welcome .right img{
 +
  width: 100%;
 +
  max-width: none;
 +
  overflow: hidden;
 +
}
 +
 +
#desc{
 +
    height: 100vh;
 +
    position: relative;
 +
    background: rgb(2,0,36);
 +
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(206,238,245,1) 0%, rgb(81, 105, 141) 0%, rgba(206,238,245,1) 100%);
 +
}
 +
 +
#desc h1{
 +
    color: #fff;
 +
    font-size: 3rem;
 +
    position: absolute;
 +
    top: 40%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 +
#desc p{
 +
    color: #fff;
 +
    font-size: 1.5rem;
 +
    position: absolute;
 +
    width: 60%;
 +
    top: 60%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 +
 +
 +
/* bottle navigation */
 +
 +
#bot-nav{
 +
    height: 100vh;
 +
    display: grid;
 +
    grid-template-columns: 2fr 1fr;
 +
    background: linear-gradient(0deg,rgb(2,0,36) 0%, rgb(81, 105, 141) 100%);
 +
    color:#f4f4f4;
 +
}
 +
 +
#nav-desc-left{
 +
    position: relative;
 +
}
 +
 +
#nav-right{
 +
    position: relative;
 +
}
 +
 +
#the-bottle{
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr 1fr;
 +
    grid-template-rows: 1fr 1fr 1fr 1fr;
 +
    width: 215px;
 +
    height: 766px;
 +
    margin:auto;
 +
    margin-top: 5rem;
 +
    position: relative;
 +
}
 +
 +
#the-bottle div{
 +
    position:unset;
 +
}
 +
 +
.bot-button{
 +
    z-index: 3;
 +
}
 +
 +
.bot-button .link {
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
.bot-button a{
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
#bot-im{
 +
    transition: all .2s;
 +
}
 +
 +
.darken{
 +
    opacity : .7;
 +
}
 +
 +
#bot-team{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 1/3;
 +
    grid-column: 1/2;
 +
}
 +
 +
#bot-team:hover{
 +
    opacity: 1;
 +
}
 +
 +
#bot-project{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 1/3;
 +
    grid-column: 3/4;
 +
}
 +
 +
#bot-project:hover{
 +
    opacity: 1;
 +
}
 +
 +
#bot-part{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 3/4;
 +
    grid-column: 1/2;
 +
}
 +
 +
#bot-part:hover{
 +
    opacity: 1;
 +
}
 +
 +
#bot-safety{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 3/4;
 +
    grid-column: 3/4;
 +
}
 +
 +
#bot-safety:hover{
 +
    opacity: 1;
 +
}
 +
 +
#bot-dl{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 4/5;
 +
    grid-column: 1/2;
 +
}
 +
 +
#bot-dl:hover{
 +
    opacity: 1;
 +
}
 +
 +
#bot-hp{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 4/5;
 +
    grid-column: 3/4;
 +
}
 +
 +
#bot-hp:hover{
 +
    opacity: 1;
 +
}
 +
 +
#bot-home{
 +
    opacity: 0;
 +
    transition: opacity .4s;
 +
    grid-row: 2/4;
 +
    grid-column: 2/3;
 +
}
 +
 +
#bot-home:hover{
 +
    opacity: 1;
 +
}
 +
 +
#the-bottle img{
 +
    position: absolute;
 +
    z-index: 0;
 +
}
 +
 +
.showable{
 +
    position: absolute;
 +
    pointer-events: none;
 +
    left: 0;
 +
    top:0;
 +
}
 +
 +
.bot-button{
 +
    z-index: 1;
 +
}
 +
 +
#nav-desc-left .hap {
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
#nav-desc-left .hap h1{
 +
    font-size: 6rem;
 +
    margin-bottom: 2rem;
 +
}
 +
 +
#nav-desc-left .hap p{
 +
    font-size: 1.2rem;
 +
}
 +
 +
.bottle-desc{
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 50%;
 +
    padding:1rem;
 +
    width: 70%;
 +
    transform: translate(0,-100rem);
 +
    transition: opacity .5s;
 +
    opacity: 0;
 +
}
 +
 +
.bottle-desc .img{
 +
    width: 400px;
 +
    height: 300px;
 +
    margin-top: 3rem;
 +
    margin-left: 1rem;
 +
    background-color: #acacac;
 +
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 +
    border-radius: 1rem;
 +
}
 +
 +
.current-desc{
 +
    transform: translate(-50%, -50%);
 +
    opacity: 1;
 +
}
 +
 +
 +
 +
 +
footer {
 +
    width: 100%;
 +
    height: 8rem;
 +
    background-color: #222222;
 +
    display: block;
 +
    clear: both;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr 1fr;
 +
    color: #fff;
 +
    align-items: center;
 +
    text-align: center;
 +
}
 +
 +
 +
footer div{
 +
    padding:1rem;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
/* Section Landing Page */
 +
.block1 {
 +
    height: 60vh;
 +
    display: grid;
 +
    grid-template-columns: 1.2fr 1fr;
 +
}
 +
 +
.block2 {
 +
    height: 60vh;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1.2fr;
 +
}
 +
 +
.block .block-left {
 +
    width: 100%;
 +
    position: relative;
 +
}
 +
 +
.block .block-left .wrapper{
 +
    width: 60%;
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 +
.block .block-left .wrapper h1 {
 +
    font-size: 3rem;
 +
    padding:1rem;
 +
}
 +
 +
.block .block-left .wrapper p {
 +
    padding:1rem;
 +
    line-height: 1.7rem;
 +
}
 +
 +
.learn-more{
 +
    width: 100%;
 +
    position: relative;
 +
}
 +
 +
.learn-more a{
 +
    position: absolute;
 +
    font-weight: 900;
 +
    right: 0;
 +
    padding: .5rem;
 +
    text-decoration: none;
 +
    color: #4f4f4f;
 +
    transition: all .1s;
 +
}
 +
 +
.learn-more a:hover{
 +
    border-left: #1BA784 solid 5px;
 +
    color: #acacac;
 +
    transform: translateX(1rem);
 +
}
 +
 +
.block-right{
 +
    width: 100%;
 +
    height: 100%;
 +
    position: relative;
 +
}
 +
 +
.block-right .wrapper{
 +
    width: 100%;
 +
    height: 100%;
 +
    position: relative;
 +
}
 +
 +
.block-right .img{
 +
    width: 70%;
 +
    height: 60%;
 +
    background-color: #acacac;
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 +
    border-radius: 1rem;
 +
}
 +
 +
/* Attribute and Team*/
 +
 +
.section-heading{
 +
    height: 230rem;
 +
}
 +
 +
.position{
 +
    font-size: 4rem;
 +
    text-align: center;
 +
    padding-top: 6rem;
 +
    padding-bottom: 4rem;
 +
}
 +
 +
.card-display{
 +
    width: 80%;
 +
    margin: auto;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
    row-gap: 3rem;
 +
    padding: 2.5rem;
 +
}
 +
 +
.card-display.one-card{
 +
    grid-template-columns: 1fr;
 +
}
 +
 +
.card-display .img{
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: #f5f5f5;
 +
    left: 50%;
 +
}
 +
 +
.card-display .card{
 +
    display: grid;
 +
    overflow: hidden;
 +
    width: 70%;
 +
    margin: auto;
 +
    grid-template-rows: 3fr 1fr;
 +
    margin-bottom: 3rem;
 +
    background-color: #ffffff;
 +
    border-radius: 2.5rem;
 +
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 +
}
 +
 +
.card .mem-desc{
 +
    padding: 2rem;
 +
}
 +
 +
.card-display h1{
 +
    margin-bottom: 1rem;
 +
    text-align: center;
 +
    margin-bottom: 0;
 +
    padding: 1rem;
 +
    font-size: 2rem;
 +
}
 +
 +
.card-display p{
 +
    text-align: center;
 +
}
 +
 +
.card-display .leader{
 +
    background-color: goldenrod;
 +
    color: #fff;
 +
}
 +
 +
.card.pi{
 +
    grid-template-rows: 1fr;
 +
    grid-template-columns: 1fr 2.5fr;
 +
    width: 90%;
 +
    height: 100%;
 +
}
 +
 +
.card.pi .mem-desc *{
 +
    text-align: start;
 +
    padding: 1rem;
 +
}
 +
 +
.card.pi .mem-desc h1{
 +
    font-size: 2rem;
 +
}
 +
 +
 +
.card-display.sub-leader{
 +
    grid-template-columns: 1fr 1fr 1fr;
 +
}
 +
 +
.card-display.sub-leader .card{
 +
    grid-template-rows: 1.5fr 1fr;
 +
    width: 80%;
 +
}
 +
 +
 +
/* Actual WIKI Pages*/
 +
 +
 +
.section-selector{
 +
    height: 100%;
 +
    width: 20%;
 +
    padding-top: 8rem;
 +
    padding-left: 2rem;
 +
    float: left;
 +
}
 +
 +
.section-selector h1{
 +
    padding-left: 1rem;
 +
    font-size: 1.5rem;
 +
    margin-bottom: 1rem;
 +
}
 +
 +
.section-selector ul{
 +
    width: 80%;
 +
    margin: auto;
 +
    padding: 1rem;
 +
}
 +
 +
.section-selector a{
 +
    text-decoration: none;
 +
    color: #4f4f4f;
 +
    font-size: 1.1rem;
 +
    font-weight: bold;
 +
    transition: all .1s;
 +
}
 +
 +
.section-selector li:hover{
 +
    transition: all .1s;
 +
}
 +
 +
.section-selector li:hover{
 +
    border-left: #29B7CB 5px;
 +
    border-left-style: solid;
 +
    background-color: #cbeff3;
 +
}
 +
 +
.section-selector li:hover a{
 +
    color: #fff;
 +
}
 +
 +
.right-section{
 +
    float: right;
 +
    width: 75%;
 +
    background-color: #f4f4f4;
 +
}
 +
 +
.section-heading{
 +
    background-color: #4f4f4f;
 +
    height: 30rem;
 +
    position: relative;
 +
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 +
    background-image: url("../img/_MG_0041.JPG");
 +
    background-repeat:no-repeat;
 +
    background-size: 100%;
 +
    background-attachment: fixed;
 +
    z-index: 2;
 +
}
 +
 +
.section-heading .mask{
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: #4f4f4f;
 +
    opacity: .5;
 +
}
 +
 +
.section-heading h1{
 +
    color: white;
 +
    font-size: 3rem;
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 50%;
 +
    transform: translate(-50%, -50%);
 +
    z-index: 10;
 +
}
 +
 +
.section-contents{
 +
    float: right;
 +
    padding: 6rem;
 +
}
 +
 +
.section-contents h2{
 +
    font-size: 2rem;
 +
    font-weight: bold;
 +
    padding-left: 1rem;
 +
    border-left: #29B7CB 6px solid;
 +
}
 +
 +
.section-contents p{
 +
    font-size: 1.2rem;
 +
    padding: 4rem;
 +
}
 +
 +
.single-image-with-desc{
 +
    display: block;
 +
}
 +
 +
 +
.single-image-with-desc img{
 +
    width: 60%;
 +
    margin: auto;
 +
}
 +
 +
.single-image-with-desc p{
 +
    font-size: 1rem;
 +
    text-align: center;
 +
}
 +
 +
.two-image-with-desc{
 +
    display: block;
 +
    width: 100%;
 +
}
 +
 +
.two-image-with-desc .im-group{
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
}
 +
 +
.two-image-with-desc .im-group img{
 +
    width: 90%;
 +
}
 +
 +
.two-image-with-desc p{
 +
    font-size: 1rem;
 +
    text-align: center;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
/* responsive */
 +
 +
@keyframes floaty{
 +
    0%{
 +
        transform: translateY(0px);
 +
    }
 +
    50%{
 +
        transform: translateY(10px);
 +
    }
 +
    100%{
 +
        transform: translateY(0px);
 +
    }
 +
}
 +
 +
@media (max-width: 600px) {
 +
 +
    h1{
 +
        font-size: 2rem;
 +
    }
 +
 +
    #popup{
 +
        width: 85%;
 +
    }
 +
 +
    #welcome h1{
 +
        font-size: 2.5rem;
 +
        top:75%;
 +
    }
 +
 +
    nav li{
 +
        text-align: center;
 +
    }
 +
 +
    #nav-button{
 +
        height:2.3rem;
 +
    }
 +
 +
    #nav-button{
 +
        cursor: pointer;
 +
        height :2rem !important;
 +
    }
 +
 +
    /* homepage */
 +
 +
    #welcome{
 +
        grid-template-columns: 1fr;
 +
        grid-template-rows: 2.5fr 1fr;
 +
    }
 +
 +
    #welcome .left{
 +
        grid-row: 2/3;
 +
    }
 +
 +
    #welcome .left h1{
 +
        font-size: 2rem;
 +
        text-align: center;
 +
    }
 +
 +
    #welcome .left p{
 +
        font-size: 1rem;
 +
        text-align: center;
 +
    }
 +
 +
    #desc{
 +
        grid-column: 1fr;
 +
       
 +
    }
 +
 +
    #desc h1{
 +
        font-size: 2rem;
 +
        position: relative;
 +
        text-align: center;
 +
        padding: 1rem;
 +
    }
 +
    #desc p{
 +
        font-size: 1rem;
 +
        position: relative;
 +
        text-align: center;
 +
        width: 90%;
 +
        margin-left: 0;
 +
    }
 +
 +
    #bot-nav{
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
    }
 +
 +
    #bot-nav #nav-desc-left{
 +
        display: none;
 +
    }
 +
 +
    /* team (Actual wiki pages*/
 +
 +
    .section-heading{
 +
        height: 15rem;
 +
        overflow: hidden;
 +
    }
 +
   
 +
    .position{
 +
        font-size: 4rem;
 +
        text-align: center;
 +
        padding-top: 6rem;
 +
        padding-bottom: 4rem;
 +
    }
 +
   
 +
    .card-display{
 +
        width: 80%;
 +
        margin: auto;
 +
        display: grid;
 +
        grid-template-columns: 1fr;
 +
        padding: 0;
 +
    }
 +
   
 +
    .card-display.one-card{
 +
        grid-template-columns: 1fr;
 +
        width: 100%;
 +
    }
 +
   
 +
    .card-display .img{
 +
        width: 100%;
 +
        height: 100%;
 +
        background-color: #f5f5f5;
 +
        left: 50%;
 +
    }
 +
   
 +
    .card-display .card{
 +
        display: grid;
 +
        overflow: hidden;
 +
        width: 70%;
 +
        margin: auto;
 +
        grid-template-rows: 3fr 1fr;
 +
        margin-bottom: 3rem;
 +
        background-color: #ffffff;
 +
        border-radius: 2.5rem;
 +
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 +
    }
 +
   
 +
    .card .mem-desc{
 +
        padding: 1rem;
 +
    }
 +
   
 +
    .card-display h1{
 +
        margin-bottom: 1rem;
 +
        text-align: center;
 +
        margin-bottom: 0;
 +
        padding: 1rem;
 +
        font-size: 1.5rem;
 +
    }
 +
   
 +
    .card-display p{
 +
        text-align: center;
 +
        font-size: .9rem;
 +
    }
 +
   
 +
    .card.leader{
 +
        background-color: goldenrod;
 +
        color: #fff;
 +
        width: 100%;
 +
        grid-template-rows: 2fr 1fr;
 +
        height: 70vh;
 +
    }
 +
   
 +
    .card.pi{
 +
        grid-template-rows: 2fr 1fr;
 +
        grid-template-columns: 1fr;
 +
        width: 90%;
 +
        height: 150vh;
 +
    }
 +
   
 +
    .card.pi .mem-desc *{
 +
        text-align: start;
 +
        padding: 1rem;
 +
    }
 +
   
 +
    .card.pi .mem-desc h1{
 +
        font-size: 2rem;
 +
    }
 +
   
 +
   
 +
    .card-display.sub-leader{
 +
        grid-template-columns: 1fr;
 +
    }
 +
   
 +
    .card-display.sub-leader .card{
 +
        grid-template-rows: 1.5fr 1fr;
 +
        width: 80%;
 +
    }
 +
 +
    footer{
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
    }
 +
 +
    .section-heading h1{
 +
        font-size: 2rem;
 +
        text-align: center;
 +
    }
 +
 +
    .section-selector{
 +
        float: none;
 +
        width: 90%;
 +
        height: 40vh;
 +
        padding: 1rem;
 +
        margin-bottom: 2rem;
 +
    }
 +
 +
    .section-selector h1{
 +
        font-size: 1.5rem;
 +
    }
 +
 +
    .section-selector ul{
 +
        width: 100%;
 +
        padding:0;
 +
    }
 +
 +
    .section-selector ul li a{
 +
        font-size: 1rem;
 +
    }
 +
 +
    .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 h2{
 +
        font-size: 2rem;
 +
        margin-left: 1rem;
 +
    }
 +
 +
    .right-section .section-contents p{
 +
        font-size: 1rem;
 +
        padding: 1rem;
 +
        width: 90%;
 +
    }
 +
 +
    /* hp */
 +
 +
    .block{
 +
        display: block;
 +
        height: fit-content;
 +
        padding: 2rem;
 +
    }
 +
 +
    .block-left,.block-right{
 +
        height: fit-content;
 +
    }
 +
 +
    .learn-more{
 +
        height: 3rem;
 +
    }
 +
 +
    .block .wrapper{
 +
        width: 90% !important;
 +
        position: relative !important;
 +
        transform: translate(0) !important;
 +
        top: 0 !important;
 +
        left: 0 !important;
 +
    }
 +
 +
    .block img{
 +
        display: none;
 +
    }
 +
 +
    hr{
 +
        width: 80%;
 +
    }
 +
 +
}
 
     /*Replace this with file on igem sever*/
 
     /*Replace this with file on igem sever*/
 
     @import url('https://fonts.googleapis.com/css?family=Lobster');
 
     @import url('https://fonts.googleapis.com/css?family=Lobster');

Revision as of 08:13, 18 September 2021