Skip to content

Commit ab74757

Browse files
captainbrossetcaptainbrosset
committed
New demo
1 parent f470c85 commit ab74757

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

‎css-gap-decorations/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ This directory contains demos that showcase the use of [CSS Gap Decorations](htt
99
* [Guitar Fret Board](https://microsoftedge.github.io/Demos/css-gap-decorations/guitar-fret-board.html)
1010
* [Notebook](https://microsoftedge.github.io/Demos/css-gap-decorations/notebook.html)
1111
* [Calendar](https://microsoftedge.github.io/Demos/css-gap-decorations/calendar.html)
12+
* [Personal site](https://microsoftedge.github.io/Demos/css-gap-decorations/personal-site.html)
1213
<!-- * [The Daily Oddity](https://microsoftedge.github.io/Demos/css-gap-decorations/the-daily-oddity.html) -->
1314

1415
## Developer playground

‎css-gap-decorations/personal-site.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS gap decorations</title>
8+
<style>
9+
body {
10+
font-family: system-ui;
11+
font-size: 1.1rem;
12+
margin: 2rem;
13+
background: hsl(0, 0%, 5%);
14+
color: #fffe;
15+
line-height: 1.6;
16+
}
17+
18+
a {
19+
color: inherit;
20+
}
21+
22+
body {
23+
display: grid;
24+
gap: 4rem;
25+
26+
row-rule:
27+
1rem solid #fffe,
28+
repeat(2, 2px solid #fffe);
29+
}
30+
31+
h1,
32+
p {
33+
margin: 0;
34+
}
35+
36+
nav ul {
37+
font-size: 1.2rem;
38+
39+
list-style: none;
40+
margin: 0;
41+
padding: 0;
42+
43+
display: flex;
44+
flex-wrap: wrap;
45+
gap: 2rem;
46+
column-rule: 2px dashed #fff3;
47+
}
48+
49+
article img {
50+
width: 100%;
51+
height: 100%;
52+
object-fit: cover;
53+
}
54+
55+
footer {
56+
justify-self: end;
57+
}
58+
59+
main {
60+
display: flex;
61+
flex-wrap: wrap;
62+
gap: 4rem;
63+
row-rule: 2px solid #fff6;
64+
column-rule: 2px solid #fff6;
65+
}
66+
67+
main>* {
68+
flex: 1 1 200px;
69+
}
70+
71+
main article:has(p) {
72+
flex-basis: 400px;
73+
place-content: center;
74+
}
75+
76+
main article p {
77+
text-align: center;
78+
font-style: italic;
79+
}
80+
81+
main article p::before {
82+
content: '\201C';
83+
}
84+
85+
main article p::after {
86+
content: '\201D';
87+
}
88+
</style>
89+
</head>
90+
91+
<body>
92+
<header>
93+
<h1>CSS gap decorations</h1>
94+
</header>
95+
<nav>
96+
<ul>
97+
<li><a href="#">Home</a></li>
98+
<li><a href="#">Blog</a></li>
99+
<li><a href="#">About</a></li>
100+
<li><a href="#">Links</a></li>
101+
</ul>
102+
</nav>
103+
<main>
104+
<article>
105+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
106+
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
107+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
108+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
109+
laborum.</p>
110+
</article>
111+
<article>
112+
<img src="cat.jpg" alt="A sleeping cat">
113+
</article>
114+
<article>
115+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
116+
Duis
117+
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
118+
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
119+
</article>
120+
<article>
121+
<img src="tree.jpg" alt="An old olive tree trunk">
122+
</article>
123+
<article>
124+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
125+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
126+
</p>
127+
</article>
128+
<article>
129+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
131+
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
132+
consequat.</p>
133+
</article>
134+
<article>
135+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
136+
Excepteur
137+
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
138+
dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
139+
</p>
140+
</article>
141+
<article>
142+
<img src="strings.jpg"
143+
alt="Snow flakes falling against a dark sky, in slow motion, so the snow falling creates a motion blur effect.">
144+
</article>
145+
</main>
146+
<footer>
147+
<p>&copy; 2025 Patrick Brosset</p>
148+
</footer>
149+
</body>
150+
151+
</html>

0 commit comments

Comments
 (0)