diff --git a/internal/web/status.go b/internal/web/status.go index a26f7bbbc..e108a9a36 100644 --- a/internal/web/status.go +++ b/internal/web/status.go @@ -74,8 +74,9 @@ func (m *Module) statusTemplateHandler(c *gin.Context) { } c.HTML(http.StatusOK, "status.tmpl", gin.H{ - "instance": instance, - "status": status, - "context": context, + "instance": instance, + "status": status, + "context": context, + "stylesheets": []string{"/assets/Fork-Awesome/css/fork-awesome.min.css", "/assets/status.css"}, }) } diff --git a/web/assets/bundle.css b/web/assets/base.css similarity index 79% rename from web/assets/bundle.css rename to web/assets/base.css index 7d4eae172..b28cf2533 100644 --- a/web/assets/bundle.css +++ b/web/assets/base.css @@ -1,46 +1,71 @@ html, body { padding: 0; margin: 0; - background: #525c66; + background: rgb(70, 79, 88); color: #fafaff; font-family: sans-serif; } body { display: grid; - grid-template-columns: 1fr 50% 1fr; - grid-template-columns: 1fr 90ch 1fr; - line-height: 1.5em; + grid-template-rows: auto 1fr auto; min-height: 100vh; - grid-auto-rows: auto; - grid-auto-flow: dense; + line-height: 1.5em; } -body > * { +main { + background: #525c66; + display: grid; + padding-top: 2rem; + grid-template-columns: 1fr 50% 1fr; + grid-template-columns: auto min(92%, 90ch) auto; +} + +main .left { + grid-column: 1; + } + +main .right { + grid-column: 3; + } + +main.lightgray { + background: #525c66; + } + +main > * { align-self: start; grid-column: 2; } -body header, body footer, body .fullWidth { - grid-column: 1/4; - grid-column: 1/-1; - } - -body .left { - grid-column: 1; - } - -body .right { - grid-column: 3; - } - header { background: rgb(70, 79, 88); - padding: 2rem; - margin-bottom: 4rem; + padding: 2rem 0; + padding-bottom: 0; + display: flex; + flex-wrap: wrap; } +header img { + height: 4rem; + padding-left: 2rem; + padding-bottom: 2rem; + } + +header div { + height: 100%; + margin: 0 2rem; + margin-top: -2rem; + flex-grow: 1; + align-self: center; + display: flex; + } + +header div h1 { + align-self: center; + } + h1 { /* color: $acc1; */ margin: 0; @@ -160,26 +185,21 @@ footer a { } @media screen and (orientation: portrait) { - body { + main { grid-template-columns: 1fr 92% 1fr; } - body footer, body .left, body .right { - grid-column: 2; - } - header { text-align: center; } footer { - padding: 0; margin-top: 2rem; grid-template-columns: 1fr; } footer div { - margin: 1rem 0; + margin: 0.3rem 0; } section.apps .applist { diff --git a/web/assets/status.css b/web/assets/status.css new file mode 100644 index 000000000..467d4302e --- /dev/null +++ b/web/assets/status.css @@ -0,0 +1,212 @@ +main { + background: transparent; + grid-auto-rows: auto; +} + +.thread { + display: flex; + flex-direction: column; +} + +.toot { + position: relative; + background: rgb(75, 84, 93); + padding: 2rem; + /* padding-bottom: 0; */ + display: grid; + grid-template-columns: 3.2rem auto 1fr; + column-gap: 0.5rem; + margin-bottom: 0.2rem; +} + +.toot a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + } + +.toot .avatar { + grid-row: span 2; + } + +.toot .avatar img { + height: 3.2rem; + width: 3.2rem; + object-fit: cover; + } + +.toot .displayname { + font-weight: bold; + font-size: 1.2rem; + align-self: start; + } + +.toot .username { + color: #b0b0b5; + justify-self: start; + } + +.toot .text { + margin: 0; + grid-column: span 2; + } + +.toot .text a { + color: #de8957; + text-decoration: underline; + } + +.toot .media { + margin-top: 0.6rem; + border-radius: 0.2rem; + grid-column: span 3; + display: grid; + grid-template-columns: 50% 50%; + grid-auto-rows: 16rem; + overflow: hidden; + gap: 0.3rem; + } + +.toot .media a { + position: relative; + } + +.toot .media .no-image-desc { + display: flex; + position: absolute; + bottom: 0.1rem; + right: 0.4rem; + content: "(!)"; + color: white; + background: #5897df; + padding: 0.2rem 0.4rem; + border-radius: 100%; + z-index: 3; + } + +.toot .media .no-image-desc span { + margin-left: 0.3rem; + display: none; + } + +.toot .media .no-image-desc:hover span { + display: block; + } + +.toot .media .no-image-desc:hover { + border-radius: 0.2rem; +} + +.toot .media img { + width: 100%; + height: 100%; + object-fit: cover; + } + +.toot .media.single a { + grid-column: span 2; + } + +.toot .media.odd a:first-child { + grid-row: span 2; + } + +.toot .info { + display: none; + } + +.toot .info div { + position: relative; + padding-right: 1.3rem; + } + +.toot .info .stats { + display: flex; + } + +.toot .info { + + color: #b0b0b5; + grid-column: span 3; + margin-top: 0.5rem; + flex-wrap: wrap; +} + +.toot .info div.stats::after { + display: none; + } + +.toot .info div::after { + display: block; + background: #b0b0b5; + height: 0.25rem; + width: 0.25rem; + content: ""; + position: absolute; + top: calc((1.5rem - 0.25rem) / 2); + right: 0.55rem; + border-radius: 1rem; + } + +.toot .info div:last-child::after { + display: none; + } + +.toot .info div:last-child { + margin-right: 0; +} + +.toot .toot-link { + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + + position: absolute; + z-index: 0; + } + +.toot {} + +.toot:first-child { + /* top left, top right */ + border-radius: 0.3rem 0.3rem 0 0; + } + +.toot:last-child { + /* bottom left, bottom right */ + border-radius: 0 0 0.3rem 0.3rem; + padding-bottom: 1.5rem; + } + +.toot.expanded { + background: #525c66; + padding-bottom: 1.5rem; + } + +.toot.expanded .displayname { + grid-column: span 2; + } + +.toot.expanded .text { + grid-column: span 3; + grid-row: span 1; + margin-top: 0.3rem; + } + +.toot.expanded .info { + display: flex; + } + +.toot.expanded .media { + grid-auto-rows: 1fr; + max-height: 120rem; + } + +footer + div { /* something weird from the devstack.. */ + display: none; +} \ No newline at end of file diff --git a/web/template/404.tmpl b/web/template/404.tmpl index 633ed65cf..096f7f364 100644 --- a/web/template/404.tmpl +++ b/web/template/404.tmpl @@ -1,11 +1,9 @@ {{ template "header.tmpl" .}} - - -
-

404: Page Not Found

- If you believe this was an error, you can contact an admin -
+
+
+

404: Page Not Found

+ If you believe this was an error, you can contact an admin +
+
{{ template "footer.tmpl" .}} \ No newline at end of file diff --git a/web/template/header.tmpl b/web/template/header.tmpl index a1b0bf372..0f224cf95 100644 --- a/web/template/header.tmpl +++ b/web/template/header.tmpl @@ -8,8 +8,9 @@ - - + + {{range .stylesheets}} + {{end}} {{.instance.Title}} - GoToSocial diff --git a/web/template/index.tmpl b/web/template/index.tmpl index 6751c9bd2..52581d3aa 100644 --- a/web/template/index.tmpl +++ b/web/template/index.tmpl @@ -1,40 +1,40 @@ {{ template "header.tmpl" .}} - -
-

Home to {{.instance.Stats.user_count}} users - who posted {{.instance.Stats.status_count}} statuses, - federating with {{.instance.Stats.domain_count}} other instances.

-
- {{.instance.ShortDescription |noescape}} -
-
+
-
-

- GoToSocial does not provide its own frontend, but implements the Mastodon client API. - You can use this server through a variety of clients: -

-
-
- -
-

Pinafore

-

Pinafore is a web client designed for speed and simplicity.

- Use Pinafore +
+

Home to {{.instance.Stats.user_count}} users + who posted {{.instance.Stats.status_count}} statuses, + federating with {{.instance.Stats.domain_count}} other instances.

+
+ {{.instance.ShortDescription |noescape}} +
+
+ +
+

+ GoToSocial does not provide its own frontend, but implements the Mastodon client API. + You can use this server through a variety of clients: +

+
+
+ +
+

Pinafore

+

Pinafore is a web client designed for speed and simplicity.

+ Use Pinafore +
+
+
+ +
+

Tusky

+

Tusky is a lightweight mobile client for Android

+ Get Tusky +
-
- -
-

Tusky

-

Tusky is a lightweight mobile client for Android

- Get Tusky -
-
-
-
+ +
{{ template "footer.tmpl" .}} \ No newline at end of file diff --git a/web/template/sign-in.tmpl b/web/template/sign-in.tmpl index cfe932b3a..48a833cee 100644 --- a/web/template/sign-in.tmpl +++ b/web/template/sign-in.tmpl @@ -1,13 +1,15 @@ {{ template "header.tmpl" .}} -
-

Login

-
- - - - - - -
-
+
+
+

Login

+
+ + + + + + +
+
+
{{ template "footer.tmpl" .}}