Difference between revisions of "Template:HSNU-TAIPEI/main"
(45 intermediate revisions by the same user not shown) | |||
Line 30: | Line 30: | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
border: none; | border: none; | ||
− | color: # | + | color: #584b4f; |
} | } | ||
Line 57: | Line 57: | ||
font-size: 1rem; | font-size: 1rem; | ||
background: #fff; | background: #fff; | ||
+ | font-family: Helvetica, sans-serif; | ||
} | } | ||
Line 66: | Line 67: | ||
top: 14px; | top: 14px; | ||
− | + | background: #584b4f; | |
− | background: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 105: | Line 97: | ||
float: left; | float: left; | ||
width: 25%; | width: 25%; | ||
+ | } | ||
+ | |||
+ | .logo::before { | ||
+ | content: ""; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/2/2f/HSNU-TAIPEI_logo.png') no-repeat; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | -webkit-background-size: contain; | ||
+ | -moz-background-size: contain; | ||
+ | -o-background-size: contain; | ||
+ | background-size: contain; | ||
+ | display: inline-block; | ||
+ | display: none; | ||
} | } | ||
.logo a { | .logo a { | ||
− | display: block; | + | display: inline-block; |
width: 180px; | width: 180px; | ||
margin-top: 28px; | margin-top: 28px; | ||
font-size: 32px; | font-size: 32px; | ||
− | color: # | + | color: #efeae1; |
+ | vertical-align: top; | ||
} | } | ||
Line 145: | Line 151: | ||
margin: -8px; | margin: -8px; | ||
padding: 10px 12px; | padding: 10px 12px; | ||
− | border: 3px solid # | + | border: 3px solid #42383B; |
− | color: # | + | color: #faf6ec !important; |
border-radius: 5px; | border-radius: 5px; | ||
} | } | ||
Line 172: | Line 178: | ||
z-index: 100; | z-index: 100; | ||
font-size: 32px; | font-size: 32px; | ||
− | color: # | + | color: #584b4f; |
} | } | ||
Line 184: | Line 190: | ||
text-decoration: none; | text-decoration: none; | ||
font-size: 1.1em; | font-size: 1.1em; | ||
− | font-family: | + | font-family: Helvetica, sans-serif; |
font-weight: 600; | font-weight: 600; | ||
− | color: # | + | color: #efeae1; |
} | } | ||
Line 194: | Line 200: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | background: rgba( | + | background: rgba(239, 234, 225, 0.95); |
top: 12px; | top: 12px; | ||
right: 0; | right: 0; | ||
Line 202: | Line 208: | ||
overflow-y: auto; | overflow-y: auto; | ||
margin: 0 !important; | margin: 0 !important; | ||
+ | padding-top: 10px !important; | ||
} | } | ||
Line 214: | Line 221: | ||
height: 100%; | height: 100%; | ||
margin: 0; | margin: 0; | ||
− | padding: 30px; | + | padding: 20px 30px; |
font-size: 150%; | font-size: 150%; | ||
− | color: # | + | color: #584b4f; |
} | } | ||
Line 236: | Line 243: | ||
.mc-container { | .mc-container { | ||
width: 100%; | width: 100%; | ||
− | background: # | + | background: #faf6ec; |
padding: 20px; | padding: 20px; | ||
− | color: # | + | color: #66595c; |
min-height: 120vh; | min-height: 120vh; | ||
} | } | ||
Line 247: | Line 254: | ||
text-align: center; | text-align: center; | ||
font-size: 48px; | font-size: 48px; | ||
− | color: # | + | color: #584b4f; |
line-height: 1.2; | line-height: 1.2; | ||
+ | font-weight: bold; | ||
} | } | ||
Line 315: | Line 323: | ||
font-size: 1.1em; | font-size: 1.1em; | ||
padding: 30px 0; | padding: 30px 0; | ||
+ | color: #66595c; | ||
+ | font-weight: 300; | ||
} | } | ||
.article-title { | .article-title { | ||
− | padding: 20px 10px 0; | + | padding: 20px 10px 0 0; |
margin: 0 0 20px; | margin: 0 0 20px; | ||
font-size: 1.5em; | font-size: 1.5em; | ||
Line 324: | Line 334: | ||
.article-p { | .article-p { | ||
− | line-height: 1. | + | line-height: 1.6; |
− | margin: 20px; | + | margin: 20px 0; |
margin-top: 0; | margin-top: 0; | ||
+ | color: #66595c; | ||
+ | } | ||
+ | |||
+ | /* NORMALIZE */ | ||
+ | |||
+ | .article-ul, | ||
+ | .article-ol { | ||
+ | margin: 0 !important; | ||
+ | padding-left: 2em !important; | ||
+ | } | ||
+ | .article-p, | ||
+ | .article-ul, | ||
+ | .article-ol { | ||
+ | font-size: 20.8px; | ||
} | } | ||
Line 428: | Line 452: | ||
padding: 20px; | padding: 20px; | ||
width: 100%; | width: 100%; | ||
− | + | color: #66595c; | |
+ | background: #efeae1; | ||
text-align: center; | text-align: center; | ||
} | } | ||
Line 462: | Line 487: | ||
.footer-cell img { | .footer-cell img { | ||
− | width: | + | width: 14.2857%; |
} | } | ||
Line 469: | Line 494: | ||
position: relative; | position: relative; | ||
border-bottom: 2px solid #ddd; | border-bottom: 2px solid #ddd; | ||
− | padding: 0 | + | padding: 0 10px; |
+ | } | ||
+ | section h1 { | ||
+ | font-size: 1.2em; | ||
} | } | ||
section img { | section img { | ||
Line 478: | Line 506: | ||
.side-nav { | .side-nav { | ||
display: none; | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .three-img, | ||
+ | .double-img { | ||
+ | min-height: 1px; | ||
+ | margin: 10px auto; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | display: -webkit-box; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-justify-content: space-around; | ||
+ | -ms-flex-pack: distribute; | ||
+ | justify-content: space-around; | ||
+ | -webkit-flex-flow: row wrap; | ||
+ | -ms-flex-flow: row wrap; | ||
+ | flex-flow: row wrap; | ||
+ | } | ||
+ | .img-figure { | ||
+ | background: #f7f7f7; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 1px solid #000; | ||
+ | } | ||
+ | .img-figure img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .img-figure p { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .single-img { | ||
+ | margin: 10px auto; | ||
+ | } | ||
+ | |||
+ | .single-img, | ||
+ | .single-img .img-figure, | ||
+ | .double-img .img-figure, | ||
+ | .three-img .img-figure { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .table-note { | ||
+ | margin-bottom: 0 !important; | ||
+ | padding-bottom: 0 !important; | ||
+ | } | ||
+ | |||
+ | .figure-note { | ||
+ | margin-top: 0 !important; | ||
+ | padding-top: 0 !important; | ||
+ | } | ||
+ | |||
+ | /* TABLE */ | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | tr { | ||
+ | background: #f4f7f8; | ||
+ | } | ||
+ | thead th { | ||
+ | font-weight: 400; | ||
+ | background: #8a97a0; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | th, td { | ||
+ | text-align: center; | ||
+ | padding: 5px; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | tr:nth-child(even) { | ||
+ | background: #e8eeef; | ||
+ | } | ||
+ | |||
+ | #table-two-colspan { | ||
+ | padding-left: 40px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width:540px) { | ||
+ | .three-img .img-figure { | ||
+ | width: 33.3333%; | ||
+ | } | ||
+ | |||
+ | .double-img .img-figure { | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .img-figure:not(:first-child) { | ||
+ | border-left: none; | ||
+ | } | ||
+ | |||
} | } | ||
Line 494: | Line 615: | ||
.article-title { | .article-title { | ||
− | border-bottom: 2px solid # | + | border-bottom: 2px solid #584b4f; |
} | } | ||
Line 533: | Line 654: | ||
.side-nav { | .side-nav { | ||
position: fixed; | position: fixed; | ||
− | top: | + | display: block; |
+ | top: 120px; | ||
left: 10px; | left: 10px; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
z-index: 5; | z-index: 5; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | .side-nav h4 { | ||
+ | padding-left: 15px; | ||
+ | border-bottom: 1px solid #ccc; | ||
} | } | ||
.side-nav ul { | .side-nav ul { | ||
padding-left: 0; | padding-left: 0; | ||
+ | margin-left: 0; | ||
} | } | ||
Line 546: | Line 675: | ||
list-style: none; | list-style: none; | ||
margin: 10px; | margin: 10px; | ||
− | padding: | + | padding: 1px; |
+ | max-width: 120px; | ||
} | } | ||
+ | th, td { | ||
+ | padding: 20px 10px; | ||
+ | } | ||
+ | |||
+ | #table-two-colspan { | ||
+ | padding-left: 80px; | ||
+ | } | ||
+ | .logo::before { | ||
+ | display: inline-block; | ||
+ | } | ||
Line 577: | Line 717: | ||
.sub-nav { | .sub-nav { | ||
− | background: # | + | background: #efeae1; |
} | } | ||
Line 586: | Line 726: | ||
border-left: 10px solid transparent; | border-left: 10px solid transparent; | ||
border-right: 10px solid transparent; | border-right: 10px solid transparent; | ||
− | border-bottom: 10px solid # | + | border-bottom: 10px solid #efeae1; |
position: absolute; | position: absolute; | ||
top: -10px; | top: -10px; | ||
Line 602: | Line 742: | ||
left: auto; | left: auto; | ||
overflow: visible; | overflow: visible; | ||
+ | padding-top: 0 !important; | ||
} | } | ||
Line 615: | Line 756: | ||
padding: 15px; | padding: 15px; | ||
font-size: 100%; | font-size: 100%; | ||
− | color: # | + | color: #584b4f; |
} | } | ||
.open-nav a:active, | .open-nav a:active, | ||
.open-nav a:hover { | .open-nav a:hover { | ||
− | background: # | + | background: #FAF6DD; |
} | } | ||
Line 676: | Line 817: | ||
section { | section { | ||
height: 300px; | height: 300px; | ||
+ | padding: 0 120px; | ||
} | } | ||
section::after { | section::after { | ||
Line 699: | Line 841: | ||
} | } | ||
+ | #table-one, | ||
+ | #table-two { | ||
+ | margin-left: 60px; | ||
+ | } | ||
+ | |||
+ | .table-note { | ||
+ | padding-left: 60px; | ||
+ | } | ||
Latest revision as of 08:08, 5 November 2015