diff --git a/public/assets/images/ABCD blue.png b/public/assets/images/ABCD blue.png new file mode 100644 index 00000000..dbfa1985 Binary files /dev/null and b/public/assets/images/ABCD blue.png differ diff --git a/public/assets/images/stories/story-1.png b/public/assets/images/stories/story-1.png new file mode 100644 index 00000000..597b169a Binary files /dev/null and b/public/assets/images/stories/story-1.png differ diff --git a/public/assets/images/stories/story-2.png b/public/assets/images/stories/story-2.png new file mode 100644 index 00000000..323ba108 Binary files /dev/null and b/public/assets/images/stories/story-2.png differ diff --git a/public/assets/images/stories/story-3.png b/public/assets/images/stories/story-3.png new file mode 100644 index 00000000..2a5d0da8 Binary files /dev/null and b/public/assets/images/stories/story-3.png differ diff --git a/public/responses/survey-responses.json b/public/responses/survey-responses.json index 8e13d3d0..b0b4fca2 100644 --- a/public/responses/survey-responses.json +++ b/public/responses/survey-responses.json @@ -19,10 +19,8 @@ "q4": "Less than 15 minutes", "q5": "Not sure", "q6": "No, I donโ€™t think it has a big impact.", - "q7": [ - "Interactive apps or websites" - ], + "q7": ["Interactive apps or websites"], "q8": "Several times a week", "q9": "" } -] \ No newline at end of file +] diff --git a/src/assets/icons/ABCD.png b/src/assets/icons/ABCD.png deleted file mode 100644 index e2aabde3..00000000 Binary files a/src/assets/icons/ABCD.png and /dev/null differ diff --git a/src/assets/icons/man_with_keyboard.svg b/src/assets/icons/man_with_keyboard.svg new file mode 100644 index 00000000..26a7bd5c --- /dev/null +++ b/src/assets/icons/man_with_keyboard.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/styles/keyboard.css b/src/assets/styles/Keyboard.css similarity index 100% rename from src/assets/styles/keyboard.css rename to src/assets/styles/Keyboard.css diff --git a/src/assets/styles/about.css b/src/assets/styles/about.css index 049a7507..d9899ad0 100644 --- a/src/assets/styles/about.css +++ b/src/assets/styles/about.css @@ -14,7 +14,7 @@ background-color: light-dark(var(--bg-light), var(--bg-dark)); color: var(--text-main); min-height: 100vh; - font-family: sans-serif; + font-family: "Comic Neue", cursive, sans-serif; display: flex; flex-direction: column; gap: 3rem; @@ -25,6 +25,39 @@ font-weight: 700; } + .btn { + display: inline-block; + padding: 0.75rem 1.5rem; + border-radius: 2rem; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; + margin: 0.5rem; + } + + .btn-primary { + background-color: var(--primary); + color: white; + border: 2px solid var(--primary); + } + + .btn-primary:hover { + background-color: var(--primary-light); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3); + } + + .btn-secondary { + background-color: transparent; + color: var(--primary); + border: 2px solid var(--primary); + } + + .btn-secondary:hover { + background-color: rgba(59, 130, 246, 0.1); + transform: translateY(-2px); + } + .section-title { font-size: 2rem; text-align: center; diff --git a/src/assets/styles/blogs/blog.css b/src/assets/styles/blogs/blog.css index 2f732254..fe651321 100644 --- a/src/assets/styles/blogs/blog.css +++ b/src/assets/styles/blogs/blog.css @@ -31,469 +31,250 @@ } .container__blog { - width: 100%; - margin: 0; - padding: 3rem 2rem; - background: light-dark(var(--background-light), var(--background-dark)); - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - min-height: 100vh; - font-family: atkinson, sans-serif; - line-height: 1.6; - box-sizing: border-box; - position: relative; - overflow-x: hidden; - counter-reset: section-counter; -} - -.container__blog::before { - content: ""; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at 20% 20%, - light-dark(rgba(59, 130, 246, 0.03), rgba(96, 165, 250, 0.05)) 0%, - transparent 50% - ), - radial-gradient( - circle at 80% 80%, - light-dark(rgba(139, 92, 246, 0.03), rgba(168, 85, 247, 0.05)) 0%, - transparent 50% - ); - pointer-events: none; - z-index: -1; -} - -.blog-post-header { - text-align: center; - margin-bottom: 3rem; - max-width: 800px; - margin-inline: auto; - position: relative; - animation: fadeInUp 0.8s ease-out; -} - -.blog-title { - font-size: 45px; - background: var(--primary); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - margin: 0 0 1rem 0; - line-height: 1.2; - font-weight: 600; - text-align: center; -} - -.blog-description { + max-width: 1000px; margin: 0 auto; - margin-top: 1rem; - max-width: 42rem; - font-size: 20px; - color: light-dark(var(--text-secondary-light), var(--text-secondary-dark)); - line-height: 1.5; - text-align: center; -} - -.blog-post-meta { - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - font-size: 1.1rem; - color: light-dark(var(--text-secondary-light), var(--text-secondary-dark)); - margin-top: 1rem; - padding: 0.75rem 1.5rem; - background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05)); - border-radius: 20px; - border: 1px solid light-dark(var(--border-light), var(--border-dark)); - backdrop-filter: blur(10px); - transition: all 0.3s ease; -} - -.blog-post-meta:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px light-dark(var(--shadow-light), var(--shadow-dark)); -} - -.meta-item { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.meta-icon { - width: 20px; - height: 20px; - stroke-width: 2; -} - -.markdown-content { - margin-top: 2rem; - max-width: min(90vw, 90%); - margin-inline: auto; - font-size: 3vh; - line-height: 1.7; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - animation: fadeIn 1s ease-out 0.3s both; - text-align: left; - counter-reset: section-counter; -} - -.markdown-content h2:first-of-type { - font-size: 2.25rem; - margin-top: 2.5rem; - margin-left: 0px; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - font-weight: 600; - line-height: 1.3; - letter-spacing: -0.02em; - position: relative; - transition: all 0.3s ease; - text-align: left; -} - -.markdown-content h2:not(:first-of-type) { - font-size: 2.25rem; - margin-top: 2.5rem; - margin-left: 0px; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - font-weight: 600; - line-height: 1.3; - letter-spacing: -0.02em; - position: relative; - transition: all 0.3s ease; - text-align: left; - counter-increment: section-counter; - counter-reset: subsection-counter; -} - -.markdown-content h2:not(:first-of-type)::before { - content: counter(section-counter) ". "; - color: var(--primary); - font-weight: 700; - margin-right: 0.75rem; -} - -.markdown-content h3 { - font-size: 1.85rem; - margin-top: 2.25rem; - margin-left: 0px; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - font-weight: 600; - line-height: 1.3; - letter-spacing: -0.02em; - position: relative; - transition: all 0.3s ease; - text-align: left; - counter-increment: subsection-counter; -} - -.markdown-content h3::before { - content: counter(section-counter) "." counter(subsection-counter) " "; - color: var(--primary); - font-weight: 600; - margin-right: 0.75rem; -} - -.markdown-content h4 { - font-size: 1.55rem; - margin-top: 2rem; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - font-weight: 600; - line-height: 1.3; - letter-spacing: -0.02em; - position: relative; - transition: all 0.3s ease; - text-align: left; -} - -.markdown-content h5 { - font-size: 1em; - margin-top: 1.75rem; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - font-weight: 600; - line-height: 1.3; - letter-spacing: -0.02em; - position: relative; - transition: all 0.3s ease; - text-align: left; -} - -.markdown-content p { - margin-bottom: 0.85rem; - line-height: inherit; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - transition: color 0.3s ease; - text-align: left; -} - -.markdown-content strong { - color: var(--primary); - font-weight: 600; -} - -.markdown-content em { - font-style: italic; - color: light-dark(var(--text-secondary-light), var(--text-secondary-dark)); -} - -.markdown-content a { - color: light-dark(var(--accent-light), var(--accent-dark)); - text-decoration: none; - position: relative; - transition: all 0.3s ease; - border-bottom: 1px solid transparent; -} - -.markdown-content a::before { - content: ""; - position: absolute; - width: 0; - height: 2px; - bottom: -2px; - left: 0; - background: light-dark(var(--accent-light), var(--accent-dark)); - transition: width 0.3s ease; -} - -.markdown-content a:hover { - color: light-dark(var(--accent-hover-light), var(--accent-hover-dark)); - transform: translateY(-1px); -} - -.markdown-content a:hover::before { - width: 100%; -} - -.markdown-content blockquote { - margin: 1.25rem 0; - padding: 0.85rem 1.75rem; - border-left: 4px solid light-dark(var(--accent-light), var(--accent-dark)); - background: light-dark(var(--blockquote-bg-light), var(--blockquote-bg-dark)); - color: light-dark(var(--text-secondary-light), var(--text-secondary-dark)); - font-style: italic; - font-size: 1.15rem; - border-radius: 0 8px 8px 0; - position: relative; - transition: all 0.3s ease; - text-align: left; -} - -.markdown-content blockquote::before { - content: '"'; - position: absolute; - top: -10px; - left: 10px; - font-size: 3rem; - color: light-dark(var(--accent-light), var(--accent-dark)); - opacity: 0.3; -} - -.markdown-content blockquote:hover { - transform: translateX(5px); - box-shadow: 0 2px 8px light-dark(var(--shadow-light), var(--shadow-dark)); -} - -.markdown-content pre { - margin: 1.25rem 0; - padding: 0.9rem; - background: light-dark(var(--pre-bg-light), var(--pre-bg-dark)); - border: 1px solid light-dark(var(--border-light), var(--border-dark)); - border-radius: 12px; - overflow-x: auto; - font-size: 1.05rem; - line-height: 1.6; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - font-family: "Fira Code", monospace; - position: relative; - transition: all 0.3s ease; - text-align: left; -} - -.markdown-content pre:hover { - box-shadow: 0 4px 12px light-dark(var(--shadow-light), var(--shadow-dark)); - transform: translateY(-2px); -} - -.markdown-content code { - background: light-dark(var(--code-bg-light), var(--code-bg-dark)); - color: var(--primary); - padding: 0.1rem 0.4rem; - border-radius: 6px; - font-size: 0.95em; - font-family: "Fira Code", monospace; - font-weight: 500; - border: 1px solid light-dark(var(--border-light), var(--border-dark)); -} - -.markdown-content pre code { - background: none; - padding: 0; - border-radius: 0; - border: none; - color: inherit; -} - -.markdown-content ul, -.markdown-content ol { - margin: 1rem 0; - padding-left: 2rem; - color: light-dark(var(--text-primary-light), var(--text-primary-dark)); - list-style-position: outside; - font-size: inherit; - text-align: left; -} - -.markdown-content ul { - list-style: disc; -} - -.markdown-content ul ul { - list-style: circle; -} - -.markdown-content ul ul ul { - list-style: square; -} - -.markdown-content ol { - list-style: decimal; -} - -.markdown-content ol ol { - list-style: lower-alpha; -} - -.markdown-content ol ol ol { - list-style: lower-roman; -} - -.markdown-content li { - margin-bottom: 0.5rem; - line-height: inherit; + padding: 5rem 2rem; + background: var(--background, #ffffff); /* Fallback for light mode */ + color: var(--text, #333333); /* Fallback for light mode */ + border-radius: 1rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; - position: relative; - text-align: left; -} - -.markdown-content li::before { - content: none; -} - -.markdown-content hr { - display: none !important; -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@media (max-width: 768px) { - .container__blog { - padding: 1.75rem 1rem; - } .blog-post-header { - margin-bottom: 2.5rem; + text-align: center; + margin-bottom: 5rem; + position: relative; + padding-bottom: 2rem; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 4px; + background: linear-gradient(90deg, var(--primary, #4f46e5), var(--primary-light, #818cf8)); + border-radius: 4px; + transition: width 0.3s ease; + } + + &:hover::after { + width: 120px; + } } .blog-post-meta { - flex-direction: column; - gap: 0.6rem; + display: flex; align-items: center; - padding: 0.5rem 1rem; - } - - .blog-title { - font-size: 2.25rem; + justify-content: center; + gap: 2.5rem; + margin-top: 2rem; + font-size: 1rem; + color: var(--secondary, #666666); /* Fallback for light mode */ + opacity: 0.8; + transition: opacity 0.3s ease; + + &:hover { + opacity: 1; + } + + span { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 1rem; + border-radius: 1rem; + background: color-mix(in srgb, var(--background, #ffffff) 95%, var(--primary, #4f46e5) 5%); + } } - .blog-description { - font-size: 1.1rem; + .blog-post-content { + font-size: 1.15rem; + line-height: 1.9; + color: var(--text, #333333); /* Fallback for light mode */ + max-width: 800px; + margin: 0 auto; } + /* Markdown Content Styling */ .markdown-content { - font-size: 1.1rem; - line-height: 1.65; - padding: 0 0.75rem; - } - - .markdown-content h2:not(:first-of-type) { - font-size: 1.8rem; - } - - .markdown-content h3 { - font-size: 1.5rem; - } - - .markdown-content h4 { - font-size: 1.3rem; - } - - .markdown-content h5 { - font-size: 1.1rem; - } - - .markdown-content blockquote { - padding: 0.65rem 1.25rem; - } - - .markdown-content pre { - padding: 0.65rem; - font-size: 0.95rem; + margin-top: 5rem; + + h1, h2, h3, h4 { + color: var(--text, #333333); /* Fallback for light mode */ + margin: 3rem 0 1.5rem; + font-weight: 700; + line-height: 1.4; + transition: color 0.3s ease; + + &:hover { + color: var(--primary, #4f46e5); /* Fallback for light mode */ + } + } + + h1 { + font-size: 2.75rem; + background: linear-gradient(90deg, var(--text, #333333), var(--primary, #4f46e5)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + position: relative; + padding-bottom: 0.5rem; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 50px; + height: 3px; + background: var(--primary, #4f46e5); + border-radius: 2px; + transition: width 0.3s ease; + } + + &:hover::after { + width: 100px; + } + } + + h2 { + font-size: 2.25rem; + } + + h3 { + font-size: 1.75rem; + } + + p { + margin-bottom: 2rem; + color: var(--secondary, #666666); /* Fallback for light mode */ + transition: color 0.3s ease; + + &:hover { + color: var(--text, #333333); + } + } + + strong { + color: var(--text, #333333); + font-weight: 700; + background: color-mix(in srgb, var(--primary, #4f46e5) 20%, transparent); + padding: 0.1rem 0.3rem; + border-radius: 0.3rem; + } + + blockquote { + margin: 2.5rem 0; + padding: 2rem 2.5rem; + border-left: 6px solid var(--primary, #4f46e5); + background: color-mix(in srgb, var(--background, #ffffff) 95%, var(--primary, #4f46e5) 5%); + border-radius: 0.75rem; + position: relative; + overflow: hidden; + + &::before { + content: "โ"; + position: absolute; + top: 1rem; + left: 1rem; + font-size: 2rem; + color: var(--primary-light, #818cf8); + opacity: 0.3; + } + } + + pre { + margin: 2.5rem 0; + padding: 2rem; + border-radius: 0.75rem; + background: color-mix(in srgb, var(--background, #f8f9fa) 90%, var(--text, #333333) 10%); + color: var(--text, #333333); + overflow-x: auto; + position: relative; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + font-size: 0.95rem; + } + + code { + background: color-mix(in srgb, var(--background, #f8f9fa) 90%, var(--text, #333333) 10%); + color: var(--text, #333333); + padding: 0.3rem 0.5rem; + border-radius: 0.4rem; + font-size: 0.9rem; + transition: background 0.3s ease; + + &:hover { + background: color-mix(in srgb, var(--background, #f8f9fa) 85%, var(--primary, #4f46e5) 15%); + } + } + + ul, ol { + margin: 2rem 0; + padding-left: 2rem; + color: var(--secondary, #666666); + list-style: none; + } + + li { + margin: 0.75rem 0; + padding-left: 0; + } + + img { + max-width: 100%; + height: auto; + border-radius: 1rem; + margin: 3rem auto; + display: block; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + + &:hover { + transform: scale(1.02); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); + } + } + + hr { + margin: 4rem 0; + border: none; + height: 2px; + background: linear-gradient(90deg, transparent, var(--border, #e5e7eb), transparent); + opacity: 0.5; + } } - .markdown-content ul, - .markdown-content ol { - padding-left: 1.5rem; + /* Responsive Design */ + @media (max-width: 768px) { + padding: 3rem 1rem; + max-width: 100%; + + .blog-post-header { + margin-bottom: 3rem; + } + + .markdown-content { + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.75rem; + } + + h3 { + font-size: 1.5rem; + } + } + + .blog-post-meta { + flex-direction: column; + gap: 1rem; + } + + .markdown-content img { + margin: 2rem auto; + } } -} - -@media (max-width: 480px) { - .container__blog { - padding: 1.25rem 0.75rem; - } - - .blog-title { - font-size: 1.85rem; - } - - .markdown-content h2:not(:first-of-type) { - font-size: 1.55rem; - } - - .markdown-content h3 { - font-size: 1.35rem; - } - - .markdown-content h4 { - font-size: 1.2rem; - } - - .markdown-content h5 { - font-size: 1.05rem; - } - - .markdown-content ul, - .markdown-content ol { - padding-left: 1rem; - } -} +} \ No newline at end of file diff --git a/src/assets/styles/blogs/index.css b/src/assets/styles/blogs/index.css index de0b9696..91a9202e 100644 --- a/src/assets/styles/blogs/index.css +++ b/src/assets/styles/blogs/index.css @@ -22,7 +22,7 @@ .container__blog { max-width: 1440px; margin: 0 auto; - padding: 0rem 2rem; + padding: 4rem 2rem; position: relative; overflow: hidden; } @@ -44,18 +44,21 @@ } .title-accent { - color: var(--primary); + background: linear-gradient(135deg, var(--primary), var(--primary-light)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; position: relative; } .title-accent::after { - content: ""; + content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 4px; - color: var(--primary_blue); + background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 2px; } @@ -80,7 +83,7 @@ .decoration-circle { position: absolute; border-radius: 50%; - background: var(--primary_blue); + background: var(--primary); filter: blur(30px); } @@ -112,7 +115,6 @@ grid-template-columns: repeat(1, 1fr); gap: 2.5rem; margin-top: 3rem; - margin-bottom: 15px; } .blog-card { @@ -128,18 +130,18 @@ } .blog-card::before { - content: ""; + content: ''; position: absolute; inset: 0; border-radius: 1.5rem; - background: var(--primary); + background: linear-gradient(135deg, var(--primary), var(--primary-light)); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .blog-card::after { - content: ""; + content: ''; position: absolute; inset: 2px; border-radius: 1.3rem; @@ -223,7 +225,7 @@ } .blog-card-title::after { - content: ""; + content: ''; position: absolute; bottom: -5px; left: 0; @@ -247,7 +249,6 @@ -webkit-line-clamp: 3; overflow: hidden; transition: color 0.3s ease; - text-align: left; } .blog-card:hover .blog-card-description { @@ -273,7 +274,7 @@ } .blog-card-details::after { - content: "Read More โ†’"; + content: 'Read More โ†’'; position: absolute; bottom: 1rem; right: 2rem; @@ -293,7 +294,7 @@ @media (min-width: 640px) { .blog-grid { - grid-template-columns: repeat(auto, 1fr); + grid-template-columns: repeat(2, 1fr); } } @@ -315,9 +316,10 @@ transform: translateY(20px); } + @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } -} \ No newline at end of file +} diff --git a/src/assets/styles/coming-soon.css b/src/assets/styles/coming-soon.css new file mode 100644 index 00000000..c9e81bbc --- /dev/null +++ b/src/assets/styles/coming-soon.css @@ -0,0 +1,124 @@ + .page-container { + display: flex; + flex-direction: column; + gap: 2.5rem; + margin: 2rem 0; + } + + .heading-container { + background: var(--bg-secondary); + /* padding: clamp(2rem, 8vw, 4rem) 1.5rem; */ + text-align: center; + border-radius: 1.5rem; + } + + .logo { + width: 120px; + height: 120px; + margin-bottom: 0.5rem; + filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); + } + + h1 { + color: var(--primary); + font-size: clamp(2.25rem, 5vw, 3.5rem); + margin-bottom: 1rem; + font-weight: 700; + } + + .subtitle { + font-size: 1.125rem; + color: var(--text-secondary); + max-width: 500px; + margin: 0 auto; + line-height: 1.6; + } + + .countdown-container { + display: grid; + place-items: center; + } + + .countdown { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: center; + } + + .countdown-item { + background: var(--bg-secondary); + padding: 1rem; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0,0,0,0.05); + min-width: 90px; + text-align: center; + flex-grow: 1; + } + + .countdown-number { + font-size: clamp(2rem, 6vw, 2.5rem); + font-weight: bold; + color: var(--primary); + } + + .countdown-label { + font-size: 0.9rem; + color: var(--text-secondary); + margin-top: 0.25rem; + } + + .form-container { + display: grid; + place-items: center; + } + + .notify-form { + width: 100%; + max-width: 450px; + text-align: center; + } + + .notify-form p { + margin-bottom: 1rem; + color: var(--text-main); + } + + .form-group { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; + } + + .form-group input { + padding: 0.75rem 1rem; + border: 1px solid var(--border-color); + border-radius: 6px; + background-color: var(--bg-primary); + color: var(--text-main); + flex-grow: 1; + min-width: 200px; + } + + .form-group button { + background: var(--primary); + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 6px; + cursor: pointer; + font-weight: 500; + transition: opacity 0.2s; + flex-grow: 1; + } + + .form-group button:hover { + opacity: 0.9; + } + + @media (max-width: 400px) { + .form-group { + flex-direction: column; + } + } \ No newline at end of file diff --git a/src/assets/styles/contact.css b/src/assets/styles/contact.css index d473b1ae..f8c5e6a8 100644 --- a/src/assets/styles/contact.css +++ b/src/assets/styles/contact.css @@ -4,37 +4,108 @@ .container__contact { box-sizing: border-box; + padding: 4rem 1.5rem; + background-color: var(--bg-alt); + color: var(--text-main); } .contact__message { - @apply text-sm md:p-[1rem]; + /* @apply text-sm md:p-[1rem]; */ margin-top: 4px; } -.custom__input { +/* .custom__input { @apply md:tracking-widest; -} +} */ .container__form { - @apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36; + /* @apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36; */ + padding: 3rem; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.contact-wrapper { + max-width: 700px; + margin: 2rem auto 0 auto; + border-radius: 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + overflow: hidden; + background-color: var(--bg-main); +} + +/* --- Top Section: Contact Info --- */ +.contact-info { + background: linear-gradient(135deg, var(--c-primary, #3b82f6) 0%, #60a5fa 100%); + color: #ffffff; + padding: 1rem; +} +.contact-info h3 { + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 1rem; + color: #ffffff; +} +.info-item { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 1rem; +} +.info-item i { + font-size: 1.2rem; + color: var(--c-primary); + border-radius: 50%; + width: 40px; + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; +} +.info-item a, .info-item span { + color: #ffffff; + text-decoration: none; + font-weight: 500; + font-size: 1.8rem; +} + +.copy-btn { + background: none; + border: none; + color: inherit; + cursor: pointer; + padding: 0 0.5rem 0 0.2rem; + font-size: 1rem; + opacity: 0.7; + transition: opacity 0.2s; +} + +.copy-btn:hover { + opacity: 1; } -.contact__form { - @apply w-full p-4; +.info-item .underline-text { + text-decoration: underline; } -.section__grid { - @apply grid items-center gap-1; +/* --- Dark Theme Override for Contact Info --- */ +[data-theme="dark"] .contact-info { + background: #1f2937; } -.center__text { - @apply top-[1rem] mt-5 text-center; +[data-theme="dark"] .contact-info h3, +[data-theme="dark"] .contact-info a { + color: #d1d5db; } -.contact__button--group { - @apply mt-8 flex justify-end; +[data-theme="dark"] .info-item i { + color: #1f2937; + background-color: #d1d5db; } -.contact__button { - @apply w-36 max-sm:w-full; +@media (max-width: 768px) { + .contact-info, .container__form { + padding: 2rem; + } } diff --git a/src/assets/styles/cookies.css b/src/assets/styles/cookies.css new file mode 100644 index 00000000..fa9ad421 --- /dev/null +++ b/src/assets/styles/cookies.css @@ -0,0 +1,60 @@ +.article-container { + max-width: 800px; + margin: 2rem auto; + padding: 2rem; + background: var(--bg-secondary); + border-radius: 12px; +} + +.article-header { + text-align: center; + margin-bottom: 2.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.article-header h1 { + font-size: clamp(2rem, 5vw, 2.75rem); + color: var(--text-main); + margin-bottom: 0.5rem; +} + +.article-header p { + color: var(--text-secondary); + font-style: italic; +} + +.article-content { + line-height: 1.8; + color: var(--text-main); +} + +.article-content h2, +.article-content h3, +.article-content h4 { + color: var(--text-main); + margin-top: 2.5rem; + margin-bottom: 1rem; + line-height: 1.3; +} + +.article-content a { + color: var(--primary); + text-decoration: underline; +} + +.article-content ul, +.article-content ol { + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +.article-content li { + margin-bottom: 0.5rem; +} + +.article-content hr { + border: 0; + border-top: 1px solid var(--border-color); + margin: 2.5rem 0; +} \ No newline at end of file diff --git a/src/assets/styles/faq.css b/src/assets/styles/faq.css new file mode 100644 index 00000000..58585ee1 --- /dev/null +++ b/src/assets/styles/faq.css @@ -0,0 +1,73 @@ +.faq-container { + max-width: 800px; + margin: 2rem auto; + padding: 0 1rem; +} + +.faq-item { + background: var(--bg-secondary); + border-radius: 12px; + margin-bottom: 1rem; + border: 1px solid var(--border-color); + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + transition: all 0.2s ease-in-out; + border: 1px solid rgba(59, 130, 246, 0.2); +} + +.faq-item:hover { + background: var(--primary-light); + border-color: var(--primary-light); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.08); +} + +.faq-item[open] { + border-color: var(--primary); +} + +.faq-question { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.25rem; + cursor: pointer; + font-size: 1.125rem; + font-weight: 600; + color: var(--text-main); + list-style: none; +} + +.faq-question::-webkit-details-marker { + display: none; +} + +.faq-question .icon { + transition: transform 0.3s ease-in-out; + color: var(--primary); +} + +.faq-item[open] .faq-question .icon { + transform: rotate(180deg); +} + +.faq-answer { + padding: 1.25rem; + padding-top: 0; + color: var(--text-secondary); + line-height: 1.7; + overflow: hidden; +} +.faq-item[open] .faq-answer { + animation: fadeIn 0.5s ease; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css index a45a66ab..e8fe568e 100644 --- a/src/assets/styles/footer.css +++ b/src/assets/styles/footer.css @@ -1,20 +1,218 @@ +:root { + --footer-bg: #1f2937; + --footer-text-main: #d1d5db; + --footer-text-secondary: #9ca3af; + --footer-text-hover: #2825e8; + --footer-brand-text: #ffffff; + --footer-brand-highlight: #fbbf24; + --footer-social-hover: #0ea5e9; + --footer-copyright-link: #9ca3af; + --footer-copyright-link-hover: #0ea5e9; + --footer-border-color: #374151; +} + +[data-theme="dark"] { + --footer-bg: #1f2937; + --footer-text-main: #d1d5db; + --footer-text-secondary: #9ca3af; + --footer-text-hover: #2825e8; + --footer-brand-text: #ffffff; + --footer-brand-highlight: #fbbf24; + --footer-social-hover: #0ea5e9; + --footer-copyright-link: #9ca3af; + --footer-copyright-link-hover: #0ea5e9; + --footer-border-color: #374151; +} +[data-theme="light"]{ + --footer-bg: #c7f3ef; + --footer-text-main: #22223b; + --footer-text-secondary: gray; + --footer-text-hover: #090909; + --footer-brand-text: #0f0f10; + --footer-brand-highlight: #fbbf24; + --footer-social-hover: #0ea5e9; + --footer-copyright-link: #58250b; + --footer-copyright-link-hover: #178bb9; + --footer-border-color: #e5e7eb; +} + +/* Footer background and layout */ .container__footer { - @apply w-full; - border-top: 2px solid; - padding: 2rem 0; - margin-top: 2rem; + background: var(--footer-bg); + padding: 2.5rem 2rem 1.5rem 2rem; + color: var(--footer-text-main); + font-size: 1rem; + border-top: 1px solid var(--footer-border-color); +} + +.footer__main-content { + display: flex; + flex-wrap: wrap; + gap: 2rem; + max-width: 1100px; + margin: 0 auto; + width: 100%; +} + +.footer__brand-section { + flex: 1 1 220px; + min-width: 220px; } .footer__nav { - @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500 md:flex-row; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; + flex: 3 1 600px; +} + +.brand { + font-size: 2rem; + font-weight: 700; + color: var(--footer-brand-text); + margin-bottom: 0.5rem; +} + +.brand .kbd { + color: var(--footer-brand-highlight); +} + +.container__footer p { + margin: 0.5rem 0 1.5rem 0; + color: var(--footer-text-main); + font-size: 1.2rem; + max-width: 260px; +} + +.social { + display: flex; + gap: 1.2rem; +} + +.social a { + color: var(--footer-text-main); + font-size: 1.5rem; + transition: color 0.2s; +} + +.social a:hover { + color: var(--footer-social-hover); } .footer__nav--item { - @apply underline underline-offset-2 hover:text-blue-500 dark:hover:text-blue-400; + flex: 1; + min-width: 150px; +} + +.footer__nav--title { + font-weight: 700; + font-size: 1.8rem; + margin-bottom: 1rem; + color: var(--footer-brand-text); + list-style: none; + pointer-events: none; +} +.footer__nav--title::-webkit-details-marker { + display: none; +} + +.footer__nav--title .fa-chevron-down { + display: none; +} + +.footer__nav--links { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.footer__nav--links a { + color: var(--footer-text-secondary); + text-decoration: none; + font-size: 1.2rem; + transition: color 0.2s; +} + +.footer__nav--links a:hover { + color: var(--footer-text-hover); + text-decoration: underline; +} + +.copyright { + text-align: center; + color: var(--footer-text-main); + font-size: 0.95rem; + margin-top: 2rem; + border-top: 1px solid var(--footer-border-color); + padding-top: 1.5rem; +} + +.copyright a { + color: var(--footer-copyright-link); + text-decoration: none; + margin: 0 0.5rem; } +.copyright a:hover { + text-decoration: underline; + color: var(--footer-copyright-link-hover); +} + +/* --- Mobile Accordion Styles --- */ @media (max-width: 768px) { - .container__footer { - display: none; + .footer__main-content { + flex-direction: column; + } + + .footer__nav { + flex-direction: column; + width: 100%; + gap: 0; + flex: initial; + } + + .footer__nav--item { + width: 100%; + border-bottom: 1px solid var(--footer-border-color); + flex: initial; + } + .footer__nav--item:first-of-type { + border-top: 1px solid var(--footer-border-color); + } + + .footer__nav--title { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2rem 0; + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0; + pointer-events: auto; + } + + .footer__nav--title .fa-chevron-down { + display: inline-block; + transition: transform 0.2s ease-in-out; + } + + .footer__nav--item[open] > summary .fa-chevron-down { + transform: rotate(180deg); + } + + .footer__nav--links { + padding: 0 0 1.2rem 1rem; + gap: 1rem; + } + + .footer__nav--links a { + font-size: 1rem; + } + + .copyright { + margin-top: 1rem; + font-size: 0.85rem; } } diff --git a/src/assets/styles/games.css b/src/assets/styles/games.css index 5b44a694..51b6fa98 100644 --- a/src/assets/styles/games.css +++ b/src/assets/styles/games.css @@ -254,4 +254,4 @@ transform: rotate(90deg) scale(5); margin-top: 0; } -} \ No newline at end of file +} diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index 48706a5b..ca7e1440 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -87,6 +87,24 @@ opacity: 1; } + ::view-transition-group(root) { + animation-duration: 0.5s; + animation-name: circle; + animation-direction: alternate; + animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); + } + + @keyframes circle { + 0% { + clip-path: circle(75%); + } + + 100% { + clip-path: circle(10%); + } + } + + .container { display: grid; grid-template-columns: var(--sidebar-w) 1fr; @@ -183,4 +201,4 @@ .m-0 { margin: 0; -} +} \ No newline at end of file diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css index e6387396..8b5c9e51 100644 --- a/src/assets/styles/header.css +++ b/src/assets/styles/header.css @@ -19,29 +19,50 @@ justify-self: start; .logo { - width: 2rem; - height: 2rem; + width: 3rem; + height: 3rem; } span { - font-size: 1.25rem; + font-size: 1.5rem; font-weight: 600; color: var(--primary); } } + /* --- Navigation Links --- */ .caption { + display: flex; + align-items: center; + /* gap: 0.1rem; */ text-align: center; justify-self: center; + } - h1 { - font-size: 1.25rem; - font-weight: 500; - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .caption a { + font-size: 1.5rem; + font-weight: 550; + margin: 0; + color: var(--text-secondary); + text-decoration: none; + border-radius: 0.375rem; + transition: all 0.2s ease-in-out; + white-space: nowrap; + margin-right: 2rem; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + + } + + .caption a:hover { + color: #1dd299; + /* background-color: var(--bg-secondary); */ + } + + .caption a.is-active { + color: var(--primary); + font-weight: 600; } .action-group { diff --git a/src/assets/styles/home/explore-learn-section.css b/src/assets/styles/home/explore-learn-section.css new file mode 100644 index 00000000..8170a087 --- /dev/null +++ b/src/assets/styles/home/explore-learn-section.css @@ -0,0 +1,92 @@ +.section.explore-learn { + padding: 1rem 1rem 3rem 1rem; + +} +.grid.four { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.card { + background-color: white; + padding: 1.5rem; + border-radius: 2rem; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, box-shadow 0.5s ease; + min-height: 15rem; + text-align: left; + display: flex; + flex-direction: column; +} + +.card:hover { + transform: translateY(-4px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); +} + +.card.red { + background: var(--card-red-bg); + color: var(--card-red-text); +} +.card.blue { + background: var(--card-blue-bg); + color: var(--card-blue-text); +} +.card.yellow { + background: var(--card-yellow-bg); + color: var(--card-yellow-text); +} +.card.green { + background: var(--card-green-bg); + color: var(--card-green-text); +} +.card h3 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.7rem; + letter-spacing: -0.5px; +} + +.card p { + font-size: 1.2rem; + margin-bottom: 1.2rem; + color: inherit; +} + +/* Add this new rule to push the button to the bottom */ +.card a { + margin-top: auto; +} + +.card .button.white { + margin-top: 0.5rem; + background: #fff; + color: #222; + border: none; + font-weight: 700; + border-radius: 2rem; + padding: 0.7rem 1.5rem; + cursor: pointer; + box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07); + transition: background 0.2s, color 0.2s; +} +.card .button.white:hover { + background: #f3f4f6; + color: #111; +} +@media (max-width: 1100px) { + .grid.four { + grid-template-columns: 1fr 1fr; + gap: 1.2rem; + } +} +@media (max-width: 700px) { + .grid.four { + grid-template-columns: 1fr; + gap: 1rem; + } + .section.explore-learn { + padding: 2rem 0.5rem 2.5rem 0.5rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/home/hero-section.css b/src/assets/styles/home/hero-section.css new file mode 100644 index 00000000..1e35ecfd --- /dev/null +++ b/src/assets/styles/home/hero-section.css @@ -0,0 +1,108 @@ +.hero-row { + display: flex; + align-items: center; + justify-content: center; + gap: 3rem; + /* padding: 3rem; */ + /* background: linear-gradient(to bottom, #f9fbff, #eef5fc); */ + text-align: left; +} + +.button.green { + background-color: #10b981; + color: white; + box-shadow: 0 4px 10px rgba(0, 196, 126, 0.4); +} + +.button.green:hover { + background-color: #059669; +} + +.button.gray { + background-color: #f0f0f0; + border: 2px solid green; + color: green; +} + +.button.gray:hover { + background-color: #e5e7eb; +} + +.hero { + text-align: center; + +} +.hero h1 { + font-size: 2.75rem; + font-weight: 800; + color: var(--hero-heading); + margin-bottom: 2rem; +} + +.hero p { + font-size: 1.75rem; + color: #9fa9b8; + max-width: 700px; + margin-top: 2rem; + margin-bottom: 2rem; +} + +.note { + font-size: 2rem; + color: green; + margin-top: 2rem; + +} + +.hero-text { + flex: 1 1 0; + min-width: 300px; + justify-items: anchor-center; + padding:1rem; +} + +.hero-image { + flex: 1 1 0; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-svg { + max-width: 350px; + width: 100%; + height: auto; +} + +@media (max-width: 900px) { + .hero-row { + flex-direction: column; + text-align: center; + padding: 1.5rem; + } + .hero-text, .hero-image { + min-width: 0; + width: 100%; + justify-content: center; + align-items: center; + } + .hero-svg { + max-width: 250px; + margin-top: 2rem; + } +} + +/* --- Responsive Styles for Mobile --- */ +@media (max-width: 768px) { + .cta-buttons { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .cta-buttons .button { + font-size: 1rem; + padding: 1rem; + white-space: nowrap; + } +} diff --git a/src/assets/styles/home/kids-love-section.css b/src/assets/styles/home/kids-love-section.css new file mode 100644 index 00000000..452a4417 --- /dev/null +++ b/src/assets/styles/home/kids-love-section.css @@ -0,0 +1,60 @@ +.kids-will-love .split-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: start; +} + +.content-column > div { + margin-bottom: 2rem; +} + +.image-column img { + width: 100%; + max-width: 400px; + height: auto; + display: block; + margin: 0 auto; + margin-top: 5rem; + margin-bottom: 6rem; +} + +.content-column h3 { + font-size: 1.8rem; +} + +.content-column p { + font-size: 1rem; +} + +.section.kids-will-love { + /* background-color: #ecf6f7; */ + padding: 2rem 1rem 1rem 1rem; +} + +@media (max-width: 900px) { + .split-layout { + flex-direction: column; + align-items: center; + gap: 1.5rem; + } + .image-column { + display: none; + } + .content-column { + text-align: center; + } + + .kids-will-love .split-layout { + grid-template-columns: 1fr; + } + + .image-column { + display: none; + } + + .content-column { + text-align: center; + } + +} \ No newline at end of file diff --git a/src/assets/styles/home/testimonials-section.css b/src/assets/styles/home/testimonials-section.css new file mode 100644 index 00000000..43a9590e --- /dev/null +++ b/src/assets/styles/home/testimonials-section.css @@ -0,0 +1,79 @@ +.grid.three { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-bottom: 2.5rem; +} + +.grid.three h3 { + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 0.7rem; + color: inherit; +} + +.grid.three p { + font-size: 1.05rem; + margin-bottom: 1.2rem; + color: inherit; +} + +.button.link { + background: #06d6a0; + color: #fff; + border: none; + border-radius: 2rem; + padding: 0.7rem 1.5rem; + font-weight: 700; + cursor: pointer; + box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07); + transition: background 0.2s, color 0.2s; +} +.button.link:hover { + background: #118ab2; +} + +.stars { + color: #FFD700; + font-size: 2rem; + margin-bottom: 1rem; +} +.stars.centered { + text-align: center; + margin-bottom: 2rem; +} + +.stars span { + font-size: 2rem; + color: var(--star-color); + margin: 0 0.1rem; +} + +.card.light-blue { + background-color: var(--testimonial-card-bg); + color: var(--testimonial-card-text); + border-radius: 1.5rem; + padding: 2rem; + box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07); + border: 1px solid rgba(59, 130, 246, 0.2); +} + +.card.light-blue p { + font-size: 1.1rem; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +.card.light-blue .author { + font-size: 1rem; + font-weight: 600; + color: var(--testimonial-author-text); + margin-bottom: 0; +} + +@media (max-width: 900px) { + .grid.three { + grid-template-columns: 1fr; + gap: 1.2rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css new file mode 100644 index 00000000..8ba9ea68 --- /dev/null +++ b/src/assets/styles/index.css @@ -0,0 +1,157 @@ +:root { + --card-red-bg: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); + --card-blue-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); + --card-yellow-bg: linear-gradient(135deg, #f59e42 0%, #fbbf24 100%); + --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); + --card-red-text: #fff; + --card-blue-text: #fff; + --card-yellow-text: #fff; + --card-green-text: #fff; + --card-shadow: 0 4px 24px 0 rgba(0,0,0,0.18); + --hero-heading: #f3f4f6; + --section-divider: #23304a; + --section-bg: #0f172a; + --section-bg-alt: #16213a; + --section-text: #f3f4f6; + --testimonial-card-bg: #1e293b; + --testimonial-card-text: #cbd5e1; + --testimonial-author-text: #94a3b8; +} + +[data-theme="dark"] { + --card-red-bg: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); + --card-blue-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); + --card-yellow-bg: linear-gradient(135deg, #f59e42 0%, #fbbf24 100%); + --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); + --card-red-text: #fff; + --card-blue-text: #fff; + --card-yellow-text: #fff; + --card-green-text: #fff; + --card-shadow: 0 4px 24px 0 rgba(0,0,0,0.18); + --hero-heading: #f3f4f6; + --section-divider: #23304a; + --section-bg: #0f172a; + --section-bg-alt: #16213a; + --section-text: #f3f4f6; + --testimonial-card-bg: #1e293b; + --testimonial-card-text: #cbd5e1; + --testimonial-author-text: #94a3b8; +} + +[data-theme="light"] { + --bg-dark: #0f172a; + --bg-light: #ffffff; + --bg-secondary: #1e293b; + --primary: #3b82f6; + --primary-light: #60a5fa; + --text-main: #212223; + --text-primary: #cbd5e1; + --text-secondary: #212223; + --accent: #f59e0b; + --hero-heading: #131414; + --card-red-bg: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%); + --card-blue-bg: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); + --card-yellow-bg: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%); + --card-green-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%); + --card-red-text: #fff; + --card-blue-text: #fff; + --card-yellow-text: #fff; + --card-green-text: #fff; + --card-shadow: 0 4px 24px 0 rgba(0,0,0,0.07); + --section-divider: #e5e7eb; + --section-bg: #ffffff; + --section-bg-alt: #f7fafc; + --section-text: #22223b; + --testimonial-card-bg: #eef5fc; + --testimonial-card-text: #334155; + --testimonial-author-text: #64748b; + --star-color: #f59e0b; +} + +.about-container { + background-color: light-dark(var(--bg-light), var(--bg-dark)); + color: var(--text-main); + min-height: 100vh; + font-family: "roboto", cursive, sans-serif; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.text-highlight { + color: var(--primary); + font-weight: 700; +} + +.section-title { + margin-bottom: 1rem; + position: relative; + text-align: center; + font-size: 2.2rem; + font-weight: 800; + color: var(--hero-heading, #111827); + letter-spacing: -1px; +} + +.section-subtitle { + text-align: center; + color: light-dark(var(--bg-dark), var(--text-primary)); + max-width: 700px; + margin: 0 auto 2.5rem; + line-height: 1.6; +} + +.section-title::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60%; + height: 4px; + background: linear-gradient(90deg, var(--primary), transparent); + border-radius: 2px; +} + + +.button { + font-weight: 600; + transition: background 0.3s ease; + padding: 0.6rem 1.4rem; + font-size: 1rem; + border-radius: 30px; + border: none; + cursor: pointer; + font-weight: bold; + margin-bottom: 2rem; +} +.grid { + display: grid; + gap: 1.5rem; + grid-template-columns: 1fr; +} + +.section { + background: var(--section-bg-alt); + color: var(--section-text); + padding: 1rem 1rem 2rem 1rem; + border-top: 1px solid var(--section-divider); +} +.section:nth-of-type(odd) { + background: var(--section-bg-alt); +} + +.section-description { + text-align: center; + font-size: 1.15rem; + color: var(--section-desc); + margin-bottom: 2.5rem; + font-weight: 500; +} + +@media (min-width: 1600px) { + .section { + padding-left: 6rem; + padding-right: 6rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/map/district.css b/src/assets/styles/map/district.css index bdc5c5fa..d147dc6b 100644 --- a/src/assets/styles/map/district.css +++ b/src/assets/styles/map/district.css @@ -68,7 +68,7 @@ .view-button.active { background-color: #4a90e2; - color:white; + color: white; } .district { diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css index 28da788e..efe15d47 100644 --- a/src/assets/styles/map/popup.css +++ b/src/assets/styles/map/popup.css @@ -84,7 +84,7 @@ max-width: 95vw; min-width: 260px; color: #222; - font-family: "Segoe UI", "Roboto", Arial, sans-serif; + font-family: 'Segoe UI', 'Roboto', Arial, sans-serif; border: none; position: relative; display: flex; @@ -105,15 +105,20 @@ .state-popup__close:hover { color: #1976d2; background-colo: white; -} +} .state-popup__name { - font-size: 2rem; - font-weight: 700; - margin-bottom: 0.7rem; - color: #222; - text-align: left; - width: 100%; + font-size: 1.8rem; + font-weight: bold; + margin-bottom: 12px; + color: #333; +} + +.state-popup__info { + font-size: 1.4rem; + margin: 12px 0; + color: #444; + line-height: 1.4; } .state-popup__image { @@ -139,9 +144,9 @@ } .state-popup__buttons { - width: 100%; display: flex; - justify-content: center; + gap: 12px; + margin-top: 15px; } .state-popup__button { @@ -149,7 +154,7 @@ padding: 0.8rem 0; font-size: 1.1rem; font-weight: 600; - background:#1976d2; + background: #1976d2; color: #fff; border: none; border-radius: 0.7rem; @@ -163,7 +168,7 @@ .state-popup { width: 80vw; padding: 1.5rem 1rem; - + &[popover] { min-height: 16rem; @@ -188,7 +193,7 @@ .state-popup__info { font-size: 1rem; margin-bottom: -1rem; - margin-right:0rem; + margin-right: 0rem; margin-top: -1rem; margin-left: 0rem; } @@ -210,7 +215,7 @@ .state-popup__close { font-size: 2rem; - top:0.9rem; + top: 0.9rem; right: 0rem; width: 2.5rem; height: 2.5rem; @@ -218,5 +223,3 @@ } } } - - diff --git a/src/assets/styles/map/state.css b/src/assets/styles/map/state.css index 1370840c..0a24604c 100644 --- a/src/assets/styles/map/state.css +++ b/src/assets/styles/map/state.css @@ -111,7 +111,7 @@ transition: all 0.3s ease; } -.info-card:hover{ +.info-card:hover { background-color: #6da4ece7; transform: scale(1.02); border-color: var(--accent-color); @@ -129,7 +129,6 @@ font-size: 0.9rem; } - .quick-facts { background: var(--card-bg); padding: 20px; diff --git a/src/assets/styles/share-button.css b/src/assets/styles/share-button.css index 47102532..2b2d9f46 100644 --- a/src/assets/styles/share-button.css +++ b/src/assets/styles/share-button.css @@ -82,7 +82,10 @@ visibility: hidden; transform: scale(0.95); transform-origin: top right; - transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out; + transition: + opacity 0.2s ease-out, + visibility 0.2s ease-out, + transform 0.2s ease-out; pointer-events: none; color: var(--text-color); } @@ -105,13 +108,12 @@ font-size: 0.9rem; color: var(--description-color); margin-top: 5px; - } /* Social Share Section */ .social-share-section { padding-top: 0px; - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid #eeeeee; margin-bottom: 20px; } @@ -147,11 +149,21 @@ justify-content: center; } -.social-share-section .astro-social-share a[href*="whatsapp"] { order: 1; } -.social-share-section .astro-social-share a[href*="x.com"] { order: 2; } -.social-share-section .astro-social-share a[href*="facebook"] { order: 3; } -.social-share-section .astro-social-share a[href*="linkedin"] { order: 4; } -.social-share-section .astro-social-share a[href*="reddit"] { order: 5; } +.social-share-section .astro-social-share a[href*="whatsapp"] { + order: 1; +} +.social-share-section .astro-social-share a[href*="x.com"] { + order: 2; +} +.social-share-section .astro-social-share a[href*="facebook"] { + order: 3; +} +.social-share-section .astro-social-share a[href*="linkedin"] { + order: 4; +} +.social-share-section .astro-social-share a[href*="reddit"] { + order: 5; +} .social-share-section .astro-social-share svg { width: 30px; @@ -208,4 +220,4 @@ .copy-link-button:hover { background-color: #e0e0e0; -} \ No newline at end of file +} diff --git a/src/assets/styles/stories/index.css b/src/assets/styles/stories/index.css index 8b9da526..4d31863a 100644 --- a/src/assets/styles/stories/index.css +++ b/src/assets/styles/stories/index.css @@ -1,3 +1,4 @@ +/* src/assets/styles/stories/index.css */ .container__stories { max-width: 1440px; margin: 0 auto; @@ -8,7 +9,7 @@ .stories-header { text-align: center; - margin-bottom: 0rem; + margin-bottom: 4rem; position: relative; } @@ -56,12 +57,41 @@ opacity: 0.15; } +.decoration-circle { + position: absolute; + border-radius: 50%; + background: var(--primary_blue); + filter: blur(30px); +} + +.decoration-circle:nth-child(1) { + width: 120px; + height: 120px; + top: 0; + right: 0; +} + +.decoration-circle:nth-child(2) { + width: 80px; + height: 80px; + top: 40px; + right: 100px; + background: var(--primary-light); +} + +.decoration-circle:nth-child(3) { + width: 60px; + height: 60px; + top: 100px; + right: 40px; + background: var(--accent); +} + .stories-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; margin-top: 3rem; - margin-bottom: 15px; } .story-card { @@ -140,7 +170,6 @@ color: #ffffff; } - :is(button, figcaption) { &[data-category="all"] { background-color: #6701cc; @@ -185,17 +214,27 @@ height: 240px; overflow: hidden; border-radius: 1.5rem 1.5rem 0 0; +} - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.5s ease; - } +.story-card-image::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 40px; + background: linear-gradient(transparent, var(--background)); +} - &:hover img { - transform: scale(1.06); - } +.story-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.story-card:hover .story-card-image img { + transform: scale(1.05); } .story-card-details { @@ -215,7 +254,6 @@ font-weight: 700; color: var(--text); margin-bottom: 0rem; - margin-top: 0px; line-height: 1.3; transition: color 0.3s ease; position: relative; @@ -249,7 +287,6 @@ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; - line-clamp: 3; overflow: hidden; transition: color 0.3s ease; text-align: left; @@ -336,33 +373,30 @@ } } -@media (max-width: 768px) { +@media (max-width: 76px) { .container__stories { padding: 0 1rem; } .stories-header { - text-align: center; + text-align: left; margin-bottom: 2rem; - padding: 0; + padding: 0 0.5rem; } .stories-title { - font-size: clamp(1.75rem, 6vw, 2.5rem); - margin-bottom: 1rem; - line-height: 1.1; + font-size: 2rem; + margin-bottom: 0.75rem; } .stories-subtitle { - font-size: clamp(0.875rem, 3vw, 1rem); - text-align: center; - margin: 0 auto; + text-align: left; + margin: 0; max-width: 100%; - padding: 0 0.5rem; } .header-decoration { - display: none; + display: none; } .stories-grid { @@ -373,113 +407,54 @@ .story-card { border-radius: 1rem; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); - } - - .story-card::before { - border-radius: 1rem; - } - - .story-card::after { - border-radius: 0.8rem; - } - - .filter-chips { - padding: 0 16px; - gap: 8px; - } - - .chip { - padding: 6px 12px; - font-size: 13px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .story-card-image { - height: 180px; + height: 200px; border-radius: 1rem 1rem 0 0; } - .story-card-image::after { - height: 30px; - } - .story-card-details { - padding: 1.25rem; - gap: 0.75rem; - border-radius: 0 0 1rem 1rem; - } - - .reading-time { + padding: 1.5rem; text-align: left; - margin-left: -15px; } .story-card-title { - font-size: 1.125rem; + font-size: 1.25rem; margin-bottom: 0.5rem; - line-height: 1.25; } .story-card-description { - font-size: 0.875rem; + -webkit-line-clamp: 3; + font-size: 0.9375rem; line-height: 1.5; - -webkit-line-clamp: 2; - line-clamp: 2; - margin-bottom: 0.5rem; } .story-card-meta { padding-top: 0.75rem; - font-size: 0.75rem; - margin-bottom: 0.75rem; - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; + font-size: 0.8125rem; } .story-category, .story-featured { - font-size: 0.625rem; - padding: 0.25rem 0.5rem; - top: 0.75rem; - } - - .story-category { - right: 0.75rem; - } - - .story-featured { - left: 0.75rem; + font-size: 0.6875rem; + padding: 0.2rem 0.6rem; } .story-card-details::after { bottom: 0.75rem; - right: 1.25rem; - font-size: 0.75rem; + right: 1.5rem; } } -@media (max-width: 480px) { - .filter-chips { - justify-content: flex-start; - overflow-x: auto; - scrollbar-width: none; - -ms-overflow-style: none; - } - - .filter-chips::-webkit-scrollbar { - display: none; +@media (min-width: 768px) and (max-width: 1023px) { + .stories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 2rem; } - .chip { - flex-shrink: 0; - white-space: nowrap; - } -} - -@media (min-width: 800px) and (max-width: 1199px) { .story-card-image { - height: 350px; - border-radius: 1rem 1rem 0 0; + height: 220px; } -} \ No newline at end of file +} diff --git a/src/assets/styles/stories/stories.css b/src/assets/styles/stories/stories.css index 54770002..9ad6a84d 100644 --- a/src/assets/styles/stories/stories.css +++ b/src/assets/styles/stories/stories.css @@ -1,22 +1,22 @@ :root { --stories-background-light: #f8fafc; - --stories-background-dark: #0f172a; - --stories-text-dark: #f1f5f9; + --stories-background-dark: #0f172a; + --stories-text-dark: #f1f5f9; --stories-secondary-light: #64748b; - --stories-secondary-dark: #94a3b8; + --stories-secondary-dark: #94a3b8; --stories-primary-blue: #3b82f6; --stories-primary-light: #60a5fa; --stories-primary-dark: #1d4ed8; --stories-accent: #f59e0b; --stories-accent-light: #fbbf24; --stories-border-light: #e2e8f0; - --stories-border-dark: #475569; + --stories-border-dark: #475569; --stories-shadow-light: rgba(0, 0, 0, 0.1); --stories-shadow-dark: rgba(0, 0, 0, 0.3); --stories-card-light: #ffffff; - --stories-card-dark: #1e293b; + --stories-card-dark: #1e293b; --stories-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); - --stories-text-light: #334155; + --stories-text-light: #334155; --primary-background: var(--stories-background-light); --secondary-background: var(--stories-card-light); --text-color: var(--stories-text-light); @@ -33,8 +33,8 @@ padding: 2rem 1.5rem; position: relative; overflow: hidden; - background-color: var(--primary-background); - color: var(--text-color); + background-color: var(--primary-background); + color: var(--text-color); } .stories-header { @@ -64,7 +64,7 @@ left: 0; width: 100%; height: 0.25rem; - background: var(--main-primary-color); + background: var(--main-primary-color); border-radius: 0.125rem; } @@ -72,7 +72,7 @@ font-size: clamp(0.9rem, 2vw, 1.1rem); max-width: 600px; margin: 0 auto 1.5rem; - color: var(--secondary-text-color); + color: var(--secondary-text-color); opacity: 0.9; line-height: 1.6; } @@ -93,59 +93,28 @@ filter: blur(20px); } -.card-top-controls { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - margin-bottom: 1rem; -} - -.font-size-control { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.font-size-control input[type="range"] { - appearance: none; - -webkit-appearance: none; - width: 100px; - height: 4px; - background: var(--primary); - border-radius: 4px; - outline: none; -} - -.font-size-control input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 16px; - height: 16px; - background: var(--primary); - border-radius: 50%; - cursor: pointer; - border: 1px solid var(--primary); -} - -.font-size-control button { - background-color: light-dark(#ffffff, #0f172a); - color: var(--primary); - border: 1px solid var(--primary); - border-radius: 8px; - padding: 0.25rem 0.5rem; - cursor: pointer; - font-size: 1.2rem; - transition: background-color 0.2s; +.decoration-circle:nth-child(1) { + width: 80px; + height: 80px; + top: 0; + right: 0; + background: var(--main-primary-color); } -.font-size-control button:hover { - background-color: var(--primary); - color: #ffffff; +.decoration-circle:nth-child(2) { + width: 60px; + height: 60px; + top: 30px; + right: 70px; + background: var(--main-primary-color); } -.font-size-control button:active { - background-color: var(--primary); +.decoration-circle:nth-child(3) { + width: 40px; + height: 40px; + top: 70px; + right: 30px; + background: var(--main-accent-color); } .stories-grid { @@ -158,12 +127,12 @@ .story-card { height: 100%; border-radius: 1rem; - background: var(--secondary-background); - box-shadow: 0 2px 10px var(--shadow-color); + background: var(--secondary-background); + box-shadow: 0 2px 10px var(--shadow-color); overflow: hidden; transition: all 0.3s ease; position: relative; - border: 1px solid var(--border-color); + border: 1px solid var(--border-color); cursor: pointer; animation: fadeInUp 0.6s ease forwards; opacity: 0; @@ -172,7 +141,7 @@ .story-card:hover { transform: translateY(-5px); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .story-card-image { @@ -199,25 +168,24 @@ .story-card-title { font-size: 1.25rem; font-weight: 700; - color: var(--text-color); + color: var(--text-color); margin-bottom: 0.75rem; line-height: 1.4; transition: color 0.3s ease; } .story-card:hover .story-card-title { - color: var(--main-primary-color); + color: var(--main-primary-color); } .story-card-description { font-size: 0.95rem; line-height: 1.5; - color: var(--secondary-text-color); + color: var(--secondary-text-color); margin-bottom: 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; - line-clamp: 3; overflow: hidden; } @@ -227,9 +195,9 @@ align-items: center; padding-top: 0.75rem; margin-top: auto; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--border-color); font-size: 0.8rem; - color: var(--secondary-text-color); + color: var(--secondary-text-color); } .story-card-meta-left { @@ -247,7 +215,7 @@ display: flex; align-items: center; gap: 0.35rem; - color: var(--text-color); + color: var(--text-color); } .meta-item svg { @@ -255,18 +223,18 @@ height: 14px; flex-shrink: 0; font-weight: bold; - color: var(--main-primary-color); + color: var(--main-primary-color); } .story-card:hover .story-card-meta { - border-top-color: var(--main-primary-color); + border-top-color: var(--main-primary-color); } .story-category { position: absolute; top: 1rem; right: 1rem; - background: var(--main-primary-color); + background: var(--main-primary-color); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; @@ -280,7 +248,7 @@ position: absolute; top: 1rem; left: 1rem; - background: var(--main-accent-color); + background: var(--main-accent-color); color: var(--text-color); padding: 0.25rem 0.75rem; border-radius: 9999px; @@ -291,7 +259,7 @@ } .reading-time { - color: light-dark(#000000, #ffffff); + color: light-dark(#000000,#ffffff); font-weight: 500; display: flex; align-items: center; @@ -301,20 +269,105 @@ .reading-time svg { width: 14px; height: 14px; - color: var(--main-primary-color); + color: var(--main-primary-color); } + .container__story { max-width: 1400px; margin-top: 5px; margin: 0 auto; padding: 2rem 1rem; - background-color: light-dark(#0000, #0f172a); + background-color: light-dark(#0000,#0f172a); /* Use dynamic variable */ border-radius: 1.5rem; - box-shadow: 0 10px 30px var(--shadow-color); + box-shadow: 0 10px 30px var(--shadow-color); /* Use dynamic variable */ position: relative; overflow: hidden; - border: 1px solid var(--primary); + border: 1px solid var(--primary); /* Use dynamic variable */ +} + +.container__story::before { + content: ""; + position: absolute; + top: -50px; + left: -50px; + width: 150px; + height: 150px; + background: var(--primary); + border-radius: 50%; + opacity: 0.15; + filter: blur(30px); + z-index: 0; +} + +.container__story::after { + content: ""; + position: absolute; + bottom: -50px; + right: -50px; + width: 120px; + height: 120px; + background: var(--primary); + border-radius: 50%; + opacity: 0.15; + filter: blur(30px); + z-index: 0; +} + +.container__story::before { + content: ""; + position: absolute; + top: -50px; + left: -50px; + width: 150px; + height: 150px; + background: var(--primary); + border-radius: 50%; + opacity: 0.15; + filter: blur(30px); + z-index: 0; +} + +.container__story::after { + content: ""; + position: absolute; + bottom: -50px; + right: -50px; + width: 120px; + height: 120px; + background: var(--primary); + border-radius: 50%; + opacity: 0.15; + filter: blur(30px); + z-index: 0; +} + +.container__story::before { + content: ""; + position: absolute; + top: -50px; + left: -50px; + width: 150px; + height: 150px; + background: var(--primary); + border-radius: 50%; + opacity: 0.15; + filter: blur(30px); + z-index: 0; +} + +.container__story::after { + content: ""; + position: absolute; + bottom: -50px; + right: -50px; + width: 120px; + height: 120px; + background: var(--primary); + border-radius: 50%; + opacity: 0.15; + filter: blur(30px); + z-index: 0; } .story-header { @@ -336,7 +389,7 @@ .story-description { font-size: clamp(1rem, 2.5vw, 1.25rem); - color: light-dark(#000000, #ffffff); + color: light-dark(#000000,#ffffff); margin-bottom: 2rem; line-height: 1.7; max-width: 800px; @@ -350,7 +403,7 @@ gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; - border-bottom: 1px dashed light-dark(#000000, #ffffff); + border-bottom: 1px dashed light-dark(#000000,#ffffff); padding-bottom: 1.5rem; } @@ -358,10 +411,11 @@ display: flex; align-items: center; gap: 0.6rem; + color: light-dark(#000000,#ffffff); font-size: 0.95rem; font-weight: 500; border-radius: 50rem; - padding: 4px 10px; + padding: 4px 6px; border: 2px solid var(--primary); } @@ -369,28 +423,29 @@ width: 18px; height: 18px; flex-shrink: 0; - color: var(--primary) + color: var(--primary); } .category-badge { - color: light-dark(#000000, #ffffff); + color: light-dark(#000000,#ffffff); padding: 0.3rem 0.9rem; border-radius: 9999px; - font-size: 15px; + font-size: 0.8rem; font-weight: 500; } .story-tags { - display: none; +display: none; } .tag { - display: none; + display:none; } .story-content { font-size: 1.4rem; line-height: 1.8; + color: light-dark(#000000,#ffffff); position: relative; z-index: 1; text-align: left; @@ -409,7 +464,7 @@ } .story-content h2::after { - content: ''; + content: ""; position: absolute; bottom: 5px; left: 50%; @@ -423,6 +478,7 @@ .story-content p { margin-bottom: 0; margin-top: 0; + color: light-dark(#000000,#ffffff); font-size: clamp(1rem, 2.5vw, 1.1rem); text-align: justify; font-family: atkinson; @@ -431,16 +487,16 @@ .moral-section { margin-top: 3.5rem; padding: 2rem; - background-color: var(--secondary-background); + background-color: var(--secondary-background); border-radius: 1rem; - box-shadow: 0 5px 15px var(--shadow-color); + box-shadow: 0 5px 15px var(--shadow-color); border: 1px solid var(--border-color); text-align: center; } .moral-section h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); - color: var(--main-accent-color); + color: var(--main-accent-color); margin-bottom: 1rem; font-weight: 800; position: relative; @@ -448,7 +504,7 @@ } .moral-section h2::after { - content: '๐ŸŒŸ'; + content: "๐ŸŒŸ"; position: absolute; bottom: -0.5rem; right: -1.5rem; @@ -463,6 +519,8 @@ font-style: italic; } + + @keyframes fadeInUp { to { opacity: 1; @@ -481,6 +539,34 @@ } } +@media (min-width: 640px) { + .stories-grid { + grid-template-columns: repeat(2, 1fr); + } + + .header-decoration { + top: -2rem; + right: -2rem; + width: 180px; + height: 180px; + } + + .decoration-circle:nth-child(1) { + width: 100px; + height: 100px; + } + + .decoration-circle:nth-child(2) { + width: 70px; + height: 70px; + } + + .decoration-circle:nth-child(3) { + width: 50px; + height: 50px; + } +} + @media (min-width: 768px) { .container__stories { padding: 2rem; @@ -507,4 +593,4 @@ width: 18px; height: 18px; } -} \ No newline at end of file +} diff --git a/src/assets/styles/survey.css b/src/assets/styles/survey.css index d3b8b643..c7b8ec68 100644 --- a/src/assets/styles/survey.css +++ b/src/assets/styles/survey.css @@ -107,7 +107,6 @@ font-size: x-large; } - .question::before { content: counter(question-counter) "."; color: var(--primary-light); @@ -251,7 +250,6 @@ min-height: 100px; transition: var(--transition); resize: none; - } .textarea-input:focus { @@ -545,7 +543,6 @@ margin-bottom: 1rem; text-align: left; - .question { font-size: 1.1rem; flex-wrap: wrap; @@ -642,7 +639,6 @@ text-align: left; } - .option-label { font-size: 0.8rem; padding: 0.5rem 0.75rem; @@ -672,4 +668,4 @@ overflow-y: auto; min-height: 1500px; } -} \ No newline at end of file +} diff --git a/src/assets/styles/tile.css b/src/assets/styles/tile.css index 0f97491a..72d182b3 100644 --- a/src/assets/styles/tile.css +++ b/src/assets/styles/tile.css @@ -60,4 +60,4 @@ .page__title { display: none; } -} \ No newline at end of file +} diff --git a/src/components/HideSeekKbd.astro b/src/components/HideSeekKbd.astro index 15b68b2a..cd0216e8 100644 --- a/src/components/HideSeekKbd.astro +++ b/src/components/HideSeekKbd.astro @@ -110,7 +110,6 @@ const letterRows = [ transform: rotate(90deg) scale(1.1); } } - \ No newline at end of file + diff --git a/src/components/Popup.astro b/src/components/Popup.astro index f680828e..e5245c33 100644 --- a/src/components/Popup.astro +++ b/src/components/Popup.astro @@ -5,17 +5,17 @@ import "@/assets/styles/map/popup.css";
diff --git a/src/components/ShareButton.astro b/src/components/ShareButton.astro index f6ecd306..273813d5 100644 --- a/src/components/ShareButton.astro +++ b/src/components/ShareButton.astro @@ -12,9 +12,7 @@ import "@/assets/styles/share-button.css";

Share this page!

-

- Share this page with the world! -

+

Share this page with the world!