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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
.sections-list {
.section-list {
display: grid;
grid-gap: var(--space-xxlarge);
grid-template-columns: repeat(auto-fit, $card-width);
margin: 0;
@media (max-width: $break-point-medium) {
@include context-menu-open-left;
}
@media (min-width: $break-point-medium) and (max-width: $break-point-large) {
:nth-child(2n) {
@include context-menu-open-left;
}
}
@media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) {
:nth-child(3n) {
@include context-menu-open-left;
}
}
@media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) {
// 3n for normal cards, 4n for compact cards
:nth-child(3n),
:nth-child(4n) {
@include context-menu-open-left;
}
}
}
.section-empty-state {
border: $border-secondary;
border-radius: var(--border-radius-small);
display: flex;
height: $card-height;
width: 100%;
.empty-state {
margin: auto;
max-width: 350px;
.empty-state-message {
color: var(--newtab-text-primary-color);
font-size: var(--font-size-small);
margin-block-end: 0;
text-align: center;
}
}
@media (min-width: $break-point-widest) {
height: $card-height-large;
}
}
}
.top-stories-bottom-container {
color: var(--newtab-text-primary-color);
font-size: var(--font-size-small);
margin-block-start: var(--space-medium);
display: flex;
justify-content: space-between;
a {
color: var(--newtab-primary-action-background);
font-weight: var(--font-weight-bold);
&.more-recommendations {
font-weight: var(--font-weight);
font-size: var(--font-size-small);
}
}
.wrapper-topics,
.wrapper-cta + .wrapper-more-recommendations {
@media (max-width: $break-point-large - 1) {
display: none;
}
}
@media (max-width: $break-point-medium - 1) {
.wrapper-cta {
text-align: center;
.pocket-logged-in-cta {
display: block;
margin-inline-end: 0;
.pocket-cta-button {
max-width: none;
display: block;
margin-inline-end: 0;
margin: var(--space-xsmall) 0 var(--space-small);
}
}
}
.wrapper-more-recommendations {
width: 100%;
.more-recommendations {
justify-content: center;
&::after {
display: none;
}
}
}
}
}
@media (min-width: $break-point-widest) {
.sections-list {
// Compact cards stay the same size but normal cards get bigger.
.normal-cards {
.section-list {
grid-template-columns: repeat(auto-fit, $card-width-large);
}
}
}
}
|
