Skip to content

Commit bc359e9

Browse files
captainbrossetcaptainbrosset
committed
Minor improvements
1 parent 41b385b commit bc359e9

File tree

4 files changed

+143
-78
lines changed

4 files changed

+143
-78
lines changed

‎css-gap-decorations/burger-menu.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<title>Burger Menu</title>
77
<style>
88
body {
9-
background: gray;
9+
font-family: system-ui;
10+
margin: 2rem;
1011
}
1112

1213
.grid-container {
@@ -22,9 +23,9 @@
2223
column-rule-outset: -15px;
2324
row-rule-outset: -8px;
2425

25-
background: #fff;
26-
width: 850px;
27-
height: 600px;
26+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
27+
max-width: 1000px;
28+
margin: 0 auto;
2829
}
2930

3031
/* — Header — */
@@ -68,7 +69,6 @@
6869
background: #f4f5f7;
6970
padding: 1rem;
7071
color: #666;
71-
font-family: sans-serif;
7272
font-size: 0.95rem;
7373
}
7474

@@ -103,7 +103,6 @@
103103

104104
background: #3366cc;
105105
color: #fff;
106-
font-family: sans-serif;
107106
font-size: 0.95rem;
108107
}
109108

‎css-gap-decorations/daily-css-news.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,15 @@
9898
grid-template-columns: 2fr 1fr;
9999
gap: 2rem;
100100
padding: 2rem;
101-
column-rule-width: 2px;
102-
column-rule-style: dashed;
103-
column-rule-color: var(--rule);
104-
row-gap: 1.5rem;
101+
rule-width: 2px;
102+
rule-style: dashed;
103+
rule-color: var(--rule);
104+
}
105+
106+
@media (max-width: 900px) {
107+
main {
108+
grid-template-columns: 1fr;
109+
}
105110
}
106111

