Jonas232005 (Talk | contribs) |
Jonas232005 (Talk | contribs) |
||
(56 intermediate revisions by the same user 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> | ||
− | |||
</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/ | + | <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/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 79: | Line 80: | ||
<ul> | <ul> | ||
<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"> | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Collaborations">Collaborations</a></li> |
− | <li><a href="https://2021.igem.org/Team:HK_GTC/ | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Partnership">Partnership</a></li> |
− | <li><a href="https://2021.igem.org/Team:HK_GTC/ | + | <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 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); | filter: drop-shadow(1px 1px 0px#000); | ||
Line 231: | Line 240: | ||
#my-nav #popup li { | #my-nav #popup li { | ||
list-style: none; | list-style: none; | ||
− | padding: . | + | 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: . | + | padding: 1rem 0; |
+ | font-size: 2.5rem !important; | ||
} | } | ||
Line 261: | Line 278: | ||
} | } | ||
− | #my-top.onscroll{ | + | #my-top.onscroll { |
− | background-color: # | + | 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: # | + | color: #fff !important; |
filter: none !important; | filter: none !important; | ||
+ | font-size: 1rem !important; | ||
+ | padding: 1rem !important; | ||
} | } | ||
− | #my-top.onscroll #nav-button line{ | + | #my-top.onscroll #nav-button line { |
− | stroke: # | + | stroke: #fff !important; |
} | } | ||
− | #my-top.onscroll #nav-button{ | + | #my-top.onscroll #nav-button { |
filter: none !important; | filter: none !important; | ||
+ | height: 2rem ; | ||
+ | padding: 0rem !important; | ||
+ | margin: .5rem !important; | ||
} | } | ||
Line 300: | 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 308: | Line 331: | ||
p { | p { | ||
− | font-family: " | + | font-family: "Open Sans", sans-serif !important; |
− | } | + | color: #f4f4f4; |
+ | } | ||
#my-global-wrapper { | #my-global-wrapper { | ||
Line 329: | Line 353: | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.welcome-center { | .welcome-center { | ||
Line 354: | 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 385: | 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 390: | Line 405: | ||
text-align: left; | text-align: left; | ||
margin: 0; | margin: 0; | ||
+ | color: #4f4f4f !important; | ||
} | } | ||
Line 406: | 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-size: auto 100%; | + | background-size: auto 100%; |
background-position: left; | background-position: left; | ||
background-repeat: round; | 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; | ||
− | |||
text-align: center; | text-align: center; | ||
width: 100%; | width: 100%; | ||
− | padding: 2rem 0 ; | + | padding: 2rem 0; |
} | } | ||
Line 444: | Line 460: | ||
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-size: 100% 100%; | background-size: 100% 100%; | ||
− | background-position:center; | + | background-position: center; |
color: #f4f4f4; | color: #f4f4f4; | ||
} | } | ||
Line 615: | Line 631: | ||
} | } | ||
− | #bottle-guide h1{ | + | #bottle-guide h1 { |
text-align: center; | text-align: center; | ||
} | } | ||
− | .bottle-desc p{ | + | .bottle-desc p { |
line-height: 1.8rem; | line-height: 1.8rem; | ||
} | } | ||
Line 625: | Line 641: | ||
.bottle-desc .img { | .bottle-desc .img { | ||
width: 400px; | width: 400px; | ||
− | height: | + | height: 225px; |
margin-top: 3rem; | margin-top: 3rem; | ||
margin-left: 1rem; | margin-left: 1rem; | ||
Line 638: | 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 771: | 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 778: | 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 787: | 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 805: | Line 887: | ||
} | } | ||
− | .brief-team{ | + | .brief-team { |
width: 100%; | width: 100%; | ||
height: 70vh; | height: 70vh; | ||
Line 812: | Line 894: | ||
} | } | ||
− | .brief-team img{ | + | .brief-team img { |
width: 80%; | width: 80%; | ||
margin-top: 4rem; | margin-top: 4rem; | ||
Line 820: | 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 831: | 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 853: | Line 937: | ||
height: 100%; | height: 100%; | ||
background-color: #f5f5f5; | background-color: #f5f5f5; | ||
− | + | 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 870: | Line 965: | ||
.card .mem-name { | .card .mem-name { | ||
− | padding: | + | padding: 1rem; |
height: 100%; | height: 100%; | ||
+ | z-index: 1; | ||
} | } | ||
− | .card .mem-desc{ | + | .card .mem-desc { |
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
Line 886: | Line 982: | ||
} | } | ||
− | .card .mem-desc:hover{ | + | .card .mem-desc:hover { |
− | opacity: . | + | 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 922: | Line 1,020: | ||
.card-display .leader { | .card-display .leader { | ||
− | background-color: | + | background-color: #1BA784; |
− | height: | + | height: 60vh; |
+ | width: 70%; | ||
color: #fff; | color: #fff; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .card-display .leader h1{ | ||
+ | font-size: 1rem; | ||
} | } | ||
Line 948: | 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: | + | grid-template-columns: 1fr 1fr 1fr; |
} | } | ||
Line 962: | 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 975: | 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 982: | 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 988: | Line 1,094: | ||
} | } | ||
− | .card-display.small-cards{ | + | .card-display.small-cards { |
display: block; | display: block; | ||
} | } | ||
− | .card-display.small-cards .card{ | + | .card-display.small-cards .card { |
display: block; | display: block; | ||
background-color: #fff; | background-color: #fff; | ||
− | width: 60%; | + | width: 60%; |
height: fit-content; | height: fit-content; | ||
− | border-radius: 2rem; | + | border-radius: 2rem; |
} | } | ||
− | .card-display.small-cards .card .mem-name{ | + | .card-display.small-cards .card .mem-name { |
− | padding:1rem; | + | padding: 1rem; |
} | } | ||
− | .card-display.small-cards .card .mem-name h1{ | + | .card-display.small-cards .card .mem-name h1 { |
text-align: start; | text-align: start; | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
} | } | ||
− | .card-display.small-cards .card .desc p{ | + | .card-display.small-cards .card .desc p { |
text-align: start; | text-align: start; | ||
padding: 2rem; | padding: 2rem; | ||
+ | color: #4f4f4f; | ||
} | } | ||
− | .card-display.small-cards-2{ | + | .card-display.small-cards-2 { |
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
− | .card-display.small-cards-2 .card{ | + | .card-display.small-cards-2 .card { |
display: block; | display: block; | ||
background-color: #fff; | background-color: #fff; | ||
− | width: 90%; | + | width: 90%; |
height: 17rem; | height: 17rem; | ||
border-radius: 2rem; | border-radius: 2rem; | ||
− | display: block; | + | display: block; |
position: relative; | position: relative; | ||
} | } | ||
− | .card-display.small-cards-2 .card .mem-name{ | + | .card-display.small-cards-2 .card .mem-name { |
height: fit-content; | height: fit-content; | ||
− | padding:1rem; | + | padding: 1rem; |
} | } | ||
− | .card-display.small-cards-2 .card .mem-name h1{ | + | .card-display.small-cards-2 .card .mem-name h1 { |
text-align: start; | text-align: start; | ||
− | font-size: 1.5rem; | + | font-size: 1.5rem !important; |
} | } | ||
− | .card-display.small-cards-2 .card .desc p{ | + | .card-display.small-cards-2 .card .desc p { |
text-align: start; | text-align: start; | ||
padding: 2rem; | 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; | ||
+ | } | ||
+ | |||
+ | |||
Line 1,049: | Line 1,173: | ||
/* Attribution */ | /* Attribution */ | ||
− | .attri-wrapper{ | + | .attri-wrapper { |
width: 90%; | width: 90%; | ||
margin: auto; | margin: auto; | ||
Line 1,055: | Line 1,179: | ||
} | } | ||
− | .attri-card{ | + | .attri-card { |
width: 70%; | width: 70%; | ||
− | margin:auto; | + | margin: auto; |
display: block; | display: block; | ||
margin: 3rem auto; | margin: 3rem auto; | ||
Line 1,066: | Line 1,190: | ||
− | .attri-card .attri-content{ | + | .attri-card .attri-content { |
padding: 3rem; | padding: 3rem; | ||
background-color: #fff; | background-color: #fff; | ||
} | } | ||
− | .attri-card .attri-content h1{ | + | .attri-card .attri-content h1 { |
font-size: 2rem; | font-size: 2rem; | ||
padding: 1rem; | padding: 1rem; | ||
color: #2a4150; | color: #2a4150; | ||
− | border-bottom: solid 1px #1BA784; | + | border-bottom: solid 1px #1BA784 !important; |
} | } | ||
− | .attri-card | + | .attri-card .attri-content ul { |
list-style: none; | list-style: none; | ||
padding: 1rem; | padding: 1rem; | ||
} | } | ||
− | .attri-card | + | .attri-card .attri-content ul li { |
padding: .2rem 0; | padding: .2rem 0; | ||
+ | font-family: "Open Sans", sans-serif; | ||
} | } | ||
− | .attri-card | + | .attri-card .attri-content ul li::before { |
content: "\2713"; | content: "\2713"; | ||
color: #1BA784; | color: #1BA784; | ||
Line 1,095: | Line 1,220: | ||
+ | /* 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,123: | Line 1,263: | ||
.section-selector li { | .section-selector li { | ||
list-style: none; | list-style: none; | ||
− | font-family: " | + | font-family: "Open Sans", sans-serif; |
padding: .4rem; | padding: .4rem; | ||
} | } | ||
Line 1,131: | Line 1,271: | ||
color: #4f4f4f; | color: #4f4f4f; | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
− | font-weight: | + | font-weight: 400; |
+ | line-height: .8rem; | ||
transition: all .1s; | transition: all .1s; | ||
} | } | ||
Line 1,147: | Line 1,288: | ||
.section-selector li:hover a { | .section-selector li:hover a { | ||
color: #fff; | color: #fff; | ||
+ | font-weight: 500; | ||
} | } | ||
Line 1,170: | Line 1,312: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | background-color: # | + | background-color: #2a4150; |
− | opacity: . | + | opacity: .8; |
} | } | ||
Line 1,182: | 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,187: | Line 1,334: | ||
float: right; | float: right; | ||
padding: 6rem; | padding: 6rem; | ||
+ | width: 80%; | ||
+ | margin: auto; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .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; | ||
+ | padding: 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 h2, .section-contents-mid h2 { |
line-height: normal !important; | line-height: normal !important; | ||
padding: 0; | padding: 0; | ||
Line 1,200: | 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 | + | margin: 1rem 0 !important; |
padding-left: 1rem; | padding-left: 1rem; | ||
} | } | ||
− | .section-contents p { | + | .section-contents h4 { |
− | font-size: 1. | + | border-left: #8dc6fc 6px solid; |
− | line-height: 1. | + | 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; | padding: 2rem 0; | ||
overflow-wrap: break-word; | overflow-wrap: break-word; | ||
Line 1,222: | Line 1,413: | ||
} | } | ||
− | .section-contents ul{ | + | .section-contents ul { |
font-size: 1.2rem !important; | font-size: 1.2rem !important; | ||
font-family: "Raleway", sans-serif; | font-family: "Raleway", sans-serif; | ||
line-height: 1.6rem !important; | line-height: 1.6rem !important; | ||
− | padding: | + | padding: 1rem; |
} | } | ||
− | .section-contents video{ | + | .section-contents video { |
width: 80%; | width: 80%; | ||
display: block; | display: block; | ||
height: auto; | height: auto; | ||
margin: 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; | ||
} | } | ||
Line 1,249: | Line 1,465: | ||
font-size: .8rem !important; | font-size: .8rem !important; | ||
text-align: center !important; | text-align: center !important; | ||
− | padding: .5rem !important; | + | padding: .5rem !important; |
+ | line-height: normal !important; | ||
margin: auto; | 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,270: | Line 1,503: | ||
font-size: .8rem !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; | margin: auto; | ||
} | } | ||
− | .clear{ | + | .section-contents.exp-res .two-image-with-desc p{ |
+ | text-align: start !important; | ||
+ | } | ||
+ | |||
+ | .section-wrapper iframe.edu-mat{ | ||
+ | width: 90%; | ||
+ | height: 80vh; | ||
+ | display: block; | ||
+ | padding: 4rem; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .clear { | ||
clear: both; | clear: both; | ||
} | } | ||
Line 1,303: | Line 1,549: | ||
/* responsive */ | /* responsive */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
@media (max-width: 1400px) { | @media (max-width: 1400px) { | ||
#welcome { | #welcome { | ||
Line 1,348: | Line 1,579: | ||
} | } | ||
− | .bottle-desc h1{ | + | .bottle-desc h1 { |
font-size: 4rem !important; | font-size: 4rem !important; | ||
text-align: center; | text-align: center; | ||
} | } | ||
− | .bottle-desc p{ | + | .bottle-desc p { |
font-size: 1rem !important; | font-size: 1rem !important; | ||
text-align: center; | text-align: center; | ||
} | } | ||
− | .bottle-desc .img{ | + | .bottle-desc .img { |
margin: auto; | margin: auto; | ||
margin-top: 2rem; | margin-top: 2rem; | ||
} | } | ||
− | + | ||
− | .card-display{ | + | .card-display { |
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
− | .card-display. | + | .card-display.two-card { |
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
− | .card-display.member{ | + | .card-display.sub-leader { |
− | grid-template-columns: 1fr 1fr; | + | grid-template-columns: 1fr 1fr 1fr; |
+ | } | ||
+ | |||
+ | .card-display.member { | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | .card-display.small-cards-2{ | ||
+ | display: block; | ||
} | } | ||
} | } | ||
Line 1,378: | Line 1,617: | ||
@media (max-width: 1100px) { | @media (max-width: 1100px) { | ||
− | .bottle-desc .img{ | + | .bottle-desc .img { |
display: none !important; | 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; | ||
} | } | ||
Line 1,395: | Line 1,669: | ||
} | } | ||
− | .attri-card{ | + | .attri-card { |
width: 90vw; | width: 90vw; | ||
− | |||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
− | grid-template-rows : 3fr 1fr; | + | grid-template-rows: 3fr 1fr; |
} | } | ||
− | .attri-card .right-attri h1{ | + | .attri-card .right-attri h1 { |
font-size: 1.2rem; | font-size: 1.2rem; | ||
} | } | ||
− | .attri-card .right-attri ul li{ | + | .attri-card .right-attri ul li { |
margin: .5rem; | margin: .5rem; | ||
} | } | ||
Line 1,439: | Line 1,712: | ||
.section-selector ul li a { | .section-selector ul li a { | ||
font-size: 1rem; | font-size: 1rem; | ||
+ | font-weight: lighter; | ||
} | } | ||
Line 1,457: | Line 1,731: | ||
padding: 0; | padding: 0; | ||
float: none; | float: none; | ||
+ | } | ||
+ | |||
+ | .right-section .section-contents h1 { | ||
+ | font-size: 1.7rem; | ||
+ | margin-left: 1rem !important; | ||
} | } | ||
Line 1,465: | Line 1,744: | ||
.right-section .section-contents p { | .right-section .section-contents p { | ||
− | font-size: | + | font-size: 1rem !important; |
padding-bottom: 3.5rem; | padding-bottom: 3.5rem; | ||
+ | line-height: 1.6rem !important; | ||
width: 90%; | 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,480: | 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,496: | 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,502: | Line 1,853: | ||
nav li { | nav li { | ||
text-align: center; | text-align: center; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 1,512: | Line 1,859: | ||
height: 2rem !important; | height: 2rem !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,541: | Line 1,898: | ||
} | } | ||
− | #desc .desc-block{ | + | #desc .desc-block { |
− | + | width: 80%; | |
} | } | ||
Line 1,574: | Line 1,931: | ||
} | } | ||
− | . | + | .two-image-with-desc { |
+ | padding: 1rem 0; | ||
+ | } | ||
+ | |||
+ | .two-image-with-desc .im-group{ | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
− | |||
− | |||
} | } | ||
− | .brief-team .brief-team-right | + | .brief-team .brief-team-right{ |
− | + | padding: 2rem; | |
− | + | text-align: justify; | |
} | } | ||
− | .brief-team .brief-team-right | + | .brief-team .brief-team-right h1{ |
− | + | text-align: center; | |
− | + | ||
} | } | ||
.position { | .position { | ||
− | font-size: | + | font-size: 2rem; |
text-align: center; | text-align: center; | ||
padding-top: 6rem; | padding-top: 6rem; | ||
Line 1,614: | Line 1,972: | ||
height: 100%; | height: 100%; | ||
background-color: #f5f5f5; | background-color: #f5f5f5; | ||
− | |||
} | } | ||
.card .mem-name { | .card .mem-name { | ||
− | padding: 1rem; | + | padding: 1rem; |
} | } | ||
Line 1,629: | Line 1,986: | ||
} | } | ||
− | .card-display p { | + | .card-display .card .mem-desc p { |
− | text-align: | + | text-align: justify; |
− | font-size: . | + | font-size: .8rem !important; |
+ | line-height: normal; | ||
} | } | ||
.card.leader { | .card.leader { | ||
− | + | height: 70vh; | |
width: 100%; | width: 100%; | ||
− | |||
} | } | ||
− | .card. | + | .card-display.sub-leader .card { |
− | grid-template-rows: | + | grid-template-rows: 9fr 1fr; |
− | + | width: 80%; | |
− | width: | + | |
− | + | ||
} | } | ||
.card-display.member{ | .card-display.member{ | ||
− | |||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
− | |||
− | |||
} | } | ||
− | .card.pi | + | .card.pi{ |
− | + | height: fit-content; | |
− | + | display: block; | |
} | } | ||
− | .card.pi . | + | .card.pi .img{ |
− | + | height: fit-content; | |
+ | position: relative; | ||
} | } | ||
+ | .card.pi .mem-name-pi{ | ||
+ | display: block; | ||
+ | } | ||
− | .card | + | .card.pi .mem-name-pi h1{ |
− | + | font-size: 1.3rem; | |
} | } | ||
− | .card | + | .card.pi .mem-name-pi p{ |
− | + | font-size: .8rem !important; | |
− | + | ||
} | } | ||
− | .card-display.small-cards .card{ | + | |
+ | .card-display.small-cards .card { | ||
width: 90%; | width: 90%; | ||
} | } | ||
− | .card-display.small-cards-2{ | + | .card-display.small-cards-2 .card{ |
− | + | height: 35vh; | |
+ | } | ||
+ | |||
+ | .card-display.small-cards-2 .card .mem-name h1{ | ||
+ | font-size: 1rem !important; | ||
+ | } | ||
+ | |||
+ | .card-display.small-cards-2 .card .ad-desc .mem-name{ | ||
+ | padding: 1rem 0 !important; | ||
+ | } | ||
+ | |||
+ | .card-display.small-cards-2 .card .ad-desc .mem-name h1{ | ||
+ | font-size: 1rem !important; | ||
+ | padding: 0 !important; | ||
+ | } | ||
+ | |||
+ | .card-display.small-cards-2 .card .ad-desc .desc p{ | ||
+ | padding: 0 !important; | ||
+ | font-size: .8rem !important; | ||
+ | } | ||
+ | |||
+ | .card-display.small-cards-2 .card .desc p{ | ||
+ | font-size: .8rem !important; | ||
} | } | ||
Line 1,685: | Line 2,063: | ||
height: fit-content; | height: fit-content; | ||
} | } | ||
+ | |||
+ | .attri-card .attri-content ul li { | ||
+ | padding: .2rem 0; | ||
+ | font-size: 1rem !important; | ||
+ | line-height: normal; | ||
+ | } | ||
+ | |||
/* 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,744: | Line 2,142: | ||
padding: 0; | padding: 0; | ||
background-color: #f4f4f4; | background-color: #f4f4f4; | ||
− | |||
− | |||
font-size: 100% !important; | font-size: 100% !important; | ||
} | } | ||
− | #globalWrapper{ | + | #globalWrapper { |
height: fit-content; | height: fit-content; | ||
− | padding:0 !important; | + | padding: 0 !important; |
} | } | ||
− | |||
− | |||
</style> | </style> |
Latest revision as of 09:39, 21 October 2021