Use list for grid

This commit is contained in:
Fabien Freling 2019-06-13 13:56:15 +02:00
parent 1a28e9287f
commit ca953a991e
2 changed files with 16 additions and 10 deletions

View file

@ -55,18 +55,24 @@ blockquote {
padding: 10px 10px 10px 10px;
}
.projects {
ul.projects {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 10px;
grid-gap: var(gap); /* fallback */
list-style: none;
padding-left: 0;
font-size: 14pt;
}
.project {
ul.projects a {
display: block;
border: 1pt solid #ddd;
font-size: 14pt;
height: 100%;
text-align: center;
text-transform: uppercase;
}
#footer {

View file

@ -2,10 +2,10 @@
title: Projects
---
<div class="projects">
<div class="project"><a href="projects/oboy/index.html">OBoy</a></div>
<div class="project"><a href="projects/trailr/index.html">Trailr</a></div>
<div class="project"><a href="projects/whereiscar/index.html">Where is my car?</a></div>
<div class="project"><a href="projects/maestro/index.html">Maestro</a></div>
<div class="project"><a href="projects/dawnchaos/index.html">Dawn of Chaos</a></div>
</div>
<ul class="projects">
<li><a href="projects/oboy/index.html">OBoy</a></li>
<li><a href="projects/trailr/index.html">Trailr</a></li>
<li><a href="projects/whereiscar/index.html">Where is my car?</a></li>
<li><a href="projects/maestro/index.html">Maestro</a></li>
<li><a href="projects/dawnchaos/index.html">Dawn of Chaos</a></li>
</ul>