From f2dc0026849d7914446d900c96f38ff1886f8bc7 Mon Sep 17 00:00:00 2001 From: Jackson Conte Date: Tue, 12 Dec 2023 17:53:06 -0800 Subject: [PATCH] mobile friendly + meta for SEO + img tag fixes --- index.html | 3 ++- settings.html | 33 +++++++++++---------------------- src/styles/post-element.css | 21 ++++++++++++++++++--- src/styles/settings.css | 2 +- 4 files changed, 32 insertions(+), 27 deletions(-) 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

    -
    -
    - - -
    -
    -
    - -
    - Created by [names here], copyright LOLOLOL -
    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; }