add helper styles for making fullscreen pages

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 16 insertions, 0 deletions

diff --git a/links/main.css b/links/main.css
index e538dd1..3172879 100644
--- a/links/main.css
+++ b/links/main.css
@@ -345,6 +345,22 @@ ul.nobull li {
   display: none
 }
 
+.fullpage {
+  /*
+   * NOTE: 7rem = the height of header + footer, then the spacing between
+   *       header and content and footer and line and content
+   */
+  --header-and-footer-max-height: calc(7rem + (var(--body-spacing) * 3));
+
+  width: calc(100vw - (var(--body-spacing) * 2));
+  height: calc(100vh - (var(--body-spacing) * 2) - var(--header-and-footer-max-height));
+}
+
+.center {
+  display: grid;
+  place-items: center;
+}
+
 /* theme */
 
 @media (prefers-color-scheme: dark) {