diff --git a/.github/actions/md-lint/action.yml b/.github/actions/md-lint/action.yml index 98ad500a..3d5f3f3b 100644 --- a/.github/actions/md-lint/action.yml +++ b/.github/actions/md-lint/action.yml @@ -9,4 +9,5 @@ runs: --config './.markdownlint.json' \ --ignore '.github/CONTRIBUTING.md' \ --ignore '.github/CODE_OF_CONDUCT.md'\ - --ignore 'CHANGELOG.md' + --ignore 'CHANGELOG.md'\ + --ignore 'docs/README.md' diff --git a/.vscode/dictionaries/project-words.txt b/.vscode/dictionaries/project-words.txt index 00c36478..11543bdf 100755 --- a/.vscode/dictionaries/project-words.txt +++ b/.vscode/dictionaries/project-words.txt @@ -12,7 +12,9 @@ audiorec audiorecorder avgrah Barahkhadi +betterauth Bhadrapada +bhartiya bincount BODYPART Chaitra @@ -28,6 +30,7 @@ dogri DPDP Dussehra ensurepip +flexbox fontsource frontmatter Gandhar @@ -37,6 +40,7 @@ heroicons hidenseek Holi hookform +ICFAI imread imwrite Jaati diff --git a/CHANGELOG.md b/CHANGELOG.md index 81368edc..423048cc 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,11 +30,10 @@ Created Repo from template - Added Poem section - ## [3.2.2] - 2025-07-21 - Update Storey page images issues -- Mobile view fixed for pages +- Mobile view fixed for pages - FAQs updated ### [Unreleased] diff --git a/docs/README.md b/docs/README.md index 55e94973..b2c3f186 100755 --- a/docs/README.md +++ b/docs/README.md @@ -113,3 +113,259 @@ and then check with ```sh npm run preview ``` + +## 📄 Pages Documentation + +--- + +## Home Page + +> Description + +The landing page for abcdkbd, introducing the platform and its key features for interactive learning. + +> Screenshots + +- **Light Mode:** ![Home Light](/public/assets/images/screenshots/light/home.png) +- **Dark Mode:** ![Home Dark](/public/assets/images/screenshots/dark/home.png) + +--- + +## About Page + +This page introduces the mission, team, and values behind abcdkbd. It provides an overview of the platform's goals, core values, and contact information for contributors and educators. + +- **Light Mode:** ![About Light](/public/assets/images/screenshots/light/about.png) +- **Dark Mode:** ![About Dark](/public/assets/images/screenshots/dark/about.png) + +--- + +## Varnmala Page + +Explore the vowels and consonants of different Indian languages. Compare scripts and sounds across regions in a simple, visual way. + +### Screenshots + +- **Light Mode:** ![Varnmala Light](/public/assets/images/screenshots/light/varnmalaLight.png) +- **Dark Mode:** ![Varnmala Dark](/public/assets/images/screenshots/dark/varnmala.png) + +--- + +## Vedic Page + +### Description + +Learn about Vedic timekeeping, tithi, and traditional Indian calendars. + +### Screenshots + +- **Light Mode:** ![Vedic Light](/public/assets/images/screenshots/light/vedic.png) +- **Dark Mode:** ![Vedic Dark](/public/assets/images/screenshots/dark/vedic.png) + +--- + +## Akshar (Indic Alphabets) Page + +### Description + +Learn Indian culture and diversity through Indian languages. Compare alphabets, pronunciation, and examples across different Indian scripts. + +### Screenshots + +- **Light Mode:** ![Akshar Light](/public/assets/images/screenshots/light/indic.png) +- **Dark Mode:** ![Akshar Dark](/public/assets/images/screenshots/dark/indic.png) + +--- + +## Panel Page + +### Description + +The Panel page provides users with a personal dashboard to manage their account, view activity, and access learning resources. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/panel.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/panel.png) + +--- + +## Alphabet Page + +### Description + +Explore the alphabets of different Indian languages, compare scripts, and learn pronunciation and examples. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/alphabets.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/alphabets.png) + +--- + +## Number Page + +### Description + +Learn and practice numbers in different languages with interactive grids and examples. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/numbers.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/numbers.png) + +--- + +## Glossary Page + +### Description + +Browse and search for educational terms and definitions relevant to the platform's content. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/glossary.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/glossary.png) + +--- + +## India(Map) Page + +### Description + +An interactive journey through India's states, displaying their various dance form and related information. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/map.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/map.png) + +--- + +## Crossword Page + +### Description + +Solve interactive crossword puzzles to reinforce learning and vocabulary. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/crossword.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/crossword.png) + +--- + +## Capital Page + +### Description + +An interactive journey through India's states and territories, displaying their capitals and related information. + +### Screenshots + +- **Light Mode:** ![Capital Light](/public/assets/images/screenshots/light/capitalLight.png) +- **Dark Mode:** ![Capital Dark](/public/assets/images/screenshots/dark/capital.png) + +## Hide & Seek Page + +### Description + +Play hide and seek games to learn letters, numbers, and more in a fun, interactive way. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/hideseek.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/hideseek.png) + +--- + +## Canvas Page + +### Description + +Create, draw, and generate art or text on a digital canvas. Includes quote and text generation features. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/canvas.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/canvas.png) + +--- + +## Draw Page + +### Description + +Practice drawing letters and shapes using your keyboard. An interactive tool for learning letter formation and improving motor skills. + +### Screenshots + +- **Light Mode:** ![Draw Light](/public/assets/images/screenshots/light/draw.png) +- **Dark Mode:** ![Draw Dark](/public/assets/images/screenshots/dark/draw.png) + +--- + +## Gallery Page + +### Description + +Explore interactive ways to learn alphabets with Stack, Queue, and Slider gallery layouts. Choose your favorite mode to visualize and play with alphabet cards. + +### Screenshots + +- **Light Mode:** ![Gallery Light](/public/assets/images/screenshots/light/gallery.png) +- **Dark Mode:** ![Gallery Dark](/public/assets/images/screenshots/dark/gallery.png) + +--- + +## Nakshtra Page + +### Description + +Learn about the Nakshatras (lunar mansions) in Indian astronomy and astrology. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/nakshatra.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/nakshtra.png) + +--- + +## Stories Page + +### Description + +Browse a curated collection of stories, tales, and creative writing for kids. Stories are organized by category and feature author, reading time, and beautiful cover images. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/storyLight.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/story.png) + +--- + +## Poem Page + +### Description + +Read and listen to poems for kids, with interactive cards and audio support. + +### Screenshots + +- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/poems.png) +- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/poems.png) + +--- + +## Blog Page + +### Description + +Read the latest articles, updates, and educational insights from abcdkbd.com. + +### Screenshots + +- **Light Mode:** ![Blog Light](/public/assets/images/screenshots/light/blog.png) +- **Dark Mode:** ![Blog Dark](/public/assets/images/screenshots/dark/blog.png) + +--- diff --git a/package.json b/package.json index 19eac0dc..cbb13c4e 100644 --- a/package.json +++ b/package.json @@ -136,4 +136,4 @@ "prettier-plugin-astro": "0.14.1", "shx": "0.3.4" } -} \ No newline at end of file +} diff --git a/public/assets/images/ABCD.png b/public/assets/images/ABCD.png deleted file mode 100644 index e2aabde3..00000000 Binary files a/public/assets/images/ABCD.png and /dev/null differ diff --git a/public/assets/images/blog/blog-4.jpg b/public/assets/images/blog/blog-4.jpg new file mode 100644 index 00000000..cbea3027 Binary files /dev/null and b/public/assets/images/blog/blog-4.jpg differ diff --git a/public/assets/images/blog/blog-5.png b/public/assets/images/blog/blog-5.png new file mode 100644 index 00000000..86cc124a Binary files /dev/null and b/public/assets/images/blog/blog-5.png differ diff --git a/public/assets/images/blog/blog-6.png b/public/assets/images/blog/blog-6.png new file mode 100644 index 00000000..131670c6 Binary files /dev/null and b/public/assets/images/blog/blog-6.png differ diff --git a/public/assets/images/blog/blog-7.png b/public/assets/images/blog/blog-7.png new file mode 100644 index 00000000..061659d0 Binary files /dev/null and b/public/assets/images/blog/blog-7.png differ diff --git a/public/assets/images/blog/blog-8.png b/public/assets/images/blog/blog-8.png new file mode 100644 index 00000000..02e59350 Binary files /dev/null and b/public/assets/images/blog/blog-8.png differ diff --git a/public/assets/images/blog/internship.png b/public/assets/images/blog/internship.png new file mode 100644 index 00000000..8489341d Binary files /dev/null and b/public/assets/images/blog/internship.png differ diff --git a/public/assets/images/screenshots/dark/Canvas.png b/public/assets/images/screenshots/dark/Canvas.png new file mode 100644 index 00000000..c4d82e2f Binary files /dev/null and b/public/assets/images/screenshots/dark/Canvas.png differ diff --git a/public/assets/images/screenshots/dark/Country-Flag.png b/public/assets/images/screenshots/dark/Country-Flag.png new file mode 100644 index 00000000..aa3ea8da Binary files /dev/null and b/public/assets/images/screenshots/dark/Country-Flag.png differ diff --git a/public/assets/images/screenshots/dark/Poem.png b/public/assets/images/screenshots/dark/Poem.png new file mode 100644 index 00000000..3498008b Binary files /dev/null and b/public/assets/images/screenshots/dark/Poem.png differ diff --git a/public/assets/images/screenshots/dark/Quote-Designer.png b/public/assets/images/screenshots/dark/Quote-Designer.png new file mode 100644 index 00000000..f1df2472 Binary files /dev/null and b/public/assets/images/screenshots/dark/Quote-Designer.png differ diff --git a/public/assets/images/screenshots/dark/Stack.png b/public/assets/images/screenshots/dark/Stack.png new file mode 100644 index 00000000..915ccbaf Binary files /dev/null and b/public/assets/images/screenshots/dark/Stack.png differ diff --git a/public/assets/images/screenshots/dark/Stories-.png b/public/assets/images/screenshots/dark/Stories-.png new file mode 100644 index 00000000..0f793e0e Binary files /dev/null and b/public/assets/images/screenshots/dark/Stories-.png differ diff --git a/public/assets/images/screenshots/dark/Survey-Form.png b/public/assets/images/screenshots/dark/Survey-Form.png new file mode 100644 index 00000000..ae0af13c Binary files /dev/null and b/public/assets/images/screenshots/dark/Survey-Form.png differ diff --git a/public/assets/images/screenshots/dark/about.png b/public/assets/images/screenshots/dark/about.png new file mode 100644 index 00000000..403c8004 Binary files /dev/null and b/public/assets/images/screenshots/dark/about.png differ diff --git a/public/assets/images/screenshots/dark/alphabets.png b/public/assets/images/screenshots/dark/alphabets.png new file mode 100644 index 00000000..0aa5b462 Binary files /dev/null and b/public/assets/images/screenshots/dark/alphabets.png differ diff --git a/public/assets/images/screenshots/dark/blog.png b/public/assets/images/screenshots/dark/blog.png new file mode 100644 index 00000000..10cb9d10 Binary files /dev/null and b/public/assets/images/screenshots/dark/blog.png differ diff --git a/public/assets/images/screenshots/dark/draw.png b/public/assets/images/screenshots/dark/draw.png new file mode 100644 index 00000000..1c84061c Binary files /dev/null and b/public/assets/images/screenshots/dark/draw.png differ diff --git a/public/assets/images/screenshots/dark/gallery.png b/public/assets/images/screenshots/dark/gallery.png new file mode 100644 index 00000000..95ad2019 Binary files /dev/null and b/public/assets/images/screenshots/dark/gallery.png differ diff --git a/public/assets/images/screenshots/dark/glossary.png b/public/assets/images/screenshots/dark/glossary.png new file mode 100644 index 00000000..114fd417 Binary files /dev/null and b/public/assets/images/screenshots/dark/glossary.png differ diff --git a/public/assets/images/screenshots/dark/hideseek.png b/public/assets/images/screenshots/dark/hideseek.png new file mode 100644 index 00000000..91880399 Binary files /dev/null and b/public/assets/images/screenshots/dark/hideseek.png differ diff --git a/public/assets/images/screenshots/dark/nakshatra.png b/public/assets/images/screenshots/dark/nakshatra.png new file mode 100644 index 00000000..e596340b Binary files /dev/null and b/public/assets/images/screenshots/dark/nakshatra.png differ diff --git a/public/assets/images/screenshots/dark/poems.png b/public/assets/images/screenshots/dark/poems.png new file mode 100644 index 00000000..d8cf6251 Binary files /dev/null and b/public/assets/images/screenshots/dark/poems.png differ diff --git a/public/assets/images/screenshots/light/Country-Flag.png b/public/assets/images/screenshots/light/Country-Flag.png new file mode 100644 index 00000000..15040999 Binary files /dev/null and b/public/assets/images/screenshots/light/Country-Flag.png differ diff --git a/public/assets/images/screenshots/light/Quote-Designer.png b/public/assets/images/screenshots/light/Quote-Designer.png new file mode 100644 index 00000000..642f9671 Binary files /dev/null and b/public/assets/images/screenshots/light/Quote-Designer.png differ diff --git a/public/assets/images/screenshots/light/Stack.png b/public/assets/images/screenshots/light/Stack.png new file mode 100644 index 00000000..0e03f08b Binary files /dev/null and b/public/assets/images/screenshots/light/Stack.png differ diff --git a/public/assets/images/screenshots/light/Story.png b/public/assets/images/screenshots/light/Story.png new file mode 100644 index 00000000..da74a4f8 Binary files /dev/null and b/public/assets/images/screenshots/light/Story.png differ diff --git a/public/assets/images/screenshots/light/Survey-Form.png b/public/assets/images/screenshots/light/Survey-Form.png new file mode 100644 index 00000000..2934af02 Binary files /dev/null and b/public/assets/images/screenshots/light/Survey-Form.png differ diff --git a/public/assets/images/screenshots/light/about.png b/public/assets/images/screenshots/light/about.png new file mode 100644 index 00000000..83bb19e9 Binary files /dev/null and b/public/assets/images/screenshots/light/about.png differ diff --git a/public/assets/images/screenshots/light/alphabets.png b/public/assets/images/screenshots/light/alphabets.png new file mode 100644 index 00000000..84862ccc Binary files /dev/null and b/public/assets/images/screenshots/light/alphabets.png differ diff --git a/public/assets/images/screenshots/light/blog.png b/public/assets/images/screenshots/light/blog.png new file mode 100644 index 00000000..59082fdd Binary files /dev/null and b/public/assets/images/screenshots/light/blog.png differ diff --git a/public/assets/images/screenshots/light/canvas.png b/public/assets/images/screenshots/light/canvas.png new file mode 100644 index 00000000..d117a1c0 Binary files /dev/null and b/public/assets/images/screenshots/light/canvas.png differ diff --git a/public/assets/images/screenshots/light/draw.png b/public/assets/images/screenshots/light/draw.png new file mode 100644 index 00000000..b071eb52 Binary files /dev/null and b/public/assets/images/screenshots/light/draw.png differ diff --git a/public/assets/images/screenshots/light/gallery.png b/public/assets/images/screenshots/light/gallery.png new file mode 100644 index 00000000..fd97bef4 Binary files /dev/null and b/public/assets/images/screenshots/light/gallery.png differ diff --git a/public/assets/images/screenshots/light/glossary.png b/public/assets/images/screenshots/light/glossary.png new file mode 100644 index 00000000..7337b94e Binary files /dev/null and b/public/assets/images/screenshots/light/glossary.png differ diff --git a/public/assets/images/screenshots/light/hideseek.png b/public/assets/images/screenshots/light/hideseek.png new file mode 100644 index 00000000..37de8734 Binary files /dev/null and b/public/assets/images/screenshots/light/hideseek.png differ diff --git a/public/assets/images/screenshots/light/home.png b/public/assets/images/screenshots/light/home.png index 86ed6107..1df6c7b4 100644 Binary files a/public/assets/images/screenshots/light/home.png and b/public/assets/images/screenshots/light/home.png differ diff --git a/public/assets/images/screenshots/light/map.png b/public/assets/images/screenshots/light/map.png new file mode 100644 index 00000000..d8886b3e Binary files /dev/null and b/public/assets/images/screenshots/light/map.png differ diff --git a/public/assets/images/screenshots/light/nakshatra.png b/public/assets/images/screenshots/light/nakshatra.png new file mode 100644 index 00000000..97338223 Binary files /dev/null and b/public/assets/images/screenshots/light/nakshatra.png differ diff --git a/public/assets/images/screenshots/light/numbers.png b/public/assets/images/screenshots/light/numbers.png new file mode 100644 index 00000000..ca337cfc Binary files /dev/null and b/public/assets/images/screenshots/light/numbers.png differ diff --git a/public/assets/images/screenshots/light/panel.png b/public/assets/images/screenshots/light/panel.png new file mode 100644 index 00000000..cdde3072 Binary files /dev/null and b/public/assets/images/screenshots/light/panel.png differ diff --git a/public/assets/images/screenshots/light/poems.png b/public/assets/images/screenshots/light/poems.png new file mode 100644 index 00000000..27552f0c Binary files /dev/null and b/public/assets/images/screenshots/light/poems.png differ diff --git a/src/assets/styles/bubble.css b/src/assets/styles/bubble.css index adae9684..f68ec713 100644 --- a/src/assets/styles/bubble.css +++ b/src/assets/styles/bubble.css @@ -13,17 +13,18 @@ position: relative; } -.slot , .context{ - border-radius: inherit; - position: absolute; - z-index: 10; - width: 100%; - height: 100%; - display: flex; - box-sizing: border-box; - flex-direction: column; - justify-content: space-evenly; - align-items: center; +.slot, +.context { + border-radius: inherit; + position: absolute; + z-index: 10; + width: 100%; + height: 100%; + display: flex; + box-sizing: border-box; + flex-direction: column; + justify-content: space-evenly; + align-items: center; } .slot > div { diff --git a/src/assets/styles/cards/stack.css b/src/assets/styles/cards/stack.css index aa937e61..b212da12 100644 --- a/src/assets/styles/cards/stack.css +++ b/src/assets/styles/cards/stack.css @@ -392,7 +392,10 @@ padding: 1rem 0.5rem; justify-content: flex-start; } - + .alphabet-container { + height: 600px; + gap: 0rem; + } .alphabet-title { font-size: 1.5rem; } diff --git a/src/assets/styles/contact.css b/src/assets/styles/contact.css index 6ffb5a8c..fd18c9e9 100644 --- a/src/assets/styles/contact.css +++ b/src/assets/styles/contact.css @@ -38,7 +38,6 @@ letter-spacing: 1px; font-style: italic; color: #4e0a0a; - } .social { diff --git a/src/assets/styles/draw.css b/src/assets/styles/draw.css index 73b30675..7b1dd37d 100644 --- a/src/assets/styles/draw.css +++ b/src/assets/styles/draw.css @@ -200,10 +200,10 @@ @media (max-width: 1024px) { .controls { - position: absolute; - right: 0.6rem !important; + position: fixed; + right: 0.6rem; top: 0; - margin-top: 11rem !important; + margin-top: 10rem; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; @@ -350,8 +350,3 @@ .controls { z-index: 100; } - -*:focus { - outline: none; - box-shadow: none; -} diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css index 8278d294..573beea2 100644 --- a/src/assets/styles/footer.css +++ b/src/assets/styles/footer.css @@ -4,7 +4,7 @@ --footer-text-secondary: #9ca3af; --footer-text-hover: #9ee0e7; --footer-brand-text: #ffffff; - --footer-brand-highlight: #fbbf24; + --footer-brand-highlight: #2ed729; --footer-social-hover: #0ea5e9; --footer-copyright-link: #9ca3af; --footer-copyright-link-hover: #0ea5e9; @@ -30,7 +30,7 @@ --footer-text-secondary: gray; --footer-text-hover: #eb5d9d; --footer-brand-text: #0f0f10; - --footer-brand-highlight: #fbbf24; + --footer-brand-highlight: #c13595; --footer-social-hover: #0ea5e9; --footer-copyright-link: #58250b; --footer-copyright-link-hover: #178bb9; @@ -274,7 +274,7 @@ transition: transform 0.2s ease-in-out; } - .footer__nav--item[open] > summary .fa-chevron-down { + .footer__nav--item[open]>summary .fa-chevron-down { transform: rotate(180deg); } @@ -291,4 +291,4 @@ margin-top: 1rem; font-size: 0.85rem; } -} +} \ No newline at end of file diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index 2917ec4f..6d3adf28 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -100,6 +100,32 @@ color: light-dark(#151414, white); } + @media (prefers-color-scheme: dark) { + html[data-theme="system"] { + select { + color: white; + background-color: #333; + } + + a { + color: brown; + } + } + } + + @media (prefers-color-scheme: light) { + html[data-theme="system"] { + select { + color: black; + background-color: #fff; + } + + a { + color: brown; + } + } + } + h1 { font-size: 3rem; font-weight: 700; @@ -232,4 +258,9 @@ appearance: base-select; border: none; } + + *:focus { + outline: none; + box-shadow: none; + } } diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 3638c4d7..12dcf706 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -5,7 +5,7 @@ --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); --card-red-text: #fff; --card-blue-text: #fff; - --card-yellow-text: #fff; + --card-yellow-text: #542929; --card-green-text: #fff; --card-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.18); --hero-heading: #f3f4f6; @@ -23,10 +23,6 @@ --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; @@ -52,10 +48,6 @@ --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; diff --git a/src/assets/styles/menu.css b/src/assets/styles/menu.css index 1d62b39a..bdebb69e 100644 --- a/src/assets/styles/menu.css +++ b/src/assets/styles/menu.css @@ -1,4 +1,4 @@ -@import url("https://unpkg.com/normalize.css") layer(normalize); +/*@import url("https://unpkg.com/normalize.css") layer(normalize);*/ @layer normalize, demo, base; @layer demo { diff --git a/src/assets/styles/MobileSplash.css b/src/assets/styles/mobile-splash.css similarity index 74% rename from src/assets/styles/MobileSplash.css rename to src/assets/styles/mobile-splash.css index 2234c6f2..dc6928ba 100644 --- a/src/assets/styles/MobileSplash.css +++ b/src/assets/styles/mobile-splash.css @@ -1,20 +1,19 @@ -.container_splash { +.container__splash { + container-type: inline-size; + container-name: splash; + display: flex; + position: fixed; + inset: 0; + z-index: 1000; + background-color: light-dark(#f4f4f2, #090808); + justify-content: center; + align-items: center; + padding: 1rem; + transition: background-color 0.3s ease; display: none; } -@container (max-width: 768px) { - .container_splash { - display: flex; - position: fixed; - inset: 0; - z-index: 1000; - background-color: light-dark(#f4f4f2, #090808); - justify-content: center; - align-items: center; - padding: 1rem; - transition: background-color 0.3s ease; - } - +@container splash (max-width: 768px) { .container_splash_card { background-color: light-dark(#ffffff, #0f172a); padding: 2rem; @@ -69,16 +68,6 @@ transition: all 0.3s ease; } - .container_splash_btn_primary { - background-color: light-dark(#0f172a, #3b82f6); - color: light-dark(#ffffff, #f0f0f0); - } - - .container_splash_btn_primary:hover { - background-color: light-dark(#0f172a, #3b82f6); - transform: translateY(-1px); - } - .container_splash_btn_secondary { border: 2px solid light-dark(#0f172a, #3b82f6); color: light-dark(#0f172a, #3b82f6); diff --git a/src/assets/styles/poem-dialog.css b/src/assets/styles/poem-dialog.css index 47deaeea..c7034a6f 100644 --- a/src/assets/styles/poem-dialog.css +++ b/src/assets/styles/poem-dialog.css @@ -1,7 +1,8 @@ .poem-dialog { width: 540px; max-width: 90%; - height: 600px; + height: max-content; + max-height: 600px; border: 3px solid var(--color); border-radius: 24px; background-color: var(--container-bg); @@ -53,14 +54,16 @@ /* === Title & Lines === */ .modal-title { - margin-top: 3.2rem; + margin-top: 1.2rem; font-size: 3rem; font-weight: 600; text-align: center; + color: var(--primary); + margin-bottom: 0; } .lines { - white-space: pre-line; + /*white-space: pre-line;*/ line-height: 1.6; padding: 0 1rem; overflow-y: auto; @@ -82,15 +85,27 @@ /* === Responsive === */ @media (max-width: 480px) { .poem-dialog { - width: 90%; - height: 400px; + width: 80%; + height: max-content; + box-sizing: border-box; + margin: auto; } - .title { - font-size: 1.25rem; + .modal-title { + font-size: 1.5rem; } .lines { - font-size: 0.95rem; + font-size: 1rem; + } + + .modal-content > .model-buttons > button.speaker-btn, + .modal-content > .model-buttons > button.close { + width: 36px; + height: 36px; + } + .modal-content > .model-buttons > button svg { + width: 32px; + height: 32px; } } diff --git a/src/assets/styles/varnmala/reader.css b/src/assets/styles/varnmala/reader.css index c5ded616..173e729e 100644 --- a/src/assets/styles/varnmala/reader.css +++ b/src/assets/styles/varnmala/reader.css @@ -16,7 +16,25 @@ will-change: contents; line-height: 1; gap: 0.5rem; - height: 80%; + height: max-content; +} + +.info { + font-size: 1rem; + color: #6b7280; + font-weight: 500; + margin: 0 auto; + text-align: center; + padding: 0.5rem; +} + +.container__reader > .letter { + width: 100%; + box-sizing: border-box; + margin-left: 4rem; + display: flex; + align-items: center; + justify-content: space-evenly; } .hide { @@ -169,7 +187,12 @@ font-size: min(200rem, 70vw); } + .container__reader > .letter { + justify-content: center; + margin-left: auto; + } + .mute-button { - font-size: min(2.5rem, 8vw); + font-size: min(1.5rem, 6vw); } } diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro index 0dd3f1bc..30e95f8b 100644 --- a/src/components/LanguageSwitcher.astro +++ b/src/components/LanguageSwitcher.astro @@ -29,7 +29,7 @@ export const setLang = `(lang) => { border-radius: 6px; cursor: pointer; background-color: var(--card-bg); - color: var(--text,black) + color: var(--text, black); transition: all 0.3s ease; } diff --git a/src/components/MobileSplash.astro b/src/components/MobileSplash.astro index b5e10e23..b9fda582 100644 --- a/src/components/MobileSplash.astro +++ b/src/components/MobileSplash.astro @@ -1,11 +1,11 @@ --- -import "@/assets/styles/MobileSplash.css"; +import "@/assets/styles/mobile-splash.css"; import { Image } from "astro:assets"; -import logoImage from "public/assets/images/ABCD.png"; -const { stay } = Astro.props; +import logoImage from "public/assets/images/abcd.png"; +const { stay = true } = Astro.props; --- -
+
logo of abcd

