Skip to content

Commit 1bb70a6

Browse files
captainbrossetcaptainbrosset
committed
css gap decoration demo and more responsive CWV demo
1 parent 69a9e17 commit 1bb70a6

File tree

6 files changed

+362
-5
lines changed

6 files changed

+362
-5
lines changed

‎css-gap-decorations/cat.jpg‎

62.3 KB
Loading

‎css-gap-decorations/hero.jpg‎

43.3 KB
Loading

‎css-gap-decorations/index.html‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>The Daily Oddity</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
11+
rel="stylesheet">
12+
<style>
13+
:root {
14+
--back: white;
15+
--text: black;
16+
}
17+
18+
* {
19+
box-sizing: border-box;
20+
}
21+
22+
a {
23+
color: var(--text);
24+
text-decoration: none;
25+
}
26+
27+
a:hover {
28+
text-decoration: underline;
29+
}
30+
31+
ul,
32+
li {
33+
margin: 0;
34+
padding: 0;
35+
list-style: none;
36+
}
37+
38+
h1,
39+
h2,
40+
h3 {
41+
margin: 0;
42+
text-wrap: balance;
43+
}
44+
45+
.page-width-wrapper {
46+
margin: 0 auto;
47+
padding: 0 4rem;
48+
max-width: 1000px;
49+
}
50+
51+
.backplate {
52+
background: var(--text);
53+
color: var(--back);
54+
}
55+
56+
body {
57+
background-color: var(--back);
58+
color: var(--text);
59+
font-family: "Source Serif 4", serif;
60+
font-size: 13pt;
61+
line-height: 1.6;
62+
margin: 0;
63+
background-image: radial-gradient(circle, #eee 1.1px, transparent 0);
64+
background-repeat: repeat;
65+
background-size: 2rem 2rem;
66+
}
67+
68+
.banner {
69+
background: var(--text);
70+
color: var(--back);
71+
font-size: .8rem;
72+
}
73+
74+
.banner .page-width-wrapper {
75+
display: flex;
76+
align-items: center;
77+
justify-content: space-between;
78+
flex-wrap: wrap;
79+
}
80+
81+
.banner p, .banner ul {
82+
margin: .5rem 0;
83+
}
84+
85+
.banner ul {
86+
display: flex;
87+
gap: 1rem;
88+
}
89+
90+
.banner a,
91+
footer a {
92+
color: var(--back);
93+
}
94+
95+
header {
96+
margin: 1.5rem 0 3rem 0;
97+
display: flex;
98+
flex-wrap: wrap;
99+
gap: 1rem;
100+
justify-content: space-between;
101+
align-items: center;
102+
white-space: nowrap;
103+
}
104+
105+
header h1 {
106+
font-size: 2rem;
107+
}
108+
109+
header nav ul {
110+
display: flex;
111+
gap: 1rem;
112+
font-size: .9rem;
113+
flex-wrap: wrap;
114+
}
115+
116+
.hero {
117+
display: grid;
118+
grid-template-rows: 2fr 1fr;
119+
background-image: url('hero.jpg');
120+
background-size: cover;
121+
background-position: center;
122+
margin: 1rem -4rem 3rem -4rem;
123+
color: var(--back);
124+
}
125+
126+
.hero .slogan {
127+
padding: 8rem 4rem 0 4rem;
128+
align-self: end;
129+
font-weight: normal;
130+
}
131+
132+
.hero .by-line {
133+
padding: 0 4rem;
134+
font-size: .9rem;
135+
margin: 0 0 0 0;
136+
}
137+
138+
main {
139+
column-width: 13rem;
140+
column-gap: 3rem;
141+
column-rule: 1.5px solid var(--text);
142+
margin-block-end: 3rem;
143+
}
144+
145+
article {
146+
break-inside: avoid;
147+
margin: 0 0 1rem 0;
148+
border-block-end: 2px solid var(--text);
149+
padding-block-end: 1rem;
150+
}
151+
152+
article a {
153+
text-decoration: underline;
154+
font-size: .9rem;
155+
font-weight: bold;
156+
}
157+
158+
article a::after {
159+
content: ' →';
160+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
161+
}
162+
163+
article img {
164+
object-position: center;
165+
object-fit: cover;
166+
width: 100%;
167+
}
168+
169+
article time {
170+
font-weight: bold;
171+
font-size: .75rem;
172+
text-transform: uppercase;
173+
margin: 0 0 1rem 0;
174+
display: block;
175+
}
176+
177+
article:has(img) time {
178+
margin-block-start: 1rem;
179+
}
180+
181+
article p {
182+
margin: 1rem 0;
183+
}
184+
185+
footer {
186+
padding: 3rem 0;
187+
background: var(--text);
188+
color: var(--back);
189+
font-size: .9rem;
190+
}
191+
192+
footer a {
193+
color: color-mix(in srgb, var(--back) 60%, var(--text));
194+
}
195+
196+
footer .page-width-wrapper {
197+
display: grid;
198+
gap: 1rem;
199+
grid-template-columns: 5fr 1fr;
200+
}
201+
202+
footer h3,
203+
footer p {
204+
grid-column: 1;
205+
}
206+
207+
footer ul {
208+
grid-row: 1 / span 2;
209+
grid-column: 2;
210+
}
211+
</style>
212+
</head>
213+
214+
<body>
215+
<div class="banner">
216+
<div class="page-width-wrapper">
217+
<p>A Magazine with a Twist</p>
218+
<ul>
219+
<li><a href="#">Contact</a></li>
220+
<li><a href="#">Privacy Policy</a></li>
221+
</ul>
222+
</div>
223+
</div>
224+
225+
<div class="page-width-wrapper">
226+
227+
<header>
228+
<h1>The Daily Oddity</h1>
229+
<nav>
230+
<ul>
231+
<li><a href="#">Home</a></li>
232+
<li><a href="#">Oddities</a></li>
233+
<li><a href="#">Shop</a></li>
234+
<li><a href="#">Conspiracy Corner</a></li>
235+
<li><a href="#">About us</a></li>
236+
</ul>
237+
</nav>
238+
</header>
239+
240+
<section class="hero">
241+
<h2 class="slogan"><span class="backplate">The Daily Oddity - Where the Weird Meets the News</span></h2>
242+
<p class="by-line"><span class="backplate">Serving Up the Odd, the Outrageous, and the Occasionally Plausible.</span></p>
243+
</section>
244+
245+
<main>
246+
<article>
247+
<time>3 March 2025</time>
248+
<h3>New Moon Discovered to Have Pizza-Like Crust</h3>
249+
<p class="exceprt">Astronomers reveal a shocking discovery of a new moon made entirely of cheesy, crispy crust.
250+
Researchers are now considering launching a mission to taste-test.</p>
251+
<a href="#">Read more</a>
252+
</article>
253+
<article>
254+
<img src="tree.jpg" alt="Article photo, for illustration purposes only.">
255+
<time>2 March 2025</time>
256+
<h3>Scientists Find Evidence of Talking Trees in Forests</h3>
257+
<p class="exceprt">A groundbreaking study has found that trees in remote forests are capable of whispering to
258+
each other in a complex language. Experts are calling it "nature's secret society."</p>
259+
<a href="#">Read more</a>
260+
</article>
261+
<article>
262+
<time>27 February 2025</time>
263+
<h3>Unicorns Spotted in Remote Icelandic Mountains</h3>
264+
<p class="exceprt">Adventurers in Iceland have claimed to have witnessed a herd of unicorns near an uncharted
265+
mountain range. Biologists remain skeptical, while local tourism skyrockets.</p>
266+
<a href="#">Read more</a>
267+
</article>
268+
<article>
269+
<img src="cat.jpg" alt="Article photo, for illustration purposes only.">
270+
<time>27 February 2025</time>
271+
<h3>Government Announces 3-Day Workweek for All</h3>
272+
<p class="exceprt">In an unprecedented move, the government has declared a new three-day workweek, citing
273+
improved productivity and employee happiness. Critics question how long it will last.</p>
274+
<a href="#">Read more</a>
275+
</article>
276+
<article>
277+
<img src="strings.jpg" alt="Article photo, for illustration purposes only.">
278+
<time>24 February 2025</time>
279+
<h3>Aliens Offer Earth Free Wi-Fi, No Strings Attached</h3>
280+
<p class="exceprt">Extraterrestrial beings have reportedly made contact, offering Earth unlimited Wi-Fi access.
281+
In exchange, they demand nothing but a daily supply of pineapples.</p>
282+
<a href="#">Read more</a>
283+
</article>
284+
<article>
285+
<time>26 February 2025</time>
286+
<h3>Caffeine Banned After Causing 'Superhuman' Energy Spikes</h3>
287+
<p class="exceprt">A global ban on caffeine has been enacted after reports of people achieving superhuman
288+
feats—such as lifting cars—while under its influence. Experts warn of the dangerous side effects.</p>
289+
<a href="#">Read more</a>
290+
</article>
291+
<article>
292+
<time>23 February 2025</time>
293+
<h3>Giant Panda Declared World's New Fashion Icon</h3>
294+
<p class="exceprt">A giant panda from the Chengdu Wildlife Reserve has been crowned the world’s top fashion
295+
icon, gracing runways with its natural black-and-white fur patterns. Designers scramble to mimic the look.</p>
296+
<a href="#">Read more</a>
297+
</article>
298+
</main>
299+
300+
</div>
301+
302+
<footer>
303+
<div class="page-width-wrapper">
304+
<h3>The Daily Oddity</h3>
305+
<p>Serving Up the Odd, the Outrageous, and the Occasionally Plausible.</p>
306+
<ul class="site-map">
307+
<li><a href="#">Home</a></li>
308+
<li><a href="#">Oddities</a></li>
309+
<li><a href="#">Shop</a></li>
310+
<li><a href="#">Conspiracy Corner</a></li>
311+
<li><a href="#">About us</a></li>
312+
</ul>
313+
</div>
314+
</footer>
315+
</body>
316+
317+
</html>

‎css-gap-decorations/strings.jpg‎

66 KB
Loading

‎css-gap-decorations/tree.jpg‎

76 KB
Loading

0 commit comments

Comments
 (0)