Mirror of https://github.com/roostorg/playground
github.com/roostorg/playground
style: wrap for a more compact layout
+13
-6
+13
-6
index.html
+13
-6
index.html
···
65
65
}
66
66
67
67
header nav {
68
+
display: flex;
69
+
justify-content: space-between;
68
70
margin-inline: auto;
69
71
max-width: var(--max-width);
70
72
padding-inline: 1rem;
···
94
96
}
95
97
96
98
ul#projects {
99
+
display: flex;
100
+
flex-wrap: wrap;
101
+
gap: 1em;
97
102
list-style: none;
103
+
margin-block-start: 3em;
98
104
padding: 0;
99
105
}
100
106
···
104
110
border-radius: 1em;
105
111
color: inherit;
106
112
display: block;
107
-
margin-block: 2em;
108
113
padding: 1em 1.5em;
109
114
text-decoration: none;
110
115
}
···
117
122
--project-color: var(--roost-muddy);
118
123
}
119
124
120
-
#projects a:hover {
125
+
#projects a:hover,
126
+
#projects a:focus {
121
127
background-color: color-mix(var(--project-color) 10%, transparent);
122
128
}
123
129
···
136
142
<header>
137
143
<nav>
138
144
<a href="https://roost.tools">← ROOST.tools main site</a>
145
+
<a href="https://github.com/roostorg/playground">Source Code</a>
139
146
</nav>
140
147
</header>
141
148
<main>
···
151
158
</li>
152
159
<li>
153
160
<a href="#">
154
-
<h2>Project name</h2>
155
-
<p>Brief project description</p>
161
+
<h2>Different project name</h2>
162
+
<p>Brief but slightly longer project description</p>
156
163
</a>
157
164
</li>
158
165
<li>
159
166
<a href="#">
160
-
<h2>Project name</h2>
161
-
<p>Brief project description</p>
167
+
<h2>Another project name</h2>
168
+
<p>Briefer project description</p>
162
169
</a>
163
170
</li>
164
171
<li>