Code for generating the flexbox menu of post kinds on my homepage

homepage-flexbox-menu.html

/* Code for the itemized menu on my homepage */

<ul class="flex-menu">
 	<li class="flex-item">[icon name="file-text" class="" unprefixed_class=""] <a title="Longerform content (Traditional blog)" href="/kind/article/">Articles</a></li>
 	<li class="flex-item">[icon name="sticky-note" class="" unprefixed_class=""] <a title="Status updates and short notes" href="/kind/note/">Notes</a></li>
 	<li class="flex-item">[icon name="reply" class="" unprefixed_class=""] <a title="Replies to content on other sites" href="/kind/reply/">Replies</a></li>
 	<li class="flex-item">[icon name="microphone" class="" unprefixed_class=""] <a title="My short podcast episodes on various topics" href="/category/microcast/">Microcast</a></li>
 	<li class="flex-item">[icon name="location-arrow" class="" unprefixed_class=""] <a title="Places I've visited" href="/category/checkin/">Checkins</a></li>
 	<li class="flex-item">[icon name="music" class="" unprefixed_class=""] <a title="Audio files I've found interesting" href="/type/audio">Audio</a></li>
 	<li class="flex-item">[icon name="headphones" class="" unprefixed_class=""] <a title="Podcasts and other audio I've listened to" href="/kind/listen/">Listens</a></li>
 	<li class="flex-item">[icon name="film" class="" unprefixed_class=""] <a title="Film, television, or videos I've watched" href="/kind/watch/">Watches</a></li>
 	<li class="flex-item">[icon name="calendar" class="" unprefixed_class=""] <a title="Events I've RSVPd to" href="/kind/rsvp/">RSVPs</a></li>
 	<li class="flex-item">[icon name="music" class="" unprefixed_class=""] <a title="Music that holds a special place in my heart" href="/kind/jam/">Jams</a></li>
 	<li class="flex-item">[icon name="picture-o" class="" unprefixed_class=""] <a title="Photos" href="/kind/photo/">Photos</a></li>
 	<li class="flex-item">[icon name="book" class="" unprefixed_class=""] <a title="Things I've actually read" href="/kind/read/">Read</a></li>
 	<li class="flex-item">[icon name="star" class="" unprefixed_class=""] <a title="Things I love" href="/kind/favorite/">Favorites</a></li>
 	<li class="flex-item">[icon name="heart" class="" unprefixed_class=""] <a title="Content or creators I've enjoyed" href="/kind/like/">Likes</a></li>
 	<li class="flex-item">[icon name="share-square-o" class="" unprefixed_class=""] <a href="/kind/repost/">Reposts</a></li>
 	<li class="flex-item">[icon name="bookmark" class="" unprefixed_class=""] <a title="Interesting things I'd like to revisit" href="/kind/bookmark/">Bookmarks</a></li>
 	<li class="flex-item">[icon name="user-plus" class="" unprefixed_class=""] <a title="People or Things I'm following or have subscribed to" href="/kind/follow/">Follows</a></li>
 	<li class="flex-item">[icon name="video-camera" class="" unprefixed_class=""] <a href="/type/video">Video</a></li>
 	<li class="flex-item">[icon name="quote-left" class="" unprefixed_class=""] <a href="/type/quote/">Quotes</a></li>
 	<li class="flex-item">[icon name="comments" class="" unprefixed_class=""] <a href="/type/chat/">Chat</a></li>
 	<li class="flex-item">[icon name="cutlery" class="" unprefixed_class=""] <a href="/tag/recipe/">Recipes</a></li>
 	<li class="flex-item">[icon name="cutlery" class="" unprefixed_class=""] <a href="/kind/eat/">Eat</a></li>
 	<li class="flex-item">[icon name="glass" class="" unprefixed_class=""] <a href="/kind/drink/">Drink</a></li>
 	<li class="flex-item">[icon name="bicycle" class="" unprefixed_class=""] <a href="/kind/exercise/">Exercise</a></li>
 	<li class="flex-item">[icon name="gamepad" class="" unprefixed_class=""] <a title="Games played" href="/kind/play/">Plays</a></li>
 	<li class="flex-item">[icon name="bug" class="" unprefixed_class=""] <a title="Issues filed to GitHub" href="/kind/issue/">Issues</a></li>
 	<li class="flex-item">[icon name="shopping-cart" class="" unprefixed_class=""] <a title="My Wishlist" href="/kind/wish/">Wishes</a></li>
 	<li class="flex-item">[icon name="cart-plus" class="" unprefixed_class=""] <a title="Purchases, gifts, found things, or objects donated to me" href="/kind/acquisition/">Acquisitions</a></li>
 	<li class="flex-item"></li>
<ul class="flex-menu">
 	<li class="flex-item">[icon name="heartbeat" class="" unprefixed_class=""] <a href="/blog/">Firehose</a></li>
 	<li class="flex-item">[icon name="certificate" class="" unprefixed_class=""] <a href="/type/status">Microblog</a></li>
 	<li class="flex-item">[icon name="link" class="" unprefixed_class=""] <a title="My Linkblog" href="/type/link/">Linkblog</a></li>
 	<li class="flex-item">[icon name="cutlery" class="" unprefixed_class=""] <a href="/kind/eat,drink/" target="_blank" rel="noopener">Food Diary</a></li>
 	<li class="flex-item"></li>
</ul>

/* The section below is the CSS I'm using to display the above I've put it into the style.css file of my (child) theme */
/* Flexbox details for small menu on front page and potentially on posts-by type page */
.flex-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    align-content: space-between;
}

.flex-item {
  padding: 5px;
  width: 150px;
  height: 1.5em;
  margin-top: 10px;
  line-height: 1.5em;
  color: black;
  font-weight: bold;
  font-size: 1.05em;
  text-align: left;
}