Enhance navbar and form usability with improved styles for touch targets and typography
This commit is contained in:
@@ -118,12 +118,30 @@
|
|||||||
padding: .75rem 1rem;
|
padding: .75rem 1rem;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
min-height: 44px; /* recommended minimum touch target */
|
min-height: 44px; /* recommended minimum touch target */
|
||||||
|
display: block;
|
||||||
|
margin: .25rem 0;
|
||||||
|
border-radius: .375rem;
|
||||||
|
background-color: var(--bs-primary);
|
||||||
|
color: #fff !important;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make links look like outline buttons for secondary links */
|
||||||
|
.navbar-nav .nav-link.btn-outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--bs-primary) !important;
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make dropdown items full-width and larger */
|
/* Make dropdown items full-width and larger */
|
||||||
.navbar-nav .dropdown-menu .dropdown-item {
|
.navbar-nav .dropdown-menu .dropdown-item {
|
||||||
padding: .75rem 1rem;
|
padding: .75rem 1rem;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: .25rem;
|
||||||
|
margin: .125rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When the navbar is collapsed, render dropdown menus as static stacked blocks
|
/* When the navbar is collapsed, render dropdown menus as static stacked blocks
|
||||||
@@ -142,6 +160,25 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
/* Slightly increase root font-size so rem-based components scale */
|
||||||
|
font-size: 182%;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slightly larger headings for clear hierarchy */
|
||||||
|
h1 { font-size: 1.8rem; }
|
||||||
|
h2 { font-size: 1.4rem; }
|
||||||
|
h3 { font-size: 1.15rem; }
|
||||||
|
|
||||||
|
/* Improve spacing for paragraphs and lists */
|
||||||
|
p, li { font-size: 1rem; }
|
||||||
|
|
||||||
|
/* Make form controls and buttons a bit larger for touch */
|
||||||
|
.form-control, .btn { font-size: 1rem; padding: .6rem .75rem; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user