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

styling, layout and font changes

This commit is contained in:
emma 2024-12-14 16:48:55 -05:00
parent 1bb7288751
commit 438e7116bf
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
includes/header.php
View File

@ -1,5 +1,8 @@
<header> <header>
<span> <span class="logo">
<span class="logo">emma's place <img src="../img/site/assets/red_heart_flat.svg" alt="a red heart meant to symbolize love" height="16px" width="16px"></span> - <span class="motto">a celebration of self-expression through the personal web</span> emma's place <img src="../img/site/assets/red_heart_flat.svg" alt="a red heart meant to symbolize love" height="16px" width="16px">
</span>
<span class="motto">
a celebration of self-expression through the personal web
</span> </span>
</header> </header>

18
style/style.css
View File

@ -49,7 +49,7 @@ main, nav {
main { main {
background-color: var(--background-color); background-color: var(--background-color);
height: 88vh; height: 87vh;
width: 60vw; width: 60vw;
padding-left: 2.5rem; padding-left: 2.5rem;
overflow: auto; overflow: auto;
@ -57,13 +57,14 @@ main {
scrollbar-color: #588c7388 #65eeb788; scrollbar-color: #588c7388 #65eeb788;
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3; grid-row: 2/3;
align-self: end;
} }
header { header {
background-color: var(--background-color); background-color: var(--background-color);
grid-row: 1/2; grid-row: 1/2;
grid-column: 1/3; grid-column: 1/3;
height: 5vh; height: 6vh;
width: 74vw; width: 74vw;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
@ -71,6 +72,7 @@ header {
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);
font-size: 1.4rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@ -80,20 +82,19 @@ footer {
grid-column: 1/3; grid-column: 1/3;
height: 5vh; height: 5vh;
width: 74vw; width: 74vw;
padding-top: 0.5rem;
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;
font-family: system-ui; font-family: system-ui;
font-size: 1.3rem;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
header, footer { header, footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
} align-items: center;
flex-wrap: wrap;
header span, footer span { gap: 0.75rem;
font-size: 1.3rem;
} }
nav { nav {
@ -101,8 +102,9 @@ nav {
grid-row: 2/3; grid-row: 2/3;
grid-column: 1/2; grid-column: 1/2;
justify-self: end; justify-self: end;
align-self: end;
width: 14vw; width: 14vw;
height: 88vh; height: 87vh;
padding-left: 0.75rem; padding-left: 0.75rem;
border-right: 10px solid; border-right: 10px solid;
border-image-slice: 1; border-image-slice: 1;