diff --git a/index.html b/index.html
index 7900fcb..4224571 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
+
@@ -12,7 +13,7 @@
- B L E N D
+ Blend
diff --git a/settings.html b/settings.html
index 3705c61..f0cdaf3 100644
--- a/settings.html
+++ b/settings.html
@@ -3,19 +3,25 @@
+
-
+
+
+
+
Blend | What's happening across the Fediverse
- B L E N D
+ Blend
@@ -27,7 +33,7 @@ Mastodon
@@ -40,7 +46,7 @@ Lemmy
@@ -48,24 +54,7 @@ Lemmy
- Appearance
-
-
-
-
-
-
-
-
-
diff --git a/src/styles/post-element.css b/src/styles/post-element.css
index d6aa65b..5e19f41 100644
--- a/src/styles/post-element.css
+++ b/src/styles/post-element.css
@@ -1,16 +1,31 @@
:host {
- width: 80%;
+ width: 90%;
display: grid;
- grid-template-columns: auto 1fr;
+ /* picture width is 106px with border, so align date with it */
+ grid-template-columns: 106px 1fr;
grid-template-rows: max-content max-content max-content;
gap: 1em;
padding-bottom: 1em;
padding-top: 1em;
}
+@media only screen and (min-width: 640px) {
+ :host {
+ width: 70%;
+ }
+}
+
.post-header {
display: flex;
- align-items: center
+ align-items: center;
+ word-break: break-all;
+}
+
+
+@media only screen and (min-width: 640px) {
+ .post-header {
+ word-wrap: normal;
+ }
}
picture {
diff --git a/src/styles/settings.css b/src/styles/settings.css
index b49382a..fbef09b 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -5,7 +5,7 @@ main section {
align-items: center;
}
-@media only screen and (min-width: 40em) {
+@media only screen and (min-width: 640px) {
main section {
flex-direction: row;
}