Minor design changes for browserbench.org landing page
[WebKit-https.git] / Websites / browserbench.org / resources / main.css
1 body {
2     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
3     font-size: 14px;
4     line-height: 19px;
5     -webkit-user-select: none;
6 }
7
8 ::selection {
9     background-color: rgb(200, 0, 0);
10     color: white;
11 }
12
13 img {
14     -webkit-user-select: none;
15     -webkit-user-drag: none;
16 }
17
18 main {
19     max-width: 800px;
20     margin: auto;
21     text-align: center;
22     padding: 10px;
23 }
24
25 .benchmarks {
26     display: flex;
27     width: 100%;
28     flex-wrap: wrap;
29 }
30
31 .benchmarks a {
32     display: block;
33     flex: 1;
34     width: 370px;
35 }
36
37 #logo {
38     font-family: "Gill Sans", sans-serif;
39     margin-top: 60px;
40     line-height: 50px;
41     font-size: 50px;
42     color: color: rgb(50, 50, 50);
43 }
44
45 #logo span {
46     margin: 0 2px;
47     padding: 0 2px;
48 }
49
50 #logo .normal {
51     background-color: rgb(200, 0, 0);
52     color: white;
53 }
54
55 #logo .light {
56     color: rgb(100, 100, 100);
57     font-family: GillSans-Light, sans-serif;
58 }
59
60 #logo .highlight {
61     color: rgb(200, 0, 0);
62     font-weight: bold;
63     padding-right: 0;
64     margin-right: 0;
65 }
66
67 hr {
68     border: 2px solid rgb(200, 0, 0);
69     border-radius: 2px;
70     margin: 20px 0;
71 }
72
73 .benchmark {
74     display: block;
75     text-decoration: none;
76     margin-top: 20px;
77     padding: 30px 0 10px 0;
78     cursor: pointer;
79     outline: none;
80     border: 4px solid transparent;
81     transition: background-color 0.3s ease-out, transform 0.25s ease-in;
82 }
83
84 .benchmark:focus {
85     border: 4px solid rgb(200, 0, 0);
86 }
87
88 .benchmark p {
89     color: rgb(128, 128, 128);
90     -webkit-user-select: text;
91 }
92
93 .benchmark:hover img {
94     -moz-filter: invert(100%) brightness(200);
95     -webkit-filter: invert(100%) brightness(200);
96     filter: invert(100%) brightness(200);
97 }
98
99 .benchmark:hover {
100     background-color: rgb(200, 0, 0);
101     transform: scale(1.05);
102 }
103
104 .benchmark:hover * {
105     color: white !important;
106 }
107
108 .benchmark img {
109     max-width: 300px;
110     height: auto;
111 }