-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathstyle.css
63 lines (53 loc) · 3.92 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
a {color:white; text-decoration:none;}
h1 {font-family:'Libre Baskerville'; font-size:24px; font-weight:700; line-height:1; margin:0; padding:0;}
h2 {font-family:'Libre Baskerville'; font-size:10px; font-weight:700; line-height:1.1; margin:0; padding:0;}
h3 {font-family:'Open Sans'; font-size:16px; font-weight:600; line-height:1.2; margin:0; padding:0;}
h4 {font-family:'Open Sans'; font-size:12px; font-weight:600; line-height:1; margin:0; padding:0; padding:0 0 5px 0;}
p {font-family:'Open Sans'; font-size:10px; font-weight:600; line-height:1.2; margin:0; padding:0;}
body {color:#333; margin:0; padding:0; box-sizing:border-box; font-family:Sans; background-color:#f0f0e8;}
header {display:flex; justify-content:space-between; align-items:center; background-color:#333; color:white; padding:0 10px; position:fixed; height:50px; width:100%; top:0; z-index:1000;}
.container {box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; text-align:center; overflow:hidden;}
.item {flex:0 0 50%; box-sizing:border-box; text-align:left;}
.flex-container {box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:flex-start; text-align:center;}
.flex-column {box-sizing:border-box; flex:0 0 50%; min-width:160px; text-align:center;}
.flex-column-wide {box-sizing:border-box; flex:0 0 100%; text-align:center;}
.flex-column-wide p{font-size:9px; font-weight:600; line-height:0.5px; margin:10px 0 7px 0;}
.image-container {display:flex; overflow:hidden; position:relative; height:auto; width:100%; max-width:768px; margin:0 auto; align-items:center; justify-content:center;}
.image {display:block; width:100%; height:10%; max-height:100%; max-width:100%; margin:auto;}
nav {display:none; flex-direction:column; align-items:flex-start; width:100%; background-color:#333; position:absolute; right:0; top:50px;}
nav.show {display:flex;}
nav a {color:white; text-decoration:none; font-size:14px; line-height:0.8; padding-bottom:10px; margin:10px;}
.menu-icon {display:block; cursor:pointer; font-size:20px; position:fixed; right:10px;}
@media only screen and (max-width: 768px) {
nav {display:none; flex-direction:column; align-items:flex-start; width:100%; background-color:#333; position:absolute; right:0; top:50px;}
nav.show {display:flex;}
.item {flex:0 0 100%;}
}
hr {border:none; height:1px; background-color:#aaa; margin:5px auto; padding:0; width:50%;}
.long {margin:30px auto; padding:0; width:100%;}
.result-1 {font-size:40px;}
.result-2 {font-size:30px;}
.result-3 {font-size:20px;}
.result-4 {font-size:9px; font-weight:300;}
.name-1 {font-size:20px;}
.name-2 {font-size:16px;}
.name-3 {font-size:12px;}
.name-4 {font-size:9px; font-weight:600;}
.results-container {line-height:0.7; padding-top:20px;}
.box {flex:0 0 50%; margin:0; padding:0; box-sizing:border-box;}
.border-container {position:relative; display:flex; height:5px; width:100%; top:50px; left:0;}
.color-block {flex-grow:1; height:100%;}
.color-block:nth-child(1) {background-color:#46bfbd;}
.color-block:nth-child(2) {background-color:#f33e6f;}
.color-block:nth-child(3) {background-color:#fdb45c;}
.text-background {display:inline-block; background-color:#ffdd05; color:#333; padding:5px 10px;}
#matchingResultsDiv {text-align:center; margin:0 auto; width:90%; max-width:768px;}
#banner {padding:5px 10px 4px 10px; width:100%; margin:50px auto 20px auto; color:#333; text-align:center; background-color:#FFD700; overflow:hidden;}
#banner h1 {color:#333; font-family:'Montserrat'; font-size:14px; font-weight:900; letter-spacing:0; line-height: 0.8;}
#banner p {color:#333; font-size:11px; font-weight:600; margin-top:2px;}
#banner a {color:#333; text-decoration:underline;}
.footer {text-align:left; padding:0 5% 50px 5%;}
.footer a {color:#333; font-size:18px; text-decoration:underline; text-decoration-color: #aaa;}
.footer h1 {font-size:24px; margin-bottom:5px;}
.footer h2 {font-size:14px; font-weight:300; line-height:1.2;}
.footer p {color:#999; font-size:10px; margin-top:15px;}