From 4a51b7cfb0d75831fb73989fd88b3c8d2dea22c3 Mon Sep 17 00:00:00 2001 From: spikecodes <19519553+spikecodes@users.noreply.github.com> Date: Wed, 10 Mar 2021 15:10:59 -0800 Subject: [PATCH] Horizontally squish comments --- Cargo.toml | 10 ++--- static/style.css | 97 ++++++++++++++++++++++++++++-------------------- 2 files changed, 62 insertions(+), 45 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index e72deac..7d4c2f6 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,14 +8,14 @@ authors = ["spikecodes <19519553+spikecodes@users.noreply.github.com>"] edition = "2018" [dependencies] -tide = { version = "0.16.0", default-features = false, features = ["h1-server", "cookies"] } +askama = { version = "0.10.5", default-features = false } +async-recursion = "0.3.2" async-std = { version = "1.9.0", features = ["attributes"] } async-tls = { version = "0.11.0", default-features = false, features = ["client"] } cached = "0.23.0" -askama = { version = "0.10.5", default-features = false } +clap = { version = "2.33.3", default-features = false } +regex = "1.4.3" serde = { version = "1.0.124", features = ["derive"] } serde_json = "1.0.64" -async-recursion = "0.3.2" -regex = "1.4.3" -clap = { version = "2.33.3", default-features = false } +tide = { version = "0.16.0", default-features = false, features = ["h1-server", "cookies"] } time = "0.2.25" diff --git a/static/style.css b/static/style.css index 3b5aec4..d49cd17 100644 --- a/static/style.css +++ b/static/style.css @@ -1115,46 +1115,6 @@ td, th { /* Mobile */ -@media screen and (max-width: 480px) { - #version { display: none; } - - .post { - grid-template: "post_header post_header post_thumbnail" auto - "post_title post_title post_thumbnail" 1fr - "post_media post_media post_thumbnail" auto - "post_body post_body post_thumbnail" auto - "post_score post_footer post_thumbnail" auto - / auto 1fr fit-content(min(20%, 152px)); - } - - .post_score { - margin: 5px 0px 20px 15px; - padding: 0; - } - - .compact .post_score { padding: 0; } - - .post_score::before { content: "↑" } - - .post_header { font-size: 14px; } - .post_footer { margin-left: 15px; } - - .replies > .comment { - margin-left: -25px; - padding: 5px 0; - } - - .comment_left { - min-width: 45px; - padding: 5px 0px; - } - - .comment_author { margin-left: 10px; } - .comment_score { min-width: 35px; } - .comment_data::marker { font-size: 18px; } - .created { width: 100%; } -} - @media screen and (max-width: 800px) { body { padding-top: 120px } @@ -1196,3 +1156,60 @@ td, th { #logo, #links { margin-bottom: 5px; } #searchbox { width: calc(100vw - 35px); } } + +@media screen and (max-width: 480px) { + body { padding-top: 100px; } + #version { display: none; } + + .post { + grid-template: "post_header post_header post_thumbnail" auto + "post_title post_title post_thumbnail" 1fr + "post_media post_media post_thumbnail" auto + "post_body post_body post_thumbnail" auto + "post_score post_footer post_thumbnail" auto + / auto 1fr fit-content(min(20%, 152px)); + } + + .post_score { + margin: 5px 0px 20px 15px; + padding: 0; + } + + .compact .post_score { padding: 0; } + + .post_score::before { content: "↑" } + + .post_header { font-size: 14px; } + .post_footer { margin-left: 15px; } + + .replies > .comment { + margin-left: -12px; + padding: 5px 0; + } + + .comment_left { + min-width: auto; + padding: 5px 0px; + align-items: initial; + margin-top: -5px; + } + + .line { + margin-left: 5px; + } + + /* .thread { margin-left: -5px; } */ + .comment_right { padding: 5px 0 10px 2px; } + .comment_author { margin-left: 5px; } + .comment_data { margin-left: 12px; } + .comment_data::marker { font-size: 22px; } + .created { width: 100%; } + + .comment_score { + min-width: 32px; + height: 20px; + font-size: 15px; + padding: 7px 0px; + margin-right: -5px; + } +} \ No newline at end of file