add some categories to the main page

This commit is contained in:
leah 2021-08-20 04:11:01 +01:00
parent 9fd67f2c03
commit 2b2b1fcdd6
2 changed files with 71 additions and 0 deletions

View File

@ -33,4 +33,36 @@ body {
font-size: 1.5em;
font-family: 'Crimson Text', serif;
}
.categories {
max-width: 600px;
margin: 12px auto;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
.category {
width: calc(50% - 24px);
padding: 4px 0;
margin: 12px;
* {
margin: 0;
}
.category-link {
display: flex;
align-items: center;
.icon {
margin-right: 4px;
margin-left: -2px;
}
}
}
}
a, a:focus {
color: #d9d5f3
}
.icon {
width: 24px;
}

View File

@ -15,6 +15,45 @@
<div class="search-results__items"></div>
</div>
</div>
<div class="categories">
<div class="category">
<h4><a class="category-link" href="/guides/">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
</svg>
Guides</a></h4>
<p>Words telling you how to do things, for children of all ages.</p>
</div>
<div class="category">
<h4><a class="category-link" href="/docs/">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
</svg>
Docs</a></h4>
<p>Things that are on this server, and how to use them.</p>
</div>
<div class="category">
<h4><a class="category-link" href="/docs/">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2h-1.528A6 6 0 004 9.528V4z" />
<path fill-rule="evenodd" d="M8 10a4 4 0 00-3.446 6.032l-1.261 1.26a1 1 0 101.414 1.415l1.261-1.261A4 4 0 108 10zm-2 4a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd" />
</svg>
Manual</a></h4>
<p>Ask the server nicely to retrieve an entry from the system's manual.</p>
</div>
<div class="category">
<h4><a class="category-link" href="/docs/">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
Extras</a></h4>
<p>Other things that didn't fit elsewhere.</p>
</div>
</div>
<!-- scripts here -->
<script src="/elasticlunr.min.js"></script>
<script src="/search_index.en.js"></script>