Hugging Face's logo

Spaces:
malteos
/
emnlp2022-papers
Running

App Files Community
malteos commited on
Commit
4e36b19
·
1 Parent(s): 50004c4

mobile first

Browse files
Files changed (1) hide show
  1. style.css +35 -74
style.css CHANGED
@@ -2,17 +2,17 @@ html, body {
2
  height: 100%;
3
  margin: 0;
4
  padding: 0;
5
- }
 
 
 
 
6
 
7
-
8
  body {
9
  color:#373737;
10
  font-family:Arial;
11
  text-align: center;
12
  }
13
- body#home {
14
- margin-left:150px;
15
- }
16
 
17
  a {
18
  color:#c0ba01;
@@ -21,104 +21,56 @@ a:hover {
21
  color:rgb(148, 18, 18);
22
  }
23
  h1 {
24
- margin: 2px;
25
- }
26
- h2, h3, h4 {
27
- white-space:nowrap;
28
- margin:1em 0 0 0;
29
- }
30
- h3 a,
31
- h3 a:hover {
32
- text-decoration:none;
33
  }
34
 
35
  #map {
36
- border-radius:.125em;
37
  border:2px solid #696969;
38
  margin: 4px auto;
39
  /* float:left; */
40
  /* height: 100%; */
41
- height: calc(100% - 250px - 10px);
42
 
43
  position: absolute;
44
- top: 250px;
45
  right: 0;
46
  bottom: 0;
47
  left: 0;
 
 
 
48
  }
49
- ul {
50
- font-size:.85em;
51
- margin:0;
52
- padding:0;
53
- }
54
- li {
55
- margin:0 0 2px 18px;
56
- }
57
  #header {
58
- /* width:9em; */
59
- /* height:9em; */
60
- /* margin: 4px; */
61
- padding:1em;
62
  /* float:left; */
63
  background:#fbf5bf;
64
  /* border:1px solid #c6bb58; */
65
  /* box-shadow: 2px 2px 6px #999; */
66
  color:#666;
67
- height: 250px;
68
  overflow: auto;
69
  }
70
- #copy {
71
- position:fixed;
72
- z-index:1000;
73
- right:150px;
74
- top:-8px;
75
- font-size:.85em;
76
- padding:8px 8px 2px 8px;
77
- background: #323b44;
78
- border: 2px solid #737c85;
79
- border-radius:.7em;
80
- opacity: 0.9;
81
- box-shadow:0 0 8px #5f7182;
82
- color:#eee
83
- }
84
- #copy a {
85
- color:#ccc;
86
- text-decoration:none
87
- }
88
- #copy a:hover {
89
- color:#fff
90
- }
91
- #ribbon {
92
- position: absolute;
93
- top: 0;
94
- right: 0;
95
- border: 0;
96
- filter: alpha(opacity=80);
97
- -khtml-opacity: .8;
98
- -moz-opacity: .8;
99
- opacity: .8;
100
- }
101
- .contents {
102
- float:left;
103
- margin:0 2em 2em 0;
104
- }
105
- #comments {
106
- clear:both;
107
- }
108
 
109
  #legendContainer {
110
- font-size: 0.8rem;
111
  margin: 0 4px;
112
- padding:1em;
 
113
  }
114
 
115
  .legend-item {
116
  padding: 3px;
117
  margin: 3px;
 
118
  }
119
 
120
  .legend-icon {
121
- margin: 3px;
122
  width: 7px;
123
  display: inline-block;
124
  height: 7px;
@@ -135,16 +87,25 @@ li {
135
 
136
 
137
  @media only screen and (min-width: 500px) {
 
 
 
 
 
138
  #map {
139
- height: calc(100% - 220px - 10px);
140
- top: 220px;
141
  }
142
  #header {
143
- height: 220px;
144
  }
145
  }
146
 
147
  @media only screen and (min-width: 768px) {
 
 
 
 
148
  #map {
149
  height: calc(100% - 130px - 10px);
150
  top: 130px;
 
2
  height: 100%;
3
  margin: 0;
4
  padding: 0;
5
+ }
6
+
7
+ html {
8
+ font-size: 11px;
9
+ }
10
 
 
11
  body {
12
  color:#373737;
13
  font-family:Arial;
14
  text-align: center;
15
  }
 
 
 
16
 
17
  a {
18
  color:#c0ba01;
 
21
  color:rgb(148, 18, 18);
22
  }
23
  h1 {
24
+ margin: 0.5rem;
25
+ font-size: 1.4rem;
26
+
 
 
 
 
 
 
27
  }
28
 
29
  #map {
 
30
  border:2px solid #696969;
31
  margin: 4px auto;
32
  /* float:left; */
33
  /* height: 100%; */
34
+
35
 
36
  position: absolute;
37
+
38
  right: 0;
39
  bottom: 0;
40
  left: 0;
41
+
42
+ top: 150px;
43
+ height: calc(100% - 150px - 10px);
44
  }
45
+
 
 
 
 
 
 
 
46
  #header {
47
+ height: 150px;
48
+ padding: 0.5rem;
49
+ font-size: 1rem;
 
50
  /* float:left; */
51
  background:#fbf5bf;
52
  /* border:1px solid #c6bb58; */
53
  /* box-shadow: 2px 2px 6px #999; */
54
  color:#666;
55
+
56
  overflow: auto;
57
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
  #legendContainer {
60
+ font-size: 0.9rem;
61
  margin: 0 4px;
62
+ padding: 1rem;
63
+
64
  }
65
 
66
  .legend-item {
67
  padding: 3px;
68
  margin: 3px;
69
+ /* white-space: nowrap; */
70
  }
71
 
72
  .legend-icon {
73
+ margin: 0 2px;
74
  width: 7px;
75
  display: inline-block;
76
  height: 7px;
 
87
 
88
 
89
  @media only screen and (min-width: 500px) {
90
+ /* Medium screen */
91
+ html {
92
+ font-size: 12px;
93
+ }
94
+
95
  #map {
96
+ height: calc(100% - 160px - 10px);
97
+ top: 160px;
98
  }
99
  #header {
100
+ height: 160px;
101
  }
102
  }
103
 
104
  @media only screen and (min-width: 768px) {
105
+ /* Large screen */
106
+ html {
107
+ font-size: 14px;
108
+ }
109
  #map {
110
  height: calc(100% - 130px - 10px);
111
  top: 130px;