froge/cyberfrog.me
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix background scaling (again (again))

Browse source 
Axel helped me unfuck the HTML and CSS so the background gradient
scaling no longer depends on the size of the body element, which I was
previously locking to the size of the outer html element, and locking
THAT to 100% of the view port size (which is awful code and bad practice)

Axel refactored this so that the outer html element and body element
both naturally scale to the browser size, as expected, and the CSS
background was changed to be fixed at 100% height/width regardless of
viewport size, which results in much cleaner code (thanks Axel)
This commit is contained in:
Froge 2025-07-20 23:39:39 +10:00
parent 138440d973
commit 2623244fb3
Signed by: froge
GPG key ID: A825E09930271BFA
1 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

28
static/main.css
View file

@ -2,23 +2,32 @@
margin: 0rem; margin: 0rem;
} }
/* Magic fix which forces outer most element to full view size for background scaling */
/* NOTE: min-height and min-width here prevent body/site-content overflow and background breaking */
html { html {
min-height: 100%; margin: 0rem;
min-width: 100%; padding: 0rem;
display: flex;
justify-content: center;
} }
body { body {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
font-family: monospace; font-family: monospace;
padding: 2rem; padding: 2rem;
font-size: 18px; font-size: 18px;
max-width: 55rem;
line-height: 1.4; line-height: 1.4;
/* Fancy background CSS colouring lives here */ /* Fancy background CSS styling lives here */
background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(65,15,75, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,80, 1) 60%, rgba(0,0,0, 1)); background: linear-gradient(
to bottom right,
rgba(0, 0, 0, 1),
rgba(65, 15, 75, 1) 40%,
rgba(65, 15, 90, 1) 50%,
rgba(30, 15, 80, 1) 60%,
rgba(0, 0, 0, 1)
);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
} }
li { li {
@ -44,6 +53,7 @@ a:hover {
} }
#site-content { #site-content {
max-width: 55rem;
color: #e4e4e4; color: #e4e4e4;
padding: 2rem; padding: 2rem;
border-radius: 1rem; border-radius: 1rem;