1body {
2  margin:  0;
3  padding: 0;
4
5  /* Pattern from https://www.toptal.com/designers/subtlepatterns/awesome-pattern/ */
6  background-image: url('/static/45degreee_fabric.png');
7}
8
9main, footer {
10  max-width: 500px;
11  margin-left:  auto;
12  margin-right: auto;
13  text-align: center;
14  padding: 5px;
15
16  font: 14pt Avenir, Arial, sans-serif;
17  color: #333;
18}
19
20footer {
21  font-size: 9pt;
22  color: #aaa;
23  line-height: 1.55em;
24}
25
26a, a:visited {
27  color: #555;
28}
29
30footer a, footer a:visited {
31  color: #888;
32}
33
34footer a:hover {
35  background: #ddd;
36}
37
38a:hover {
39  background: #ccc;
40}
41
42#results {
43  display: grid;
44  grid-template-columns: 325px 70px auto;
45  grid-template-rows: repeat(5, 56px);
46  grid-gap: 5px;
47  height: 300px;
48
49  margin-left: auto;
50  margin-right: auto;
51}
52
53.thumbnail {
54  grid-row: 1 / span 5;
55  grid-column: 1 / 3;
56  width:  300px;
57  height: 300px;
58}
59
60img {
61  width:  100%;
62  height: 100%;
63  object-fit: contain;
64}
65
66.sample {
67  grid-column: 1 / 2;
68}
69
70.label {
71  font-family: monospace;
72  height:      56px;
73  line-height: 56px;
74  text-align: left;
75}
76
77.sample {
78  width:  56px;
79  height: 56px;
80  grid-column: 2 / 3;
81}
82
83.label {
84  grid-column: 3 / 3;
85}
86
87#label_1, #sample_1 { grid-row: 1 / 5; }
88#label_2, #sample_2 { grid-row: 2 / 5; }
89#label_3, #sample_3 { grid-row: 3 / 5; }
90#label_4, #sample_4 { grid-row: 4 / 5; }
91#label_5, #sample_5 { grid-row: 5 / 5; }
92
93@media screen and (max-width: 600px) {
94  .thumbnail {
95    width:  300px;
96    height: 230px;
97    margin-left: auto;
98    margin-right: auto;
99  }
100
101  #results {
102    grid-template-columns: 42px auto;
103    width: 300px;
104    grid-template-rows: 240px repeat(5, 42px);
105    grid-row-gap: 10px;
106    height: auto;
107  }
108
109  .thumbnail {
110    grid-column: 1 / span 2;
111    grid-row:1 / 6;
112  }
113
114  .sample {
115    grid-column: 1 / 2;
116  }
117
118  .label {
119    grid-column: 2 / 2;
120  }
121
122  #label_1, #sample_1 { grid-row: 2 / 6; }
123  #label_2, #sample_2 { grid-row: 3 / 6; }
124  #label_3, #sample_3 { grid-row: 4 / 6; }
125  #label_4, #sample_4 { grid-row: 5 / 6; }
126  #label_5, #sample_5 { grid-row: 6 / 6; }
127
128  .label {
129    height:      42px;
130    line-height: 42px;
131  }
132
133  .sample {
134    width:  42px;
135    height: 42px;
136  }
137}
138
139.errors {
140  background: rgba(208, 28, 17, 0.2);
141  padding: 1em;
142  border: 3px solid #d01c11;
143  color: #d01c11;
144  font-weight: 500;
145  border-radius: 5px;
146}