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

styling ideas in progress

Browse Source
This commit is contained in:
rainydayemma 2025-02-26 06:27:29 -05:00
parent b58abdb049
commit 978c11dfae
4 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer.astro
View File

@ -25,8 +25,8 @@ const disabilityPrideGreen = "#3bb07d";
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
height: 6vh; height: 10vh;
width: 80vw; width: 100vw;
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;
border-top: 10px solid; border-top: 10px solid;

6
src/components/Header.astro
View File

@ -41,8 +41,8 @@ const biPrideBlue = "#0038a8";
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
height: 6vh; height: 10vh;
width: 80vw; width: 100vw;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
border-bottom: 10px solid; border-bottom: 10px solid;
@ -55,7 +55,7 @@ const biPrideBlue = "#0038a8";
var(--biPrideBlue) 66% var(--biPrideBlue) 66%
); );
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 0.43rem; margin-bottom: 0.5rem;
} }
.logo { .logo {

15
src/components/Navigation.astro
View File

@ -37,16 +37,17 @@ const transPrideWhite = "#ffffff";
background-color: var(--backgroundColor); background-color: var(--backgroundColor);
grid-row: 2/3; grid-row: 2/3;
grid-column: 1/2; grid-column: 1/2;
justify-self: end;
align-self: end;
width: 20vw; width: 20vw;
height: 85vh; height: 70vh;
font-family: system-ui; font-family: system-ui;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
position: sticky;
top: 0;
justify-self: end;
padding-top: 0.75rem; padding-top: 0.75rem;
padding-left: 1.5rem; padding-left: 1.5rem;
padding-bottom: 0.5rem; border-radius: 25px;
border-right: 10px solid; /* border-right: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient( border-image-source: linear-gradient(
@ -56,11 +57,11 @@ const transPrideWhite = "#ffffff";
var(--transPrideWhite) 40% 60%, var(--transPrideWhite) 40% 60%,
var(--transPridePink) 60% 80%, var(--transPridePink) 60% 80%,
var(--transPrideBlue) 80% var(--transPrideBlue) 80%
); ); */
} }
nav ul li { nav ul li {
padding-bottom: 0.5rem; padding-bottom: 0.33rem;
} }
nav ul li a { nav ul li a {

22
src/styles/global.css
View File

@ -20,20 +20,19 @@
html { html {
font-size: 16px; font-size: 16px;
scrollbar-width: thin;
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
} }
body { body {
height: 100vh;
width: auto;
background-color: var(--body-background-color); background-color: var(--body-background-color);
background-image: url("/sakura.webp"); background-image: url("/sakura.webp");
display: grid; display: grid;
grid-template-columns: 20vw 60vw; grid-template-columns: 25vw 75vw;
grid-template-rows: 6vh 85vh 6vh; grid-template-rows: 10vh 100vh 10vh;
justify-content: center; row-gap: 5vh;
align-items: end; column-gap: 2vw;
align-content: center;
overflow: hidden;
color: var(--text-color); color: var(--text-color);
} }
@ -52,18 +51,15 @@ details {
main { main {
background-color: var(--background-color); background-color: var(--background-color);
height: 85vh; border-radius: 25px;
height: auto;
width: 60vw; width: 60vw;
padding-left: 2.5rem; padding-left: 2.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
font-family: system-ui; font-family: system-ui;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3; grid-row: 2/3;
align-self: end;
padding-top: 0.5rem; padding-top: 0.5rem;
} }