From 667e0b842dd99f05da0e508d64f5b108dcaa9ea2 Mon Sep 17 00:00:00 2001 From: Transgender-Resource-Wiki Date: Fri, 24 May 2024 14:21:39 -0500 Subject: [PATCH] layout changes --- src/components/SiteMap.astro | 27 ++++++++++++++++++--------- src/layouts/DefaultLayout.astro | 12 ++++++------ src/styles/ColoredSideBars.css | 6 +++--- src/styles/ContentsTable.css | 10 +++++----- 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/src/components/SiteMap.astro b/src/components/SiteMap.astro index 1aa3bd2..2ee5d40 100644 --- a/src/components/SiteMap.astro +++ b/src/components/SiteMap.astro @@ -61,7 +61,7 @@ const { link } = Astro.props; left: 20%; right: 17%; width: auto; - font-size: 1.33rem; + font-size: clamp(0.8rem, 4.5vw, 1.33rem); color: whitesmoke; font-family: Verdana, sans-serif, system-ui; } @@ -79,18 +79,26 @@ const { link } = Astro.props; height: auto; padding-left: 0; text-align: center; - font-size: 1.25rem; + font-size: clamp(0.75rem, 3vw, 1.25rem); color: whitesmoke; font-family: Verdana, sans-serif, system-ui; list-style-type: none; } + .link-list li, + .link-list-mobile li { + padding-bottom: 4%; + white-space: nowrap; + overflow: hidden; + text-overflow: "..."; + direction: ltr; + } .link-list-mobile a { color: whitesmoke; text-decoration: none; text-shadow: 2px 2px 4px black; } .link-list-mobile a:hover { - font-size: 1.33rem; + font-size: clamp(0.75rem, 3.5vw, 1.33rem); } /* Desktop */ @@ -104,10 +112,11 @@ const { link } = Astro.props; text-align: left; top: 5%; left: 0; - width: 12vw; + width: auto; + max-width: 14%; height: auto; max-height: 28%; - overflow-y: scroll; + overflow: scroll; flex-direction: column; margin: 0; direction: rtl; @@ -122,9 +131,9 @@ const { link } = Astro.props; top: 0.2%; margin: 0; left: -0.2%; - width: 11.9vw; + width: 13.9vw; height: 4.25%; - font-size: 1.33rem; + font-size: clamp(0.8rem, 1.33vw, 1.33rem); color: whitesmoke; font-family: Verdana, sans-serif, system-ui; box-sizing: border-box; @@ -147,7 +156,7 @@ const { link } = Astro.props; width: auto; height: auto; padding-left: 1.2vw; - font-size: 1.25rem; + font-size: clamp(0.75rem, 1vw, 1rem); color: whitesmoke; font-family: Verdana, sans-serif, system-ui; list-style-type: none; @@ -161,7 +170,7 @@ const { link } = Astro.props; } .link-list a:hover, .link-list-mobile a:hover { - font-size: 1.33rem; + font-size: clamp(0.8rem, 1.1vw, 1.1rem); } } diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro index 5653412..b79eac4 100644 --- a/src/layouts/DefaultLayout.astro +++ b/src/layouts/DefaultLayout.astro @@ -2,10 +2,9 @@ const {frontmatter} = Astro.props; const links = [["Home", "/"], -["Post", "/post"], ["About2", "/about"], ["About3", "/about"], -["About4", "/about"], ["About5", "/about"], ["About6", "/about"], -["About7", "/about"], ["About8", "/about"], ["About9", "/about"], -["About0", "/about"], ["About1", "/about"], ["About2", "/about"]]; +["Am I Trans?", "/amitrans"], ["Social Transitioning", "/about"], +["Medical Transitioning", "/about"], ["Traveling", "/traveling"], +["Media & Other Resources", "/about"], ["About", "/"], ["About", "/"], ["About", "/"], ["About", "/"]]; import SiteNav from "../scripts/SiteNav" import SiteMap from "../components/SiteMap.astro" import '../styles/ContentsTable.css'; @@ -35,15 +34,16 @@ import '../styles/ContentsTable.css'; margin-top: 10vh; margin-bottom: 6vh; color: rgb(68, 68, 70); + display: block; font-size: large; font-family: Verdana, sans-serif, system-ui; } @media (min-width: 769px) { body { - display: flex; + display: block; margin-left: 28vw; - margin-right: 20vw; + margin-right: 18vw; margin-top: 2vh; margin-bottom: 2vh; } diff --git a/src/styles/ColoredSideBars.css b/src/styles/ColoredSideBars.css index c3905a7..de61dee 100644 --- a/src/styles/ColoredSideBars.css +++ b/src/styles/ColoredSideBars.css @@ -56,7 +56,7 @@ z-index: 0; top: 0; left: 0; - width: 12vw; + width: 14vw; height: 100vh; } .left-pink { @@ -64,7 +64,7 @@ position: fixed; z-index: 0; top: 0; - left: 12vw; + left: 14vw; width: 4vw; height: 100vh; } @@ -96,7 +96,7 @@ z-index: 1; top: 5%; left: -0.2%; - width: 11.9vw; + width: 13.9vw; height: 28%; } diff --git a/src/styles/ContentsTable.css b/src/styles/ContentsTable.css index d9d1beb..4e9bce4 100644 --- a/src/styles/ContentsTable.css +++ b/src/styles/ContentsTable.css @@ -88,7 +88,7 @@ margin: 0; top: 38.25%; left: 0%; - width: 11.72vw; + width: 13.72vw; height: 61vh; max-height: 61vh; flex-direction: column; @@ -111,12 +111,12 @@ .contents-table-mobile a { color: whitesmoke; text-decoration: none; - font-size: 1.25rem; + font-size: clamp(0.75rem, 3vw, 1.25rem); text-shadow: 2px 2px 4px black; } .contents-table a:hover, .contents-table-mobile a:hover { - font-size: 1.33rem; + font-size: clamp(0.75rem, 3.5vw, 1.33rem); } .contents-table span, @@ -129,9 +129,9 @@ top: 33.5%; margin: 0; left: -0.2%; - width: 11.9vw; + width: 13.9vw; height: 4.25%; - font-size: 1.33rem; + font-size: clamp(0.8rem, 4.5vw, 1.33rem); color: whitesmoke; box-sizing: border-box; overflow: hidden;