zepp
/
emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add background image to body, style body and inner elements

This commit is contained in:
emma 2024-12-13 21:57:32 -05:00
parent 065c6a6a33
commit bb537c6c0d
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/site/assets/sakura.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

28
style/style.css
View File

@ -17,9 +17,10 @@ body {
height: 100vh; height: 100vh;
width: auto; width: auto;
background-color: var(--body-background-color); background-color: var(--body-background-color);
background-image: url("../img/site/assets/sakura.webp");
display: grid; display: grid;
grid-template-columns: 15vw 60vw; grid-template-columns: 12vw 60vw;
grid-template-rows: 5vh 2fr 5vh; grid-template-rows: 6vh 88vh 5vh;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
} }
@ -29,7 +30,6 @@ h1, h2, h3, h4, h5, h6, p, ul {
} }
main, nav { main, nav {
padding-left: 2.5rem;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
@ -37,8 +37,9 @@ main, nav {
main { main {
background-color: var(--background-color); background-color: var(--background-color);
height: 100%; height: 88vh;
width: 60vw; width: 60vw;
padding-left: 2.5rem;
overflow: auto; overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #588c7388 #65eeb788; scrollbar-color: #588c7388 #65eeb788;
@ -51,11 +52,15 @@ header {
grid-row: 1/2; grid-row: 1/2;
grid-column: 1/3; grid-column: 1/3;
height: 5vh; height: 5vh;
width: 75vw; width: 72vw;
padding-top: 0.4rem;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 10px solid; border-bottom: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to right, #D60270, #9B4F96, #0038A8); border-image-source: linear-gradient(to right, #D60270, #9B4F96, #0038A8);
margin-top: 0.5rem;
} }
footer { footer {
@ -63,9 +68,10 @@ footer {
grid-row: 3/4; grid-row: 3/4;
grid-column: 1/3; grid-column: 1/3;
height: 5vh; height: 5vh;
width: 75vw; width: 72vw;
text-align: center; padding-top: 0.5rem;
align-self: end; border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
} }
header, footer { header, footer {
@ -75,7 +81,6 @@ header, footer {
header span, footer span { header span, footer span {
height: 0; height: 0;
margin-top: 0.5rem;
font-size: 1.3rem; font-size: 1.3rem;
} }
@ -84,8 +89,9 @@ nav {
grid-row: 2/3; grid-row: 2/3;
grid-column: 1/2; grid-column: 1/2;
justify-self: end; justify-self: end;
width: 15vw; width: 12vw;
height: auto; height: 88vh;
padding-left: 1rem;
border-right: 10px solid; border-right: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;