Created
February 16, 2019 19:58
-
-
Save davidmead/c5f424338056af548b8bcc0d76df6e24 to your computer and use it in GitHub Desktop.
Proposed structure for Known post (Listen type as an example) using a more semantic markup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Proposed HTML for a Listen post on Known blog</title> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> | |
| <style> | |
| /* Just enough CSS to visualize structure */ | |
| img {display:block; width:100%;} | |
| .white {background-color: #FFF; padding: 1em;} | |
| .grey01 {background-color: #F2F2F2; padding: 1em;} | |
| .grey02 {background-color: #CCC; padding: 1em;} | |
| .grey03 {background-color: #999; padding: 1em;} | |
| .center {margin-left: auto; margin-right: auto;} | |
| .spacing {margin:2em;} | |
| .width {width: 80%;} | |
| </style> | |
| </head> | |
| <body class="white"> | |
| <h1>Post as seen in the main feed (logged in)</h1> | |
| <!-- Post starts --> | |
| <article class="h-entry width grey01 center"> | |
| <header> | |
| <h1 class="p-name"> | |
| <!--Start type icon--> | |
| <span><i class="fas fa-music"></i></span> | |
| <!--End type icon--> | |
| Listened to | |
| <!--Start type description--> | |
| <span>the album,</span> | |
| <!--End type description--> | |
| <a href="https://biosphere.bandcamp.com/album/departed-glories" class="">Departed Glories</a> | |
| </h1> | |
| <!--Start artist--> | |
| <p class="listenArtist">By Biosphere</p> | |
| <!--End artist--> | |
| <!--Start cover art--> | |
| <p><a href="https://davidjohnmead.com/file/df2c75cd139a3f93b1cb963accb55aca/cover-departed-glories.jpg"><img alt="" src="https://davidjohnmead.com/file/f1c2c459eead2a66055d40869f86b9e7/thumb.jpg" class="u-photo"></a></p> | |
| <!--End cover art--> | |
| </header> | |
| <section class="e-content"> | |
| <p>Dreamy, melancholic, haunting.</p><p>I'm a big Biosphere fan, but this took me a couple of tries to get into. Though similar to some of his work, such as <a href="https://biosphere.bandcamp.com/album/shenzhou-reissue-with-bonus-album">Shenzhou</a>, it's still different from his normal output.</p> | |
| <p>The more I listen the higher it climbs in my favourite albums list.</p> | |
| <p class="tag-row"> | |
| <i class="fa fa-tag"></i> <a href="https://davidjohnmead.com/tag/listen" class="p-category" rel="tag">#listen</a> <a href="https://davidjohnmead.com/tag/music" class="p-category" rel="tag">#music</a> <a href="https://davidjohnmead.com/tag/instrumental" class="p-category" rel="tag">#instrumental</a></p> | |
| </section> | |
| <!--Start post author (not displayed)--> | |
| <!-- | |
| <address class="p-author author h-card vcard"> | |
| <a href="https://davidjohnmead.com/profile/davidmead" class="icon-container"><img class="u-logo logo u-photo photo" alt="" src="https://davidjohnmead.com/file/71f7813df9ad7cade05d1a9671eed446/thumb.jpg"></a><br> | |
| <a class="p-name fn u-url url" href="https://davidjohnmead.com/profile/davidmead">David Mead</a> | |
| <a class="u-url" href="https://davidjohnmead.com/profile/davidmead"></a> | |
| </address> --> | |
| <!--End post author--> | |
| <footer> | |
| <p><a href="https://davidjohnmead.com/profile/davidmead">David Mead</a> published this <a class="u-url url" href="https://davidjohnmead.com/2019/02/12/departed-glories" rel="permalink"><time class="dt-published" datetime="2019-02-12T04:26:09+0000" title="12 Feb 2019">about 16 hours ago</time></a></p> | |
| <!--Start post functions--> | |
| <p><a href="" title="Edit this entry">Edit</a> <button type="button">Delete</button></p> | |
| <!--End post functions--> | |
| <p><span class="annotate-icon"><a class="stars" href="#annotations"><i class="far fa-star" title="Star this!"></i> 1 star</a></span> <span class="annotate-icon"><a class="comments" href="#annotations"><i class="fa fa-comments"></i> 0 comments</a></span></p> | |
| </footer> | |
| </article> | |
| <!-- Post ends --> | |
| <hr/> | |
| <h1>Post as seen on it's own page (logged in)</h1> | |
| <!-- Post starts --> | |
| <article class="h-entry width grey01 center"> | |
| <header> | |
| <h1 class="p-name"> | |
| <!--Start type icon--> | |
| <span><i class="fas fa-music"></i></span> | |
| <!--End type icon--> | |
| Listened to | |
| <!--Start type description--> | |
| <span>the album,</span> | |
| <!--End type description--> | |
| <a href="https://biosphere.bandcamp.com/album/departed-glories" class="">Departed Glories</a> | |
| </h1> | |
| <!--Start artist--> | |
| <p class="listenArtist">By Biosphere</p> | |
| <!--End artist--> | |
| <!--Start cover art--> | |
| <p><a href="https://davidjohnmead.com/file/df2c75cd139a3f93b1cb963accb55aca/cover-departed-glories.jpg"><img alt="" src="https://davidjohnmead.com/file/f1c2c459eead2a66055d40869f86b9e7/thumb.jpg" class="u-photo"></a></p> | |
| <!--End cover art--> | |
| </header> | |
| <section class="e-content"> | |
| <p>Dreamy, melancholic, haunting.</p><p>I'm a big Biosphere fan, but this took me a couple of tries to get into. Though similar to some of his work, such as <a href="https://biosphere.bandcamp.com/album/shenzhou-reissue-with-bonus-album">Shenzhou</a>, it's still different from his normal output.</p> | |
| <p>The more I listen the higher it climbs in my favourite albums list.</p> | |
| <p class="tag-row"> | |
| <i class="fa fa-tag"></i> <a href="https://davidjohnmead.com/tag/listen" class="p-category" rel="tag">#listen</a> <a href="https://davidjohnmead.com/tag/music" class="p-category" rel="tag">#music</a> <a href="https://davidjohnmead.com/tag/instrumental" class="p-category" rel="tag">#instrumental</a></p> | |
| </section> | |
| <!-- Start syndication --> | |
| <!-- Shows where this has been syndicated to --> | |
| <div id="posse"> | |
| <p>Also on:</p> | |
| <ul> | |
| <li><a href="https://twitter.com/davidmead/status/1092629751561220096" rel="syndication" class="u-syndication twitter"><i class="fab fa-twitter"></i> | |
| @davidmead</a></li> | |
| <li><a href="https://www.flickr.com/photos/davidmead/46075758015/" rel="syndication" class="u-syndication flickr"><i class="fab fa-flickr"></i> | |
| David Mead</a></li> | |
| </ul> | |
| </div> | |
| <!-- Ends syndication --> | |
| <!-- Starts annotations --> | |
| <!-- Comments, likes, and reposts show up here as "annotations" to the post --> | |
| <section id="annotations" class="width spacing grey02 center"> | |
| <h1>Comments and stars</h1> | |
| <article class="annotation width spacing grey03 center"> | |
| <p><a href="https://twitter.com/Nycteris" class="icon-container"><img alt="" src="https://davidjohnmead.com/service/web/imageproxy/aHR0cHM6Ly9wYnMudHdpbWcuY29tL3Byb2ZpbGVfaW1hZ2VzLzEwNzY1NTc4MDMwNzcyMjY0OTcvNXZ5a2txenkuanBn/300/square"></a></p> | |
| <p><a href="https://twitter.com/Nycteris">Insert Rachel Here</a> liked this post</p> | |
| <footer> | |
| <p><a href="https://twitter.com/davidmead/status/1092629751561220096?known_from=https%3A%2F%2Fbrid-gy.appspot.com%2Flike%2Ftwitter%2Fdavidmead%2F1092629751561220096%2F791252"><time class="" datetime="2019-02-05" title="5 Feb 2019">Feb 05 2019</time></a> on <a href="https://twitter.com/davidmead/status/1092629751561220096?known_from=https%3A%2F%2Fbrid-gy.appspot.com%2Flike%2Ftwitter%2Fdavidmead%2F1092629751561220096%2F791252">twitter.com</a></p> | |
| <!--Start annotation functions--> | |
| <p><button type="button">delete</button></p> | |
| <!--End annotation functions--> | |
| </footer> | |
| </article> | |
| <!-- Start of public comment form --> | |
| <form action="https://davidjohnmead.com/annotation/post" method="post"> | |
| <h2>What do you think?</h2> | |
| <p><label for="comment">Add your comment</label> | |
| <textarea name="body" placeholder="" class="" id="comment"></textarea> | |
| </p> | |
| <p><button type="submit">leave comment</button></p> | |
| </form> | |
| <!-- End of public comment form --> | |
| </section> | |
| <!-- End annotations --> | |
| <!--Start post author (not displayed for single owner)--> | |
| <address class="p-author author h-card vcard"> | |
| <a href="https://davidjohnmead.com/profile/davidmead" class="icon-container"><img class="u-logo logo u-photo photo" alt="" src="https://davidjohnmead.com/file/71f7813df9ad7cade05d1a9671eed446/thumb.jpg"></a><br> | |
| <a class="p-name fn u-url url" href="https://davidjohnmead.com/profile/davidmead">David Mead</a> | |
| <a class="u-url" href="https://davidjohnmead.com/profile/davidmead"> | |
| <!-- This is here to force the hand of your MF2 parser --></a> | |
| </address> | |
| <!--End post author--> | |
| <footer> | |
| <p><a href="https://davidjohnmead.com/profile/davidmead">David Mead</a> published this <a class="u-url url" href="https://davidjohnmead.com/2019/02/12/departed-glories" rel="permalink"><time class="dt-published" datetime="2019-02-12T04:26:09+0000" title="12 Feb 2019">about 16 hours ago</time></a></p> | |
| <!--Start post functions--> | |
| <p><a href="" title="Edit this entry">Edit</a> <button type="button">Delete</button></p> | |
| <!--End post functions--> | |
| <p><span class="annotate-icon"><a class="stars" href="#annotations"><i class="far fa-star" title="Star this!"></i> 0 stars</a></span> <span class="annotate-icon"><a class="comments" href="#annotations"><i class="fa fa-comments"></i> 0 comments</a></span></p> | |
| </footer> | |
| </article> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks nice to me. I'm not personally a huge fan of font-awesome, so it might be nice if that were somehow and option, but I could see this working.