gtsocial-umbx

commit 3f626c8ee89e5533b81ecfe5971a98728fb050f4
parent 9a9702c9641e1488e69f07e1cb6b1af31410a3dc
Author: tobi <31960611+tsmethurst@users.noreply.github.com>
Date:   Thu, 11 Aug 2022 19:11:19 +0200

[frontend] Status styling tweaks (#751)

* style hr

* start work on code styling in statuses

* pad top + bottom of content

* squircle code

* pad less actually

* get code blocks formatted nicely phew

* fix some silliness (thanks f0x)

* update code block styling

Co-authored-by: f0x <f0x@cthu.lu>
Diffstat:
M
web/source/css/status.css
 | 
32
++++++++++++++++++++++++++++++++

1 file changed, 32 insertions(+), 0 deletions(-)
diff --git a/web/source/css/status.css b/web/source/css/status.css
@@ -119,6 +119,7 @@ main {
 		margin: 0;
 		margin-top: 0.5rem;
 		grid-column: span 2;
+		overflow: hidden;
 
 		position: relative;
 		z-index: 2;
@@ -129,6 +130,9 @@ main {
 		}
 
 		.content {
+			padding-top: 0.5rem;
+			padding-bottom: 0.5rem;
+
 			word-break: break-word;
 
 			blockquote {
@@ -137,6 +141,34 @@ main {
 				margin-left: 1rem;
 				font-style: italic;
 			}
+
+			hr {
+				border: 1px dashed $sloth_orange1;
+			} 
+
+			pre, code {
+				background-color: $sloth_gray2_darker7;
+			}
+
+			code {
+				padding: 0.25rem;
+				border-radius: $br_inner;
+			}
+
+			pre {
+				display: flex;
+				border-radius: $br;
+				padding: 0.5rem;
+
+				code {	
+					padding: 0.5rem;
+					white-space: pre;
+					border-radius: 0;
+					overflow-x: auto;
+					-webkit-overflow-scrolling: touch;
+					scrollbar-color: $sloth_orange1 $sloth_gray2_darker3;
+				}
+			}
 		}
 	}