Mirror of https://github.com/roostorg/playground github.com/roostorg/playground
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: wrap for a more compact layout

+13 -6
+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>