move pageType to body class

2 years ago · 337dffaab9
3 changed files with 24 additions and 23 deletions
--- a/internal/web/profile.go
+++ b/internal/web/profile.go
@ -156,6 +156,7 @@ func (m *Module) profileGETHandler(c *gin.Context) {
 		Javascript:  []string{jsFrontend},
 		Extra: map[string]any{
 			"account":          targetAccount,
+			"pageType":         "wider",
 			"rssFeed":          rssFeed,
 			"robotsMeta":       robotsMeta,
 			"statuses":         statusResp.Items,
--- a/web/source/css/layout/page.css
+++ b/web/source/css/layout/page.css
@ -86,34 +86,34 @@
 .page-content {
 	grid-column: 2;
 	align-self: start;
+}

-	&.with-sidebar {
-		grid-column: 1 / span 2;
-		display: grid;
-		grid-template-columns: 1fr minmax(auto, 50rem);
-		grid-template-columns: 1fr min(92%, 50rem);
-
-		.sidebar {
-			display: inline-block;
-			align-self: start;
-			justify-self: end;
-			position: sticky;
-			top: 0;
-			padding: 0 1.5rem;
-
-			ol {
-				margin-top: 0;
-			}
+.page.with-sidebar .page-content {
+	grid-column: 1 / span 2;
+	display: grid;
+	grid-template-columns: 1fr minmax(auto, 50rem);
+	grid-template-columns: 1fr min(92%, 50rem);
+
+	.sidebar {
+		display: inline-block;
+		align-self: start;
+		justify-self: end;
+		position: sticky;
+		top: 0;
+		padding: 0 1.5rem;
+
+		ol {
+			margin-top: 0;
+		}

-			h2 {
-				margin-top: 1.5rem;
-			}
+		h2 {
+			margin-top: 1.5rem;
 		}
 	}
 }

@media screen and (max-width: 80rem) {
-	.page-content.with-sidebar {
+	.page.with-sidebar .page-content {
 		grid-column: 2;
 		display: flex;
 		flex-direction: column;
--- a/web/template/page.tmpl
+++ b/web/template/page.tmpl
@ -74,11 +74,11 @@ image/webp
    <title>{{- template "instanceTitle" . -}}</title>
 </head>

-<body class="page">
+<body class="page{{if .pageType}} {{.pageType}}{{end}}">
    <header class="page-header{{if .largeHeader}} large{{end}}">
        {{- include "page_header.tmpl" . | indent 3 }}
    </header>
-    <div class="page-content{{if .pageType}} {{.pageType}}{{end}}">
+    <div class="page-content">
        {{- include .pageContent . | indent 3 | outdentPre }}
    </div>
    <footer class="page-footer">