Skip to content

Commit

Permalink
better
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottishbay
scottishbay committed Dec 29, 2024
1 parent 6967048 commit 6d17f12
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 377 deletions.
170 changes: 73 additions & 97 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,130 +3,100 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administrative Divisions</title>
<style>
<title>WWFM-DSAP Administrative Divisions</title>
<style>
@import "https://assets.codepen.io/3351103/__reset.css";

:root {
--nav-bg-color: #2e2e2e; /* Dark background */
--nav-link-color: #e0e0e0; /* Light grey for text */
--nav-hover-color: #ffffff; /* White for hover */
--calc-height: auto;
--calc-transition-delay: 300ms;
--dropdown-indent: 18px;
--base-color-1: #4a90e2; /* Soft blue */
--base-color-2: #f5a623; /* Soft orange */
--base-color-3: #7ed321; /* Soft green */
--base-color-4: #d0021b; /* Soft red */
--base-color-5: #9013fe; /* Soft purple */
--bg-dark-gray: #3a3a3a; /* Dark gray */
--bg-medium-gray: #585858; /* Medium gray */
--bg-light-gray: #7f7f7f; /* Light gray */
--border-color: #444; /* Darker gray for borders */
--highlight-color: #4a90e2; /* Soft blue for country rows */
--bg-color: #111; /* Dark background */
--text-color: #f8f8f8; /* Very light grey, almost white */
--accent-color: #f68a1e; /* Orange accent */
--border-color: #222; /* Even darker for borders */
--font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
font-family: 'Poppins', sans-serif;
background-color: var(--nav-bg-color);
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 20px;
color: var(--nav-link-color);
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}

h2 {
color: var(--nav-link-color);
margin-bottom: 20px;
font-size: 2.5em;
margin: 20px 20px 15px 20px;
color: #f0f0f0; /* Slightly darker than --text-color */
}

h4 {
font-size: 1.2em;
margin: 0 20px 20px 20px;
color: #e5e5e5; /* Another shade of light grey */
}

#accordion {
width: 100%;
max-width: none;
flex-grow: 1;
overflow-y: auto;
background: #1a1a1a;
border: 1px solid var(--border-color);
border-radius: 0;
}

.accordion, .sub-accordion {
cursor: pointer;
user-select: none;
font-size: 0.95rem;
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, padding-left 0.3s;
width: 100%;
display: block;
border-bottom: 1px solid var(--border-color);
padding: 10px 20px;
font-size: 1rem;
color: #f8f8f8; /* Same as --text-color */
}

.country-item {
font-size: 1.5em; /* Bigger font for countries */
font-weight: bold;
padding: 14px 20px;
color: var(--nav-link-color);
text-transform: uppercase;
.accordion:hover, .sub-accordion:hover {
background-color: #282828;
}

.country-item:hover {
background-color: #357ab7; /* Lighter blue for hover */
.country-item {
font-weight: bold;
color: #f0f0f0; /* Slightly darker for hierarchy */
}

.sub-accordion.lvl-1 {
background-color: var(--bg-medium-gray); /* Medium gray for Level 1 Administrative Division */
padding: 12px 20px;
margin-left: 20px;
font-size: 1.1em;
}

.sub-accordion.lvl-1:hover {
background-color: var(--bg-light-gray);
padding-left: 40px;
color: #e8e8e8; /* Light grey for level 1 */
}

.sub-accordion.lvl-2 {
background-color: var(--bg-light-gray);
padding: 10px 20px;
margin-left: 40px;
font-size: 1em;
}

.sub-accordion.lvl-2:hover {
background-color: #8e8e8e;
padding-left: 60px;
color: #e0e0e0; /* Slightly darker grey for level 2 */
}

.sub-accordion.lvl-3 {
background-color: #6b6b6b;
padding: 8px 20px;
margin-left: 60px;
font-size: 0.95em;
}

.sub-accordion.lvl-3:hover {
background-color: #8e8e8e;
padding-left: 80px;
color: #d8d8d8; /* Another shade for level 3 */
}

.sub-accordion.lvl-4 {
background-color: #484848;
padding: 6px 20px;
margin-left: 80px;
font-size: 0.9em;
}

.sub-accordion.lvl-4:hover {
background-color: #6e6e6e;
padding-left: 100px;
color: #d0d0d0; /* Darkest light grey for level 4 */
}

.dropdown-menu {
overflow: hidden;
transition: max-height 0.3s ease-out;
max-height: 0;
width: 100%;
background-color: #1a1a1a;
}

.dropdown-menu.open {
max-height: 1000px;
font-size: 0.75em;
margin-left: 19px;
background-color: rgba(15, 11, 11, 0.2);
}

.toggle {
Expand All @@ -137,48 +107,54 @@
z-index: -1;
}

.caret:after {
content: '\25B6'; /* Right triangle */
font-size: 1.2em;
margin-left: 10px;
color: #ccc; /* Light gray for caret icon */
transition: transform 0.3s ease-in-out;
}

.toggle:checked + label .caret:after {
content: '\25BC'; /* Downward triangle when expanded */
transform: rotate(90deg); /* Rotate to point downward */
}

.toggle:not(:checked) + label .caret:after {
content: '\25B6'; /* Right triangle when collapsed */
transform: rotate(0deg); /* Rotate to point right */
}

.toggle + label + .dropdown-menu .toggle {
position: absolute;
opacity: 0;
.caret {
display: inline-block;
width: 0;
height: 0;
z-index: -1;
margin-right: 10px;
vertical-align: middle;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid #f8f8f8; /* Match with text color */
transition: transform 0.3s;
}

.toggle:checked + label .caret {
transform: rotate(90deg);
}

.level4-link {
display: block;
padding: 5px 10px;
color: var(--nav-link-color);
color: #d0d0d0; /* Match with lvl-4 color */
text-decoration: none;
font-size: 1rem;
}

.level4-link:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(246, 138, 30, 0.1);
}

/* New styles to prevent font size change on close */
.accordion label, .sub-accordion {
will-change: transform, height;
}

.dropdown-menu {
will-change: max-height;
}

/* This ensures that the transition of font size doesn't happen */
.accordion label, .sub-accordion {
transition: none; /* Disable transitions for font-size */
}

</style>
</head>
<body>

<h2>Administrative Divisions</h2>

<h2>WWFM-DSAP Administrative Divisions</h2>
<h4>Select a country or its Level 1, 2, 3 or 4 administrative division</h4>
<nav id="accordion">
<div id="accordionContainer"></div>
</nav>
Expand Down
Loading

0 comments on commit 6d17f12

Please sign in to comment.