Ensure content flows and stays centered on small screens (#27)

* Ensure content flows and stays centered on small screens

Fixes #18

* Do not overflow image, instead resize with page

* update CHANGELOG

Signed-off-by: Xe Iaso <me@xeiaso.net>

---------

Signed-off-by: Xe Iaso <me@xeiaso.net>
Co-authored-by: Xe Iaso <me@xeiaso.net>

3 files changed, 13 insertions, 14 deletions

diff --git a/cmd/anubis/index.templ b/cmd/anubis/index.templ
index a2270fa..aaec7b6 100644
--- a/cmd/anubis/index.templ
+++ b/cmd/anubis/index.templ
@@ -19,7 +19,6 @@ templ base(title string, body templ.Component) {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 65ch;
       margin-left: auto;
       margin-right: auto;
     }
@@ -165,13 +164,13 @@ templ index() {
 	<div class="centered-div">
 		<img
 			id="image"
-			width="256"
+			style="width:100%;max-width:256px;"
 			src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
     anubis.Version }
 		/>
 		<img
 			style="display:none;"
-			width="256"
+			style="width:100%;max-width:256px;"
 			src={ "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
     anubis.Version }
 		/>
@@ -201,7 +200,7 @@ templ errorPage(message string) {
 	<div class="centered-div">
 		<img
 			id="image"
-			width="256"
+			style="width:100%;max-width:256px;"
 			src={ "/.within.website/x/cmd/anubis/static/img/sad.webp?cacheBuster=" + anubis.Version }
 		/>
 		<p>{ message }.</p>
diff --git a/cmd/anubis/index_templ.go b/cmd/anubis/index_templ.go
index 9bfa351..5e47136 100644
--- a/cmd/anubis/index_templ.go
+++ b/cmd/anubis/index_templ.go
@@ -60,7 +60,7 @@ func base(title string, body templ.Component) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><style>\n    body,\n    html {\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 65ch;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .centered-div {\n      text-align: center;\n    }\n\n    .lds-roller,\n    .lds-roller div,\n    .lds-roller div:after {\n      box-sizing: border-box;\n    }\n\n    .lds-roller {\n      display: inline-block;\n      position: relative;\n      width: 80px;\n      height: 80px;\n    }\n\n    .lds-roller div {\n      animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n      transform-origin: 40px 40px;\n    }\n\n    .lds-roller div:after {\n      content: \" \";\n      display: block;\n      position: absolute;\n      width: 7.2px;\n      height: 7.2px;\n      border-radius: 50%;\n      background: currentColor;\n      margin: -3.6px 0 0 -3.6px;\n    }\n\n    .lds-roller div:nth-child(1) {\n      animation-delay: -0.036s;\n    }\n\n    .lds-roller div:nth-child(1):after {\n      top: 62.62742px;\n      left: 62.62742px;\n    }\n\n    .lds-roller div:nth-child(2) {\n      animation-delay: -0.072s;\n    }\n\n    .lds-roller div:nth-child(2):after {\n      top: 67.71281px;\n      left: 56px;\n    }\n\n    .lds-roller div:nth-child(3) {\n      animation-delay: -0.108s;\n    }\n\n    .lds-roller div:nth-child(3):after {\n      top: 70.90963px;\n      left: 48.28221px;\n    }\n\n    .lds-roller div:nth-child(4) {\n      animation-delay: -0.144s;\n    }\n\n    .lds-roller div:nth-child(4):after {\n      top: 72px;\n      left: 40px;\n    }\n\n    .lds-roller div:nth-child(5) {\n      animation-delay: -0.18s;\n    }\n\n    .lds-roller div:nth-child(5):after {\n      top: 70.90963px;\n      left: 31.71779px;\n    }\n\n    .lds-roller div:nth-child(6) {\n      animation-delay: -0.216s;\n    }\n\n    .lds-roller div:nth-child(6):after {\n      top: 67.71281px;\n      left: 24px;\n    }\n\n    .lds-roller div:nth-child(7) {\n      animation-delay: -0.252s;\n    }\n\n    .lds-roller div:nth-child(7):after {\n      top: 62.62742px;\n      left: 17.37258px;\n    }\n\n    .lds-roller div:nth-child(8) {\n      animation-delay: -0.288s;\n    }\n\n    .lds-roller div:nth-child(8):after {\n      top: 56px;\n      left: 12.28719px;\n    }\n\n    @keyframes lds-roller {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n      </style>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><style>\n    body,\n    html {\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .centered-div {\n      text-align: center;\n    }\n\n    .lds-roller,\n    .lds-roller div,\n    .lds-roller div:after {\n      box-sizing: border-box;\n    }\n\n    .lds-roller {\n      display: inline-block;\n      position: relative;\n      width: 80px;\n      height: 80px;\n    }\n\n    .lds-roller div {\n      animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n      transform-origin: 40px 40px;\n    }\n\n    .lds-roller div:after {\n      content: \" \";\n      display: block;\n      position: absolute;\n      width: 7.2px;\n      height: 7.2px;\n      border-radius: 50%;\n      background: currentColor;\n      margin: -3.6px 0 0 -3.6px;\n    }\n\n    .lds-roller div:nth-child(1) {\n      animation-delay: -0.036s;\n    }\n\n    .lds-roller div:nth-child(1):after {\n      top: 62.62742px;\n      left: 62.62742px;\n    }\n\n    .lds-roller div:nth-child(2) {\n      animation-delay: -0.072s;\n    }\n\n    .lds-roller div:nth-child(2):after {\n      top: 67.71281px;\n      left: 56px;\n    }\n\n    .lds-roller div:nth-child(3) {\n      animation-delay: -0.108s;\n    }\n\n    .lds-roller div:nth-child(3):after {\n      top: 70.90963px;\n      left: 48.28221px;\n    }\n\n    .lds-roller div:nth-child(4) {\n      animation-delay: -0.144s;\n    }\n\n    .lds-roller div:nth-child(4):after {\n      top: 72px;\n      left: 40px;\n    }\n\n    .lds-roller div:nth-child(5) {\n      animation-delay: -0.18s;\n    }\n\n    .lds-roller div:nth-child(5):after {\n      top: 70.90963px;\n      left: 31.71779px;\n    }\n\n    .lds-roller div:nth-child(6) {\n      animation-delay: -0.216s;\n    }\n\n    .lds-roller div:nth-child(6):after {\n      top: 67.71281px;\n      left: 24px;\n    }\n\n    .lds-roller div:nth-child(7) {\n      animation-delay: -0.252s;\n    }\n\n    .lds-roller div:nth-child(7):after {\n      top: 62.62742px;\n      left: 17.37258px;\n    }\n\n    .lds-roller div:nth-child(8) {\n      animation-delay: -0.288s;\n    }\n\n    .lds-roller div:nth-child(8):after {\n      top: 56px;\n      left: 12.28719px;\n    }\n\n    @keyframes lds-roller {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n      </style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -75,7 +75,7 @@ func base(title string, body templ.Component) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 147, Col: 49}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 146, Col: 49}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -118,7 +118,7 @@ func index() templ.Component {
 			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"centered-div\"><img id=\"image\" width=\"256\" src=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"centered-div\"><img id=\"image\" style=\"width:100%;max-width:256px;\" src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -126,13 +126,13 @@ func index() templ.Component {
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
 			anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 170, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 169, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"> <img style=\"display:none;\" width=\"256\" src=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"> <img style=\"display:none;\" style=\"width:100%;max-width:256px;\" src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -140,7 +140,7 @@ func index() templ.Component {
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
 			anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 176, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 175, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -153,7 +153,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 179, Col: 116}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 178, Col: 116}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -188,14 +188,14 @@ func errorPage(message string) templ.Component {
 			templ_7745c5c3_Var9 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"centered-div\"><img id=\"image\" width=\"256\" src=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"centered-div\"><img id=\"image\" style=\"width:100%;max-width:256px;\" src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/sad.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 205, Col: 90}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 204, Col: 90}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -208,7 +208,7 @@ func errorPage(message string) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(message)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 207, Col: 14}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 206, Col: 14}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
diff --git a/cmd/anubis/static/js/main.mjs.gz b/cmd/anubis/static/js/main.mjs.gz
index 2bd25c4..e0b648c 100644
--- a/cmd/anubis/static/js/main.mjs.gz
+++ b/cmd/anubis/static/js/main.mjs.gz