This page is best experienced on desktop

@@ -13,7 +13,7 @@ const { stay } = Astro.props; Revisit on desktop to check out abcdkbd.com. We will optimize for mobile soon. Stay tuned…

- 📱 Continue on mobile
@@ -21,7 +21,7 @@ const { stay } = Astro.props;
diff --git a/src/components/Speaker.astro b/src/components/Speaker.astro index a98ea95a..ee68334f 100644 --- a/src/components/Speaker.astro +++ b/src/components/Speaker.astro @@ -18,11 +18,12 @@ declare global { */ --- - - +
diff --git a/src/pages/cookies.astro b/src/pages/cookies.astro index df41ed66..4d875bac 100644 --- a/src/pages/cookies.astro +++ b/src/pages/cookies.astro @@ -1,10 +1,15 @@ --- -import BaseLayout from "@/layouts/Base"; -import { Content, frontmatter } from "@/content/article/cookies.md"; import "@/assets/styles/cookies.css"; +import { Content, frontmatter } from "@/content/article/cookies.md"; +import BaseLayout from "@/layouts/Base"; + +const meta = { + title: frontmatter.title, + description: frontmatter.description || "Read about our cookie policy and how we use cookies on abcdkbd.com." +}; --- - +

{frontmatter.title}

diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro index 5c362ad2..65fa4865 100644 --- a/src/pages/crossword.astro +++ b/src/pages/crossword.astro @@ -3,11 +3,17 @@ import "@/assets/styles/crossword.css"; import Back from "@/components/Back.astro"; import Help from "@/components/Help.astro"; import Puzzle from "@/components/Puzzle.astro"; -import BaseLayout from "@/layouts/Base"; import SharePopover from "@/components/ShareButton.astro"; +import BaseLayout from "@/layouts/Base"; + +const meta = { + title: "Crossword", + description: + "Play an interactive crossword puzzle! Draw words by clicking and dragging through letters in any direction." +}; --- - + @@ -16,6 +22,5 @@ import SharePopover from "@/components/ShareButton.astro"; description="Draw words by clicking and dragging through letters!.Words can be in any direction.Matching words will be colored.Use hints to see word directions" /> - diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro index 583c82d8..0a7007e3 100644 --- a/src/pages/dashboard.astro +++ b/src/pages/dashboard.astro @@ -1,16 +1,14 @@ --- import "@/assets/styles/dashboard.css"; -import Header from "@/layouts/common/Header"; +import BaseLayout from "@/layouts/Base"; + +const meta = { + title: "Dashboard", + description: "abcdkbd.com dashboard to manage your account, view activity, and access learning resources." +}; --- - - - Dashboard - - -
- -
+

Hello there!

@@ -20,7 +18,7 @@ import Header from "@/layouts/common/Header";
- + - +