diff options
| author | Anhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me> | 2024-11-10 01:31:26 +0100 |
|---|---|---|
| committer | Anhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me> | 2024-11-10 01:31:26 +0100 |
| commit | 3c7a957b84ad0adf4648a960b0df7df17de3116a (patch) | |
| tree | 4e4e5c5ab710fd02268726eeae7861fedb63760f | |
| parent | 81f8ee205bda97cc35e2a02a7f3834dc365fa1f9 (diff) | |
fix(style): footer doing weird things
| -rw-r--r-- | scss/main.scss | 22 | ||||
| -rw-r--r-- | templates/base/base.gohtml | 8 |
2 files changed, 20 insertions, 10 deletions
diff --git a/scss/main.scss b/scss/main.scss index 09de48a..20147e5 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -9,10 +9,6 @@ $bp-little: 650px; body { --background-image: ; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; font-size: 18px; background: var(--background-image) center fixed no-repeat; background-size: cover; @@ -22,13 +18,23 @@ body { } } +.center { + display: flex; + align-items: center; + justify-content: center; + height: 95vh; + width: 100%; + @media only screen and (max-width: $bp-little) { + min-height: 100vh; + height: auto; + } +} + a { color: var(--text-color); } .credits { - position: absolute; - bottom: 0; display: flex; gap: 1rem; @media only screen and (max-width: $bp-little) { @@ -37,6 +43,8 @@ a { font-size: 14px; flex-wrap: wrap; flex-direction: column; + margin-bottom: 2rem; + margin-top: 2rem; } font-size: 16px; & a { @@ -63,7 +71,7 @@ main { @media only screen and (max-width: $bp-little) { box-sizing: border-box; width: 100%; - min-height: 100%; + min-height: 100vh; border-radius: 0; } } diff --git a/templates/base/base.gohtml b/templates/base/base.gohtml index 8546d67..634459c 100644 --- a/templates/base/base.gohtml +++ b/templates/base/base.gohtml @@ -10,12 +10,14 @@ {{template "opengraph-base" .SEO}} </head> <body style="{{ .Data.GetBackgroundImage }}{{ .Data.GetTextColor }}"> - {{template "body" .Data}} - <div class="credits"> + <div class="center"> + {{template "body" .Data}} + </div> + <footer class="credits"> <p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p> <p><a href="{{ .Data.Legal.LegalInformationLink }}">Legal information</a></p> <p><a href="/credits">Credits</a></p> - </div> + </footer> <script type="module" src="{{getAssetPath "index.js"}}" defer></script> </body> </html> |