feat: finished PostListView

FediNews/Components/Items/PostListView.razor

@@ -1,20 +1,15 @@
 <article class="link">
     <div class="score">
-        <p>@PostNr.</p>
+        <p class="scoretxt">@PostNr.<a class="upvote">↑</a></p>
-        <p>↑</p>
     </div>
     <div class="content">
-        <div class="head">
+        <p class="urladdr"><a class="title" href="https://git.moonleay.net">This is the title of the post</a>(git.moonleay.net)</p>
-            <a href="https://git.moonleay.net">This is the title of the post</a>
-            <p>(git.moonleay.net)</p>
-        </div>
         <div class="tail">
-            <p>105 pts by <a href="/user/moonleay">moonleay</a> 30 minutes ago | <a>60 comments</a></p>
+            <p class="tailtext">105 points by <a class="user" href="/user/moonleay">moonleay@news.moonleay.net</a>, 1 hour ago with <a class="comments">69 comments</a></p>
         </div>
     </div>
 </article>
 
 @code {
     [Parameter] public int PostNr { get; set; }
-
 }

FediNews/Components/Items/PostListView.razor.css

@@ -2,33 +2,81 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    /*align-items: center;*/
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
+@media(max-width: 600px) {
+    .link {
+        margin-top: 0.9rem !important;
+        margin-bottom: 0.9rem !important;
+    }
+
+    .title {
+        font-size: 1.1rem !important;
+    }
+
+    .scoretxt {
+        font-size: 0.9rem !important;
+    }
+
+    .tailtext {
+        font-size: 0.9rem !important;
+    }
+}
+
 .score {
-    display: flex;
-    flex-direction: row;
-    /*align-items: center;*/
-    margin-right: 0.5rem;
-    min-width: 2.3rem;
-    margin-left: 0;
-
-}
-
-.content {
-
-}
-
-.head {
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-right: 0.3rem;
+    margin-left: 0.2rem;
+    min-width: 2.4rem;
+    text-align: right;
+    text-align: -moz-right;
+    text-align: -webkit-right;
+}
+
+.scoretxt {
+    margin-left: auto;
+    margin-right: 0;
+    color: grey;
+}
+
+.upvote {
+    color: grey;
+    text-decoration: none;
+}
+
+.title {
+    font-size: 1.05rem;
+    line-height: 14pt;
+    margin-right: 0.5rem;
+    color: black;
+    text-decoration: none;
+}
+
+.urladdr {
+    color: grey;
+    font-size: 0.8rem;
 }
 
 .tail {
     display: flex;
     flex-direction: row;
     align-items: center;
+    font-size: 0.8rem;
+}
+
+.user, .comments {
+    text-decoration: underline;
+    color: grey;
+}
+
+.tailtext {
+    color: grey;
+}
+
+.content {
+    margin-right: 0.5rem;
 }