website
git clone https://git.pyrossh.dev/website
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
assets/css/workers/only-bible-app.css
.page-container {
display: flex;
flex: 1;
flex-direction: column;
padding-bottom: 16rem; /* pb-64 */
}
.content-column {
display: flex;
flex-direction: column;
align-items: center;
}
.hero-section {
display: block;
margin-bottom: 1rem; /* mb-4 */
}
.main-title {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.875rem; /* text-3xl */
line-height: 2.25rem; /* text-3xl */
font-weight: 700; /* font-bold */
text-align: center;
}
.app-icon-title {
margin-right: 0.5rem; /* mr-2 */
border-radius: 0.75rem; /* rounded-xl */
}
.features-list {
text-align: center;
display: flex;
flex-direction: column;
font-size: 1.125rem; /* text-lg */
line-height: 1.75rem; /* text-lg */
}
.cta-section {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.cta-title {
margin: 0;
margin-top: 1rem; /* my-4 */
margin-bottom: 1rem; /* my-4 */
font-weight: 700; /* font-bold */
font-size: 1.25rem; /* text-xl */
line-height: 1.75rem; /* text-xl */
}
.store-links-container {
display: flex;
flex-direction: column;
}
.playstore-link {
margin-top: 1rem; /* mt-4 */
}
.appstore-link {
margin-top: 2rem; /* mt-8 */
}
/* Small screen adjustments (sm:) */
@media (min-width: 640px) {
.page-container {
flex-direction: row;
}
.content-column {
align-items: flex-start;
}
.main-title {
flex-direction: row; /* default for flex, but explicit here */
align-items: flex-start;
margin: 0; /* sm:m-0 */
text-align: left; /* sm:text-left */
}
.features-list {
text-align: left; /* sm:text-left */
margin-top: 1.25rem; /* sm:mt-5 */
}
.cta-section {
align-items: flex-start;
}
.store-links-container {
flex-direction: row;
}
.playstore-link {
margin-top: 0; /* sm:mt-0 */
margin-right: 0.5rem; /* sm:mr-2 */
}
.appstore-link {
margin-top: 0; /* sm:mt-0 */
}
/* .screenshots-section {
display: flex;
flex: 1;
justify-content: flex-end;
padding-bottom: 9rem;
} */
}
/* Large screen adjustments (lg:) */
@media (min-width: 1024px) {
.main-title {
line-height: 1; /* lg:leading-tight */
}
}