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