Update README.md

Markdown and Subreddit Sidebars
List Instances as a Table
2020-12-28 18:45:46 -08:00 · 2020-12-28 18:42:46 -08:00 · 2020-12-27 21:46:39 -08:00 · 2020-12-27 15:37:01 -08:00 · 2020-12-27 12:36:10 -08:00 · 2020-12-26 12:43:51 -08:00
16 changed files with 756 additions and 503 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -92,8 +92,8 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b4ca8ce00b267af8ccebbd647de0d61e0674b6e61185cc7a592ff88772bed655"
 dependencies = [
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -266,8 +266,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad26f77093333e0e7c6ffe54ebe3582d908a104e448723eec6d43d08b07143fb"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -345,8 +345,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e5444eec77a9ec2bfe4524139e09195862e981400c4358d3b760cae634e4c4ee"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -356,8 +356,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8d3a45e77e34375a7923b1e8febb049bb011f064714a8e17a1a616fef01da13d"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -561,8 +561,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "41cb0e6161ad61ed084a36ba71fbba9e3ac5aee3606fb607fe08da6acbcf3d8c"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -603,8 +603,8 @@ checksum = "7c5f0096a91d210159eceb2ff5e1c4da18388a170e1e3ce948aac9c8fdbbf595"
 dependencies = [
 "heck",
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -695,8 +695,8 @@ checksum = "77408a692f1f97bcc61dc001d752e00643408fbc922e4d634c655df50d595556"
 dependencies = [
 "proc-macro-hack",
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -753,15 +753,6 @@ dependencies = [
 "version_check 0.9.2",
 ]

-[[package]]
-name = "getopts"
-version = "0.2.21"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "14dbbfd5c71d70241ecf9e6f13737f7b5ce823821063188d7e46c41d371eebd5"
-dependencies = [
- "unicode-width",
-]
-
 [[package]]
 name = "getrandom"
 version = "0.1.15"
@ -807,9 +798,9 @@ checksum = "d7afe4a420e3fe79967a00898cc1f4db7c8a49a9333a29f8a4bd76a253d5cd04"

 [[package]]
 name = "heck"
-version = "0.3.1"
+version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "20564e78d53d2bb135c343b3f47714a56af2061f1c928fdb541dc7b9fdd94205"
+checksum = "87cbf45460356b7deeb5e3415b5563308c0a9b057c85e12b06ad551f98d0a6ac"
 dependencies = [
 "unicode-segmentation",
 ]
@ -972,9 +963,9 @@ checksum = "47be2f14c678be2fdcab04ab1171db51b2762ce6f0a8ee87c8dd4a04ed216135"

 [[package]]
 name = "itoa"
-version = "0.4.6"
+version = "0.4.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc6f3ad7b9d11a0c00842ff8de1b60ee58661048eb8049ed33c73594f359d7e6"
+checksum = "dd25036021b0de88a0aff6b850051563c6516d0bf53f8638938edbb9de732736"

 [[package]]
 name = "js-sys"
@ -1015,14 +1006,13 @@ checksum = "1482821306169ec4d07f6aca392a4681f66c75c9918aa49641a2595db64053cb"

 [[package]]
 name = "libreddit"
-version = "0.2.0"
+version = "0.2.3"
 dependencies = [
 "actix-web",
 "askama",
 "async-recursion",
 "base64 0.13.0",
 "chrono",
- "pulldown-cmark",
 "reqwest",
 "serde",
 "serde_json",
@ -1228,9 +1218,9 @@ dependencies = [

 [[package]]
 name = "parking_lot_core"
-version = "0.8.1"
+version = "0.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d7c6d9b8427445284a09c55be860a15855ab580a417ccad9da88f5a06787ced0"
+checksum = "9ccb628cad4f84851442432c60ad8e1f607e29752d0bf072cbd0baf28aa34272"
 dependencies = [
 "cfg-if 1.0.0",
 "instant",
@ -1271,8 +1261,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "65ad2ae56b6abe3a1ee25f15ee605bacadb9a764edaba9c2bf4103800d4a1895"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1282,8 +1272,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8e8d2bf0b23038a4424865103a4df472855692821aab4e4f5c3312d461d9e5f"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1340,18 +1330,6 @@ dependencies = [
 "unicode-xid 0.2.1",
 ]

-[[package]]
-name = "pulldown-cmark"
-version = "0.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ffade02495f22453cd593159ea2f59827aae7f53fa8323f756799b670881dcf8"
-dependencies = [
- "bitflags",
- "getopts",
- "memchr",
- "unicase",
-]
-
 [[package]]
 name = "quick-error"
 version = "1.2.3"
@ -1369,9 +1347,9 @@ dependencies = [

 [[package]]
 name = "quote"
-version = "1.0.7"
+version = "1.0.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa563d17ecb180e500da1cfd2b028310ac758de548efdd203e18f283af693f37"
+checksum = "991431c3519a3f36861882da93630ce66b52918dcf1b8e2fd66b397fc96f28df"
 dependencies = [
 "proc-macro2 1.0.24",
 ]
@ -1583,15 +1561,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c84d3526699cd55261af4b941e4e725444df67aa4f9e6a3564f18030d12672df"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
 name = "serde_json"
-version = "1.0.60"
+version = "1.0.61"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1500e84d27fe482ed1dc791a56eddc2f230046a040fa908c08bda1d9fb615779"
+checksum = "4fceb2595057b6891a4ee808f70054bd2d12f0e97f1cbb78689b59f676df325a"
 dependencies = [
 "itoa",
 "ryu",
@ -1631,9 +1609,9 @@ checksum = "2579985fda508104f7587689507983eadd6a6e84dd35d6d115361f530916fa0d"

 [[package]]
 name = "signal-hook-registry"
-version = "1.2.2"
+version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ce32ea0c6c56d5eacaeb814fbed9960547021d3edd010ded1425f180536b20ab"
+checksum = "16f1d0fef1604ba8f7a073c7e701f213e056707210e9020af4528e0101ce11a6"
 dependencies = [
 "libc",
 ]
@ -1652,9 +1630,9 @@ checksum = "ae524f056d7d770e174287294f562e95044c68e88dec909a00d2094805db9d75"

 [[package]]
 name = "socket2"
-version = "0.3.18"
+version = "0.3.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "97e0e9fd577458a4f61fb91fcb559ea2afecc54c934119421f9f5d3d5b1a1057"
+checksum = "122e570113d28d773067fab24266b66753f6ea915758651696b6e35e49f88d6e"
 dependencies = [
 "cfg-if 1.0.0",
 "libc",
@ -1697,10 +1675,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c87a60a40fccc84bef0652345bbbbbe20a605bf5d0ce81719fc476f5c03b50ef"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
+ "quote 1.0.8",
 "serde",
 "serde_derive",
- "syn 1.0.54",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1711,12 +1689,12 @@ checksum = "58fa5ff6ad0d98d1ffa8cb115892b6e69d67799f6763e162a1c9db421dc22e11"
 dependencies = [
 "base-x",
 "proc-macro2 1.0.24",
- "quote 1.0.7",
+ "quote 1.0.8",
 "serde",
 "serde_derive",
 "serde_json",
 "sha1",
- "syn 1.0.54",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1738,33 +1716,33 @@ dependencies = [

 [[package]]
 name = "syn"
-version = "1.0.54"
+version = "1.0.56"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a2af957a63d6bd42255c359c93d9bfdb97076bd3b820897ce55ffbfbf107f44"
+checksum = "a9802ddde94170d186eeee5005b798d9c159fa970403f1be19976d0cfb939b72"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
+ "quote 1.0.8",
 "unicode-xid 0.2.1",
 ]

 [[package]]
 name = "thiserror"
-version = "1.0.22"
+version = "1.0.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0e9ae34b84616eedaaf1e9dd6026dbe00dcafa92aa0c8077cb69df1fcfe5e53e"
+checksum = "76cc616c6abf8c8928e2fdcc0dbfab37175edd8fb49a4641066ad1364fdab146"
 dependencies = [
 "thiserror-impl",
 ]

 [[package]]
 name = "thiserror-impl"
-version = "1.0.22"
+version = "1.0.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9ba20f23e85b10754cd195504aebf6a27e2e6cbe28c17778a0c930724628dd56"
+checksum = "9be73a2caec27583d0046ef3796c3794f868a5bc813db689eed00c7631275cd1"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1829,9 +1807,9 @@ checksum = "e5c3be1edfad6027c69f5491cf4cb310d1a71ecd6af742788c6ff8bced86b8fa"
 dependencies = [
 "proc-macro-hack",
 "proc-macro2 1.0.24",
- "quote 1.0.7",
+ "quote 1.0.8",
 "standback",
- "syn 1.0.54",
+ "syn 1.0.56",
 ]

 [[package]]
@ -2027,12 +2005,6 @@ version = "1.7.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bb0d2e7be6ae3a5fa87eed5fb451aff96f2573d2694942e40543ae0bbe19c796"

-[[package]]
-name = "unicode-width"
-version = "0.1.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9337591893a19b88d8d87f2cec1e73fad5cdfd10e5a6f349f498ad6ea2ffb1e3"
-
 [[package]]
 name = "unicode-xid"
 version = "0.1.0"
@ -2119,8 +2091,8 @@ dependencies = [
 "lazy_static",
 "log",
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 "wasm-bindgen-shared",
 ]

@ -2142,7 +2114,7 @@ version = "0.2.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7a6ac8995ead1f084a8dea1e65f194d0973800c7f571f6edd70adf06ecf77084"
 dependencies = [
- "quote 1.0.7",
+ "quote 1.0.8",
 "wasm-bindgen-macro-support",
 ]

@ -2153,8 +2125,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b5a48c72f299d80557c7c62e37e7225369ecc0c963964059509fbafe917c7549"
 dependencies = [
 "proc-macro2 1.0.24",
- "quote 1.0.7",
- "syn 1.0.54",
+ "quote 1.0.8",
+ "syn 1.0.56",
 "wasm-bindgen-backend",
 "wasm-bindgen-shared",
 ]
--- a/Cargo.toml
+++ b/Cargo.toml
@ -3,7 +3,7 @@ name = "libreddit"
 description = " Alternative private front-end to Reddit"
 license = "AGPL-3.0"
 repository = "https://github.com/spikecodes/libreddit"
-version = "0.2.0"
+version = "0.2.3"
 authors = ["spikecodes <19519553+spikecodes@users.noreply.github.com>"]
 edition = "2018"

@ -18,6 +18,5 @@ reqwest = { version = "0.10", default_features = false, features = ["rustls-tls"
 askama = "0.8.0"
 serde = "1.0.117"
 serde_json = "1.0"
-pulldown-cmark = "0.8.0"
 chrono = "0.4.19"
 async-recursion = "0.3.1"
--- a/README.md
+++ b/README.md
@ -2,19 +2,53 @@

 > An alternative private front-end to Reddit 

-Libre + Reddit = Libreddit
+Libre + Reddit = [Libreddit](https://libredd.it)

 - 🚀 Fast: written in Rust for blazing fast speeds and safety
- ☁️ Light: no javascript, no ads, no tracking
+- ☁️ Light: no JavaScript, no ads, no tracking
 - 🕵 Private: all requests are proxied through the server, including media
- 🔒 Safe: does not rely on Reddit OAuth or require a Reddit API Key 
- 📱 Responsive: works great on mobile!
+- 🦺 Safe: does not rely on Reddit OAuth or require a Reddit API Key 
+- 🔒 Secure: strong [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) prevents browser requests to Reddit

-Think Invidious but for Reddit. Watch your cat videos without being watched.
+Like [Invidious](https://github.com/iv-org/invidious) but for Reddit. Browse the coldest takes of [r/unpopularopinion](https://libredd.it/r/unpopularopinion) without being [tracked](#reddit).
+
+## Contents
+- [Screenshot](#screenshot)
+- [Instances](#instances)
+- [About](#about)
+  - [Elsewhere](#elsewhere)
+  - [Info](#info)
+  - [In Progress](#in-progress)
+  - [Teddit Comparison](#how-does-it-compare-to-teddit)
+- [Comparison](#comparison)
+  - [Speed](#speed)
+  - [Privacy](#privacy)
+- [Installation](#installation)
+  - [Cargo](#a-cargo)
+  - [Docker](#b-docker)
+  - [AUR](#c-aur)
+  - [GitHub Releases](#d-github-releases)
+  - [Repl.it](#e-replit)
+- Developing
+  - [Deployment](#deployment)
+  - [Building](#building)

 ## Screenshot

-![](https://i.ibb.co/Tgjb3w7/image.png)
+![](https://i.ibb.co/1RyKrBz/libreddit-rust.png)
+
+## Instances
+
+Feel free to [open an issue](https://github.com/spikecodes/libreddit/issues/new) to have your [selfhosted instance](#deployment) listed here!
+
+| Website | Country | Cloudflare |
+|-|-|-|
+| [libredd.it](https://libredd.it) (official) | 🇺🇸 US  |  |
+| [libreddit.spike.codes](https://libreddit.spike.codes) (official) | 🇺🇸 US  |  |
+| [libreddit.dothq.co](https://libreddit.dothq.co) | 🇺🇸 US  | ✅ |
+| [libreddit.insanity.wtf](https://libreddit.insanity.wtf) | 🇺🇸 US  | ✅ |
+
+A checkmark in the "Cloudflare" category here refers to the use of the reverse proxy, [Cloudflare](https://cloudflare). The checkmark will not be listed for a site which uses Cloudflare DNS but rather the proxying service which grants Cloudflare the ability to monitor traffic to the website.

 ## About

@ -26,13 +60,11 @@ Find Libreddit on...
 - 🦊 GitLab: [spikecodes/libreddit](https://gitlab.com/spikecodes/libreddit)

 ### Info
-Libreddit hopes to provide an easier way to browse Reddit, without the ads, trackers and bloat. Libreddit was inspired by other alternative front-ends to popular services such as [Invidious](https://github.com/iv-org/invidious) for YouTube, [Nitter](https://github.com/zedeus/nitter) for Twitter, and [Bibliogram](https://sr.ht/~cadence/bibliogram/) for Instagram.
+Libreddit hopes to provide an easier way to browse Reddit, without the ads, trackers, and bloat. Libreddit was inspired by other alternative front-ends to popular services such as [Invidious](https://github.com/iv-org/invidious) for YouTube, [Nitter](https://github.com/zedeus/nitter) for Twitter, and [Bibliogram](https://sr.ht/~cadence/bibliogram/) for Instagram.

 Libreddit currently implements most of Reddit's functionalities but still lacks a few features that are being worked on below.

 ### In Progress
- Nested comments
- User flairs
 - Searching

 ### How does it compare to Teddit?
@ -41,15 +73,67 @@ Teddit is another awesome open source project designed to provide an alternative

 If you are looking to compare, the biggest differences I have noticed are:
 - Libreddit is themed around Reddit's redesign whereas Teddit appears to stick much closer to Reddit's old design. This may suit some users better as design is always subjective.
- Libreddit is written in Rust for speed and memory safety. It uses Actix Web, which was [benchmarked as the fastest web server for single queries](https://www.techempower.com/benchmarks/#hw=ph&test=db).
+- Libreddit is written in [Rust](https://www.rust-lang.org) for speed and memory safety. It uses [Actix Web](https://actix.rs), which was [benchmarked as the fastest web server for single queries](https://www.techempower.com/benchmarks/#hw=ph&test=db).
 - Unlike Teddit (at the time of writing this), Libreddit does not require a Reddit API key to host. 

-## Instances
+## Comparison

-Feel free to [open an issue](https://github.com/spikecodes/libreddit/issues/new) to have your selfhosted instance listed here!
+This section outlines how Libreddit compares to Reddit.

- [libredd.it](https://libredd.it) 🇺🇸 (Thank you to [YeapGuy](https://github.com/YeapGuy)!)
- [libreddit.spike.codes](https://libreddit.spike.codes) 🇺🇸
+### Speed
+
+Lasted tested December 21, 2020.
+
+Results from Google Lighthouse ([Libreddit Report](https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https%3A%2F%2Flibredd.it), [Reddit Report](https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https%3A%2F%2Fwww.reddit.com%2F)).
+
+|                     | Libreddit     | Reddit    |
+|---------------------|---------------|-----------|
+| Requests            | 22            | 70        |
+| Resource Size       | 135 KiB       | 2,222 KiB |
+| Time to Interactive | **1.7 s**     | **11.5 s**|
+
+### Privacy
+
+#### Reddit
+
+**Logging:** According to Reddit's [privacy policy](https://www.redditinc.com/policies/privacy-policy), they "may [automatically] log information" including:
+- IP address
+- User-agent string
+- Browser type
+- Operating system
+- Referral URLs
+- Device information (e.g., device IDs)
+- Device settings
+- Pages visited
+- Links clicked
+- The requested URL
+- Search terms
+
+**Location:** The same privacy policy goes on to describe location data may be collected through the use of:
+- GPS (consensual)
+- Bluetooth (consensual)
+- Content associated with a location (consensual)
+- Your IP Address
+
+**Cookies:** Reddit's [cookie notice](https://www.redditinc.com/policies/cookies) documents the array of cookies used by Reddit including/regarding:
+- Authentication
+- Functionality
+- Analytics and Performance
+- Advertising
+- Third-Party Cookies
+- Third-Party Site
+
+#### Libreddit
+
+For transparency, I hope to describe all the ways Libreddit handles user privacy.
+
+**Logging:** In production (when running the binary, hosting with docker, or using the official instances), Libreddit logs nothing. When debugging (running from source without `--release`), Libreddit logs post IDs fetched to aid troubleshooting but nothing else.
+
+**DNS:** Both official domains (`libredd.it` and `libreddit.spike.codes`) use Cloudflare as the DNS resolver. Though, the sites are not proxied through Cloudflare meaning Cloudflare doesn't have access to user traffic.
+
+**Cookies:** Libreddit uses no cookies currently but eventually, I plan to add a configuration page where users can store an optional cookie to save their preferred theme, default sorting algorithm, or default layout.
+
+**Hosting:** The official instances (`libredd.it` and `libreddit.spike.codes`) are hosted on [Repl.it](https://repl.it/) which monitors usage to prevent abuse. I can understand if this invalidates certain users' threat models and therefore, selfhosting and browsing through Tor are welcomed.

 ## Installation

@ -85,9 +169,19 @@ yay -S libreddit-git
 ### D) GitHub Releases

 If you're on Linux and none of these methods work for you, you can grab a Linux binary from [the newest release](https://github.com/spikecodes/libreddit/releases/latest).
-Currently Libreddit does not have Windows or MacOS binaries but those will be available soon.
+Currently, Libreddit does not have Windows or macOS binaries but those will be available soon.

-## Deploy an Instance
+### E) Repl.it
+
+**Note:** Repl.it is a free option but they are *not* private and are monitor server usage to prevent abuse. If you really need a free and easy setup, this method may work best for you.
+
+1. Create a Repl.it account (see note above)
+2. Visit [the official Repl](https://repl.it/@spikethecoder/libreddit) and fork it
+3. Hit the run button to download the latest Libreddit version and start it
+
+In the web preview (defaults to top right), you should see your instance hosted where you can assign a [custom domain](https://docs.repl.it/repls/web-hosting#custom-domains).
+
+## Deployment

 Once installed, deploy Libreddit (unless you're using Docker) by running:

@ -105,7 +199,7 @@ To disable the media proxy built into Libreddit, run:
 libreddit --no-default-features
 ```

-## Building from Source
+## Building

 ```
 git clone https://github.com/spikecodes/libreddit
--- a/src/main.rs
+++ b/src/main.rs
@ -60,6 +60,7 @@ async fn main() -> std::io::Result<()> {
 			// POST SERVICES
 			.route("/{id:.{5,6}}/", web::get().to(post::short))
 			.route("/r/{sub}/comments/{id}/{title}/", web::get().to(post::page))
+			.route("/r/{sub}/comments/{id}/{title}/{comment_id}/", web::get().to(post::comment))
 	})
 	.bind(address.clone())
 	.expect(format!("Cannot bind to the address: {}", address).as_str())
--- a/src/popular.rs
+++ b/src/popular.rs
@ -19,10 +19,10 @@ async fn render(sub_name: String, sort: Option<String>, ends: (Option<String>, O

 	// Build the Reddit JSON API url
 	let url = match ends.0 {
-		Some(val) => format!("https://www.reddit.com/r/{}/{}.json?before={}&count=25", sub_name, sorting, val),
+		Some(val) => format!("r/{}/{}.json?before={}&count=25", sub_name, sorting, val),
 		None => match ends.1 {
-			Some(val) => format!("https://www.reddit.com/r/{}/{}.json?after={}&count=25", sub_name, sorting, val),
-			None => format!("https://www.reddit.com/r/{}/{}.json", sub_name, sorting),
+			Some(val) => format!("r/{}/{}.json?after={}&count=25", sub_name, sorting, val),
+			None => format!("r/{}/{}.json", sub_name, sorting),
 		},
 	};

--- a/src/post.rs
+++ b/src/post.rs
@ -6,7 +6,6 @@ use async_recursion::async_recursion;

 use askama::Template;
 use chrono::{TimeZone, Utc};
-use pulldown_cmark::{html, Options, Parser};

 // STRUCTS
 #[derive(Template)]
@ -17,12 +16,19 @@ struct PostTemplate {
 	sort: String,
 }

-async fn render(id: String, sort: String) -> Result<HttpResponse> {
-	// Log the post ID being fetched
+async fn render(id: String, sort: Option<String>, comment_id: Option<String>) -> Result<HttpResponse> {
+	// Log the post ID being fetched in debug mode
+	#[cfg(debug_assertions)]
 	dbg!(&id);

+	// Handling sort paramater
+	let sorting: String = sort.unwrap_or("confidence".to_string());
+
 	// Build the Reddit JSON API url
-	let url: String = format!("https://reddit.com/{}.json?sort={}", id, sort);
+	let url: String = match comment_id {
+		None => format!("{}.json?sort={}&raw_json=1", id, sorting),
+		Some(val) => format!("{}.json?sort={}&comment={}&raw_json=1", id, sorting, val),
+	};

 	// Send a request to the url, receive JSON in response
 	let req = request(url).await;
@ -48,7 +54,7 @@ async fn render(id: String, sort: String) -> Result<HttpResponse> {
 	let s = PostTemplate {
 		comments: comments.unwrap(),
 		post: post.unwrap(),
-		sort: sort,
+		sort: sorting,
 	}
 	.render()
 	.unwrap();
@ -56,15 +62,16 @@ async fn render(id: String, sort: String) -> Result<HttpResponse> {
 }

 // SERVICES
-pub async fn short(web::Path(id): web::Path<String>) -> Result<HttpResponse> {
-	render(id.to_string(), "confidence".to_string()).await
+pub async fn short(web::Path(id): web::Path<String>, params: web::Query<Params>) -> Result<HttpResponse> {
+	render(id, params.sort.clone(), None).await
+}
+
+pub async fn comment(web::Path((_sub, id, _title, comment_id)): web::Path<(String, String, String, String)>, params: web::Query<Params>) -> Result<HttpResponse> {
+	render(id, params.sort.clone(), Some(comment_id)).await
 }

 pub async fn page(web::Path((_sub, id)): web::Path<(String, String)>, params: web::Query<Params>) -> Result<HttpResponse> {
-	match &params.sort {
-		Some(sort) => render(id, sort.to_string()).await,
-		None => render(id, "confidence".to_string()).await,
-	}
+	render(id, params.sort.clone(), None).await
 }

 // UTILITIES
@ -72,13 +79,13 @@ async fn media(data: &serde_json::Value) -> (String, String) {
 	let post_type: &str;
 	let url = if !data["preview"]["reddit_video_preview"]["fallback_url"].is_null() {
 		post_type = "video";
-		format_url(data["preview"]["reddit_video_preview"]["fallback_url"].as_str().unwrap()).await
+		format_url(data["preview"]["reddit_video_preview"]["fallback_url"].as_str().unwrap().to_string()).await
 	} else if !data["secure_media"]["reddit_video"]["fallback_url"].is_null() {
 		post_type = "video";
-		format_url(data["secure_media"]["reddit_video"]["fallback_url"].as_str().unwrap()).await
+		format_url(data["secure_media"]["reddit_video"]["fallback_url"].as_str().unwrap().to_string()).await
 	} else if data["post_hint"].as_str().unwrap_or("") == "image" {
 		post_type = "image";
-		format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap()).await
+		format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap().to_string()).await
 	} else {
 		post_type = "link";
 		data["url"].as_str().unwrap().to_string()
@ -87,39 +94,33 @@ async fn media(data: &serde_json::Value) -> (String, String) {
 	(post_type.to_string(), url)
 }

-async fn markdown_to_html(md: &str) -> String {
-	let mut options = Options::empty();
-	options.insert(Options::ENABLE_TABLES);
-	options.insert(Options::ENABLE_FOOTNOTES);
-	options.insert(Options::ENABLE_STRIKETHROUGH);
-	options.insert(Options::ENABLE_TASKLISTS);
-	let parser = Parser::new_ext(md, options);
-
-	// Write to String buffer.
-	let mut html_output = String::new();
-	html::push_html(&mut html_output, parser);
-	html_output
-}
-
 // POSTS
 async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
+	// Retrieve post (as opposed to comments) from JSON
 	let post_data: &serde_json::Value = &json["data"]["children"][0];

+	// Grab UTC time as unix timestamp
 	let unix_time: i64 = post_data["data"]["created_utc"].as_f64().unwrap().round() as i64;
+	// Parse post score
 	let score = post_data["data"]["score"].as_i64().unwrap();

+	// Determine the type of media along with the media URL
 	let media = media(&post_data["data"]).await;

+	// Build a post using data parsed from Reddit post API
 	let post = Post {
 		title: val(post_data, "title").await,
 		community: val(post_data, "subreddit").await,
-		body: markdown_to_html(post_data["data"]["selftext"].as_str().unwrap()).await,
+		body: val(post_data,"selftext_html").await,
 		author: val(post_data, "author").await,
+		author_flair: Flair(
+			val(post_data, "author_flair_text").await,
+			val(post_data, "author_flair_background_color").await,
+			val(post_data, "author_flair_text_color").await,
+		),
 		url: val(post_data, "permalink").await,
 		score: format_num(score),
 		post_type: media.0,
-		media: media.1,
-		time: Utc.timestamp(unix_time, 0).format("%b %e %Y %H:%M UTC").to_string(),
 		flair: Flair(
 			val(post_data, "link_flair_text").await,
 			val(post_data, "link_flair_background_color").await,
@ -129,6 +130,9 @@ async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
 				"white".to_string()
 			},
 		),
+		nsfw: post_data["data"]["over_18"].as_bool().unwrap_or(false),
+		media: media.1,
+		time: Utc.timestamp(unix_time, 0).format("%b %e %Y %H:%M UTC").to_string(),
 	};

 	Ok(post)
@ -143,14 +147,14 @@ async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'stati
 	let mut comments: Vec<Comment> = Vec::new();

 	// For each comment, retrieve the values to build a Comment object
-	for comment in comment_data.iter() {
+	for comment in comment_data {
 		let unix_time: i64 = comment["data"]["created_utc"].as_f64().unwrap_or(0.0).round() as i64;
 		if unix_time == 0 {
 			continue;
 		}

 		let score = comment["data"]["score"].as_i64().unwrap_or(0);
-		let body = markdown_to_html(comment["data"]["body"].as_str().unwrap_or("")).await;
+		let body =  val(comment, "body_html").await;

 		let replies: Vec<Comment> = if comment["data"]["replies"].is_object() {
 			parse_comments(comment["data"]["replies"].clone()).await.unwrap_or(Vec::new())
@ -159,11 +163,17 @@ async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'stati
 		};

 		comments.push(Comment {
+			id: val(comment, "id").await,
 			body: body,
 			author: val(comment, "author").await,
 			score: format_num(score),
 			time: Utc.timestamp(unix_time, 0).format("%b %e %Y %H:%M UTC").to_string(),
 			replies: replies,
+			flair: Flair(
+				val(comment, "author_flair_text").await,
+				val(comment, "author_flair_background_color").await,
+				val(comment, "author_flair_text_color").await,
+			),
 		});
 	}

--- a/src/subreddit.rs
+++ b/src/subreddit.rs
@ -26,14 +26,18 @@ pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String

 	// Build the Reddit JSON API url
 	let url = match ends.0 {
-		Some(val) => format!("https://www.reddit.com/r/{}/{}.json?before={}&count=25", sub_name, sorting, val),
+		Some(val) => format!("r/{}/{}.json?before={}&count=25", sub_name, sorting, val),
 		None => match ends.1 {
-			Some(val) => format!("https://www.reddit.com/r/{}/{}.json?after={}&count=25", sub_name, sorting, val),
-			None => format!("https://www.reddit.com/r/{}/{}.json", sub_name, sorting),
+			Some(val) => format!("r/{}/{}.json?after={}&count=25", sub_name, sorting, val),
+			None => format!("r/{}/{}.json", sub_name, sorting),
 		},
 	};

-	let sub_result = subreddit(&sub_name).await;
+	let sub_result = if !&sub_name.contains("+") {
+		subreddit(&sub_name).await
+	} else {
+		Ok(Subreddit::default())
+	};
 	let items_result = fetch_posts(url, String::new()).await;

 	if sub_result.is_err() || items_result.is_err() {
@ -44,15 +48,9 @@ pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String
 		.unwrap();
 		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
 	} else {
-		let mut sub = sub_result.unwrap();
+		let sub = sub_result.unwrap();
 		let items = items_result.unwrap();

-		sub.icon = if sub.icon != "" {
-			format!(r#"<img class="subreddit_icon" src="{}">"#, sub.icon)
-		} else {
-			String::new()
-		};
-
 		let s = SubredditTemplate {
 			sub: sub,
 			posts: items.0,
@ -68,7 +66,7 @@ pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String
 // SUBREDDIT
 async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
 	// Build the Reddit JSON API url
-	let url: String = format!("https://www.reddit.com/r/{}/about.json", sub);
+	let url: String = format!("r/{}/about.json?raw_json=1", sub);

 	// Send a request to the url, receive JSON in response
 	let req = request(url).await;
@ -81,14 +79,24 @@ async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
 	// Otherwise, grab the JSON output from the request
 	let res = req.unwrap();

+	// Metadata regarding the subreddit
 	let members = res["data"]["subscribers"].as_u64().unwrap_or(0);
 	let active = res["data"]["accounts_active"].as_u64().unwrap_or(0);

+	// Fetch subreddit icon either from the community_icon or icon_img value
+	let community_icon: &str = res["data"]["community_icon"].as_str().unwrap().split("?").collect::<Vec<&str>>()[0];
+	let icon = if community_icon.is_empty() {
+		val(&res, "icon_img").await
+	} else {
+		community_icon.to_string()
+	};
+
 	let sub = Subreddit {
 		name: val(&res, "display_name").await,
 		title: val(&res, "title").await,
 		description: val(&res, "public_description").await,
-		icon: format_url(val(&res, "icon_img").await.as_str()).await,
+		info: val(&res, "description_html").await.replace("\\", ""),
+		icon: format_url(icon).await,
 		members: format_num(members.try_into().unwrap()),
 		active: format_num(active.try_into().unwrap()),
 	};
--- a/src/user.rs
+++ b/src/user.rs
@ -1,7 +1,8 @@
 // CRATES
-use crate::utils::{fetch_posts, nested_val, request, ErrorTemplate, Params, Post, User};
+use crate::utils::{fetch_posts, format_url, nested_val, request, ErrorTemplate, Params, Post, User};
 use actix_web::{http::StatusCode, web, HttpResponse, Result};
 use askama::Template;
+use chrono::{TimeZone, Utc};

 // STRUCTS
 #[derive(Template)]
@ -10,11 +11,22 @@ struct UserTemplate {
 	user: User,
 	posts: Vec<Post>,
 	sort: String,
+	ends: (String, String),
 }

-async fn render(username: String, sort: String) -> Result<HttpResponse> {
+async fn render(username: String, sort: Option<String>, ends: (Option<String>, Option<String>)) -> Result<HttpResponse> {
+	let sorting = sort.unwrap_or("new".to_string());
+
+	let before = ends.1.clone().unwrap_or(String::new()); // If there is an after, there must be a before
+
 	// Build the Reddit JSON API url
-	let url: String = format!("https://www.reddit.com/user/{}/.json?sort={}", username, sort);
+	let url = match ends.0 {
+		Some(val) => format!("user/{}/.json?sort={}&before={}&count=25&raw_json=1", username, sorting, val),
+		None => match ends.1 {
+			Some(val) => format!("user/{}/.json?sort={}&after={}&count=25&raw_json=1", username, sorting, val),
+			None => format!("user/{}/.json?sort={}&raw_json=1", username, sorting),
+		},
+	};

 	let user = user(&username).await;
 	let posts = fetch_posts(url, "Comment".to_string()).await;
@ -27,10 +39,13 @@ async fn render(username: String, sort: String) -> Result<HttpResponse> {
 		.unwrap();
 		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
 	} else {
+		let posts_unwrapped = posts.unwrap();
+		
 		let s = UserTemplate {
 			user: user.unwrap(),
-			posts: posts.unwrap().0,
-			sort: sort,
+			posts: posts_unwrapped.0,
+			sort: sorting,
+			ends: (before, posts_unwrapped.1)
 		}
 		.render()
 		.unwrap();
@ -40,16 +55,13 @@ async fn render(username: String, sort: String) -> Result<HttpResponse> {

 // SERVICES
 pub async fn page(web::Path(username): web::Path<String>, params: web::Query<Params>) -> Result<HttpResponse> {
-	match &params.sort {
-		Some(sort) => render(username, sort.to_string()).await,
-		None => render(username, "hot".to_string()).await,
-	}
+	render(username, params.sort.clone(), (params.before.clone(), params.after.clone())).await
 }

 // USER
 async fn user(name: &String) -> Result<User, &'static str> {
 	// Build the Reddit JSON API url
-	let url: String = format!("https://www.reddit.com/user/{}/about.json", name);
+	let url: String = format!("user/{}/about.json", name);

 	// Send a request to the url, receive JSON in response
 	let req = request(url).await;
@ -62,11 +74,15 @@ async fn user(name: &String) -> Result<User, &'static str> {
 	// Otherwise, grab the JSON output from the request
 	let res = req.unwrap();

+	// Grab creation date as unix timestamp
+	let created: i64 = res["data"]["created"].as_f64().unwrap().round() as i64;
+
 	// Parse the JSON output into a User struct
 	Ok(User {
 		name: name.to_string(),
-		icon: nested_val(&res, "subreddit", "icon_img").await,
+		icon: format_url(nested_val(&res, "subreddit", "icon_img").await).await,
 		karma: res["data"]["total_karma"].as_i64().unwrap(),
+		created: Utc.timestamp(created, 0).format("%b %e, %Y").to_string(),
 		banner: nested_val(&res, "subreddit", "banner_img").await,
 		description: nested_val(&res, "subreddit", "public_description").await,
 	})
--- a/src/utils.rs
+++ b/src/utils.rs
@ -11,51 +11,53 @@ use base64::encode;
 //
 // STRUCTS
 //
-#[allow(dead_code)]
 // Post flair with text, background color and foreground color
 pub struct Flair(pub String, pub String, pub String);

-#[allow(dead_code)]
 // Post containing content, metadata and media
 pub struct Post {
 	pub title: String,
 	pub community: String,
 	pub body: String,
 	pub author: String,
+	pub author_flair: Flair,
 	pub url: String,
 	pub score: String,
 	pub post_type: String,
+	pub flair: Flair,
+	pub nsfw: bool,
 	pub media: String,
 	pub time: String,
-	pub flair: Flair,
 }

-#[allow(dead_code)]
 // Comment with content, post, score and data/time that it was posted
 pub struct Comment {
+	pub id: String,
 	pub body: String,
 	pub author: String,
+	pub flair: Flair,
 	pub score: String,
 	pub time: String,
 	pub replies: Vec<Comment>,
 }

-#[allow(dead_code)]
 // User struct containing metadata about user
 pub struct User {
 	pub name: String,
 	pub icon: String,
 	pub karma: i64,
+	pub created: String,
 	pub banner: String,
 	pub description: String,
 }

-#[allow(dead_code)]
+#[derive(Default)]
 // Subreddit struct containing metadata about community
 pub struct Subreddit {
 	pub name: String,
 	pub title: String,
 	pub description: String,
+	pub info: String,
 	pub icon: String,
 	pub members: String,
 	pub active: String,
@ -80,7 +82,12 @@ pub struct ErrorTemplate {
 // FORMATTING
 //

-pub async fn format_url(url: &str) -> String {
+// Direct urls to proxy if proxy is enabled
+pub async fn format_url(url: String) -> String {
+	if url.is_empty() {
+		return String::new();
+	};
+
 	#[cfg(feature = "proxy")]
 	return "/proxy/".to_string() + encode(url).as_str();

@ -88,6 +95,7 @@ pub async fn format_url(url: &str) -> String {
 	return url.to_string();
 }

+// Append `m` and `k` for millions and thousands respectively
 pub fn format_num(num: i64) -> String {
 	if num > 1000000 {
 		format!("{}m", num / 1000000)
@ -102,22 +110,20 @@ pub fn format_num(num: i64) -> String {
 // JSON PARSING
 //

-#[allow(dead_code)]
 // val() function used to parse JSON from Reddit APIs
 pub async fn val(j: &serde_json::Value, k: &str) -> String {
 	String::from(j["data"][k].as_str().unwrap_or(""))
 }

-#[allow(dead_code)]
 // nested_val() function used to parse JSON from Reddit APIs
 pub async fn nested_val(j: &serde_json::Value, n: &str, k: &str) -> String {
 	String::from(j["data"][n][k].as_str().unwrap())
 }

-#[allow(dead_code)]
+// Fetch posts of a user or subreddit
 pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Post>, String), &'static str> {
 	// Send a request to the url, receive JSON in response
-	let req = request(url).await;
+	let req = request(url.clone()).await;

 	// If the Reddit API returns an error, exit this function
 	if req.is_err() {
@ -132,9 +138,9 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos

 	let mut posts: Vec<Post> = Vec::new();

-	for post in post_list.iter() {
+	for post in post_list {
 		let img = if val(post, "thumbnail").await.starts_with("https:/") {
-			format_url(val(post, "thumbnail").await.as_str()).await
+			format_url(val(post, "thumbnail").await).await
 		} else {
 			String::new()
 		};
@ -145,13 +151,16 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 		posts.push(Post {
 			title: if title.is_empty() { fallback_title.to_owned() } else { title },
 			community: val(post, "subreddit").await,
-			body: val(post, "body").await,
+			body: val(post, "body_html").await,
 			author: val(post, "author").await,
+			author_flair: Flair(
+				val(post, "author_flair_text").await,
+				val(post, "author_flair_background_color").await,
+				val(post, "author_flair_text_color").await,
+			),
 			score: format_num(score),
 			post_type: "link".to_string(),
 			media: img,
-			url: val(post, "permalink").await,
-			time: Utc.timestamp(unix_time, 0).format("%b %e '%y").to_string(),
 			flair: Flair(
 				val(post, "link_flair_text").await,
 				val(post, "link_flair_background_color").await,
@ -161,9 +170,14 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 					"white".to_string()
 				},
 			),
+			nsfw: post["data"]["over_18"].as_bool().unwrap_or(false),
+			url: val(post, "permalink").await,
+			time: Utc.timestamp(unix_time, 0).format("%b %e '%y").to_string(),
 		});
 	}

+	dbg!(url);
+
 	Ok((posts, res["data"]["after"].as_str().unwrap_or("").to_string()))
 }

@ -172,8 +186,9 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 //

 // Make a request to a Reddit API and parse the JSON response
-#[allow(dead_code)]
-pub async fn request(url: String) -> Result<serde_json::Value, &'static str> {
+pub async fn request(mut url: String) -> Result<serde_json::Value, &'static str> {
+	url = format!("https://www.reddit.com/{}", url);
+
 	// --- actix-web::client ---
 	// let client = actix_web::client::Client::default();
 	// let res = client
--- a/static/robots.txt
+++ b/static/robots.txt
@ -1,2 +1,2 @@
-User-Agent: *
-Disallow: / 
+User-agent: *
+Allow: /
--- a/static/style.css
+++ b/static/style.css
@ -1,6 +1,7 @@
 /* General */

 :root {
+	--accent: aqua;
 	--background: #0F0F0F;
 	--foreground: #222;
 	--outside: #1F1F1F;
@ -11,23 +12,23 @@

 * {
 	transition: 0.2s all;
-	margin: 0px;
+	margin: 0;
 	color: white;
 	font-family: sans-serif;
-	font-weight: normal;
+	outline: none;
 }

 body {
 	background: var(--background);
+	visibility: visible !important;
 }

-header {
+nav {
 	display: flex;
 	justify-content: space-between;
-	color: aqua;
+	color: var(--accent);
 	background: var(--outside);
 	padding: 15px;
-	font-weight: bold;
 	font-size: 20px;
 }

@ -36,10 +37,11 @@ header {
 }

 main {
+	display: flex;
+	justify-content: center;
 	max-width: 750px;
-	margin: 0 auto;
-	margin-top: 25px;
-	padding: 0px 10px;
+	padding: 10px 20px;
+	margin: 20px auto;
 }

 footer {
@ -53,6 +55,10 @@ button {
 	font-weight: bold;
 }

+hr {
+	margin: 20px 0;
+}
+
 a {
 	color: inherit;
 	text-decoration: none;
@ -62,8 +68,14 @@ a:not(.post_right):hover {
 	text-decoration: underline;
 }

-#about {
-	background: #151515;
+img[src=""] {
+	display: none;
+}
+
+aside {
+	flex-grow: 1;
+	margin: 20px 20px 0 20px;
+	max-width: 350px;
 }

 #version {
@ -71,68 +83,86 @@ a:not(.post_right):hover {
 	opacity: 25%;
 }

-/* Subreddit */
+/* User & Subreddit */

-.subreddit {
-	max-width: 750px;
-	margin: 0 auto;
+#user, #subreddit, #sidebar {
+	margin: 40px auto 0 auto;
 	display: flex;
-	padding-bottom: 25px;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+	height: max-content;
+	background: var(--outside);
+	border-radius: 5px;
 }

-.subreddit_name {
-	margin-bottom: 10px;
+#sidebar, #sidebar_contents {
+	margin-top: 20px;
 }

-.subreddit_right {
-	display: flex;
-	flex-flow: column;
-	justify-content: center;
+#sidebar_label {
+	border: 2px solid var(--highlighted);
+	padding: 10px;
 }

-.subreddit_icon {
+#user_icon, #subreddit_icon {
 	width: 100px;
 	height: 100px;
+	border: 2px solid var(--accent);
 	border-radius: 100%;
-	padding: 20px;
+	padding: 10px;
+	margin: 10px;
 }

-#stats {
+#user_name, #subreddit_name {
 	margin-top: 10px;
 }

-/* User */
-
-.user {
-	max-width: 750px;
-	margin: 0 auto;
-	display: flex;
+#user_description, #subreddit_description {
+	margin: 10px 20px;
+	text-align: center;
+	font-size: 15px;
 }

-.user_right {
-	display: flex;
-	flex-flow: column;
-	justify-content: center;
+#user_details, #subreddit_details {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	margin-top: 15px;
+	grid-column-gap: 20px;
 }

-.user_icon {
-	width: 100px;
-	height: 100px;
-	border-radius: 100%;
-	padding: 20px;
+#user_details > label, #subreddit_details > label {
+	color: var(--accent);
+	font-size: 15px;
 }

 /* Sorting */

 #sort {
-	max-width: 750px;
-	margin: 20px -10px;
-	display: flex;
-	justify-content: start;
-	padding: 0px 10px;
+	background: var(--outside);
+	box-shadow: var(--black-contrast);
+	border: 0;
+	padding: 0 15px;
+	margin-bottom: 20px;
+	height: 40px;
+	font-size: 15px;
+	border-radius: 5px 0 0 5px;
+	appearance: none;
 }

+#sort_submit {
+	background: var(--highlighted);
+	border: 0;
+	font-size: 15px;
+	height: 40px;
+	border-radius: 0 5px 5px 0;
+}
+
+#sort:hover { background: var(--foreground); }
+#sort_submit:hover { color: var(--accent); }
+
 #sort > div, footer > a {
+	box-shadow: var(--black-contrast);
 	background: var(--outside);
 	color: lightgrey;
 	border-radius: 5px;
@ -143,7 +173,7 @@ a:not(.post_right):hover {
 }

 #sort > div.selected {
-	background: aqua;
+	background: var(--accent);
 	color: black;
 }

@ -160,6 +190,10 @@ a:not(.post_right):hover {
 	display: flex;
 }

+.post.highlighted {
+	margin: 20px 0;
+}
+
 .post:hover {
 	background: var(--foreground);
 }
@ -177,11 +211,27 @@ a:not(.post_right):hover {
 .post_left {
 	text-align: center;
 	background: var(--foreground);
-	border-radius: 5px 0px 0px 5px;
+	border-radius: 5px 0 0 5px;
 	min-width: 50px;
 	padding: 5px;
 }

+.post_score {
+	margin-top: 20px;
+	color: var(--accent);
+	font-size: 16px;
+}
+
+.nsfw {
+	color: #FF5C5D;
+	margin-top: 20px;
+	border: 1px solid #FF5C5D;
+	padding: 5px;
+	font-size: 12px;
+	border-radius: 5px;
+	font-weight: bold;
+}
+
 .post_subreddit {
 	font-weight: bold;
 }
@ -190,11 +240,6 @@ a:not(.post_right):hover {
 	font-size: 18px;
 }

-.post_score {
-	margin-top: 1em;
-	color: aqua;
-}
-
 .post_right {
 	padding: 20px 25px;
 	flex-grow: 1;
@ -205,37 +250,19 @@ a:not(.post_right):hover {
 	margin: 5px;
 }

-.post_right > p {
-	opacity: 0.75;
-	font-size: 16px;
-}
-
 .post_media {
 	max-width: 90%;
 	align-self: center;
 }

-.post_media[src=""] {
-	display: none;
-}
-
 .post_body {
 	opacity: 0.9;
 	font-weight: normal;
 	margin: 10px 5px;
 }

-.post_body > p:not(:first-child) {
-	margin-top: 1.5em;
-}
-
-.post_body a {
-	text-decoration: underline;
-	color: aqua;
-}
-
 #post_url {
-	color: aqua;
+	color: var(--accent);
 }

 .post_thumbnail {
@ -247,12 +274,8 @@ a:not(.post_right):hover {
 	max-width: 20%;
 }

-.post_thumbnail[src=""] {
-	display: none;
-}
-
-small {
-	background: aqua;
+.post_flair {
+	background: var(--accent);
 	color: black;
 	padding: 5px;
 	margin-right: 5px;
@ -264,14 +287,10 @@ small {
 /* Comment */

 .comment {
-	margin-top: 1em;
+	margin-top: 15px;
 	border-radius: 5px;
 	display: flex;
-	/* border: 2px solid var(--foreground); */
-}
-
-.comment:hover {
-	background: var(--post);
+	font-size: 15px;
 }

 .comment_left, .comment_right {
@ -282,24 +301,27 @@ small {
 .comment_left {
 	text-align: center;
 	min-width: 50px;
-	padding: 5px;
+	padding: 5px 0;
 	align-items: center;
 }

-.comment_title {
-	font-size: 20px;
+.comment_title { font-size: 20px; }
+.comment_link { text-decoration: underline; }
+.comment_author { opacity: 0.9; }
+
+.comment_author.op {
+	color: var(--accent);
+	font-weight: bold;
 }

-.comment_author {
-	opacity: 0.9;
-}
-
-.comment_upvote {
-	margin-top: 0.5em;
-	border-radius: 5px 5px 0px 0px;
-	background: var(--foreground);
-	width: 40px;
-	padding: 10px 0px 0px 0px;
+.author_flair {
+	background: var(--highlighted);
+	color: white;
+	padding: 5px;
+	margin-right: 5px;
+	border-radius: 5px;
+	font-size: 12px;
+	font-weight: bold;
 }

 .comment_subreddit {
@ -307,11 +329,12 @@ small {
 }

 .comment_score {
-	color: aqua;
+	color: var(--accent);
 	background: var(--foreground);
 	min-width: 40px;
 	border-radius: 5px;
-	padding: 10px 0px;
+	padding: 10px 0;
+	font-size: 16px;
 }

 .comment_right {
@ -330,10 +353,6 @@ small {
 	align-self: center;
 }

-.comment_image[src=""] {
-	display: none;
-}
-
 .comment_body {
 	opacity: 0.9;
 	font-weight: normal;
@ -341,21 +360,26 @@ small {
 }

 .comment_body > p:not(:first-child) {
-	margin-top: 1.5em;
+	margin-top: 20px;
 }

 .comment_body a {
 	text-decoration: underline;
-	color: aqua;
+	color: var(--accent);
+}
+
+.deeper_replies {
+	color: var(--accent);
+	margin-left: 15px;
 }

 ::marker {
-	color: aqua;
+	color: var(--accent);
 }

-.reply {
-	margin-top: 0;
-	margin-left: 2em;
+.replies > .comment {
+	margin-left: -20px;
+	padding: 5px;
 }

 .datetime {
@ -377,16 +401,58 @@ small {
 	background: black;
 }

+/* Markdown */
+
+.md > *:not(:first-child) {
+	margin-top: 20px;
+}
+
+.md p {	font-size: 15px; }
+.md h1 { font-size: 22px; }
+.md h2 { font-size: 20px; }
+.md h3 { font-size: 18px; }
+.md h4 { font-size: 16px; }
+.md h5 { font-size: 14px; }
+.md h6 { font-size: 12px; }
+
+.md blockquote {
+	padding-left: 8px;
+	margin: 4px 0 4px 8px;
+	border-left: 4px solid var(--highlighted);
+}
+
+.md a {
+	text-decoration: underline;
+	color: var(--accent);
+}
+
+.md li { margin: 10px 0; }
+
+.md pre {
+	background: var(--outside);
+	padding: 20px;
+	margin-top: 10px;
+	border-radius: 5px;
+	box-shadow: var(--black-contrast);
+}
+
+.md code {
+	font-family: monospace;
+	font-size: 14px;
+}
+
+.md code:not(.md pre > code) { background: var(--highlighted); }
+
 /* Tables */

 table {
 	border: 3px var(--highlighted) solid;
-	border-spacing: 0rem;
+	border-spacing: 0;
 }

 td, th {
 	border: 1px var(--highlighted) solid;
-	padding: 0.5em;
+	padding: 10px;
 }

 /* Mobile */
@ -397,7 +463,7 @@ td, th {
 	}

 	.post_left {
-		border-radius: 0px 0px 5px 5px;
+		border-radius: 0 0 5px 5px;
 	}

 	.post_right {
@ -412,7 +478,27 @@ td, th {
 		max-width: initial;
 	}

+	.replies > .comment {
+		margin-left: -25px;
+		padding: 5px 0;
+	}
+
 	.datetime {
 		width: 100%;
 	}
+}
+
+@media screen and (max-width: 800px) {
+	main {
+		flex-direction: column-reverse;
+	}
+
+	aside {
+		margin: 20px 0 0 0;
+		max-width: 100%;
+	}
+
+	#sidebar {
+		margin: 20px 0;
+	}
 }
--- a/templates/base.html
+++ b/templates/base.html
@ -2,27 +2,21 @@
 <html lang="en">
 	<head>
 		{% block head %}
-		<title>{% block title %}{% endblock %}</title>
+		<title>{% block title %}Libreddit{% endblock %}</title>
+		<meta http-equiv="Referrer-Policy" content="no-referrer">
+		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self';">
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 		<meta name="description" content="View on Libreddit, an alternative private front-end to Reddit.">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 		<link rel="stylesheet" href="/style.css">
-		{% block sortstyle %}
-		<style>
-			#sort > #sort_{{ sort }} {
-				background: aqua;
-				color: black;
-			}
-		</style>
-		{% endblock %}
 		{% endblock %}
    </head>
-	<body>
-		{% block header %}
-		<header>
+	<body style="visibility: hidden;">
+		{% block navbar %}
+		<nav>
 			<a href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a>
 			<a id="github" href="https://github.com/spikecodes/libreddit">GITHUB</a>
-		</header>
+		</nav>
 		{% endblock %}
 		
 		{% block body %}
--- a/templates/popular.html
+++ b/templates/popular.html
@ -1,43 +1,48 @@
 {% extends "base.html" %}
-{% block title %}Libreddit{% endblock %}
 {% block content %}
-	<div id="sort">
-		<div id="sort_hot"><a href="?sort=hot">Hot</a></div>
-		<div id="sort_top"><a href="?sort=top">Top</a></div>
-		<div id="sort_new"><a href="?sort=new">New</a></div>
-		<div id="sort_rising"><a href="?sort=rising">Rising</a></div>
+	<div id="column_one">
+		<form>
+			<select id="sort" name="sort"> 
+				<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
+				<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
+				<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+				<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+			</select><input id="sort_submit" type="submit" value="&rarr;">
+		</form>
+		{% for post in posts %}
+		<div class="post">
+			<div class="post_left">
+				<p class="post_score">{{ post.score }}</p>
+				{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+			</div>
+			<div class="post_right">
+				<p>
+					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
+					&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+					{% if post.author_flair.0 != "" %}
+						<small class="author_flair">{{ post.author_flair.0 }}</small>
+					{% endif %}
+					<span class="datetime" style="float: right;">{{ post.time }}</span>
+				</p>
+				<p class="post_title">
+					{% if post.flair.0 != "" %}
+					<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+					{% endif %}
+					<a href="{{ post.url }}">{{ post.title }}</a>
+				</p>
+			</div>
+			<img class="post_thumbnail" src="{{ post.media }}">
+		</div><br>
+		{% endfor %}
+
+		<footer>
+			{% if ends.0 != "" %}
+			<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
+			{% endif %}
+
+			{% if ends.1 != "" %}
+			<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
+			{% endif %}
+		</footer>
 	</div>
-	{% for post in posts %}
-	<div class="post">
-		<div class="post_left">
-			<h3 class="post_score">{{ post.score }}</h3>
-		</div>
-		<div class="post_right">
-			<h4>
-				<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-				&bull;
-				Posted by 
-				<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-				<span class="datetime" style="float: right;">{{ post.time }}</span>
-			</h4>
-			<h3 class="post_title">
-				{% if post.flair.0 != "" %}
-				<small style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-				{% endif %}
-				<a href="{{ post.url }}">{{ post.title }}</a>
-			</h3>
-		</div>
-		<img class="post_thumbnail" src="{{ post.media }}">
-	</div><br>
-	{% endfor %}
-
-	<footer>
-		{% if ends.0 != "" %}
-		<a href="?before={{ ends.0 }}">PREV</a>
-		{% endif %}
-
-		{% if ends.1 != "" %}
-		<a href="?after={{ ends.1 }}">NEXT</a>
-		{% endif %}
-	</footer>
 {% endblock %}
--- a/templates/post.html
+++ b/templates/post.html
@ -7,70 +7,88 @@

 {% macro comment(item) -%}

-<div class="comment">
+<div id="{{ item.id }}" class="comment">
 	<div class="comment_left">
-		<h3 class="comment_score">{{ item.score }}</h3>
+		<p class="comment_score">{{ item.score }}</p>
 		<div class="line"></div>
 	</div>
 	<details class="comment_right" open>
-		<summary class="comment_data">
-			<a class="comment_author" href="/u/{{ item.author }}">u/{{ item.author }}</a> • <span class="datetime">{{ item.time }}</span>
+		<summary class="comment_data"><a class="comment_author {% if item.author == post.author %}op{% endif %}" href="/u/{{ item.author }}">u/{{ item.author }}</a>
+			{% if item.flair.0 != "" %}
+				<small class="author_flair">{{ item.flair.0 }}</small>
+			{% endif %}
+			&bull; <span class="datetime">{{ item.time }}</span>
 		</summary>
-		<h4 class="comment_body">{{ item.body }}</h4>
+		<p class="comment_body">{{ item.body }}</p>

 {%- endmacro %}

 {% block content %}
-	<div class="post highlighted">
-		<div class="post_left">
-			<h3 class="post_score">{{ post.score }}</h3>
-		</div>
-		<div class="post_right">
-			<h4>
-				<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-				&bull;
-				Posted by 
-				<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-				<span class="datetime">{{ post.time }}</span>
-			</h4>
-			<a href="{{ post.url }}" class="post_title">
-				{{ post.title }}
-				{% if post.flair.0 != "" %}
-				<small style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+	<div id="column_one">
+		<div class="post highlighted">
+			<div class="post_left">
+				<p class="post_score">{{ post.score }}</p>
+				{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+			</div>
+			<div class="post_right">
+				<p>
+					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
+					&bull;
+					<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+					{% if post.author_flair.0 != "" %}
+						<small class="author_flair">{{ post.author_flair.0 }}</small>
+					{% endif %}
+					<span class="datetime">{{ post.time }}</span>
+				</p>
+				<a href="{{ post.url }}" class="post_title">
+					{{ post.title }}
+					{% if post.flair.0 != "" %}
+						<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+					{% endif %}
+				</a>
+				{% if post.post_type == "image" %}
+				<img class="post_media" src="{{ post.media }}"/>
+				{% else if post.post_type == "video" %}
+				<video class="post_media" src="{{ post.media }}" controls autoplay loop>
+				{% else if post.post_type == "link" %}
+				<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
 				{% endif %}
-			</a>
-			{% if post.post_type == "image" %}
-			<img class="post_media" src="{{ post.media }}"/>
-			{% else if post.post_type == "video" %}
-			<video class="post_media" src="{{ post.media }}" controls autoplay loop>
-			{% else if post.post_type == "link" %}
-			<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
-			{% endif %}
-			<h4 class="post_body">{{ post.body }}</h4>
+				<div class="post_body">{{ post.body }}</div>
+			</div>
 		</div>
-	</div>
-	<div id="sort">
-		<div id="sort_confidence"><a href="?sort=confidence">Best</a></div>
-		<div id="sort_top"><a href="?sort=top">Top</a></div>
-		<div id="sort_new"><a href="?sort=new">New</a></div>
-		<div id="sort_controversial"><a href="?sort=controversial">Controversial</a></div>
-		<div id="sort_old"><a href="?sort=old">Old</a></div>
-	</div>
-
-	{% for c in comments -%}
-		<div class="thread">
-			{% call comment(c) %}
-			<div class="replies">
-				{% for reply in c.replies %}
-					{% call comment(reply) %}
-					<div class="replies">
-						{% for response in reply.replies %}
-							{% call comment(response) %}</details></div>
-						{% endfor %}
-					</div></details></div>
-				{% endfor %}
-			</div></details></div>
-		</div>
-	{%- endfor %}
+		<form>
+			<select id="sort" name="sort"> 
+				<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
+				<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+				<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+				<option value="controversial" {% if sort == "controversial" %}selected{% endif %}>Controversial</option> 
+				<option value="old" {% if sort == "old" %}selected{% endif %}>Old</option>
+			</select><input id="sort_submit" type="submit" value="&rarr;">
+		</form>

+		{% for c in comments -%}
+			<div class="thread">
+				{% call comment(c) %}
+				<div class="replies">
+					{% for reply1 in c.replies %}
+						{% call comment(reply1) %}
+						<div class="replies">
+							{% for reply2 in reply1.replies %}
+								{% call comment(reply2) %}
+								<div class="replies">
+									{% for reply3 in reply2.replies %}
+										{% call comment(reply3) %}
+										{% if reply3.replies.len() > 0 %}
+											<a class="deeper_replies" href="{{ post.url }}{{ reply3.id }}">&rarr; More replies</a>
+										{% endif %}
+										</details></div>
+									{% endfor %}
+								</div></details></div>
+							{% endfor %}
+						</div></details></div>
+					{% endfor %}
+				</div></details></div>
+			</div>
+		{%- endfor %}
+	</div>
 {% endblock %}
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@ -1,56 +1,73 @@
 {% extends "base.html" %}
+
+{% if sub.name != "" %}
 {% block title %}r/{{ sub.name }}: {{ sub.description }}{% endblock %}
+{% endif %}
+
 {% block body %}
-	<div id="about">
-		<div class="subreddit">
-			<div class="subreddit_left">
-				{{ sub.icon }}
-			</div>
-			<div class="subreddit_right">
-				<h2 class="subreddit_name">r/{{ sub.name }}</h2>
-				<p class="subreddit_description">{{ sub.description }}</p>
-				<div id="stats">👤 {{ sub.members }} 🟢 {{ sub.active }}</div>
-			</div>
-		</div>
-	</div>
-	<main>
-		<div id="sort">
-			<div id="sort_hot"><a href="?sort=hot">Hot</a></div>
-			<div id="sort_top"><a href="?sort=top">Top</a></div>
-			<div id="sort_new"><a href="?sort=new">New</a></div>
-		</div>
-		{% for post in posts %}
-		<div class="post">
-			<div class="post_left">
-				<h3 class="post_score">{{ post.score }}</h3>
-			</div>
-			<div class="post_right">
-				<h4>
-					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ sub.name }}</a></b>
-					&bull;
-					Posted by 
-					<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-					<span class="datetime">{{ post.time }}</span>
-				</h4>
-				<h3 class="post_title">
-					{% if post.flair.0 != "" %}
-					<small style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-					{% endif %}
-					<a href="{{ post.url }}">{{ post.title }}</a>
-				</h3>
-			</div>
-			<img class="post_thumbnail" src="{{ post.media }}">
-		</div><br>
-		{% endfor %}
+	<main style="max-width: 1000px;">
+		<div id="column_one">
+			<form>
+				<select id="sort" name="sort"> 
+					<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
+					<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+					<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+				</select><input id="sort_submit" type="submit" value="&rarr;">
+			</form>
+			{% for post in posts %}
+			<div class="post">
+				<div class="post_left">
+					<p class="post_score">{{ post.score }}</p>
+					{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+				</div>
+				<div class="post_right">
+					<p>
+						<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
+						&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+						{% if post.author_flair.0 != "" %}
+							<small class="author_flair">{{ post.author_flair.0 }}</small>
+						{% endif %}
+						<span class="datetime">{{ post.time }}</span>
+					</p>
+					<p class="post_title">
+						{% if post.flair.0 != "" %}
+						<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+						{% endif %}
+						<a href="{{ post.url }}">{{ post.title }}</a>
+					</p>
+				</div>
+				<img class="post_thumbnail" src="{{ post.media }}">
+			</div><br>
+			{% endfor %}

-		<footer>
-			{% if ends.0 != "" %}
-			<a href="?before={{ ends.0 }}">PREV</a>
-			{% endif %}
+			<footer>
+				{% if ends.0 != "" %}
+				<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
+				{% endif %}

-			{% if ends.1 != "" %}
-			<a href="?after={{ ends.1 }}">NEXT</a>
-			{% endif %}
-		</footer>
+				{% if ends.1 != "" %}
+				<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
+				{% endif %}
+			</footer>
+		</div>
+		{% if sub.name != "" %}
+		<aside>
+			<div id="subreddit">
+				<img id="subreddit_icon" src="{{ sub.icon }}">
+				<p id="subreddit_name">r/{{ sub.name }}</p>
+				<p id="subreddit_description">{{ sub.description }}</p>
+				<div id="subreddit_details">
+					<label>Members</label>
+					<label>Active</label>
+					<div>{{ sub.members }}</div>
+					<div>{{ sub.active }}</div>
+				</div>
+			</div>
+			<details id="sidebar">
+				<summary id="sidebar_label">Sidebar</summary>
+				<div id="sidebar_contents">{{ sub.info }}</div>
+			</details>
+		</aside>
+		{% endif %}
 	</main>
 {% endblock %}
--- a/templates/user.html
+++ b/templates/user.html
@ -1,62 +1,80 @@
 {% extends "base.html" %}
 {% block title %}Libreddit: u/{{ user.name }}{% endblock %}
 {% block body %}
-	<div id="about">
-		<div class="user">
-			<div class="user_left">
-				<img class="user_icon" src="{{ user.icon }}">
-			</div>
-			<div class="user_right">
-				<h2 class="user_name">u/{{ user.name }}</h2>
-				<p class="user_description"><span>Karma:</span> {{ user.karma }} | <span>Description:</span> "{{ user.description }}"</p>
-			</div>
+	<main style="max-width: 1000px;">
+		<div id="column_one">
+			<form>
+				<select id="sort" name="sort"> 
+					<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
+					<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+					<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+				</select><input id="sort_submit" type="submit" value="&rarr;">
+			</form>
+			{% for post in posts %}
+			{% if post.title != "Comment" %}
+			<div class='post'>
+				<div class="post_left">
+					<p class="post_score">{{ post.score }}</p>
+					{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+				</div>
+				<div class="post_right">
+					<p>
+						<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
+						&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+						{% if post.author_flair.0 != "" %}
+							<small class="author_flair">{{ post.author_flair.0 }}</small>
+						{% endif %}
+						<span class="datetime" style="float: right;">{{ post.time }}</span>
+					</p>
+					<p class="post_title">
+						{% if post.flair.0 == "Comment" %}
+						{% else if post.flair.0 == "" %}
+						{% else %}
+							<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+						{% endif %}
+						<a href="{{ post.url }}">{{ post.title }}</a>
+					</p>
+				</div>
+				<img class="post_thumbnail" src="{{ post.media }}">
+			</div><br>
+			{% else %}
+			<div class="comment">
+				<div class="comment_left">
+					<p class="comment_score">{{ post.score }}</p>
+					<div class="line"></div>
+				</div>
+				<details class="comment_right" open>
+					<summary class="comment_data">
+						<a class="comment_link" href="{{ post.url }}">COMMENT</a>
+						<span class="datetime">{{ post.time }}</span>
+					</summary>
+					<p class="comment_body">{{ post.body }}</p>
+				</details>
+			</div><br>
+			{% endif %}
+			{% endfor %}
+			<footer>
+				{% if ends.0 != "" %}
+				<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
+				{% endif %}
+
+				{% if ends.1 != "" %}
+				<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
+				{% endif %}
+			</footer>
 		</div>
-	</div>
-	<main>
-		<div id="sort">
-			<div id="sort_hot"><a href="?sort=hot">Hot</a></div>
-			<div id="sort_top"><a href="?sort=top">Top</a></div>
-			<div id="sort_new"><a href="?sort=new">New</a></div>
-		</div>
-		{% for post in posts %}
-		{% if post.title != "Comment" %}
-		<div class='post'>
-			<div class="post_left">
-				<h3 class="post_score">{{ post.score }}</h3>
+		<aside>
+			<div id="user">
+				<img id="user_icon" src="{{ user.icon }}">
+				<p id="user_name">u/{{ user.name }}</p>
+				<div id="user_description">{{ user.description }}</div>
+				<div id="user_details">
+					<label>Karma</label>
+					<label>Created</label>
+					<div>{{ user.karma }}</div>
+					<div>{{ user.created }}</div>
+				</div>
 			</div>
-			<div class="post_right">
-				<h4>
-					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-					&bull;
-					Posted by 
-					<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-					<span class="datetime" style="float: right;">{{ post.time }}</span>
-				</h4>
-				<h3 class="post_title">
-					{% if post.flair.0 == "Comment" %}
-					{% else if post.flair.0 == "" %}
-					{% else %}
-					<small style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-					{% endif %}
-					<a href="{{ post.url }}">{{ post.title }}</a>
-				</h3>
-			</div>
-			<img class="post_thumbnail" src="{{ post.media }}">
-		</div><br>
-		{% else %}
-		<div class="comment">
-			<div class="comment_left">
-				<h3 class="comment_score">{{ post.score }}</h3>
-			</div>
-			<div class="comment_right">
-				<h4>
-					COMMENT
-					<span class="datetime">{{ post.time }}</span>
-				</h4>
-				<h4 class="comment_body">{{ post.body }}</h4>
-			</div>
-		</div><br>
-		{% endif %}
-		{% endfor %}
+		</aside>
 	</main>
 {% endblock %}
Author	SHA1	Message	Date
Spike	3115ff3436	Update README.md	2020-12-28 18:45:46 -08:00
spikecodes	443b198c12	Markdown and Subreddit Sidebars	2020-12-28 18:42:46 -08:00
Spike	ac84d8d2db	List Instances as a Table	2020-12-27 21:46:39 -08:00
spikecodes	e27cf94fbf	Include Comment Lines in User History	2020-12-27 15:37:01 -08:00
spikecodes	68495fb280	Add Pages to User Profiles	2020-12-27 12:36:10 -08:00
spikecodes	bec5c78709	Persist Sort on Subreddit Pages	2020-12-26 12:43:51 -08:00
Spike	abfcfdf09e	Merge pull request #8 from zachjmurphy/master Add InsanityWtf Libreddit Instance	2020-12-25 18:55:41 -08:00
spikecodes	dad01749e6	Replace Responsive Feature with Secure	2020-12-25 18:06:33 -08:00
Zach	2efb73cee3	Update README.md	2020-12-25 17:09:11 -05:00
spikecodes	ace21b21d5	Redesign User/Subreddit About Boxes	2020-12-23 22:16:04 -08:00
spikecodes	280e16bd7f	Fix Subreddit Icons	2020-12-23 20:36:49 -08:00
Spike	44d44a529c	Add DotHQ Libreddit Instance	2020-12-23 13:34:05 -08:00
spikecodes	0957f2e339	NSFW Support	2020-12-22 18:29:43 -08:00
spikecodes	3516404a5f	Update v0.2.2	2020-12-22 09:15:55 -08:00
spikecodes	d96daa335f	Add Repl.it as Hosting Method	2020-12-22 09:11:03 -08:00
spikecodes	285d9da26d	Further Document Libreddit Privacy	2020-12-22 08:45:21 -08:00
spikecodes	9ab7a72bce	Fix Comparison Heading Position	2020-12-21 21:53:54 -08:00
spikecodes	46dd905509	Fix Grammar Mistakes	2020-12-21 21:52:50 -08:00
spikecodes	63d595c67d	Revise README	2020-12-21 21:51:18 -08:00
spikecodes	dc0b5f42e6	Update README with Reddit Comparison	2020-12-21 21:40:06 -08:00
spikecodes	9ecbd25488	Reorganize CSS	2020-12-21 21:39:55 -08:00
spikecodes	83816fbcc6	Allow Indexing	2020-12-21 21:39:10 -08:00
spikecodes	11cfbdc3ed	More Replies Button	2020-12-21 17:17:40 -08:00
spikecodes	4b7cbb3de2	Fix User Icons	2020-12-21 14:12:53 -08:00
spikecodes	b1a572072c	Highlight Post Authors in Comments	2020-12-21 08:38:24 -08:00
spikecodes	b1071e9579	Switch Sorting System to Dropdown	2020-12-20 21:49:31 -08:00
spikecodes	da971f8680	Optimized Nested Comments for Mobile, Added IDs	2020-12-20 20:52:15 -08:00
spikecodes	b596f86cc2	Update Screenshot	2020-12-20 19:05:44 -08:00
spikecodes	3bcf0832a1	Correct README Regarding Multireddits	2020-12-20 17:45:52 -08:00
spikecodes	565f4f23b3	Multireddit Support & Referrer Policy	2020-12-20 17:45:26 -08:00
spikecodes	ef3820a2e1	User Flairs	2020-12-20 11:29:23 -08:00
spikecodes	1678245750	Add Sorting to Short Links	2020-12-20 09:10:37 -08:00
spikecodes	3594b6d41f	Fix CSS and CSP	2020-12-19 22:25:00 -08:00
spikecodes	a754d42b9e	Enforce Content Security Policy	2020-12-19 21:49:10 -08:00
spikecodes	c7e0234d33	Fix comment hover color	2020-12-19 21:44:30 -08:00
spikecodes	11a9ff53e4	Update README	2020-12-19 21:44:07 -08:00