feat: started working on submit page

FediNews/Components/Accounts/LoginComponent.razor

@@ -0,0 +1,21 @@
+<section class="LoginSection">
+    <h3>Login</h3>
+    <div class="login">
+        <div class="field">
+            <p>username / email</p>
+            <input type="text" spellcheck="false" autocapitalize="none"/>
+        </div>
+        <div class="field">
+            <p>password</p>
+            <input type="password"/>
+        </div>
+        <div>
+            <button class="btn" type="button">login</button>
+            <a class="forgot" href="/forgot">Forgot password?</a>
+        </div>
+    </div>
+</section>
+
+@code {
+
+}

FediNews/Components/Accounts/LoginComponent.razor.css

@@ -0,0 +1,14 @@
+.LoginSection {
+    margin: 0 auto;
+}
+
+.field {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.btn {
+    margin-right: auto;
+    margin-left: 0;
+    text-align: right;
+}

FediNews/Components/Accounts/RegisterComponent.razor

@@ -0,0 +1,28 @@
+<section class="RegisterSection">
+    <h3>Register</h3>
+    <div class="register">
+        <div class="field">
+            <p>username</p>
+            <input type="text" spellcheck="false" autocapitalize="none"/>
+        </div>
+        <div class="field">
+            <p>email (optional)</p>
+            <input type="text" spellcheck="false" autocapitalize="none"/>
+        </div>
+        <div class="field">
+            <p>password</p>
+            <input type="password"/>
+        </div>
+        <div>
+            @* <div> *@
+            @*     <input type="checkbox" id="agree2rules" name="agree2rules"/> *@
+            @*     <label for="agree2rules">I've read the <a>rules</a>, <a>legal</a> and <a>privacy policy</a> and I agree to them.</label> *@
+            @* </div> *@
+            <button class="btn" type="button">register</button>
+        </div>
+    </div>
+</section>
+
+@code {
+
+}

FediNews/Components/Accounts/RegisterComponent.razor.css

@@ -0,0 +1,14 @@
+.RegisterSection {
+    margin: 0 auto;
+}
+
+.field {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.btn {
+    margin-right: auto;
+    margin-left: 0;
+    text-align: right;
+}

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;
 }

FediNews/Components/Layout/Footer.razor

@@ -1,5 +1,8 @@
-<footer>
+<footer class="footer">
-    <p></p>
+    <div class="footerline"></div>
+    <div class="content">
+        <p class="footertxt"><a href="/guidelines">Guidelines</a> | <a href="/rules">Rules</a> | <a href="https://git.moonleay.net/Websites/FediNews">Code</a> | <a href="/modlog">Modlog</a> | <a href="/legal">Legal</a> | <a href="/imprint">Imprint</a> | <a href="/privacy-policy">Privacy Policy</a></p>
+    </div>
 </footer>
 
 @code {

FediNews/Components/Layout/Footer.razor.css

@@ -0,0 +1,36 @@
+.footer {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem auto auto;
+}
+
+.footerline {
+    display: flex;
+    width: 100%;
+    height: 2px;
+    background-color: #8422e8;
+}
+
+.footertxt a {
+    color: grey;
+    text-decoration: none;
+    font-size: 0.7rem;
+}
+
+.footertxt a:hover {
+    text-decoration: underline;
+}
+
+.footertxt {
+    color: grey;
+    font-size: 0.8rem;
+}

FediNews/Components/Layout/MainLayout.razor

@@ -4,10 +4,12 @@
     <NavBar/>
 
     <main>
-        <article class="content px-4">
+        <div class="content px-4">
             @Body
-        </article>
+        </div>
     </main>
+
+    <Footer/>
 </div>
 
 <div id="blazor-error-ui">

FediNews/Components/Layout/MainLayout.razor.css

@@ -3,13 +3,17 @@
     flex-direction: column;
     align-content: center;
 
-    max-width: 1000px;
+    /*min-width: 600px;*/
+    width: 85%;
     margin: 8px auto auto;
     background-color: #f6f6ef;
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 600px) {
+    .page {
         margin: 0 auto auto;
+        width: 100%;
+    }
 }
 
 #blazor-error-ui {
@@ -24,9 +28,9 @@
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
+#blazor-error-ui .dismiss {
     cursor: pointer;
     position: absolute;
     right: 0.75rem;
     top: 0.5rem;
-    }
+}

FediNews/Components/Layout/NavBar.razor

@@ -1,8 +1,8 @@
-<nav>
+<nav class="navigation">
-    <div class="navigation">
     <a class="logo" href="/">
         <img src="logo.png" alt="F"/>
     </a>
+    <div class="pagenav">
         <a class="name" href="/"><span>Fedi News</span></a>
         <div class="navlinks">
             <a class="new" href="/new">new</a>
@@ -11,10 +11,10 @@
             <span>|</span>
             <a class="submit" href="/submit">submit</a>
         </div>
+    </div>
     <div class="account">
         <a href="/login">login</a>
     </div>
-    </div>
 </nav>
 
 @code {

FediNews/Components/Layout/NavBar.razor.css

@@ -1,6 +1,5 @@
 nav {
     display: flex;
-    flex-direction: column;
     background-color: #8422e8;
     position: sticky;
     color: white !important;
@@ -29,6 +28,14 @@ nav {
     align-items: center;
 }
 
+@media(min-width: 601px) {
+    .pagenav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
 .name {
     font-weight: bolder;
     margin-right: 0.6rem;
@@ -43,6 +50,11 @@ nav {
 
 .navlinks a {
     color: white;
+    text-decoration: none;
+}
+
+.navlinks a:hover {
+    text-decoration: underline !important;
 }
 
 .account {

FediNews/Components/Pages/Account/Login.razor

@@ -0,0 +1,14 @@
+@page "/login"
+
+<PageTitle>Login | Fedi News</PageTitle>
+
+<div class="accountManagement">
+    <LoginComponent/>
+    <div class="seperatorVert"></div>
+    <div class="seperatorHoriz"></div>
+    <RegisterComponent/>
+</div>
+
+@code {
+
+}

FediNews/Components/Pages/Account/Login.razor.css

@@ -0,0 +1,37 @@
+.accountManagement {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-top: 7.2px;
+}
+
+@media (max-width: 600px) {
+    .accountManagement {
+        flex-direction: column;
+    }
+
+    .seperatorVert {
+        display: none !important;
+    }
+
+    .seperatorHoriz {
+        display: flex !important;
+    }
+}
+
+.seperatorVert {
+    display: flex;
+    height: 100px;
+    background-color: grey;
+    margin: 0 2rem;
+    width: 2px;
+}
+
+.seperatorHoriz {
+    display: none;
+    width: 100px;
+    height: 2px;
+    background-color: grey;
+    margin: 2rem 0;
+}

FediNews/Components/Pages/Content/Submit.razor

@@ -0,0 +1,24 @@
+@page "/submit"
+<article>
+    <h3>Submit to Fedi News</h3>
+    <div>
+        <p>title</p>
+        <input type="text" />
+    </div>
+    <div>
+        <p>url</p>
+        <input type="text"/>
+    </div>
+    <div>
+        <p>comment</p>
+        <textarea></textarea>
+    </div>
+    <div>
+        <button >submit</button>
+    </div>
+    <p>Leave url blank to submit a text-only post. If there is no url, the comment will appear directly under the title. A comment is optional, if a url is present.</p>
+</article>
+
+@code {
+
+}

FediNews/Components/_Imports.razor

@@ -9,3 +9,4 @@
 @using FediNews
 @using FediNews.Components
 @using FediNews.Components.Items
+@using FediNews.Components.Accounts;