Difference between revisions of "Template:HK GTC"
Jonas232005 (Talk | contribs) |
Jonas232005 (Talk | contribs) |
||
| (43 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 80: | 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 89: | 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 107: | 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 133: | 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 232: | 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 262: | 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 301: | 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 309: | Line 331: | ||
p { | p { | ||
| − | font-family: " | + | font-family: "Open Sans", sans-serif !important; |
| − | } | + | color: #f4f4f4; |
| + | } | ||
#my-global-wrapper { | #my-global-wrapper { | ||
| Line 330: | Line 353: | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.welcome-center { | .welcome-center { | ||
| Line 355: | 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 386: | 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 391: | Line 405: | ||
text-align: left; | text-align: left; | ||
margin: 0; | margin: 0; | ||
| + | color: #4f4f4f !important; | ||
} | } | ||
| Line 407: | 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 445: | 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 616: | 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 639: | Line 654: | ||
} | } | ||
| − | #bottle-project-desc .img{ | + | #bottle-project-desc .img { |
| − | background-image: url("https://static.igem.org/mediawiki/2021/ | + | background-image: url("https://static.igem.org/mediawiki/2021/4/4d/T--HK_GTC--res2.jpg"); |
background-size: cover; | background-size: cover; | ||
| + | background-position: center; | ||
} | } | ||
| − | #bottle-team-desc .img{ | + | #bottle-team-desc .img { |
| − | background-image: url("https://static.igem.org/mediawiki/2021/ | + | background-image: url("https://static.igem.org/mediawiki/2021/7/73/T--HK_GTC--team_photo.jpg"); |
background-size: cover; | background-size: cover; | ||
| + | background-position: center; | ||
} | } | ||
| − | #bottle-dl-desc .img{ | + | #bottle-dl-desc .img { |
background-image: url("https://static.igem.org/mediawiki/2021/6/6d/T--HK_GTC--dl_1.mp4"); | background-image: url("https://static.igem.org/mediawiki/2021/6/6d/T--HK_GTC--dl_1.mp4"); | ||
background-size: cover; | background-size: cover; | ||
| + | background-position: center; | ||
} | } | ||
| − | #bottle-hp-desc .img{ | + | #bottle-hp-desc .img { |
background-image: url("https://static.igem.org/mediawiki/2021/c/c3/T--HK_GTC--cp2.jpeg"); | background-image: url("https://static.igem.org/mediawiki/2021/c/c3/T--HK_GTC--cp2.jpeg"); | ||
background-size: cover; | background-size: cover; | ||
| + | background-position: center; | ||
} | } | ||
| Line 790: | Line 809: | ||
} | } | ||
| − | .hp-intro{ | + | .hp-intro { |
width: 80%; | width: 80%; | ||
margin: auto; | margin: auto; | ||
| Line 796: | Line 815: | ||
} | } | ||
| − | .hp-intro p{ | + | .hp-intro p { |
| − | font-size: 1.3rem !important; | + | font-size: 1.3rem !important; |
text-align: center !important; | text-align: center !important; | ||
| + | color: #4f4f4f !important; | ||
font-style: italic; | font-style: italic; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| − | .hp-intro .single-image-with-desc img{ | + | .hp-intro .single-image-with-desc img { |
| − | margin-top:3rem; | + | margin-top: 3rem; |
width: 80%; | width: 80%; | ||
| − | |||
} | } | ||
| − | .ihp-content{ | + | .ihp-content { |
width: 70%; | width: 70%; | ||
margin: auto; | margin: auto; | ||
| Line 816: | 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 825: | 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{ | + | #ihp-res .img { |
| − | background-image: url("https://static.igem.org/mediawiki/2021/ | + | background-image: url("https://static.igem.org/mediawiki/2021/d/de/T--HK_GTC--ihp.prof.ngo2.jpg"); |
background-size: cover; | background-size: cover; | ||
background-position: center; | background-position: center; | ||
} | } | ||
| − | #ihp-hp .img{ | + | #ihp-hp .img { |
background-image: url("https://static.igem.org/mediawiki/2021/4/4a/T--HK_GTC--ihp-sharing-session.jpg"); | background-image: url("https://static.igem.org/mediawiki/2021/4/4a/T--HK_GTC--ihp-sharing-session.jpg"); | ||
background-size: cover; | background-size: cover; | ||
| Line 842: | Line 866: | ||
} | } | ||
| − | #ihp-di .img{ | + | #ihp-di .img { |
background-image: url("https://static.igem.org/mediawiki/2021/b/b6/T--HK_GTC--ihp.clearbot1.hp.jpg"); | background-image: url("https://static.igem.org/mediawiki/2021/b/b6/T--HK_GTC--ihp.clearbot1.hp.jpg"); | ||
background-size: cover; | background-size: cover; | ||
| Line 863: | Line 887: | ||
} | } | ||
| − | .brief-team{ | + | .brief-team { |
width: 100%; | width: 100%; | ||
height: 70vh; | height: 70vh; | ||
| Line 870: | Line 894: | ||
} | } | ||
| − | .brief-team img{ | + | .brief-team img { |
width: 80%; | width: 80%; | ||
margin-top: 4rem; | margin-top: 4rem; | ||
| Line 878: | 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 889: | 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 911: | 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 928: | 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 944: | 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 980: | 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 1,006: | 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 1,020: | 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 1,033: | 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 1,040: | 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 1,046: | 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,107: | Line 1,173: | ||
/* Attribution */ | /* Attribution */ | ||
| − | .attri-wrapper{ | + | .attri-wrapper { |
width: 90%; | width: 90%; | ||
margin: auto; | margin: auto; | ||
| Line 1,113: | 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,124: | 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,153: | 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,181: | 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,189: | 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,205: | Line 1,288: | ||
.section-selector li:hover a { | .section-selector li:hover a { | ||
color: #fff; | color: #fff; | ||
| + | font-weight: 500; | ||
} | } | ||
| Line 1,228: | Line 1,312: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| − | background-color: # | + | background-color: #2a4150; |
| − | opacity: . | + | opacity: .8; |
} | } | ||
| Line 1,242: | Line 1,326: | ||
} | } | ||
| − | .section-wrapper{ | + | .section-wrapper { |
width: 80%; | width: 80%; | ||
margin: auto; | margin: auto; | ||
| Line 1,251: | Line 1,335: | ||
padding: 6rem; | padding: 6rem; | ||
width: 80%; | 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{ | + | .section-contents img { |
width: 100%; | width: 100%; | ||
} | } | ||
| − | .section-contents h2 { | + | .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-mid h2 { | ||
line-height: normal !important; | line-height: normal !important; | ||
padding: 0; | padding: 0; | ||
| Line 1,268: | 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,290: | 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,317: | 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,338: | 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,371: | Line 1,549: | ||
/* responsive */ | /* responsive */ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
@media (max-width: 1400px) { | @media (max-width: 1400px) { | ||
#welcome { | #welcome { | ||
| Line 1,416: | 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,446: | 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,463: | 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,507: | Line 1,712: | ||
.section-selector ul li a { | .section-selector ul li a { | ||
font-size: 1rem; | font-size: 1rem; | ||
| + | font-weight: lighter; | ||
} | } | ||
| Line 1,525: | 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,533: | 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,548: | 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,564: | 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,570: | Line 1,853: | ||
nav li { | nav li { | ||
text-align: center; | text-align: center; | ||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 1,580: | 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,609: | Line 1,898: | ||
} | } | ||
| − | #desc .desc-block{ | + | #desc .desc-block { |
| − | + | width: 80%; | |
} | } | ||
| Line 1,642: | 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,682: | 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,697: | 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,753: | 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{ | + | .hp-intro p { |
| − | font-size: 1rem !important; | + | font-size: 1rem !important; |
text-align: center !important; | text-align: center !important; | ||
font-style: italic; | font-style: italic; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| − | + | ||
| − | .hp-intro .single-image-with-desc img{ | + | .hp-intro .single-image-with-desc img { |
| − | margin-top:3rem; | + | margin-top: 3rem; |
width: 100%; | width: 100%; | ||
border-radius: 1rem; | border-radius: 1rem; | ||
| Line 1,825: | 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