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,reply,quote,like,photo, favortie, repost">Stream</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="/kind/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>
</ul>

/* The section below is the CSS I'm using to display the above */
/* 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;
}