@sarimarcus/content-sites-ui 0.16.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +55 -2
- package/package.json +7 -3
- package/src/affiliate/EmeraldLoader.astro +40 -0
- package/src/affiliate/index.ts +4 -1
- package/src/affiliate/resources.ts +7 -0
- package/src/affiliate/travelpayoutsStyler.ts +557 -0
- package/src/composed/ArrowLinkGrid.astro +36 -0
- package/src/composed/index.ts +1 -0
- package/src/editorial/ArticleFeatureCard.astro +77 -0
- package/src/editorial/ArticlesListingPage.astro +40 -0
- package/src/editorial/NotFoundPage.astro +98 -0
- package/src/editorial/StaticProsePage.astro +48 -0
- package/src/editorial/index.ts +4 -0
- package/src/layout/ConsentAnalytics.astro +121 -0
- package/src/layout/DocumentShell.astro +171 -0
- package/src/layout/ListingShell.astro +32 -0
- package/src/layout/analytics.ts +151 -0
- package/src/layout/index.ts +7 -0
- package/src/layout/resources.ts +19 -0
- package/src/search/SearchPage.astro +222 -0
- package/src/search/index.ts +2 -0
- package/src/search/searchPage.ts +591 -0
- package/src/styles/not-found.css +151 -0
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/* NotFoundPage decoration. Import it from the 404 route only: a <style> block in a barrel-exported component would
|
|
2
|
+
ship to every page that imports the barrel. */
|
|
3
|
+
/* ------------------------------------------------
|
|
4
|
+
Zellige-inspired geometric grid
|
|
5
|
+
Repeating 8-pointed star pattern using CSS gradients
|
|
6
|
+
------------------------------------------------ */
|
|
7
|
+
.not-found-zellige-grid {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
background-image:
|
|
11
|
+
/* Diagonal lines forming star lattice */
|
|
12
|
+
repeating-linear-gradient(
|
|
13
|
+
45deg,
|
|
14
|
+
var(--foreground) 0px,
|
|
15
|
+
var(--foreground) 1px,
|
|
16
|
+
transparent 1px,
|
|
17
|
+
transparent 20px
|
|
18
|
+
),
|
|
19
|
+
repeating-linear-gradient(
|
|
20
|
+
-45deg,
|
|
21
|
+
var(--foreground) 0px,
|
|
22
|
+
var(--foreground) 1px,
|
|
23
|
+
transparent 1px,
|
|
24
|
+
transparent 20px
|
|
25
|
+
),
|
|
26
|
+
repeating-linear-gradient(
|
|
27
|
+
0deg,
|
|
28
|
+
var(--foreground) 0px,
|
|
29
|
+
var(--foreground) 1px,
|
|
30
|
+
transparent 1px,
|
|
31
|
+
transparent 40px
|
|
32
|
+
),
|
|
33
|
+
repeating-linear-gradient(
|
|
34
|
+
90deg,
|
|
35
|
+
var(--foreground) 0px,
|
|
36
|
+
var(--foreground) 1px,
|
|
37
|
+
transparent 1px,
|
|
38
|
+
transparent 40px
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ------------------------------------------------
|
|
43
|
+
Horseshoe arch row
|
|
44
|
+
------------------------------------------------ */
|
|
45
|
+
.not-found-arch-row {
|
|
46
|
+
display: flex;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
gap: 0;
|
|
49
|
+
width: 100%;
|
|
50
|
+
max-width: 900px;
|
|
51
|
+
opacity: 0.06;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.not-found-arch {
|
|
55
|
+
width: 280px;
|
|
56
|
+
height: 400px;
|
|
57
|
+
border: 2px solid var(--primary);
|
|
58
|
+
border-bottom: none;
|
|
59
|
+
border-radius: 50% 50% 0 0 / 70% 70% 0 0;
|
|
60
|
+
position: relative;
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.not-found-arch::before {
|
|
65
|
+
content: '';
|
|
66
|
+
position: absolute;
|
|
67
|
+
inset: 8px;
|
|
68
|
+
border: 1.5px solid var(--accent);
|
|
69
|
+
border-bottom: none;
|
|
70
|
+
border-radius: 50% 50% 0 0 / 70% 70% 0 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Offset arches for depth */
|
|
74
|
+
.not-found-arch--left {
|
|
75
|
+
transform: translateX(40px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.not-found-arch--right {
|
|
79
|
+
transform: translateX(-40px);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.not-found-arch--center {
|
|
83
|
+
height: 440px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Hide side arches on small screens */
|
|
87
|
+
@media (max-width: 640px) {
|
|
88
|
+
.not-found-arch--left,
|
|
89
|
+
.not-found-arch--right {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
92
|
+
.not-found-arch--center {
|
|
93
|
+
width: 240px;
|
|
94
|
+
height: 340px;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ------------------------------------------------
|
|
99
|
+
Islamic star ornament (8-pointed)
|
|
100
|
+
------------------------------------------------ */
|
|
101
|
+
.not-found-islamic-star {
|
|
102
|
+
width: 32px;
|
|
103
|
+
height: 32px;
|
|
104
|
+
position: relative;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.not-found-islamic-star::before,
|
|
108
|
+
.not-found-islamic-star::after {
|
|
109
|
+
content: '';
|
|
110
|
+
position: absolute;
|
|
111
|
+
inset: 0;
|
|
112
|
+
border: 1.5px solid var(--accent);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.not-found-islamic-star::before {
|
|
116
|
+
transform: rotate(0deg);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.not-found-islamic-star::after {
|
|
120
|
+
transform: rotate(45deg);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ------------------------------------------------
|
|
124
|
+
Staggered fade-in animations
|
|
125
|
+
------------------------------------------------ */
|
|
126
|
+
.not-found-fade-in-up {
|
|
127
|
+
opacity: 0;
|
|
128
|
+
transform: translateY(16px);
|
|
129
|
+
animation: not-found-fade-in-up 0.7s ease-out forwards;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.not-found-delay-1 { animation-delay: 0.15s; }
|
|
133
|
+
.not-found-delay-2 { animation-delay: 0.3s; }
|
|
134
|
+
.not-found-delay-3 { animation-delay: 0.45s; }
|
|
135
|
+
.not-found-delay-4 { animation-delay: 0.6s; }
|
|
136
|
+
|
|
137
|
+
@keyframes not-found-fade-in-up {
|
|
138
|
+
to {
|
|
139
|
+
opacity: 1;
|
|
140
|
+
transform: translateY(0);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Respect reduced motion */
|
|
145
|
+
@media (prefers-reduced-motion: reduce) {
|
|
146
|
+
.not-found-fade-in-up {
|
|
147
|
+
opacity: 1;
|
|
148
|
+
transform: none;
|
|
149
|
+
animation: none;
|
|
150
|
+
}
|
|
151
|
+
}
|