fabs/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use grid for projects listing

Browse source
This commit is contained in:
Fabien Freling 2019-06-11 13:56:18 +02:00
parent 7b63a99226
commit 21527466ce
2 changed files with 17 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
css/style.css
View file

@ -95,38 +95,18 @@ div#fabs-icon a:hover {
color: #268bd2;
}
ul#projects {
margin: 1em 0;
list-style: none;
padding-left: 0;
margin-left: 0;
display: block;
text-align: center;
.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 */
}
#projects li {
/* display: inline;
*/ display: block;
}
#projects li a {
list-style: none;
display: block;
margin: 1em 4em 1em 4em;
padding: 1em 1em 1em 10em;
border: 1px solid #ddd;
font-family: Helvetica, sans-serif;
/* font-size: 11px;
*/ text-transform: uppercase;
color: #666;
text-decoration: none;
text-align: left;
background-position: 2em;
}
#projects li a:hover {
background-position: 2em;
border: 1px solid #ccc;
.project {
border: 1pt solid #ddd;
font-size: 14pt;
text-align: center;
}
#footer {

14
projects.md
View file

@ -2,10 +2,10 @@
title: Projects
---
<ul id="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>
<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>