Skip to content

Commit 479b5a8

Browse files
aalhouraalhour
committed
Demo single article
1 parent b0c6aef commit 479b5a8

File tree

1 file changed

+198
-1
lines changed

1 file changed

+198
-1
lines changed

‎pages/demo/demo_single_article/index.html‎

Lines changed: 198 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,204 @@
44
<meta charset="utf-8" />
55
<title>When your team stops shipping – Digital Bazaar</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<link rel="stylesheet" href="../style.css"></rel>
7+
<style>
8+
:root {
9+
--sand: #F4E6C4;
10+
--saffron: #E2B714;
11+
--terracotta: #B34E36;
12+
--marigold: #D9912A;
13+
--teal: #2F8F9D;
14+
--night: #152029;
15+
--ink: #21313B;
16+
--white: #FFFFFF;
17+
}
18+
19+
* { box-sizing: border-box; }
20+
21+
body {
22+
margin: 0;
23+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
24+
background:
25+
radial-gradient(1200px 600px at 10% -10%, rgba(227, 183, 20, 0.15), transparent 60%),
26+
linear-gradient(180deg, #FFFDF6 0%, var(--sand) 100%);
27+
color: var(--ink);
28+
}
29+
30+
a { color: inherit; text-decoration: none; }
31+
32+
/* NAV */
33+
34+
.nav {
35+
position: sticky;
36+
top: 0;
37+
z-index: 50;
38+
backdrop-filter: blur(12px);
39+
background: rgba(244, 230, 196, 0.96);
40+
border-bottom: 1px solid rgba(21,32,41,0.08);
41+
}
42+
43+
.nav-inner {
44+
max-width: 760px;
45+
margin: 0 auto;
46+
padding: 10px 18px;
47+
display: flex;
48+
align-items: center;
49+
justify-content: space-between;
50+
gap: 12px;
51+
}
52+
53+
.nav-left {
54+
display: flex;
55+
align-items: center;
56+
gap: 10px;
57+
}
58+
59+
.nav-logo-mark {
60+
width: 26px;
61+
height: 26px;
62+
border-radius: 9px;
63+
background: conic-gradient(from 210deg, var(--terracotta), var(--marigold), var(--saffron));
64+
box-shadow: 0 4px 10px rgba(0,0,0,0.18);
65+
}
66+
67+
.nav-title {
68+
font-weight: 700;
69+
font-size: 14px;
70+
letter-spacing: 0.08em;
71+
text-transform: uppercase;
72+
color: var(--night);
73+
}
74+
75+
.nav-links {
76+
display: flex;
77+
gap: 14px;
78+
font-size: 14px;
79+
color: #4a5d6a;
80+
}
81+
82+
.nav-links a:hover { color: var(--night); }
83+
84+
@media (max-width: 520px) {
85+
.nav-inner { padding-inline: 14px; }
86+
.nav-links { display: none; }
87+
}
88+
89+
/* PAGE */
90+
91+
.wrap {
92+
max-width: 760px;
93+
margin: 0 auto;
94+
padding: 24px 18px 40px;
95+
}
96+
97+
.kicker {
98+
font-size: 12px;
99+
font-weight: 700;
100+
text-transform: uppercase;
101+
letter-spacing: 0.16em;
102+
color: #7a6330;
103+
margin-bottom: 6px;
104+
}
105+
106+
h1 {
107+
font-size: clamp(26px, 4vw, 34px);
108+
line-height: 1.18;
109+
margin: 0 0 8px;
110+
color: var(--night);
111+
}
112+
113+
.dek {
114+
font-size: 15px;
115+
color: #4a5d6a;
116+
margin: 0 0 10px;
117+
}
118+
119+
.meta {
120+
font-size: 13px;
121+
color: #6a7c89;
122+
margin-bottom: 18px;
123+
}
124+
125+
.banner {
126+
border-radius: 18px;
127+
overflow: hidden;
128+
border: 1px solid rgba(21,32,41,0.12);
129+
margin-bottom: 22px;
130+
background: var(--night);
131+
}
132+
133+
.banner img {
134+
width: 100%;
135+
height: clamp(200px, 28vw, 260px);
136+
object-fit: cover;
137+
display: block;
138+
}
139+
140+
article {
141+
font-size: 16px;
142+
line-height: 1.7;
143+
color: #283845;
144+
}
145+
146+
article p {
147+
margin: 0 0 16px;
148+
}
149+
150+
article h2 {
151+
font-size: 20px;
152+
margin: 26px 0 10px;
153+
color: var(--night);
154+
}
155+
156+
article blockquote {
157+
margin: 18px 0;
158+
padding: 12px 16px;
159+
border-left: 3px solid var(--teal);
160+
background: rgba(255,253,246,0.8);
161+
font-size: 15px;
162+
color: #3a4a55;
163+
}
164+
165+
.tag-row {
166+
margin-top: 26px;
167+
font-size: 13px;
168+
color: #6a7c89;
169+
display: flex;
170+
flex-wrap: wrap;
171+
gap: 8px;
172+
align-items: center;
173+
}
174+
175+
.chip {
176+
padding: 3px 9px;
177+
border-radius: 999px;
178+
border: 1px solid rgba(47,143,157,0.40);
179+
background: rgba(47,143,157,0.1);
180+
color: #205f67;
181+
font-weight: 600;
182+
font-size: 11px;
183+
text-transform: lowercase;
184+
}
185+
186+
footer {
187+
margin-top: 32px;
188+
padding-top: 12px;
189+
border-top: 1px dashed rgba(21,32,41,0.18);
190+
font-size: 13px;
191+
color: #6a7c89;
192+
display: flex;
193+
justify-content: space-between;
194+
flex-wrap: wrap;
195+
gap: 8px;
196+
}
197+
198+
footer a { color: #4a5d6a; }
199+
footer a:hover { color: var(--teal); }
200+
201+
@media (max-width: 640px) {
202+
.wrap { padding-inline: 16px; }
203+
}
204+
</style>
8205
</head>
9206
<body>
10207
<header class="nav">

0 commit comments

Comments
 (0)