adjust styling to contain overflowing text

grid column height needed changed from 100vh to
100%
This commit is contained in:
rainydayemma 2025-02-26 11:29:35 -05:00
parent 978c11dfae
commit 3d4cb05eb8
3 changed files with 10 additions and 7 deletions

View File

@ -12,7 +12,7 @@ const biPridePurple = "#9b4f96";
const biPrideBlue = "#0038a8"; const biPrideBlue = "#0038a8";
--- ---
<header> <header id="top">
<span class="logo"> <span class="logo">
{pageTitle} <Image class="header-heart" src={redHeartFlat} alt="a red heart meant to symbolize love" /> {pageTitle} <Image class="header-heart" src={redHeartFlat} alt="a red heart meant to symbolize love" />
</span> </span>

View File

@ -30,6 +30,11 @@ const transPrideWhite = "#ffffff";
<li><a href="/site/guestbook">guestbook</a></li> <li><a href="/site/guestbook">guestbook</a></li>
<li>changelog</li> <li>changelog</li>
</ul> </ul>
<h3>controls</h3>
<ul>
<li><a href="#top">top of page</a></li>
</ul>
</nav> </nav>
<style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}> <style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}>

View File

@ -29,10 +29,9 @@ body {
background-image: url("/sakura.webp"); background-image: url("/sakura.webp");
display: grid; display: grid;
grid-template-columns: 25vw 75vw; grid-template-columns: 25vw 75vw;
grid-template-rows: 10vh 100vh 10vh; grid-template-rows: 10vh 100% 10vh;
row-gap: 5vh; row-gap: 5vh;
column-gap: 2vw; column-gap: 2vw;
color: var(--text-color); color: var(--text-color);
} }
@ -52,12 +51,10 @@ details {
main { main {
background-color: var(--background-color); background-color: var(--background-color);
border-radius: 25px; border-radius: 25px;
height: auto;
width: 60vw; width: 60vw;
padding-left: 2.5rem;
padding-bottom: 0.5rem;
font-family: system-ui; font-family: system-ui;
letter-spacing: 0.05rem; letter-spacing: 0.1rem;
line-height: 1.75rem;
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3; grid-row: 2/3;
padding-top: 0.5rem; padding-top: 0.5rem;
@ -65,6 +62,7 @@ main {
section { section {
width: 55vw; width: 55vw;
padding: 2rem;
} }
/* .mobile-header { /* .mobile-header {