andrew
/
homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redid title sizing for smaller screens.

This commit is contained in:
Andrew Lalis 2024-08-26 13:47:10 -04:00
parent a2e8571acb
commit bd942f2b49
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/App.vue
View File

@ -43,12 +43,22 @@ import NavLink from './components/NavLink.vue'
.site-header-text { .site-header-text {
font-family: Sacramento; font-family: Sacramento;
font-size: 60px; container-type: inline-size;
font-size: calc(min(60px, max(5cqw, 42px)));
text-align: right; text-align: right;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0; margin-bottom: 0;
} }
.page-enter-active {
transition: all 0.5s ease;
}
.page-enter-from {
opacity: 0;
transform: translateX(30px);
}
/* /*
Activates once the left and right half of the page stack due to width constraints. Activates once the left and right half of the page stack due to width constraints.
We remove a lot of the vertical spacing to make things fit better. We remove a lot of the vertical spacing to make things fit better.
@ -70,13 +80,4 @@ Once the device width is smaller than one of the halves, sync the page half to t
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }
} }
.page-enter-active {
transition: all 0.5s ease;
}
.page-enter-from {
opacity: 0;
transform: translateX(30px);
}
</style> </style>