Cutieguwu/cutieguwu-site
1
0
Fork 0
Code Issues 10 Pull Requests Projects 1 Releases Activity

Break up and optimize dropdown styling.

Browse Source
This commit is contained in:
Cutieguwu
2025-07-21 14:27:47 -04:00
parent 689354fc7b
commit b8b518555f
4 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/includes/nav_menu.html
View File

@@ -3,7 +3,7 @@
<li class="nav_body"><a class="nav_title" href="#">Home</a></li>
<!-- Minecraft -->
<li class="dropdown">
<li class="nav_dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title" href="#">Minecraft</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
@@ -20,7 +20,7 @@
<li class="nav_body"><a class="nav_title" href="#">About</a></li>
<!-- Pronoun Pages -->
<li class="dropdown">
<li class="nav_dropdown">
<div class="dropdown_header nav_body">
<a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
<ion-icon name="chevron-forward-outline"></ion-icon>
@@ -32,7 +32,7 @@
</li>
<!-- External Links -->
<li class="dropdown">
<li class="nav_dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">External Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
@@ -46,7 +46,7 @@
<hr />
<!-- Public Services -->
<li class="dropdown">
<li class="nav_dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Public Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
@@ -57,7 +57,7 @@
</li>
<!-- Services -->
<li class="dropdown">
<li class="nav_dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>

39
src/partials/_nav_dropdown.scss Normal file
View File

@@ -0,0 +1,39 @@
.nav_dropdown {
.dropdown_header {
display: grid;
grid-template-columns: 1fr min-content;
align-items: center;
ion-icon {
/*
This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
*/
margin-right: 0.5rem;
align-self: center;
transition-duration: 0.25s;
}
}
.dropdown_body {
display: none;
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
background-color: var(--background-1);
}
}
.nav_dropdown:hover {
.dropdown_header {
transform: var(--transform-scale-x);
ion-icon {
rotate: 90deg;
transition-duration: 0.25s;
}
}
.dropdown_body {
display: grid;
}
}

68
src/partials/_nav_menu.scss
View File

@@ -1,3 +1,6 @@
@use "nav_dropdown";
@use "nav_title";
.nav_menu {
/*
Remove default padding and style applied to ul for bullets.
@@ -22,8 +25,7 @@
transition: var(--transition-fade);
}
.dropdown:hover .nav_body,
.dropdown .nav_body:hover,
.nav_dropdown:hover .nav_body,
.nav_body:hover {
transform: var(--transform-scale-x);
transition: var(--transition-cut);
@@ -34,66 +36,4 @@
transition: var(--transition-cut);
}
}
.dropdown {
.dropdown_header {
display: grid;
grid-template-columns: 1fr min-content;
align-items: center;
ion-icon {
/*
This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
*/
margin-right: 0.5rem;
align-self: center;
transition-duration: 0.25s;
}
}
.dropdown_body {
display: none;
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
background-color: var(--background-1);
}
}
.dropdown:hover {
.dropdown_header {
transform: var(--transform-scale-x);
ion-icon {
rotate: 90deg;
transition-duration: 0.25s;
}
}
.dropdown_body {
display: grid;
}
}
.nav_body,
.dropdown .nav_body,
.dropdown .dropdown_body {
.nav_title {
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
color: inherit;
text-decoration: none;
font-family: var(--font-family-generic);
font-weight: bold;
white-space: nowrap;
margin: 0 var(--spacing-horizontal);
transition: var(--transition-fade);
text-transform: uppercase;
}
.nav_title:hover {
color: var(--highlight-hover);
transition: var(--transition-cut);
}
}
}

17
src/partials/_nav_title.scss Normal file
View File

@@ -0,0 +1,17 @@
.nav_title {
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
color: inherit;
text-decoration: none;
font-family: var(--font-family-generic);
font-weight: bold;
white-space: nowrap;
margin: 0 var(--spacing-horizontal);
transition: var(--transition-fade);
text-transform: uppercase;
}
.nav_title:hover {
color: var(--highlight-hover);
transition: var(--transition-cut);
}