107112
article.card {

‎css-gap-decorations/guitar-fret-board.html

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,47 @@
66
<title>Guitar Fret Board</title>
77
<style>
88
.fret-board {
9-
display: inline-block;
10-
background-color: #00bcd4;
11-
padding: 20px;
12-
}
9+
--string-width: 1.5px;
10+
--space-between-strings: 45px;
11+
--fret-width: 6px;
12+
--space-between-frets: 120px;
13+
--string-num: 6;
14+
--fret-num: 10;
15+
--space-around-neck: 10px;
1316

14-
.strings-grid {
17+
width: calc(var(--string-width) * var(--string-num) + var(--space-between-strings) * (var(--string-num) - 1));
18+
padding: 0 var(--space-around-neck);
19+
1520
display: grid;
16-
grid-template: repeat(4, 50px) / 0px repeat(5, 50px) 0px;
17-
gap: 3px;
18-
background-color: #009eb3;
19-
20-
column-rule: 3px solid white;
21-
row-rule: 3px solid #065863;
21+
grid-template-rows: repeat(var(--fret-num), var(--space-between-frets));
22+
grid-template-columns: 0px repeat(calc(var(--string-num) - 1), var(--space-between-strings)) 0px;
23+
24+
column-gap: var(--string-width);
25+
row-gap: var(--fret-width);
26+
column-rule: var(--string-width) solid white;
27+
row-rule: var(--fret-width) solid #737778;
28+
row-rule-outset: var(--space-around-neck);
2229
gap-rule-paint-order: column-over-row;
30+
31+
background-image:
32+
radial-gradient(circle, white 0 calc(var(--space-between-strings) / 4), transparent 0),
33+
linear-gradient(to right, #342323, #433232);
34+
background-repeat:
35+
repeat-y,
36+
no-repeat;
37+
background-size:
38+
calc(var(--space-between-strings) / 2) calc(var(--space-between-frets) * 3 + var(--fret-width) * 3),
39+
auto;
40+
background-position: center 0px;
41+
box-shadow: inset 0 0 var(--space-around-neck) var(--space-around-neck) #0009;
2342

24-
border-top: solid 6px #065863;
25-
border-bottom: solid 3px #065863;
43+
border-block: 12px solid #c2c28c;
2644
}
2745
</style>
2846
</head>
2947

3048
<body>
31-
<div class="fret-board">
32-
<div class="strings-grid">
33-
</div>
34-
</div>
49+
<div class="fret-board"></div>
3550
</body>
3651

3752
</html>

‎css-gap-decorations/notebook.html

Lines changed: 97 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,29 @@
55
<meta charset="UTF-8">
66
<title>Notebook</title>
77
<style>
8+
html,
89
body {
10+
height: 100%;
911
margin: 0;
10-
display: flex;
11-
justify-content: center;
12-
align-items: center;
12+
}
13+
14+
body {
15+
display: grid;
16+
place-content: center;
1317
background: #ece9dd;
18+
font-family: "Comic Sans MS", cursive, sans-serif;
1419
}
1520

16-
.container {
21+
.notebook-page {
1722
display: grid;
1823
grid-template-columns: 1fr 2fr;
1924
grid-template-rows: repeat(30, 1fr);
2025
gap: 2px;
2126
gap-rule-paint-order: column-over-row;
2227

2328
column-rule: solid black 1.5px;
24-
column-rule-break: none;
25-
column-rule-outset: -80px;
29+
column-rule-break: spanning-item;
30+
column-rule-outset: calc(-80vmin / 8 - 0.5vmin);
2631
row-rule:
2732
/* header lines */
2833
repeat(3, solid #a7c1d9 1px),
@@ -36,70 +41,111 @@
3641
repeat(3, solid #a7c1d9 1px);
3742

3843
background: #fdf8e3;
39-
width: 360px;
40-
height: 600px;
41-
font-family: "Segoe UI", sans-serif;
44+
height: 80vmin;
45+
aspect-ratio: 360 / 600;
46+
padding: 1vmin 1vmin 1vmin 4vmin;
47+
border-radius: 0.5vmin;
48+
box-shadow: 0 0 1vmin 0 #0003;
49+
position: relative;
50+
51+
line-height: calc(80vmin / 30);
52+
}
53+
54+
.notebook-page::before,
55+
.notebook-page::after {
56+
content: "";
57+
position: absolute;
58+
width: 2vmin;
59+
aspect-ratio: 1;
60+
border-radius: 50%;
61+
left: 1vmin;
62+
background: #ece9dd;
63+
box-shadow: inset 0 0 1vmin 0 #0003;
64+
}
65+
66+
.notebook-page::before {
67+
top: 20vmin;
4268
}
4369

44-
/* Header */
45-
.header {
46-
grid-row: 1 / 4;
47-
grid-column: 1 / 3;
48-
display: flex;
49-
justify-content: space-between;
50-
align-items: flex-end;
51-
padding: 0 12px;
70+
.notebook-page::after {
71+
bottom: 20vmin;
5272
}
5373

54-
.header .title {
55-
font-size: 1.4em;
74+
.notebook-page * {
75+
margin: 0;
76+
font-size: 1.5vmin;
77+
}
78+
79+
.notebook-page header {
80+
grid-row: 1 / span 4;
81+
grid-column: 1 / span 2;
82+
display: grid;
83+
grid-template-columns: 1fr 2fr;
84+
gap: 2px;
85+
}
86+
87+
.notebook-page header h1 {
88+
font-size: 2.2vmin;
5689
font-weight: bold;
57-
color: #2a2a2a;
90+
padding-inline: 1vmin;
91+
margin: 0;
5892
}
5993

60-
.header .date {
61-
font-size: 0.9em;
62-
color: #555;
94+
.notebook-page aside {
95+
grid-column: 1 / 2;
96+
grid-row: 5 / span 22;
6397
}
6498

65-
/* left */
66-
.leftside {
67-
padding: 0px 12px;
68-
grid-column: 1/2;
69-
grid-row: 4/5;
70-
font-size: 0.65em;
71-
align-self: end;
99+
.notebook-page main {
100+
grid-column: 2 / 3;
101+
grid-row: 5 / span 22;
102+
margin-inline: 1vmin;
72103
}
73104

74-
/* right */
75-
.rightside {
76-
grid-column: 2/3;
77-
grid-row: 4/5;
78-
font-size: 0.9em;
79-
align-self: end;
80-
padding: 0px 12px;
105+
.notebook-page footer {
106+
grid-row: 27 / span 4;
107+
grid-column: 1 / span 2;
81108
}
82109

83-
.summary {
84-
padding: 0px 12px;
85-
grid-row: 27 / 28;
86-
grid-column: 1/ 2;
87-
font-size: 0.9em;
88-
align-self: end;
110+
.notebook-page footer p {
111+
font-size: 1.3vmin;
89112
}
90113
</style>
91114
</head>
92115

93116
<body>
94-
<div class="container">
95-
<div class="header">
96-
<div class="title">TITLE</div>
117+
<div class="notebook-page">
118+
<header>
97119
<div class="date">June 7, 2025</div>
98-
</div>
99-
<div class="leftside">Keywords:</div>
100-
<div class="rightside">Main notes:</div>
101-
<div class="summary">Summary:</div>
102-
<div class="footer"> </div>
120+
<h1>My notes about CSS gap decorations</h1>
121+
</header>
122+
<aside>
123+
Keywords:<br>
124+
CSS<br>
125+
Grid<br>
126+
Flexbox<br>
127+
Masonry<br>
128+
Multi-column<br>
129+
Layout<br>
130+
Gap
131+
</aside>
132+
<main>
133+
<h2>Purpose:</h2>
134+
<p>Enhance CSS with styled lines between layout items in grid, flex, masonry, and multi-column containers (same as
135+
column-rule in multicol).</p>
136+
<h2>New Properties & Behavior:</h2>
137+
<p>row-rule, column-rule to define width, style, and color of decorations.</p>
138+
<p>Complex patterns with repeat().</p>
139+
<p>gap-rule-break to control where decorations start/end.</p>
140+
<p>gap-rule-paint-order to define overlap order between row and column.</p>
141+
<p>gap-rule-outset to adjust start/end positions.</p>
142+
</main>
143+
<footer>
144+
<p>Summary:</p>
145+
<p>Proposal to add decorative lines to grid, flex, and masonry gaps</p>
146+
<p>Comes with new props to define line styles and exact positions</p>
147+
<p>Possible future changes: images, corner styling, better placement options</p>
148+
</footer>
103149
</div>
104150
</body>
105151

0 commit comments

Comments
 (0)