feat: minor css and nim layout changes

also added spacing to navbar (independent of profile-banner)

public/css/themes/black.css

@@ -1,30 +1,30 @@
 body {
-    --bg_color: #000000;
+    --bg_color: #000;
-    --fg_color: #FFFFFF;
+    --fg_color: #EEE;
-    --fg_faded: #FFFFFFD4;
+    --fg_faded: #EEEEEED4;
     --fg_dark: var(--accent);
     --fg_nav: var(--accent);
 
     --bg_panel: #0C0C0C;
     --bg_elements: #000000;
     --bg_overlays: var(--bg_panel);
-    --bg_hover: #131313;
+    --bg_hover: #0F0F0F;
 
-    --grey: #E2E2E2;
+    --grey: #939393;
-    --dark_grey: #4E4E4E;
+    --dark_grey: #404040;
-    --darker_grey: #272727;
+    --darker_grey: #1F1F1F;
-    --darkest_grey: #212121;
+    --darkest_grey: #151515;
-    --border_grey: #7D7D7D;
+    --border_grey: #333333;
 
     --accent: #FF6C60;
     --accent_light: #FFACA0;
-    --accent_dark: #909090;
+    --accent_dark: #707070;
-    --accent_border: #FF6C6091;
+    --accent_border: #FF6C6060;
 
     --play_button: var(--accent);
     --play_button_hover: var(--accent_light);
 
-    --more_replies_dots: #A7A7A7;
+    --more_replies_dots: #808080;
     --error_red: #420A05;
 
     --verified_blue: #1DA1F2;

public/md/about.md

@@ -1,5 +1,7 @@
 # About
 
+This Nitter instance is hosted by [Kuuro.net](https://kuuro.net/services)
+
 Nitter is a free and open source alternative Twitter front-end focused on
 privacy and performance. The source is available on GitHub at
 <https://github.com/zedeus/nitter>
@@ -43,6 +45,28 @@ Twitter account.
 
 ## Donating
 
+You can either donate to me for hosting this instance, or to the Nitter project for development.
+
+Donating to me helps keep this Nitter instance running for everyone. Donating to the Nitter project helps the development of the software itself. Both are appreciated!
+
+### Donating to me
+<br>
+
+#### Credit/debit card and bank transfer
+
+Buy Me A Coffee: <https://buymeacoffee.com/kuu7o>
+
+#### Cryptocurrency
+
+Monero: 44AAFK5nJEM8CMFGHh1DnPDVLnsAXu9y7VcKTAar5F1AGwQcoCi5hwC22efxGWsp4HfwRRwRRMj2X5ypTo3vkjpJPMxwynZ \
+Bitcoin: bc1q8uzvmm3y23kfmvmvva2n2uptqty5hzmlg2vjyt \
+Ethereum: 0xe7Bf8f78Ffc92F4b50f879AEc7Fd41A463DC9c28 \
+Litecoin: LaqWXCsNBinE5ho2cUJiDZ4MFmPH6QYZ4s \
+Wownero: Wo4NPaJdM3yETa2JXfjJbgKbD4BHXSEsk4Vj6F5gbcb99yaG7fAgZQGLp2EwvNDqE4QKWm63mtWfvfkbbX8dipeR31zPxDbsd \
+Tron: TMbMarrcsiVVgB5CRMqhShcGHMXYozpocg
+
+### Donating to the Nitter project
+
 Liberapay: https://liberapay.com/zedeus \
 Patreon: https://patreon.com/nitter \
 BTC: bc1qpqpzjkcpgluhzf7x9yqe7jfe8gpfm5v08mdr55 \
@@ -53,4 +77,4 @@ ZEC: u1vndfqtzyy6qkzhkapxelel7ams38wmfeccu3fdpy2wkuc4erxyjm8ncjhnyg747x6t0kf0faq
 
 ## Contact
 
-Feel free to join our [Matrix channel](https://matrix.to/#/#nitter:matrix.org).
+Feel free to join Nitter [Matrix channel](https://matrix.to/#/#nitter:matrix.org).

src/sass/index.scss

@@ -114,7 +114,7 @@ ul {
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
-    padding-top: 50px;
+    padding-top: 55px;
     margin: auto;
     min-height: 100vh;
 }

src/sass/profile/_base.scss

@@ -15,7 +15,7 @@
 }
 
 .profile-banner {
-    margin: 4px 0 4px 0;
+    margin-bottom: 5px;
     background-color: var(--bg_panel);
 
     a {

src/sass/tweet/_base.scss

@@ -72,6 +72,7 @@
     display: flex;
     flex-shrink: 0;
     margin-left: 4px;
+    font-size: smaller;
 }
 
 .tweet-date a, .username, .show-more a {
@@ -83,6 +84,7 @@
     margin-top: 5px;
     color: var(--grey);
     pointer-events: all;
+    font-size: smaller;
 }
 
 .tweet-avatar {
@@ -172,7 +174,8 @@
 
 .replying-to {
     color: var(--fg_faded);
-    margin: -2px 0 4px;
+    margin: -2px 0 5px;
+    font-size: smaller;
 
     a {
         pointer-events: all;
@@ -200,15 +203,22 @@
 
 .tweet-stats {
     margin-bottom: -3px;
+    padding-top: 5px;
     -webkit-user-select: none;
 
     a {
         pointer-events: all;
     }
+
+    .tweet-published {
+        margin-left: auto;
+        margin-top: 0;
+        font-weight: 400;
+        align-self: center;
+    }
 }
 
 .tweet-stat {
-    padding-top: 5px;
     min-width: 1em;
     margin-right: 0.8em;
 }

src/sass/tweet/thread.scss

@@ -10,15 +10,10 @@
 }
 
 .main-thread {
-    margin-bottom: 20px;
+    margin-bottom: 5px;
     background-color: var(--bg_panel);
 }
 
-.main-tweet, .replies {
-    padding-top: 50px;
-    margin-top: -50px;
-}
-
 .main-tweet .tweet-content {
     font-size: 18px;
 }
@@ -31,13 +26,13 @@
 
 .reply {
     background-color: var(--bg_panel);
-    margin-bottom: 10px;
+    margin-bottom: 5px;
 }
 
 .thread-line {
     .timeline-item::before,
     &.timeline-item::before {
-        background: var(--accent_dark);
+        background: var(--dark_grey);
         content: '';
         position: relative;
         min-width: 3px;

src/views/general.nim

@@ -24,15 +24,14 @@ proc renderNavbar(cfg: Config; req: Request; rss, canonical: string): VNode =
     tdiv(class="inner-nav"):
       tdiv(class="nav-item"):
         a(class="site-name", href="/"): text cfg.title
-
+        a(href="/about"): text "(donate)"
-      a(href="/"): img(class="site-logo", src="/logo.png", alt="Logo")
 
       tdiv(class="nav-item right"):
         icon "search", title="Search", href="/search"
         if cfg.enableRss and rss.len > 0:
           icon "rss", title="RSS Feed", href=rss
         icon "bird", title="Open in Twitter", href=canonical
-        a(href="https://liberapay.com/zedeus"): verbatim lp
+        a(href="https://buymeacoffee.com/kuu7o"): verbatim lp
         icon "info", title="About", href="/about"
         icon "cog", title="Preferences", href=("/settings?referer=" & encodeUrl(path))
 

src/views/tweet.nim

@@ -178,7 +178,7 @@ func formatStat(stat: int): string =
   if stat > 0: insertSep($stat, ',')
   else: ""
 
-proc renderStats(tweet_id: int64; stats: TweetStats; views: string): VNode =
+proc renderStats(tweet_id: int64; stats: TweetStats; views: string; published: string): VNode =
   buildHtml(tdiv(class="tweet-stats")):
     span(class="tweet-stat"): icon "comment", formatStat(stats.replies)
     span(class="tweet-stat"): icon "retweet", formatStat(stats.retweets)
@@ -188,6 +188,8 @@ proc renderStats(tweet_id: int64; stats: TweetStats; views: string): VNode =
       span(class="tweet-stat"): icon "views", formatStat(stats.views)
     if views.len > 0:
       span(class="tweet-stat"): icon "play", insertSep(views, ',')
+    if published.len > 0:
+      span(class="tweet-published"): text published
 
 proc renderReply(tweet: Tweet): VNode =
   buildHtml(tdiv(class="replying-to")):
@@ -338,14 +340,13 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class=""; index=0;
       if tweet.quote.isSome:
         renderQuote(tweet.quote.get(), prefs, path)
 
-      if mainTweet:
+      let published = if mainTweet: getTime(tweet) else: ""
-        p(class="tweet-published"): text &"{getTime(tweet)}"
 
       if tweet.mediaTags.len > 0:
         renderMediaTags(tweet.mediaTags)
 
       if not prefs.hideTweetStats:
-        renderStats(tweet.id, tweet.stats, views)
+        renderStats(tweet.id, tweet.stats, views, published)
 
       if showThread:
         a(class="show-thread", href=("/i/status/" & $tweet.threadId)):