Merge redesign into main (#111)

views/partials/comment.hbs

@@ -1,30 +1,32 @@
-<div class="comment flex flex-col">
-  <div class="comment__user">
+<div class="flex flex-col gap-2">
+  <div class="flex gap-2 items-center">
     {{#noteq this.User.Username "[deleted]"}}
-    <img src="{{this.User.Avatar}}" class="pfp" width="24" height="24" loading="lazy">
+    <img src="{{this.User.Avatar}}" class="rounded-full" width="24" height="24" loading="lazy">
     <a href="/user/{{this.User.Username}}">
-      <p class="comment__user__username"><b>{{this.User.Username}}</b></p>
+      <p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>{{this.User.Username}}</b></p>
     </a>
     {{/noteq}}
     {{#equal this.User.Username "[deleted]"}}
-    <p class="comment__user__username"><b>[deleted]</b></p>
+    <p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>[deleted]</b></p>
     {{/equal}}
   </div>
   <div>
     <p>{{{this.Comment}}}</p>
-    <div>
+    <div class="flex gap-2">
       <span title="{{this.CreatedAt}}">{{this.RelTime}}</span>
       {{#if this.DeletedAt}}
-      <span class="comment__updatedDate">(deleted {{this.DeletedAt}})</span>
+      <span class="text-md">(deleted {{this.DeletedAt}})</span>
       {{/if}}
       |
-      <img class="icon" src="/static/icons/chevron-up.svg" alt="Likes"> {{this.Upvotes}}
-      <img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes"> {{this.Downvotes}}
+      <img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px"> {{this.Upvotes}}
+      <img class="invert icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px"> {{this.Downvotes}}
     </div>
   </div>
-  <div class="replies">
+  {{#if this.Comments}}
+  <div class="ml-4 p-2 border-solid border-l-2 border-slate-400">
     {{#each this.Comments}}
     {{> partials/comment }}
     {{/each}}
   </div>
+  {{/if}}
 </div>

views/partials/footer.hbs

@@ -1,4 +1,14 @@
-<footer class="flex flex-center">
-  <a href="/privacy">Privacy</a>
-  <a href="https://codeberg.org/video-prize-ranch/rimgo" rel="noreferrer">Source Code</a>
+<footer class="mt-24 mb-12">
+  <div class="mb-1 flex gap-4 font-bold">
+    <a href="/">
+      <div class="flex">
+        <img src="/static/img/rimgo.svg" class="invert hue-rotate-180" width="32" height="32" />
+        <h1 class="text-md font-extrabold">rimgo</h1>
+      </div>
+    </a>
+    <a href="https://codeberg.org/rimgo/rimgo">Source Code</a>
+    <a href="/about">About</a>
+    <a href="/privacy">Privacy</a>
+  </div>
+  <p class="text-md text-slate-200">rimgo does not allow uploads or host any content. Issues with content should be reported to Imgur.</p>
 </footer>

views/partials/head.hbs

@@ -12,5 +12,4 @@
 <meta name="msapplication-config" content="/static/favicon/browserconfig.xml">
 <meta name="theme-color" content="#ffffff">
 
-<link rel="stylesheet" href="/static/css/normalize.css"/>
-<link rel="stylesheet" href="/static/css/base.css"/>
+<link rel="stylesheet" href="/static/app.css" />

views/partials/header.hbs

@@ -1,8 +0,0 @@
-<nav class="flex flex-center">
-  <a href="/">
-    <img src="/static/img/rimgo.svg" width="64" height="64" class="logo" alt="Logo">
-  </a>
-  <a href="/">
-    <h2>rimgo</h2>
-  </a>
-</nav>

views/partials/nav.hbs

@@ -0,0 +1,6 @@
+<a href="/">
+  <nav class="m-4 flex items-center justify-center">
+    <img src="/static/img/rimgo.svg" class="invert hue-rotate-180" width="72" height="72" />
+    <h1 class="font-extrabold text-3xl">rimgo</h1>
+  </nav>
+</a>

views/partials/post.hbs

@@ -1,5 +1,5 @@
 <a href="{{Link}}">
-  <div class="post">
+  <div class="bg-slate-600 rounded-lg">
     {{#equal Cover.Type "video"}}
     <video controls loop poster="/{{Cover.Id}}.webp" preload="none" width="100%" height="100%">
       <source src="{{Cover.Url}}" type="video/mp4" />
@@ -8,18 +8,18 @@
     {{#equal Cover.Type "image"}}
     <img src="{{Cover.Url}}" loading="lazy" width="100%" height="100%">
     {{/equal}}
-    <p class="post__title">{{Title}}</p>
+    <p class="m-2 text-ellipsis whitespace-nowrap overflow-hidden">{{Title}}</p>
     <div class="flex gap-2 p-2">
-      <div>
-        <img class="icon" src="/static/icons/chevron-up.svg" alt="Points">
+      <div class="flex gap-1">
+        <img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Points" width="18px" height="18px">
         {{Points}}
       </div>
-      <div>
-        <img class="icon" src="/static/icons/message-square.svg" alt="Comments">
+      <div class="flex gap-1">
+        <img class="invert icon" src="/static/icons/PhChat.svg" alt="Comments" width="18px" height="18px">
         {{Comments}}
       </div>
-      <div>
-        <img class="icon" src="/static/icons/eye.svg" alt="Views">
+      <div class="flex gap-1">
+        <img class="invert icon" src="/static/icons/PhEye.svg" alt="Views" width="18px" height="18px">
         {{Views}}
       </div>
     </div>

views/partials/privacy.hbs

@@ -0,0 +1,48 @@
+{{#if config.Privacy.not_collected}}
+    <div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
+      <img class="invert" src="/static/icons/PhCheckCircle.svg" alt="" height="36" width="36" />
+      <h2 class="font-bold text-xl">Data not collected</h2>
+      <p class="text-lg">This instance does not collect any data.</p>
+    </div>
+    {{/if}}
+    {{#unless config.Privacy.set}}
+    <div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
+      <img class="invert" src="/static/icons/PhWarning.svg" alt="" height="36" width="36" />
+      <h2 class="font-bold text-xl">No details provided</h2>
+      <p class="text-lg">The operator of this instance will be required to provide privacy details to be added to the instance list.</p>
+    </div>
+    {{else}}
+    {{#unless config.Privacy.not_collected}}
+    <div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
+      <img class="invert" src="/static/icons/PhWarningCircle.svg" alt="" height="36" width="36" />
+      <h2 class="font-bold text-xl">Data collected</h2>
+      <p class="text-lg">The following data may be collected:</p>
+      <ul class="flex flex-col">
+        {{#if config.Privacy.ip}}
+        <li class="flex gap-1">
+          <img class="invert" src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
+          Internet address (IP Address)
+        </li>
+        {{/if}}
+        {{#if config.Privacy.url}}
+        <li class="flex gap-1">
+          <img class="invert" src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
+          Page viewed (Request URL)
+        </li>
+        {{/if}}
+        {{#if config.Privacy.device}}
+        <li class="flex gap-1">
+          <img class="invert" src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
+          Device Type (User agent)
+        </li>
+        {{/if}}
+        {{#if config.Privacy.diagnostics}}
+        <li class="flex gap-1">
+          <img class="invert" src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
+          Diagnostics
+        </li>
+        {{/if}}
+      </ul>
+    </div>
+    {{/unless}}
+    {{/unless}}