oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-09-15 18:57:04 +00:00
Code Wiki Activity

fix menu responsive layout

Browse source
This commit is contained in:
krvpb024 2024-01-25 16:36:10 +08:00 • committed by Frédéric Guillot
parent da11416b39
commit 84576f2c29
4 changed files with 94 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

53
internal/ui/static/css/common.css
View file

@ -91,25 +91,31 @@ a:hover {
.header nav {
display: flex;
align-items: center;
align-items: stretch;
flex-direction: column;
}
.header nav details {
flex: 1;
.header nav button[aria-controls="header-menu"] {
border: none;
background-color: transparent;
display: inline-block;
}
.header nav details[open] svg {
.header nav button[aria-controls="header-menu"] svg {
padding: 5px;
inline-size: 20px;
block-size: 20px;
}
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
rotate: 180deg;
}
.header nav summary {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
.header ul.js-menu-show {
display: initial;
}
.header nav summary::-webkit-details-marker {
.header ul:not(.js-menu-show) {
display: none;
}
@ -187,11 +193,15 @@ a:hover {
.logo {
cursor: pointer;
text-align: center;
display: flex;
justify-content: center;
}
.logo a {
color: var(--logo-color);
letter-spacing: 1px;
display: flex;
align-items: center;
}
.logo a:hover {
@ -297,6 +307,27 @@ a:hover {
font-size: 1.0em;
}
.header nav {
align-items: start;
flex-direction: row;
}
.header nav button[aria-controls="header-menu"] svg {
display: none;
}
.header nav button[aria-controls="header-menu"] svg {
rotate: -90deg;
}
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
rotate: 90deg;
}
.header ul:not(.js-menu-show), .header ul.js-menu-show {
display: revert;
}
.page-header li,
.page-footer li {
display: inline;