OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added responsive to all current pages, making them work in tablet and mobile devices. Also, implemented dark theme and persistance of theme in LocalStorage.

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-16 09:07:23 -05:00
parent bf48a5dcf2
commit 7bebc0b97d
16 changed files with 802 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/InitialSection.astro
View File

@@ -77,13 +77,27 @@ const {
display: flex;
flex-direction: column;
gap: var(--space-4xl-96px);
padding: 80px 300px 0px 300px;
padding: 0px 350px;
@media (max-width: 1023px) {
height: auto;
padding: 0px 48px;
}
@media (max-width: 767px) {
padding: 0px var(--padding-lg-24px);
gap: var(--space-3xl-64px);
}
}
.section-1[data-auto-height="true"] {
height: auto;
min-height: 100vh;
padding-bottom: 80px;
@media (max-width: 1023px) {
padding-bottom: 0px;
}
}
.main-img {
@@ -97,12 +111,20 @@ const {
transform: translateX(-32%);
z-index: -1;
pointer-events: none;
@media (max-width: 1023px) {
display: none;
}
}
.landing-content {
display: flex;
flex-direction: column;
gap: var(--space-4xl-96px);
@media (max-width: 767px) {
gap: var(--space-3xl-64px);
}
}
.logo-container {
@@ -111,8 +133,12 @@ const {
justify-content: start;
}
.logo-naliia-full {
height: 81px;
height: 82px;
width: auto;
@media (max-width: 767px) {
height: 50px;
}
}
.text-and-button-container {
@@ -120,6 +146,11 @@ const {
flex-direction: column;
gap: var(--space-3xl-64px);
max-width: 780px;
@media (max-width: 767px) {
gap: var(--space-xl-32px);
width: 100%;
}
}
.text-content {
@@ -129,9 +160,19 @@ const {
}
.main-title {
font-size: 80px;
line-height: calc(80px * 1.2);
@media (max-width: 767px) {
font-size: var(--font-mobile-h1);
line-height: var(--line-height-mobile-h1);
}
}
.subtitle {
max-width: 630px;
@media (max-width: 767px) {
width: 100%;
}
}
.call-to-action-button {
@@ -149,5 +190,16 @@ const {
justify-content: center;
color: white;
cursor: pointer;
@media (max-width: 1023px) {
padding: var(--padding-sm-8px) var(--padding-lg-24px);
}
@media (max-width: 767px) {
height: 44px;
font-size: var(--font-mobile-h6);
font-weight: bold;
padding: var(--padding-sm-8px) var(--padding-lg-24px);
}
}
</style>