From 5e1c207ddf30e6de2c111b56803d73e587f6f1c7 Mon Sep 17 00:00:00 2001 From: Cipher | Vansh Date: Tue, 11 Feb 2025 19:01:35 +0530 Subject: [PATCH 01/17] added societree page --- public/assets/societree/main.json | 766 ++++++++++++++++++++++++++++++ public/icons/copy-icon.svg | 14 + src/assets/styles/card.css | 384 +++++++++++++-- src/assets/styles/societree.css | 81 ++++ src/components/Card.astro | 314 +++++++++++- src/pages/societree.astro | 33 ++ src/utils/constants.ts | 14 + 7 files changed, 1544 insertions(+), 62 deletions(-) create mode 100644 public/assets/societree/main.json create mode 100644 public/icons/copy-icon.svg create mode 100644 src/assets/styles/societree.css create mode 100644 src/pages/societree.astro diff --git a/public/assets/societree/main.json b/public/assets/societree/main.json new file mode 100644 index 0000000..8b17aae --- /dev/null +++ b/public/assets/societree/main.json @@ -0,0 +1,766 @@ +[ + { + "id": 1, + "Caste": "झंवर", + "Gotra": "झूमाझ", + "Deity": "सुद्रासण / गाहल", + "Location": "", + "Surnames": [ + { + "hi": "कालीया", + "en": "Kaliya" + }, + { + "hi": "खरड़", + "en": "Kharad" + }, + { + "hi": "खीवंन्या", + "en": "Khivannjya" + }, + { + "hi": "खुच्चा", + "en": "Khuccha" + }, + { + "hi": "चौधरी", + "en": "Chaudhary" + }, + { + "hi": "संबरसोमानी", + "en": "Sambarsomani" + }, + { + "hi": "झालरीया", + "en": "Jhalariya" + }, + { + "hi": "ठीनगा", + "en": "Thinga" + }, + { + "hi": "डाणी", + "en": "Dani" + }, + { + "hi": "नागला", + "en": "Nagla" + }, + { + "hi": "नौसरया", + "en": "Nausarya" + }, + { + "hi": "चौसरया", + "en": "Pausarya" + }, + { + "hi": "मोवण्डा", + "en": "Movanda" + }, + { + "hi": "मुवाणीवाल", + "en": "Muvaniwal" + }, + { + "hi": "मेमाणी", + "en": "Memaani" + }, + { + "hi": "मोवण्या", + "en": "Movnya" + } + ] + }, + { + "id": 2, + "Caste": "लढ्ढा", + "Gotra": "सीलास", + "Deity": "संचाय", + "Location": "", + "Surnames": [ + { + "hi": "अठासन्या", + "en": "Athasanya" + }, + { + "hi": "चौधरी", + "en": "Chaudhary" + }, + { + "hi": "जोला", + "en": "Jola" + }, + { + "hi": "दगड़ा", + "en": "Dagda" + }, + { + "hi": "दागडिया", + "en": "Dagadiya" + }, + { + "hi": "धाराणी", + "en": "Dharani" + }, + { + "hi": "भाकरोबा", + "en": "Bhakaroba" + }, + { + "hi": "मूंजी", + "en": "Munji" + }, + { + "hi": "मोदी", + "en": "Modi" + }, + { + "hi": "हींग्या", + "en": "Hingya" + } + ] + }, + { + "id": 3, + "Caste": "टावरी", + "Gotra": "चावडा", + "Deity": "कश्यप", + "Location": "", + "Surnames": [ + { + "hi": "आसेश", + "en": "Asara" + }, + { + "hi": "कुलधारिणा", + "en": "Kuladharina" + }, + { + "hi": "खेताणी", + "en": "Khetani" + }, + { + "hi": "गौदाणी", + "en": "Gaudani" + }, + { + "hi": "ओदाणी", + "en": "Odani" + }, + { + "hi": "गौराणी", + "en": "Gaurani" + }, + { + "hi": "घुरका", + "en": "Ghurka" + }, + { + "hi": "घेराणी", + "en": "Gheranit" + }, + { + "hi": "भकराणी", + "en": "Bhakarani" + }, + { + "hi": "भौजाणी", + "en": "Bhojani" + }, + { + "hi": "मोहता", + "en": "Mohta" + }, + { + "hi": "गुरकाणी", + "en": "Gurkani" + } + ] + }, + { + "id": 4, + "Caste": "बजाज", + "Gotra": "भंसाली", + "Deity": "गाहल", + "Location": "", + "Surnames": [ + { + "hi": "गवदुका ", + "en": "Gavduka" + }, + { + "hi": "गौचा", + "en": "Gaucha" + }, + { + "hi": "गौदावत", + "en": "Gaudavat" + }, + { + "hi": "चामर", + "en": "Chamar" + }, + { + "hi": "धारुका", + "en": "Dharuka" + }, + { + "hi": "बहोड्या", + "en": "Bahodya" + }, + { + "hi": "मरचुन्या", + "en": "Marchunya" + }, + { + "hi": "रामावत", + "en": "Ramavat" + }, + { + "hi": "रोल्या", + "en": "Rolya" + }, + { + "hi": "लखावत", + "en": "Lakhavat" + } + ] + }, + { + "id": 5, + "Caste": "बिड़ला", + "Gotra": "बालास", + "Deity": "संचाय", + "Location": "", + "Surnames": [ + { + "hi": "गौरिया", + "en": "Gauriya" + }, + { + "hi": "गाडया", + "en": "Gadaya" + }, + { + "hi": "गौरेया", + "en": "Gaureya" + }, + { + "hi": "धुरया", + "en": "Dhuraya" + }, + { + "hi": "घुनरया", + "en": "Ghunraya" + }, + { + "hi": "बडहका", + "en": "Badhaka" + }, + { + "hi": "बडालिया", + "en": "Badaliya" + } + ] + }, + { + "id": 6, + "Caste": "मालू", + "Gotra": "खलांस", + "Deity": "सचाय", + "Location": "", + "Surnames": [ + { + "hi": "चौधरी", + "en": "Chaudhary" + }, + { + "hi": "धीया", + "en": "Dhiya" + }, + { + "hi": "तेला", + "en": "Tela" + }, + { + "hi": "माल", + "en": "Mal" + }, + { + "hi": "लोईवाल", + "en": "Loiwal" + }, + { + "hi": "साबु", + "en": "Sabu" + } + ] + }, + { + "id": 7, + "Caste": "माणूधन्या", + "Gotra": "जेसलाणी", + "Deity": "माणूधणी", + "Location": "", + "Surnames": [ + { + "hi": "घश्डोल्या", + "en": "Ghashdolya" + }, + { + "hi": "चौधरी", + "en": "Chaudhary" + }, + { + "hi": "सुम", + "en": "Sum" + }, + { + "hi": "स्याहर", + "en": "Syahar" + }, + { + "hi": "सिंगी", + "en": "Singi" + }, + { + "hi": "हीरा", + "en": "Hira" + } + ] + }, + { + "id": 8, + "Caste": "धूत", + "Gotra": "फाफडांस", + "Deity": "लीकाशन", + "Location": "", + "Surnames": [ + {} + ] + }, + { + "id": 9, + "Caste": "भंसाली", + "Gotra": "भंसाली", + "Deity": "चावडा", + "Location": "", + "Surnames": [ + {} + ] + }, + { + "id": 10, + "Caste": "आगसूड", + "Gotra": "कश्यप", + "Deity": "जाखण", + "Location": "", + "Surnames": [ + {} + ] + }, + { + "id": 11, + "Caste": "मालपाणी", + "Gotra": "भटयास", + "Deity": "साँगल", + "Location": "", + "Surnames": [ + { + "hi": "चोला", + "en": "Chola" + }, + { + "hi": "गंगल", + "en": "Gangal" + }, + { + "hi": "जुहरी", + "en": "Juhari" + }, + { + "hi": "भुरा", + "en": "Bhura" + }, + { + "hi": "मूथा", + "en": "Mutha" + }, + { + "hi": "मोदी", + "en": "Modi" + }, + { + "hi": "लूलाणी", + "en": "Lulaani" + }, + { + "hi": "लोलणा", + "en": "Lolna" + } + ] + }, + { + "id": 12, + "Caste": "सिकची", + "Gotra": "कश्यप", + "Deity": "पंवार", + "Location": "", + "Surnames": [ + { + "hi": "सीलाणी", + "en": "Seelani" + }, + { + "hi": "सीलार", + "en": "Seelar" + } + ] + }, + { + "id": 13, + "Caste": "नौलखा", + "Gotra": "कश्यप", + "Deity": "पाठाय", + "Location": "", + "Surnames": [ + { + "hi": "नोगजा", + "en": "Nogja" + } + ] + }, + { + "id": 14, + "Caste": "कलंत्री", + "Gotra": "कश्यप", + "Deity": "चावंडा", + "Location": "", + "Surnames": [ + { + "hi": "माछर", + "en": "Machar" + } + ] + }, + { + "id": 15, + "Caste": "मंत्री", + "Gotra": "कवलाय", + "Deity": "संचाय", + "Location": "", + "Surnames": [ + { + "hi": "वेली", + "en": "Veli" + } + ] + }, + { + "id": 16, + "Caste": "देवपुरा", + "Gotra": "पारस", + "Deity": "पाढाय", + "Location": "", + "Surnames": [ + { + "hi": "कसुबीवाल", + "en": "Kasubival" + } + ] + }, + { + "id": 18, + "Caste": "बांगरड", + "Gotra": "चूडास", + "Deity": "संचाय", + "Location": "", + "Surnames": [ + { + "hi": "तापड़या", + "en": "Tapadaya" + } + ] + }, + { + "id": 19, + "Caste": "तापडिया", + "Gotra": "पीपलान", + "Deity": "आशापुरा", + "Location": "", + "Surnames": [ + { + "hi": "कधारी", + "en": "Kadhari" + }, + { + "hi": "मूंगरड", + "en": "Moongarad" + }, + { + "hi": "धाछ्या", + "en": "Dhachya" + } + ] + }, + { + "id": 20, + "Caste": "चौखडा", + "Gotra": "चन्द्रास", + "Deity": "जीवण", + "Location": "", + "Surnames": [ + { + "hi": "चौधरी", + "en": "Chaudhary" + }, + { + "hi": "धुरया", + "en": "Dhurya" + }, + { + "hi": "चिवतोड़ा", + "en": "Chivtoda" + } + ] + }, + { + "id": 21, + "Caste": "काबरा", + "Gotra": "अचित्रास", + "Deity": "सुसमाद", + "Location": "", + "Surnames": [ + { + "hi": "अठारया", + "en": "Athariya" + }, + { + "hi": "कोठारी", + "en": "Kothari" + }, + { + "hi": "पालड्या", + "en": "Paladya" + }, + { + "hi": "मगत", + "en": "Magat" + }, + { + "hi": "मांडक्या", + "en": "Mandkya" + }, + { + "hi": "सिंगी", + "en": "Singi" + }, + { + "hi": "घौल", + "en": "Ghaul" + } + ] + }, + { + "id": 22, + "Caste": "करवा", + "Gotra": "करवास", + "Deity": "संचाय", + "Location": "", + "Surnames": [ + { + "hi": "कलंकी", + "en": "Kalanki" + }, + { + "hi": "काग्या", + "en": "Kagya" + }, + { + "hi": "काहौर", + "en": "Kahour" + }, + { + "hi": "किलल", + "en": "Killal" + }, + { + "hi": "किया", + "en": "Kiya" + } + ] + }, + { + "id": 23, + "Caste": "छापरवाल", + "Gotra": "कौशिक", + "Deity": "बंधर", + "Location": "", + "Surnames": [ + { + "hi": "दुजारा", + "en": "Dujara" + }, + { + "hi": "दुसाज", + "en": "Dusaj" + } + ] + }, + { + "id": 24, + "Caste": "कालाणी", + "Gotra": "घौलास", + "Deity": "चावंडा", + "Location": "", + "Surnames": [ + { + "hi": "कलन्त्री", + "en": "Kalantri" + }, + { + "hi": "काल्या", + "en": "Kalya" + }, + { + "hi": "कूलच्या", + "en": "Kulchya" + }, + { + "hi": "गट्टाणी", + "en": "Gattani" + }, + { + "hi": "मारक्या", + "en": "Markya" + } + ] + }, + { + "id": 25, + "Caste": "अटल", + "Gotra": "गौतमस्थ", + "Deity": "सचाय", + "Location": "", + "Surnames": [ + { + "hi": "गोठणीबाल", + "en": "Gothnibal" + }, + { + "hi": "मरोठिया", + "en": "Marothia" + } + ] + }, + { + "id": 26, + "Caste": "असावा", + "Gotra": "पंचास", + "Deity": "आशावरी", + "Location": "", + "Surnames": [ + { + "hi": "नाग", + "en": "Nag" + }, + { + "hi": "मण्डोवश", + "en": "Mandowash" + }, + { + "hi": "व्यपति", + "en": "Vyapati" + }, + { + "hi": "मारक्या", + "en": "Markya" + } + ] + }, + { + "id": 27, + "Caste": "कासट", + "Gotra": "अल्लसास", + "Deity": "संचाय", + "Location": "", + "Surnames": [ + { + "hi": "कटमुरा", + "en": "Katmura" + }, + { + "hi": "खोगटा", + "en": "Khogta" + }, + { + "hi": "सुरजन", + "en": "Surjan" + } + ] + }, + { + "id": 28, + "Caste": "बालदी", + "Gotra": "लौरस", + "Deity": "गारस", + "Location": "", + "Surnames": [ + {} + ] + }, + { + "id": 29, + "Caste": "चेचाणी", + "Gotra": "सीलास", + "Deity": "दद्यीमती", + "Location": "", + "Surnames": [ + { + "hi": "धुलद", + "en": "Dhulad" + } + ] + }, + { + "id": 30, + "Caste": "द्वारका", + "Gotra": "कश्यप", + "Deity": "मीरस", + "Location": "", + "Surnames": [ + {} + ] + }, + { + "id": 31, + "Caste": "नयणवाला", + "Gotra": "कश्यप", + "Deity": "नयण", + "Location": "", + "Surnames": [ + { + "hi": "राजानी", + "en": "Rajani" + } + ] + }, + { + "id": 32, + "Caste": "पोरवाल", + "Gotra": "नानणांस", + "Deity": "मात्री", + "Location": "", + "Surnames": [ + { + "hi": "परवार", + "en": "Parwar" + }, + { + "hi": "दागडिया", + "en": "Dagdiya" + } + ] + } +] \ No newline at end of file diff --git a/public/icons/copy-icon.svg b/public/icons/copy-icon.svg new file mode 100644 index 0000000..dfa84ab --- /dev/null +++ b/public/icons/copy-icon.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/styles/card.css b/src/assets/styles/card.css index daf999a..6cf6c38 100644 --- a/src/assets/styles/card.css +++ b/src/assets/styles/card.css @@ -1,53 +1,349 @@ -.link-card { - list-style: none; - display: flex; - padding: 1px; +.container__family { background: var(--background); - background-size: 400%; - border-radius: 0.75rem; - background-position: 100%; - transition: all 0.2s; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); - border: 1px solid var(--border); - overflow: hidden; -} + min-height: 100vh; + padding: 2rem 0; -.link-card > a { - width: 100%; - text-decoration: none; - line-height: 1.4; - padding: 1.5rem; - border-radius: 8px; - color: var(--text); - background-color: #23262d; - opacity: 0.8; -} + & .card-container { + position: relative; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 2rem; + padding: 2rem; + max-width: 1400px; + margin: 0 auto; + } -h2 { - margin: 0; - font-size: 1.25rem; - transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); - font-weight: 600; - margin-bottom: 0.5rem; - color: var(--primary); -} + & .card { + background: var(--background); + border: 1px solid var(--border); + border-radius: 1rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); + height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + transition: all 0.3s ease; + cursor: pointer; + overflow: hidden; + padding: 1.5rem; + box-sizing: border-box; + position: relative; + z-index: 1; + transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), margin 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); + overflow: hidden; + color: var(--text); + grid-column: auto; + } + + & .card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: var(--primary); + } + + & .card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 32px rgba(67, 83, 52, 0.15); + } + + & .card-header { + width: 100%; + text-align: center; + } + + & .card-header h2 { + margin: 0 0 5px; + font-size: 1.2em; + word-wrap: break-word; + color: var(--text); + } + + & .card-header p { + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.8rem; + margin: 0.5rem 0; + background: color-mix(in srgb, var(--primary) 5%, transparent); + border-radius: 8px; + font-size: 1rem; + color: var(--text); + } + + & .card-body { + display: none; + padding-top: 20px; + color: var(--text); + } + + & .card.open { + grid-column: 1 / -1; + width: 100%; + height: auto; + order: -1; + border-radius: 20px; + margin: 20px auto; + max-width: 900px; + background: color-mix(in srgb, var(--background) 20%, transparent); + overflow: visible; + padding-bottom: 20px; + margin-bottom: 1em; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + } + + & .card.open .card-body { + display: block; + animation: fadeIn 0.3s ease-in; + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + & .surname-section { + position: relative; + padding-top: 20px; + } + + & .surname-heading { + text-align: center; + margin-bottom: 20px; + } + + & .surname-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + } + + & .surname-card { + position: relative; + background: color-mix(in srgb, var(--background) 50%, transparent); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.2rem; + margin: 0.8rem 0; + box-shadow: 0 2px 12px rgba(67, 83, 52, 0.08); + width: 200px; + transition: all 0.3s; + color: var(--text); + display: flex; + flex-direction: column; + align-items: flex-start; + } + + & .surname-card p { + font-size: 1em; + margin: 0.2em 0; + display: flex; + align-items: center; + gap: 0.3rem; + } + + & .surname-card p strong { + font-weight: 600; + min-width: auto; + } + + & .copy-button { + position: absolute; + top: 0.5em; + right: 0.5em; + width: 2.2rem; + height: 2.2rem; + background: var(--primary) url('/icons/copy-icon.svg') center/60% no-repeat; + color: var(--background); + border: none; + border-radius: 50%; + padding: 0.4em; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + font-size: 0.8rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + } + + & .copy-button:hover { + background: url('/icons/copy-icon.svg') center/60% no-repeat; + } + + & .copied-tooltip { + position: absolute; + background-color: #333; + color: #fff; + padding: 3px 6px; + border-radius: 4px; + font-size: 12px; + top: -20px; + right: 0; + white-space: nowrap; + z-index: 10; + } -p { - margin-top: 0.5rem; - margin-bottom: 0; - color: var(--secondary); - font-size: 0.875rem; - line-height: 1.5; + & .card p { + font-size: 1.1em; + } + + & .card p span { + font-weight: 500; + } + + & .card .copy-button-all { + display: none; + } + + & .open .copy-button-all { + display: block; + margin-top: 2em; + padding: 1em 1em; + border: none; + border-radius: 10px; + font-weight: 600; + background: var(--primary); + color: var(--background); + } + + & .open .copy-button-all:hover { + background: var(--accent); + } + + & .search-container { + width: 100%; + padding: 2em 1em; + margin-bottom: 1em; + display: flex; + justify-content: center; + background: var(--primary); + color: var(--background); + backdrop-filter: blur(10px); + } + + & .search-wrapper { + position: relative; + width: 100%; + max-width: 600px; + } + + & .search-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + font-size: 1.2rem; + opacity: 0.7; + pointer-events: none; + } + + & .search-bar { + width: 100%; + padding: 1rem 3rem; + font-size: 1rem; + border: 1px solid var(--border); + border-radius: 12px; + background: var(--background); + color: var(--text); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + } + + & .search-bar:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); + } } -.link-card:is(:hover, :focus-within) { - background-position: 0; - background-image: var(--accent-gradient); - transform: translateY(-2px); - box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent); - border-color: var(--primary-light); +@media screen and (max-width: 768px) { + .container__family { + & .surname-card { + padding: 0.8em; + } + + & .copy-button { + top: 0.5em; + right: 0.5em; + padding: 0.4em 0.8em; + font-size: 0.9em; + } + + & .search-container { + padding: 1em 0.5em; + } + + & .search-bar { + font-size: 0.9rem; + padding: 0.8em 2.5em; + } + } } -.link-card:is(:hover, :focus-within) h2 { - color: rgb(var(--accent-light)); +@media screen and (max-width: 469px) { + .container__family { + & .surname-card { + padding: 0.8em; + } + } } + +@media screen and (max-width: 495px) { + .container__family { + & .card-container { + grid-template-columns: 1fr; + } + + & .card { + margin-bottom: 2.5em; + } + + & .card.open { + width: calc(100% - 2em); + margin: 1em; + } + + & .surname-card>p { + text-align: left; + } + + & .surname-card span { + text-align: left; + font-weight: 600; + } + + & .surname-card .surname-head { + text-align: left; + font-weight: 600; + font-size: 1.5em; + color: #111111; + } + + & .surname-card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + } + + & .surname-card h3 { + margin: 0 0 10px 0; + font-size: 1.2em; + } + + & .surname-card p { + margin: 5px 0; + font-size: 0.9em; + } + } +} \ No newline at end of file diff --git a/src/assets/styles/societree.css b/src/assets/styles/societree.css new file mode 100644 index 0000000..270cd06 --- /dev/null +++ b/src/assets/styles/societree.css @@ -0,0 +1,81 @@ +.container__family { + & .hero { + background: var(--primary); + color: var(--background); + text-align: center; + padding: 4rem 2rem 2rem; + position: relative; + overflow: hidden; + } + + & .hero::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(135deg, + color-mix(in srgb, var(--primary) 100%, transparent) 0%, + color-mix(in srgb, var(--accent) 100%, transparent) 100%); + opacity: 0.8; + z-index: 0; + } + + & .hero>* { + position: relative; + z-index: 1; + } + + & .theme-glass { + background: color-mix(in srgb, var(--background) 10%, transparent); + backdrop-filter: blur(10px); + border: 1px solid color-mix(in srgb, var(--background) 10%, transparent); + } + + & .hero h1 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + font-family: "Crimson Text", serif; + } + + & .hero p { + font-size: 1.2rem; + opacity: 0.9; + margin-bottom: 2rem; + } + + & .legend { + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + max-width: 600px; + margin: 0 auto; + padding: 1rem; + border-radius: 12px; + } + + & .legend-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1rem; + } + + & .icon { + font-size: 1.2rem; + } + +} + +@media (max-width: 640px) { + .container__family { + & .hero h1 { + font-size: 2rem; + } + + & .legend { + gap: 1rem; + padding: 0.8rem; + } + } +} \ No newline at end of file diff --git a/src/components/Card.astro b/src/components/Card.astro index a8cf7d8..97a7cd5 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -1,22 +1,300 @@ --- -interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props; import "@/assets/styles/card.css"; --- -
  • - -

    - {title} - → -

    -

    - {body} -

    -     -
    • +
    +
    + 🔍 + +
    +
    + +
    + + + + diff --git a/src/pages/societree.astro b/src/pages/societree.astro new file mode 100644 index 0000000..5bcf57e --- /dev/null +++ b/src/pages/societree.astro @@ -0,0 +1,33 @@ +--- +import "@/assets/styles/societree.css"; +import Card from "@/components/Card.astro"; +import BaseLayout from "@/layouts/Base"; +--- + + +
    +
    +

    Family Tree Explorer

    +

    Discover Your Heritage and Family Connections

    +
    +
    + 🧬 + Gotra +
    +
    + 🕉 + Deity +
    +
    + 🌿 + Caste +
    +
    + 🌳 + Surname +
    +
    +
    + +
    +     diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 8f143a4..c40327b 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -32,6 +32,12 @@ export const NavbarLinks: LinkProps[] = [ title: "IndiaMap", path: "/map", isActive: true + }, + { + name: "Societree", + title: "Societree", + path: "/societree", + isActive: true } ]; @@ -47,3 +53,11 @@ export const FooterLinks: LinkProps[] = [ isActive: true } ]; + +export const colors = [ + "linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)", // Blue + "linear-gradient(135deg, #38bdf8 0%, #0284c7 100%)", // Sky + "linear-gradient(135deg, #818cf8 0%, #6366f1 100%)", // Indigo + "linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%)", // Teal + "linear-gradient(135deg, #34d399 0%, #10b981 100%)" // Emerald +]; From ac474d5fef594f67b270b6c38ddbb1893a7a58ee Mon Sep 17 00:00:00 2001 From: Cipher | Vansh Date: Tue, 11 Feb 2025 19:17:39 +0530 Subject: [PATCH 02/17] updated type errors in card.astro --- src/components/Card.astro | 76 ++++++++++++++++++++++++--------------- 1 file changed, 48 insertions(+), 28 deletions(-) diff --git a/src/components/Card.astro b/src/components/Card.astro index 97a7cd5..2635a84 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -19,6 +19,17 @@ import "@/assets/styles/card.css"; - - From fa7bebb597a601dc809ab64e4c81aba0ac382c16 Mon Sep 17 00:00:00 2001 From: Cipher | Vansh Date: Thu, 13 Feb 2025 10:00:45 +0530 Subject: [PATCH 07/17] added hover hint tooltip for legend icons in societree card --- src/assets/styles/card.css | 19 +++++++++++++++++++ src/components/Card.astro | 10 +++++----- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/assets/styles/card.css b/src/assets/styles/card.css index 512b560..8ed1b4a 100644 --- a/src/assets/styles/card.css +++ b/src/assets/styles/card.css @@ -274,6 +274,25 @@ } } +.icon { + position: relative; +} + +.icon:hover::after { + content: attr(data-name); + position: absolute; + top: -1.5em; + left: 50%; + transform: translateX(-50%); + background: #333; + color: #fff; + padding: 2px 4px; + border-radius: 4px; + font-size: 0.8rem; + white-space: nowrap; + z-index: 10; +} + @media screen and (max-width: 768px) { .container__family { & .surname-card { diff --git a/src/components/Card.astro b/src/components/Card.astro index 1a08ac8..419e81c 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -66,7 +66,7 @@ import "@/assets/styles/card.css"; } const highlightedValue = highlightText(value, query); return ` -

    ${icon} : ${highlightedValue}

    +

    ${icon} : ${highlightedValue}

    `; }) .join(""); @@ -83,7 +83,7 @@ import "@/assets/styles/card.css"; .map( (surname: { hi: string; en: string }) => `
    -

    🌳: ${highlightText(surname.hi, query)}

    +

    🌳: ${highlightText(surname.hi, query)}

    ` ) @@ -104,16 +104,16 @@ import "@/assets/styles/card.css";
    - 🧬 + 🧬 ${highlightText(branch.Gotra, query)}
    - 🕉 + 🕉 ${highlightText(branch.Deity, query)}
    - 🌿 + 🌿 ${highlightText(branch.Caste, query)}
    From 1fe65019efd15d2e68d7e747869e30d8810396a6 Mon Sep 17 00:00:00 2001 From: Cipher | Vansh Date: Thu, 13 Feb 2025 10:10:44 +0530 Subject: [PATCH 08/17] linting --- .github/workflows/deploy.yml | 78 ++++---- .github/workflows/issue-template-number.yml | 2 +- .vscode/cspell.json | 26 +-- .vscode/settings.json | 17 +- .vscode/tailwind.json | 110 +++++------ abcd.code-workspace | 33 +--- package.json | 2 +- public/assets/images/site.webmanifest | 12 +- public/assets/societree/main.json | 22 +-- src/assets/json/state.json | 2 +- src/assets/styles/card.css | 17 +- src/assets/styles/feed.css | 198 ++++++++++---------- src/assets/styles/letter.css | 14 +- src/assets/styles/map/map.css | 1 - src/assets/styles/map/popup.css | 2 +- src/assets/styles/societree.css | 3 +- src/components/Popup.astro | 23 +-- src/components/ui/button.tsx | 4 +- src/pages/mapPages/[...state].astro | 12 +- tsconfig.json | 62 ++---- 20 files changed, 282 insertions(+), 358 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 09541c8..a2ef953 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,39 +1,39 @@ -name: Deploy to GitHub Pages - -on: - # Trigger the workflow every time you push to the `main` branch - # Using a different branch name? Replace `main` with your branch’s name - push: - branches: [ main ] - # Allows you to run this workflow manually from the Actions tab on GitHub. - workflow_dispatch: - -# Allow this job to clone the repo and create a page deployment -permissions: - contents: read - pages: write - id-token: write - -jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Checkout your repository using git - uses: actions/checkout@v4 - - name: Install, build, and upload your site - uses: withastro/action@v3 - with: - path: . # The root location of your Astro project inside the repository. (optional) - node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 16. (optional) - package-manager: npm # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional) - - deploy: - needs: build - runs-on: ubuntu-latest - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 \ No newline at end of file +name: Deploy to GitHub Pages + +on: + # Trigger the workflow every time you push to the `main` branch + # Using a different branch name? Replace `main` with your branch’s name + push: + branches: [main] + # Allows you to run this workflow manually from the Actions tab on GitHub. + workflow_dispatch: + +# Allow this job to clone the repo and create a page deployment +permissions: + contents: read + pages: write + id-token: write + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout your repository using git + uses: actions/checkout@v4 + - name: Install, build, and upload your site + uses: withastro/action@v3 + with: + path: . # The root location of your Astro project inside the repository. (optional) + node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 16. (optional) + package-manager: npm # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional) + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/issue-template-number.yml b/.github/workflows/issue-template-number.yml index 2a3f9a7..7139d49 100644 --- a/.github/workflows/issue-template-number.yml +++ b/.github/workflows/issue-template-number.yml @@ -5,7 +5,7 @@ on: types: [opened] permissions: issues: write - + jobs: update_issue_title: runs-on: ubuntu-latest diff --git a/.vscode/cspell.json b/.vscode/cspell.json index c96f352..fb0f222 100755 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -13,33 +13,17 @@ "path": "./dictionaries/india.txt" } ], - "dictionaries": [ - "projectTerms", - "teamMember", - "india" - ], - "ignorePaths": [ - "**/*.svg", - "src/assets/json/*.json" - ], + "dictionaries": ["projectTerms", "teamMember", "india"], + "ignorePaths": ["**/*.svg", "src/assets/json/*.json"], "languageSettings": [ { "languageId": "*", - "dictionaries": [ - "projectTerms" - ] + "dictionaries": ["projectTerms"] }, { "languageId": "json, md", - "dictionaries": [ - "teamMember", - "geo" - ] + "dictionaries": ["teamMember", "geo"] } ], - "enableFiletypes": [ - "astro", - "jsx", - "tsx" - ] + "enableFiletypes": ["astro", "jsx", "tsx"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f35e8f..65f6fa5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -30,27 +30,18 @@ "git.openRepositoryInParentFolders": "always", "typescript.updateImportsOnFileMove.enabled": "always", "editor.linkedEditing": true, - "cSpell.userWords": [ - "nojekyll", - "testid" - ], + "cSpell.userWords": ["nojekyll", "testid"], "editor.tabSize": 2, "git.enableSmartCommit": true, "files.watcherExclude": { "**/node_modules/*/**": true }, "files.autoSave": "afterDelay", - "git.branchProtection": [ - "main", - "develop" - ], + "git.branchProtection": ["main", "develop"], "[CODEOWNERS]": { "editor.formatOnSave": false }, - "cSpell.words": [ - "behaviour", - "DUMMYUSER" - ], + "cSpell.words": ["behaviour", "DUMMYUSER"], "workbench.colorCustomizations": { "activityBar.activeBackground": "#e98cf9", "activityBar.background": "#e98cf9", @@ -73,4 +64,4 @@ "peacock.color": "#e05bf7", "css.format.enable": true, "css.lint.unknownAtRules": "ignore" -} \ No newline at end of file +} diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json index 52e2a3f..96a1f57 100644 --- a/.vscode/tailwind.json +++ b/.vscode/tailwind.json @@ -1,55 +1,55 @@ -{ - "version": 1.1, - "atDirectives": [ - { - "name": "@tailwind", - "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" - } - ] - }, - { - "name": "@apply", - "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#apply" - } - ] - }, - { - "name": "@responsive", - "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" - } - ] - }, - { - "name": "@screen", - "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#screen" - } - ] - }, - { - "name": "@variants", - "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#variants" - } - ] - } - ] -} \ No newline at end of file +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/abcd.code-workspace b/abcd.code-workspace index 89e34d8..3955a1e 100644 --- a/abcd.code-workspace +++ b/abcd.code-workspace @@ -73,25 +73,9 @@ "javascript": "javascriptreact" }, "eslint.options": { - "extensions": [ - ".js", - ".jsx", - ".md", - ".mdx", - ".ts", - ".tsx", - ".astro" - ] - }, - "eslint.validate": [ - "mdx", - "markdown", - "javascript", - "javascriptreact", - "typescript", - "typescriptreact", - "astro" - ], + "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"] + }, + "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"], "explorer.compactFolders": false, "explorer.confirmDelete": false, "explorer.confirmDragAndDrop": false, @@ -119,10 +103,7 @@ }, "git.autofetch": true, "git.branchPrefix": "feature/", - "git.branchProtection": [ - "develop", - "main" - ], + "git.branchProtection": ["develop", "main"], "git.branchRandomName.enable": true, "git.confirmSync": false, "git.enableCommitSigning": false, @@ -133,9 +114,7 @@ "js/ts.implicitProjectConfig.checkJs": true, "peacock.affectSideBarBorder": true, "peacock.color": "#abcd00", - "prettier.documentSelectors": [ - "**/*.astro" - ], + "prettier.documentSelectors": ["**/*.astro"], "prettier.printWidth": 120, "prettier.quoteProps": "consistent", "prettier.singleQuote": false, @@ -192,4 +171,4 @@ ".githooks/**": true } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index f7fe3b8..fde4fa9 100644 --- a/package.json +++ b/package.json @@ -87,4 +87,4 @@ "prettier-plugin-tailwindcss": "0.6.8", "shx": "0.3.4" } -} \ No newline at end of file +} diff --git a/public/assets/images/site.webmanifest b/public/assets/images/site.webmanifest index 45dc8a2..0b08af1 100644 --- a/public/assets/images/site.webmanifest +++ b/public/assets/images/site.webmanifest @@ -1 +1,11 @@ -{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file +{ + "name": "", + "short_name": "", + "icons": [ + { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, + { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/public/assets/societree/main.json b/public/assets/societree/main.json index 8b17aae..0c06a2b 100644 --- a/public/assets/societree/main.json +++ b/public/assets/societree/main.json @@ -336,9 +336,7 @@ "Gotra": "फाफडांस", "Deity": "लीकाशन", "Location": "", - "Surnames": [ - {} - ] + "Surnames": [{}] }, { "id": 9, @@ -346,9 +344,7 @@ "Gotra": "भंसाली", "Deity": "चावडा", "Location": "", - "Surnames": [ - {} - ] + "Surnames": [{}] }, { "id": 10, @@ -356,9 +352,7 @@ "Gotra": "कश्यप", "Deity": "जाखण", "Location": "", - "Surnames": [ - {} - ] + "Surnames": [{}] }, { "id": 11, @@ -706,9 +700,7 @@ "Gotra": "लौरस", "Deity": "गारस", "Location": "", - "Surnames": [ - {} - ] + "Surnames": [{}] }, { "id": 29, @@ -729,9 +721,7 @@ "Gotra": "कश्यप", "Deity": "मीरस", "Location": "", - "Surnames": [ - {} - ] + "Surnames": [{}] }, { "id": 31, @@ -763,4 +753,4 @@ } ] } -] \ No newline at end of file +] diff --git a/src/assets/json/state.json b/src/assets/json/state.json index 2cc8e77..dcf7742 100644 --- a/src/assets/json/state.json +++ b/src/assets/json/state.json @@ -477,4 +477,4 @@ "official_website": "https://www.py.gov.in", "isActive": true } -] \ No newline at end of file +] diff --git a/src/assets/styles/card.css b/src/assets/styles/card.css index 8ed1b4a..5f19aae 100644 --- a/src/assets/styles/card.css +++ b/src/assets/styles/card.css @@ -29,14 +29,17 @@ box-sizing: border-box; position: relative; z-index: 1; - transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), margin 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: + max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), + padding 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), + margin 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; color: var(--text); grid-column: auto; } & .card::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; @@ -106,7 +109,7 @@ & .back { background: var(--primary); - padding: 0.25rem .75rem; + padding: 0.25rem 0.75rem; border-radius: 8px; } @@ -190,7 +193,7 @@ & .copy-button { width: 2.2rem; height: 2.2rem; - background: var(--primary) url('/icons/copy-icon.svg') center/60% no-repeat; + background: var(--primary) url("/icons/copy-icon.svg") center/60% no-repeat; color: var(--background); border: none; border-radius: 50%; @@ -203,7 +206,7 @@ } & .copy-button:hover { - background: url('/icons/copy-icon.svg') center/60% no-repeat; + background: url("/icons/copy-icon.svg") center/60% no-repeat; border-radius: 50%; } @@ -340,7 +343,7 @@ margin: 1em; } - & .surname-card>p { + & .surname-card > p { text-align: left; } @@ -371,4 +374,4 @@ font-size: 0.9em; } } -} \ No newline at end of file +} diff --git a/src/assets/styles/feed.css b/src/assets/styles/feed.css index 8e93f1f..4ac57e3 100644 --- a/src/assets/styles/feed.css +++ b/src/assets/styles/feed.css @@ -1,99 +1,99 @@ -.container__feed { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - padding: 20px; - - .form-wrapper { - max-width: 800px; - width: 100%; - background: #fff; - padding: 80px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.727); - border-radius: 8px; - } - - .form-header { - text-align: center; - margin-bottom: 50px; - } - - .form-header h2 { - margin: 0; - font-size: 2rem; - color: #222; - } - - .form-header p { - margin: 10px 0 0; - font-size: 1rem; - color: #666; - } - - .form-group { - margin-bottom: 30px; - } - - label { - display: block; - font-size: 1rem; - margin-bottom: 15px; - color: #444; - } - - input, - textarea { - width: 100%; - padding: 20px; - border: 1px solid #ccc; - border-radius: 18px; - font-size: 1rem; - color: #333; - outline: none; - } - - input:focus, - textarea:focus { - border-color: #007bff; - box-shadow: 0 0 4px rgba(0, 123, 255, 0.3); - } - - textarea { - resize: vertical; - } - - .error-message { - display: none; - background: #fdecea; - color: #d93025; - padding: 10px; - border-radius: 4px; - font-size: 0.9rem; - margin-bottom: 15px; - } - - .button-container { - text-align: center; - } - - button { - background-color: #007bff; - color: #fff; - border: none; - padding: 10px 20px; - font-size: 1rem; - border-radius: 20px; - cursor: pointer; - transition: background-color 0.3s; - } - - button:hover { - background-color: #0056b3; - } - - button:disabled { - background-color: #7baaf7; - cursor: not-allowed; - } -} \ No newline at end of file +.container__feed { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + + .form-wrapper { + max-width: 800px; + width: 100%; + background: #fff; + padding: 80px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.727); + border-radius: 8px; + } + + .form-header { + text-align: center; + margin-bottom: 50px; + } + + .form-header h2 { + margin: 0; + font-size: 2rem; + color: #222; + } + + .form-header p { + margin: 10px 0 0; + font-size: 1rem; + color: #666; + } + + .form-group { + margin-bottom: 30px; + } + + label { + display: block; + font-size: 1rem; + margin-bottom: 15px; + color: #444; + } + + input, + textarea { + width: 100%; + padding: 20px; + border: 1px solid #ccc; + border-radius: 18px; + font-size: 1rem; + color: #333; + outline: none; + } + + input:focus, + textarea:focus { + border-color: #007bff; + box-shadow: 0 0 4px rgba(0, 123, 255, 0.3); + } + + textarea { + resize: vertical; + } + + .error-message { + display: none; + background: #fdecea; + color: #d93025; + padding: 10px; + border-radius: 4px; + font-size: 0.9rem; + margin-bottom: 15px; + } + + .button-container { + text-align: center; + } + + button { + background-color: #007bff; + color: #fff; + border: none; + padding: 10px 20px; + font-size: 1rem; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s; + } + + button:hover { + background-color: #0056b3; + } + + button:disabled { + background-color: #7baaf7; + cursor: not-allowed; + } +} diff --git a/src/assets/styles/letter.css b/src/assets/styles/letter.css index de149d0..f0b9f31 100644 --- a/src/assets/styles/letter.css +++ b/src/assets/styles/letter.css @@ -93,9 +93,11 @@ } .bg-pattern1 { - background-image: repeating-linear-gradient(45deg, - rgba(0, 0, 0, 0.1) 0px, - rgba(0, 0, 0, 0.1) 2px, - transparent 2px, - transparent 4px); -} \ No newline at end of file + background-image: repeating-linear-gradient( + 45deg, + rgba(0, 0, 0, 0.1) 0px, + rgba(0, 0, 0, 0.1) 2px, + transparent 2px, + transparent 4px + ); +} diff --git a/src/assets/styles/map/map.css b/src/assets/styles/map/map.css index 8c96979..2adce2b 100644 --- a/src/assets/styles/map/map.css +++ b/src/assets/styles/map/map.css @@ -8,7 +8,6 @@ margin: 40px auto; position: relative; - & svg { width: 100%; height: auto; diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css index 7e3cccc..e7d835f 100644 --- a/src/assets/styles/map/popup.css +++ b/src/assets/styles/map/popup.css @@ -144,4 +144,4 @@ padding: 10px; } } -} \ No newline at end of file +} diff --git a/src/assets/styles/societree.css b/src/assets/styles/societree.css index 928e2d6..bd40653 100644 --- a/src/assets/styles/societree.css +++ b/src/assets/styles/societree.css @@ -41,7 +41,6 @@ & .icon { font-size: 1.2rem; } - } @media (max-width: 640px) { @@ -55,4 +54,4 @@ padding: 0.8rem; } } -} \ No newline at end of file +} diff --git a/src/components/Popup.astro b/src/components/Popup.astro index f24cfd0..8e9db3d 100644 --- a/src/components/Popup.astro +++ b/src/components/Popup.astro @@ -11,7 +11,6 @@