Skip to content

Commit 75795bc

Browse files
mor10mor10
committed
syntax cleanup
1 parent 99e0a2a commit 75795bc

File tree

1 file changed

+129
-70
lines changed

1 file changed

+129
-70
lines changed

‎styles.css

+129-70
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,148 @@
1-
.review {
1+
:root {
22
-webkit-text-size-adjust: 100%;
33
}
4-
.review body {
4+
5+
body {
56
font-family: Georgia, "Times New Roman", Times, serif;
67
color: #000;
78
font-size: 1.1em;
89
line-height: 1.5;
910
margin: 0;
1011
}
11-
.review h2, .review h3, .review h4, .review h5 {
12+
13+
h2, h3, h4, h5 {
1214
font-family: Arial, Helvetica, sans-serif;
1315
margin: 0;
1416
}
15-
.review h3 {
17+
18+
h3 {
1619
text-transform: uppercase;
1720
}
18-
.review a:hover {
21+
22+
img {
23+
max-width: 100%;
24+
}
25+
26+
a:hover {
1927
background-color: transparent;
2028
text-decoration: none;
2129
}
22-
.review .title-block {
30+
31+
.title-block {
2332
margin: 10px;
2433
text-align: center;
2534
}
26-
.review .title-block .title-image {
35+
36+
.title-image {
2737
max-width: 320px;
2838
margin: 0 auto;
2939
}
30-
.review .title-block .title-image img {
31-
max-width: 100%;
32-
}
33-
.review .byline {
40+
41+
.byline {
3442
font-family: Arial, Helvetica, sans-serif;
3543
font-size: 80%;
3644
max-width: 500px;
3745
margin: 0 auto;
3846
}
39-
.review .byline:not(:first-child) {
47+
48+
.byline:not(:first-child) {
4049
margin-top: 15px;
4150
}
42-
.review .intro, .review .outro {
51+
52+
.intro, .outro {
4353
max-width: 800px;
4454
padding: 0 10px;
4555
}
46-
.review .intro {
56+
57+
.intro {
4758
margin: 0 auto 30px auto;
4859
}
49-
.review .outro {
60+
61+
.outro {
5062
margin: 20px auto 50px auto;
5163
}
52-
.review .group {
64+
65+
.group {
5366
display: flex;
5467
width: 100%;
5568
}
56-
.review .group.first {
69+
70+
.group.first {
5771
border-top: 1px solid #ddd;
5872
}
59-
.review .group.first .left .content, .review .group.first .right .content {
73+
74+
.group.first .left .content, .group.first .right .content {
6075
padding-top: 20px;
6176
}
62-
.review .group.last {
77+
78+
.group.last {
6379
border-bottom: 1px solid #ddd;
6480
}
65-
.review .group .left {
81+
82+
.group .left {
6683
flex: 2;
6784
}
68-
.review .group .right {
85+
86+
.group .right {
6987
flex: 3;
7088
}
71-
.review .group .left, .review .group .right {
89+
90+
.group .left, .group .right {
7291
display: flex;
7392
}
74-
.review .group .left .content, .review .group .right .content {
93+
94+
.group .left .content, .group .right .content {
7595
background-color: inherit;
7696
box-shadow: none;
7797
padding: 0 20px 26.4px 20px;
7898
}
79-
.review .group .left .content.empty, .review .group .right .content.empty {
99+
100+
.group .left .content.empty, .group .right .content.empty {
80101
padding: 0;
81102
}
82-
.review .group .right {
103+
104+
.group .right {
83105
background-color: #f0f0f0;
84106
}
85-
.review .group .right .content {
107+
108+
.group .right .content {
86109
font-size: 90%;
87110
}
88-
.review .content h3, .review .content h4 {
111+
112+
.content h3, .content h4 {
89113
font-family: Arial, Helvetica, sans-serif;
90114
margin: 0 0 20px 0;
91115
}
92-
.review .content p {
116+
117+
.content p {
93118
margin-top: 0;
94119
margin-block-start: 0;
95120
}
96-
.review .content p:last-child {
121+
122+
.content p:last-child {
97123
margin-bottom: 0;
98124
margin-block-end: 0;
99125
}
100-
.review .content ul, .review .content ol {
126+
127+
.content ul, .content ol {
101128
margin: 0;
102129
padding-inline-start: 1em;
103130
}
104-
.review mark {
131+
132+
mark {
105133
background-color: rgba(255, 245, 137, 0.5);
106134
}
107-
.review mark:hover {
135+
136+
mark:hover {
108137
cursor: pointer;
109138
background-color: #fff589;
110139
}
111-
.review mark.selected {
140+
141+
mark.selected {
112142
background-color: #fff589;
113143
}
114-
.review mark[data-annotation-id]::after {
144+
145+
mark[data-annotation-id]::after {
115146
content: attr(data-annotation-id);
116147
content: attr(data-annotation-id)/"";
117148
display: inline-block;
@@ -128,18 +159,22 @@
128159
margin-right: 2px;
129160
bottom: 2px;
130161
}
131-
.review .content > .annotation:not(:first-child), .review .content .content:not(:first-child), .review .content .annotation-group:not(:first-child) {
162+
163+
.content > .annotation:not(:first-child), .content .content:not(:first-child), .content .annotation-group:not(:first-child) {
132164
margin-top: 10px;
133165
}
134-
.review .annotation {
166+
167+
.annotation {
135168
background-color: white;
136169
padding: 10px;
137170
border: 1px solid #ddd;
138171
}
139-
.review .annotation:hover {
172+
173+
.annotation:hover {
140174
cursor: pointer;
141175
}
142-
.review .annotation[role=comment][data-annotation-id]::after, .review .annotation-group[role=comment][data-annotation-id]::after {
176+
177+
.annotation[role=comment][data-annotation-id]::after, .annotation-group[role=comment][data-annotation-id]::after {
143178
content: attr(data-annotation-id);
144179
content: attr(data-annotation-id)/"";
145180
font-family: Georgia, "Times New Roman", Times, serif;
@@ -157,62 +192,80 @@
157192
left: -8px;
158193
top: -8px;
159194
}
160-
.review .annotation[role=comment], .review .annotation-group[role=comment] {
195+
196+
.annotation[role=comment], .annotation-group[role=comment] {
161197
position: relative;
162198
}
163-
.review .annotation-group .annotation:not(:first-child) {
199+
200+
.annotation-group .annotation:not(:first-child) {
164201
border-top-width: 0;
165202
}
166-
.review .annotation.selected,
167-
.review .annotation-group.selected .annotation {
203+
204+
.annotation.selected,
205+
.annotation-group.selected .annotation {
168206
border-color: #999;
169207
background-color: #fffeef;
170208
}
171-
.review .commenter {
209+
210+
.commenter {
172211
font-family: Arial, Helvetica, sans-serif;
173212
font-size: 80%;
174213
color: #999;
175214
}
176-
.review .no-margin {
215+
216+
.no-margin {
177217
margin: 0 !important;
178218
}
179-
.review .small {
219+
220+
.small {
180221
font-size: 80%;
181222
}
182-
.review .fine-print {
223+
224+
.fine-print {
183225
font-size: 70%;
184226
}
185-
.review .annotation-group .annotation.thread {
227+
228+
.annotation-group .annotation.thread {
186229
margin-left: 10px;
187230
}
188-
.review .annotation-group .annotation.thread-2 {
231+
232+
.annotation-group .annotation.thread-2 {
189233
margin-left: 20px;
190234
}
191-
.review .annotation-group .annotation.thread-3 {
235+
236+
.annotation-group .annotation.thread-3 {
192237
margin-left: 30px;
193238
}
194-
.review .annotation-group .annotation.thread-4 {
239+
240+
.annotation-group .annotation.thread-4 {
195241
margin-left: 40px;
196242
}
197-
.review .annotation-group .annotation.thread-5 {
243+
244+
.annotation-group .annotation.thread-5 {
198245
margin-left: 50px;
199246
}
200-
.review .annotation-group .annotation.thread-6 {
247+
248+
.annotation-group .annotation.thread-6 {
201249
margin-left: 60px;
202250
}
203-
.review .annotation-group .annotation.thread-7 {
251+
252+
.annotation-group .annotation.thread-7 {
204253
margin-left: 70px;
205254
}
206-
.review .annotation-group .annotation.thread-8 {
255+
256+
.annotation-group .annotation.thread-8 {
207257
margin-left: 80px;
208258
}
209-
.review .annotation-group .annotation.thread-9 {
259+
260+
.annotation-group .annotation.thread-9 {
210261
margin-left: 90px;
211262
}
212-
.review .annotation-group .annotation.thread-10 {
263+
264+
.annotation-group .annotation.thread-10 {
213265
margin-left: 100px;
214266
}
215-
.review .sr-only {
267+
268+
.sr-only {
216269
border: 0 !important;
217270
clip: rect(1px, 1px, 1px, 1px) !important;
218271
-webkit-clip-path: inset(50%) !important;
@@ -227,61 +280,67 @@
227280

228281
/* Responsive */
229282
@media screen and (min-width: 1801px) {
230-
.review .group .left .content {
283+
.group .left .content {
231284
padding-left: 20%;
232285
padding-right: 40px;
233286
}
234-
.review .group .right .content {
287+
288+
.group .right .content {
235289
padding-left: 40px;
236290
padding-right: 20%;
237291
}
238292
}
293+
239294
@media screen and (min-width: 1001px) and (max-width: 1800px) {
240-
.review .group .left .content, .review .group .right .content {
295+
.group .left .content, .group .right .content {
241296
padding-left: 40px;
242297
padding-right: 40px;
243298
}
244299
}
300+
245301
@media screen and (min-width: 751px) {
246-
.review .group .left .content, .review .group .right .content {
302+
.group .left .content, .group .right .content {
247303
max-width: 800px;
248304
}
249-
.review .group .left .content {
305+
.group .left .content {
250306
float: right;
251307
}
252308
}
309+
253310
@media screen and (max-width: 750px) {
254-
.review .group {
311+
.group {
255312
flex-direction: column;
256313
}
257-
.review .group .left .content, .review .group .right .content {
314+
.group .left .content, .group .right .content {
258315
padding-left: 40px;
259316
padding-right: 40px;
260317
}
261-
.review .group .left .content {
318+
.group .left .content {
262319
padding-top: 26.4px;
263320
}
264-
.review .annotation {
321+
.annotation {
265322
font-family: Arial, Helvetica, sans-serif;
266323
font-size: 90%;
267324
}
268-
.review .content > .annotation, .review .annotation-group {
325+
.content > .annotation, .annotation-group {
269326
margin-top: 20px;
270327
}
271328
}
329+
272330
@media screen and (max-width: 480px) {
273-
.review .group .left .content, .review .group .right .content {
331+
.group .left .content, .group .right .content {
274332
padding-left: 20px;
275333
padding-right: 20px;
276334
}
277335
}
278336

279337
/* No-JS tweaks */
280-
.no-js.review mark:hover {
338+
.no-jsmark:hover {
281339
cursor: auto !important;
282340
background-color: rgba(255, 245, 137, 0.5) !important;
283341
}
284-
.no-js.review .annotation:hover {
342+
343+
.no-js.annotation:hover {
285344
cursor: auto !important;
286345
}
287346

0 commit comments

Comments
 (0)