From 0ff52b71f2c0e970b1f0d43793c019bbed93e112 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 27 Dec 2023 11:23:52 +0100
Subject: [chore] Refactor HTML templates and CSS (#2480)

* [chore] Refactor HTML templates and CSS

* eslint

* ignore "Local"

* rss tests

* fiddle with OG just a tiny bit

* dick around with polls a bit more so SR stops saying "clickable"

* remove break

* oh lord

* don't lazy load avatar

* fix ogmeta tests

* clean up some cruft

* catch remaining calls to c.HTML

* fix error rendering + stack overflow in tag

* allow templating attributes

* fix indent

* set aria-hidden on status complementary content, since it's already present in the label anyway

* tidy up templating calls a little

* try to make styling a bit more consistent + readable

* fix up some remaining CSS issues

* fix up reports
---
 web/source/css/page.css | 107 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 web/source/css/page.css

(limited to 'web/source/css/page.css')

diff --git a/web/source/css/page.css b/web/source/css/page.css
new file mode 100644
index 000000000..d60dbe9c8
--- /dev/null
+++ b/web/source/css/page.css
@@ -0,0 +1,107 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.page {
+	display: grid;
+	min-height: 100vh;
+
+	grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
+	grid-template-columns: 1fr min(92%, 50rem) 1fr;
+	grid-template-rows: auto 1fr auto;
+}
+
+.page-header, .page-footer {
+	grid-column: 1 / span 3;
+}
+
+.page-content {
+	grid-column: 2;
+	align-self: start;
+}
+
+.page-header {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 1.5rem;
+	gap: 1rem;
+
+	a {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		justify-content: center;
+	
+		img {
+			align-self: center;
+		}
+	
+		h1 {
+			align-self: center;
+			text-align: center;
+	
+			font-size: 1.5rem;
+			line-height: 1.5rem;
+			word-wrap: anywhere;
+			color: $fg;
+		}
+	}
+
+	aside {
+		margin: 0;
+		font-style: italic;
+		font-weight: normal;
+		text-align: center;
+		font-size: 1.2rem;
+	
+		.count {
+			font-weight: bold;
+			color: $fg-accent;
+		}
+	}
+}
+
+.page-footer {
+	align-self: end;
+
+	nav ul {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		
+		/* Override list styling */
+		list-style-type: none;
+		padding-left: 0;
+
+		li {
+			text-align: center;
+			padding: 1rem;
+			flex-grow: 1;
+
+			a {
+				font-weight: bold;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 600px) {
+	.page-header {
+		text-align: center;
+	}
+}
-- 
cgit v1.2.3