CSS cleanup

static/css/album.css

@@ -1,17 +1,11 @@
-h1 {
+p {
-  margin: 0;
+  margin: 0.4rem 0;
 }
 
 .pfp {
   border-radius: 100%;
 }
 
-.post__media {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
 .post__media video,
 .post__media img {
   margin: 1em 0;
@@ -24,20 +18,7 @@ h1 {
   align-self: flex-start;
 }
 
-.imageMeta__wrapper,
-.imageMeta__item,
-.imageMeta {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.imageMeta__item {
-  gap: 4px;
-}
-
 .imageMeta__wrapper {
-  gap: 1rem;
   margin-top: 0.5em;
 }
 

static/css/base.css

@@ -1,41 +1,55 @@
+h1, h2, h3 {
+  margin: 0;
+}
+
 a {
   color: #E0E0E0;
   font-weight: 600;
   text-decoration: none;
 }
 
-a > h2 {
-  color: white;
-}
-
-h2, h3, p {
-  margin: 0;
-}
-
 body {
   background-color: #212121;
   color: white;
   font-size: 18px;
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; 
+  margin: 0 24vw;
 }
 
 nav {
-  display: flex;
+  margin: 0.75rem;
-  align-items: center;
 }
 
 .logo, .icon {
   filter: invert(1) hue-rotate(180deg);
 }
 
-section,
+.text-center {
-header,
+  text-align: center;
-main {
-  margin: 0 24vw;
 }
 
-.errorTitle {
+.flex {
-  text-align: center;
+  display: flex;
+}
+.flex-center {
+  align-items: center;
+  justify-content: center;
+}
+.flex-center-y {
+  align-items: center;
+}
+.flex-col {
+  flex-direction: column;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-4 {
+  gap: 1rem;
 }
 
 .posts {
@@ -65,12 +79,6 @@ main {
   overflow: hidden;
 }
 
-.post__meta {
-  padding: 6px;
-  display: flex;
-  gap: 10px;
-}
-
 .pageSelector {
   display: flex;
   justify-content: space-between;
@@ -78,15 +86,12 @@ main {
 }
 
 footer {
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
   gap: 5rem;
   margin: 2em 0;
 }
 
 @media only screen and (max-width: 812px) {
-  section, header, main {
+  body {
     margin: 0 !important;
   }
 }

static/css/comments.css

@@ -1,14 +1,10 @@
 .comment {
-  display: flex;
-  flex-direction: column;
   gap: 0.5em;
 }
 
 .comments {
   margin-top: 1em;
   gap: 0.25em;
-  display: flex;
-  flex-direction: column;
 }
 
 .replies {

static/css/embed.css

@@ -13,7 +13,7 @@ body {
 
 .media {
   display: flex;
-  overflow: scroll;
+  overflow: auto;
   gap: 1rem;
   align-items: center;
   height: 90vh;
@@ -33,15 +33,8 @@ body {
   width: 100%;
 }
 
-.logoContainer {
-  display: flex;
-  align-items: center;
-}
-
 .views {
-  display: flex;
   gap: 4px;
-  align-items: center;
 }
 
 .postDetails {

static/css/error.css

@@ -6,12 +6,6 @@ h2 {
   margin-bottom: 0;
 }
 
-main {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
 code {
   display: block;
   padding: 0.75em;

static/css/frontpage.css

@@ -1,8 +1,13 @@
+h1, h2, h3 {
+  margin: 0.4em 0;
+}
+
 code {
-  background-color: #424242;
+  padding: 0.15rem;
-  padding: 2px;
+  font-size: 0.95em;
+  background-color: #383838;
   border-radius: 4px;
-  font-size: 0.9em;
+  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 }
 
 summary {

static/css/normalize.css

@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html{line-height:1.2;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

static/css/privacy.css

@@ -1,11 +1,11 @@
-main {
-  margin: 0 24vw
-}
-
 p {
   margin: 1em 0
 }
 
+h1, h2, h3 {
+  margin: 0.4em 0;
+}
+
 ul {
   list-style: outside none none;
   padding: 0;
@@ -17,19 +17,13 @@ ul {
   height: 36px;
 }
 
-.badgeWrapper {
+.badge {
   margin: 0 10vw
 }
 
-.badge {
+.badge div {
   background-color: #3b3b3b;
   border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25em;
-  padding: 1em;
-  text-align: center;
 }
 
 .badge h2 {
@@ -47,15 +41,4 @@ ul {
   user-select: none;
   color: #2b95f2;
   font-weight: 700;
-}
-
-.addInfo {
-  margin-top: 1em;
-}
-
-@media only screen and (max-width: 812px) {
-  .badgeWrapper,
-  main {
-    margin: 0
-  }
 }

static/css/tag.css

@@ -1,4 +1,4 @@
-main {
+body {
   margin: 0 12vw;
 }
 
@@ -7,22 +7,7 @@ main {
   border-radius: 12px;
 }
 
-.tagMeta__info {
+a {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-}
-
-.tagMeta__sort {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tagMeta__sort a {
   font-weight: 400;
   color: #fff;
 }

static/css/user.css

@@ -1,4 +1,4 @@
-main {
+body {
   margin: 0 12vw;
 }
 
@@ -7,16 +7,6 @@ main {
   border-radius: 12px;
 }
 
-.userMeta__upper {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.userMeta__upper__bio {
-  margin-top: 1em;
-}
-
 .pfp {
   border-radius: 100%;
 }

views/embed.hbs

@@ -29,12 +29,12 @@
         <h3>{{post.Title}}</h3>
       </a>
       {{/if}}
-      <div class="views">
+      <div class="views flex flex-center">
         <img class="icon" src="/static/icons/eye.svg" alt="Views">
         <p>{{post.Views}}</p>
       </div>
     </div>
-    <div class="logoContainer">
+    <div class="flex flex-center">
       <a href="/{{post.Id}}">
         <img src="/static/img/rimgo.svg" width="32px" height="32px" class="logo">
       </a>

views/errors/404.hbs

@@ -4,6 +4,8 @@
 <head>
   {{> 'partials/head' }}
 
+  <link rel="stylesheet" href="/static/css/error.css" />
+
   <title>404 Not Found - rimgo</title>
 </head>
 

views/errors/429.hbs

@@ -4,6 +4,8 @@
 <head>
   {{> 'partials/head' }}
 
+  <link rel="stylesheet" href="/static/css/error.css" />
+
   <title>Rate limited by Imgur - rimgo</title>
 </head>
 

views/frontpage.hbs

@@ -16,7 +16,6 @@
   <main>
     <p>An alternative frontend for Imgur. Originally based on <a href="https://codeberg.org/3np/rimgu" rel="noreferrer">rimgu</a>.</p>
 
-    <br>
     <h2>Features</h2>
     <ul>
       <li>Lightweight</li>
@@ -29,7 +28,6 @@
     <h2>Comparison</h2>
     <p>Comparing rimgo to Imgur.</p>
 
-    <br>
     <h3>Speed</h3>
     <p>Tested using <a href="https://pagespeed.web.dev/" rel="nofollow noreferrer">Google PageSpeed Insights</a>.</p>
     <table>
@@ -60,33 +58,25 @@
       </tr>
     </table>
 
-    <br>
     <h3>Privacy</h3>
     <p>Imgur collects information about your device and uses tracking cookies for advertising, this is mentioned in their <a href="https://imgur.com/privacy/" rel="nofollow noreferrer">privacy policy</a>. <a href="https://themarkup.org/blacklight" rel="nofollow noreferrer">Blacklight</a> found 31 trackers and 87 third-party cookies.</p>
-    <br>
     <p>See what cookies and trackers Imgur uses and where your data gets sent: <a href="https://themarkup.org/blacklight?url=imgur.com" rel="nofollow noreferrer">https://themarkup.org/blacklight?url=imgur.com</a></p>
 
-    <br> 
     <h2>Usage</h2>
     <p>Just replace imgur.com or i.imgur.com with <code>{{domain}}</code> (add stack/ before the media ID for i.stack.imgur.com). You can setup automatic redirects using <a href="https://github.com/libredirect/libredirect" rel="nofollow noreferrer">LibRedirect</a> (recommended) or <a href="https://github.com/einaregilsson/Redirector" rel="nofollow noreferrer">Redirector</a>.</p>
 
-    <br>
     {{#if force_webp}}
     <p>To download images as their original filetype, add <code>?no_webp=1</code> to the end of the image URL.</p>
     {{/if}}
 
-    <br>
     <h2>Automatically redirect links</h2>
     
-    <br>
     <h3>LibRedirect</h3>
     <p>Use <a href="https://github.com/libredirect/libredirect" rel="nofollow noreferrer">LibRedirect</a> to automatically redirect Imgur links to rimgo!</p>
 
-    <br>
     <h3>GreaseMonkey script</h3>
     <p>There is a script to redirect Imgur links to rimgo. <a rel="noreferrer" href="https://codeberg.org/zortazert/GreaseMonkey-Redirect/src/branch/main/imgur-to-rimgo.user.js">https://codeberg.org/zortazert/GreaseMonkey-Redirect/src/branch/main/imgur-to-rimgo.user.js</a></p>
 
-    <br>
     <h3>Redirector</h3>
     <p>You can use the <a href="https://github.com/einaregilsson/Redirector" rel="nofollow noreferrer">Redirector</a> extension to redirect Imgur links to rimgo with the configuration below:</p>
     <ul>

views/gifv.hbs

@@ -18,7 +18,7 @@
   </div>
   <div class="postMeta">
     <a href="/{{id}}.mp4" download="{{id}}.mp4">download</a>
-    <div class="logoContainer">
+    <div class="flex flex-center">
       <a href="/{{post.Id}}">
         <img src="/static/img/rimgo.svg" width="32px" height="32px" class="logo">
       </a>

views/partials/comment.hbs

@@ -1,4 +1,4 @@
-<div class="comment">
+<div class="comment flex flex-col">
   <div class="comment__user">
     {{#noteq this.User.Username "[deleted]"}}
     <img src="{{this.User.Avatar}}" class="pfp" width="24" height="24" loading="lazy">
@@ -7,20 +7,20 @@
     </a>
     {{/noteq}}
     {{#equal this.User.Username "[deleted]"}}
-      <p class="comment__user__username"><b>[deleted]</b></p>
+    <p class="comment__user__username"><b>[deleted]</b></p>
     {{/equal}}
   </div>
   <div>
-    {{{this.Comment}}}
+    <p>{{{this.Comment}}}</p>
-    <p>
+    <div>
       <span title="{{this.CreatedAt}}">{{this.RelTime}}</span>
       {{#if this.DeletedAt}}
       <span class="comment__updatedDate">(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}}
-    </p>
+    </div>
   </div>
   <div class="replies">
     {{#each this.Comments}}

views/partials/footer.hbs

@@ -1,4 +1,4 @@
-<footer>
+<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>

views/partials/head.hbs

@@ -12,4 +12,5 @@
 <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"/>

views/partials/header.hbs

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

views/partials/post.hbs

@@ -9,18 +9,19 @@
     <img src="{{Cover.Url}}" loading="lazy" width="100%" height="100%">
     {{/equal}}
     <p class="post__title">{{Title}}</p>
-    <div class="post__meta">
+    <div class="flex gap-2 p-2">
-      <p>
+      <div>
         <img class="icon" src="/static/icons/chevron-up.svg" alt="Points">
         {{Points}}
-      </p>
+      </div>
-      <p>
+      <div>
         <img class="icon" src="/static/icons/message-square.svg" alt="Comments">
         {{Comments}}
-      <p>
+      </div>
+      <div>
         <img class="icon" src="/static/icons/eye.svg" alt="Views">
         {{Views}}
-      </p>
+      </div>
     </div>
   </div>
 </a>

views/post.hbs

@@ -25,7 +25,7 @@
   </header>
   
   <main>
-    <div class="imageMeta__wrapper">
+    <div class="flex flex-center-y gap-4">
       {{#if post.User.Username}}
       <a href="/user/{{post.User.Username}}" class="user">
         <img src="{{post.User.Avatar}}" class="pfp" width="36" height="36" />
@@ -34,17 +34,17 @@
         </p>
       </a>
       {{/if}}
-      <div class="imageMeta">
+      <div class="flex flex-center-y gap-2">
-        <div class="imageMeta__item">
+        <div class="flex flex-center gap-2">
           <img class="icon" src="/static/icons/eye.svg" alt="Views">
           <p>{{post.Views}}</p>
         </div>
         {{#if post.SharedWithCommunity}}
-        <div class="imageMeta__item">
+        <div class="flex flex-center gap-2">
           <img class="icon" src="/static/icons/chevron-up.svg" alt="Likes">
           <p>{{post.Upvotes}}</p>
         </div>
-        <div class="imageMeta__item">
+        <div class="flex flex-center gap-2">
           <img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes">
           <p>{{post.Downvotes}}</p>
         </div>
@@ -52,7 +52,7 @@
       </div>
     </div>
 
-    <div class="post__media">
+    <div class="post__media flex flex-center flex-col">
       {{#each post.Media}}
       {{#if this.Title}}
       <h4>{{this.Title}}</h4>
@@ -100,7 +100,7 @@
         <h3>Comments ({{post.Comments}})</h3>
         <span class="comments__expandBtn__icon"></span>
       </label>
-      <div class="comments">
+      <div class="comments flex flex-col">
         {{#each comments}}
         {{> partials/comment }}
         {{/each}}

views/privacy.hbs

@@ -26,8 +26,8 @@
     {{/if}}
 
     {{#if config.Privacy.not_collected}}
-    <div class="badgeWrapper">
+    <div class="badge">
-      <div class="badge">
+      <div class="flex flex-col flex-center p-2 gap-2">
         <img class="icon largeIcon" src="/static/icons/check-circle.svg" alt="">
         <h2>Data Not Collected</h2>
         <p>The instance operator does not collect any data from this instance.</p>
@@ -36,8 +36,8 @@
     {{/if}}
 
     {{#unless config.Privacy.set}}
-    <div class="badgeWrapper">
+    <div class="badge">
-      <div class="badge">
+      <div class="flex flex-col flex-center p-2 gap-2">
         <img class="icon largeIcon" src="/static/icons/alert-triangle.svg" alt="">
         <h3>No Details Provided</h3>
         <p>The operator of this instance will be required to provide privacy details to be added to the instance list.
@@ -46,8 +46,8 @@
     </div>
     {{else}}
     {{#unless config.Privacy.not_collected}}
-    <div class="badgeWrapper">
+    <div class="badge">
-      <div class="badge">
+      <div class="flex flex-col flex-center p-2 gap-2">
         <img class="icon largeIcon" src="/static/icons/alert-circle.svg" alt="">
         <h2>Data Collected</h2>
         <p>The following data may be collected:</p>

views/tag.hbs

@@ -15,11 +15,11 @@
 
   <main>
     <div class="tagMeta" style="background-image: url('{{tag.Background}}');">
-      <div class="tagMeta__info">
+      <div class="flex flex-center flex-col text-center">
         <h2>{{tag.Display}}</h2>
         <p>{{tag.PostCount}} posts</p>
       </div>
-      <div class="tagMeta__sort">
+      <div class="flex flex-col gap-2">
         {{#equal tag.Sort "popular"}}
         <a href="?sort=popular"><b>Popular</b></a>
         <a href="?sort=newest">Newest</a>

views/user.hbs

@@ -15,14 +15,14 @@
 
   <main>
     <div class="userMeta" style="background-image: url('{{user.Cover}}');">
-      <div class="userMeta__upper">
+      <div class="flex flex-center-y gap-2">
         <img class="pfp" src="{{user.Avatar}}" width="72" height="72">
         <div>
           <h2>{{user.Username}}</h2>
           <p>{{user.Points}} pts · {{user.CreatedAt}}</p>
         </div>
       </div>
-      <p class="userMeta__upper__bio">{{user.Bio}}</p>
+      <p>{{user.Bio}}</p>
     </div>
 
     <div class="posts">