anhgelus/now
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(style): footer doing weird things

Browse source
This commit is contained in:
Anhgelus Morhtuuzh 2024-11-10 01:31:26 +01:00
parent 81f8ee205b
commit 3c7a957b84
No known key found for this signature in database
GPG key ID: CAD341EFA92DDDE5
2 changed files with 20 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
scss/main.scss
View file

@ -9,10 +9,6 @@ $bp-little: 650px;
body { body {
--background-image: ; --background-image: ;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px; font-size: 18px;
background: var(--background-image) center fixed no-repeat; background: var(--background-image) center fixed no-repeat;
background-size: cover; 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 { a {
color: var(--text-color); color: var(--text-color);
} }
.credits { .credits {
position: absolute;
bottom: 0;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: $bp-little) {
@ -37,6 +43,8 @@ a {
font-size: 14px; font-size: 14px;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
margin-bottom: 2rem;
margin-top: 2rem;
} }
font-size: 16px; font-size: 16px;
& a { & a {
@ -63,7 +71,7 @@ main {
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: $bp-little) {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
min-height: 100%; min-height: 100vh;
border-radius: 0; border-radius: 0;
} }
} }

8
templates/base/base.gohtml
View file

@ -10,12 +10,14 @@
{{template "opengraph-base" .SEO}} {{template "opengraph-base" .SEO}}
</head> </head>
<body style="{{ .Data.GetBackgroundImage }}{{ .Data.GetTextColor }}"> <body style="{{ .Data.GetBackgroundImage }}{{ .Data.GetTextColor }}">
{{template "body" .Data}} <div class="center">
<div class="credits"> {{template "body" .Data}}
</div>
<footer class="credits">
<p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p> <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="{{ .Data.Legal.LegalInformationLink }}">Legal information</a></p>
<p><a href="/credits">Credits</a></p> <p><a href="/credits">Credits</a></p>
</div> </footer>
<script type="module" src="{{getAssetPath "index.js"}}" defer></script> <script type="module" src="{{getAssetPath "index.js"}}" defer></script>
</body> </body>
</html> </html>