7b6ee735 · Quildrop · LabCodeHub

Küpper / Quildrop öffentlich

fix: responsive menu

R Rüdiger Küpper <rpr@9it.de> committete am 19.02.2026 00:16

7b6ee73596304baad36ff1c5e70a363361325fd1

Eltern: 2b1d855e

geändert static/css/style.css

+14 −2 Datei ansehen


    }

    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        opacity: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.8rem;
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 5rem 2rem 2rem;
        z-index: 105;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links > a,
    .nav-dropdown-toggle {
        font-size: 1.2rem;
        color: var(--text-primary);
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: none;
        box-shadow: none;

    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
        transform: none;
    }

    .nav-dropdown-menu a {
        padding: 0.4rem 0;
        font-size: 1rem;
        color: var(--text-secondary);
    }

    .search-container {
        width: 100%;
        justify-content: center;
    }

    .search-box {
        position: fixed;
        top: 4.5rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        z-index: 110;
    }

    .search-results {
        max-height: calc(100vh - 10rem);
    }

    .nav-rss,
    #theme-toggle {
        color: var(--text-primary);
    }
}

@media (max-width: 640px) {
    .nav-inner {
        padding: 0.8rem 1rem;
    }

    .container {
        padding: 1.5rem 1rem;
    }

		@@ -1101,34 +1101,39 @@ body {
1101	1101	}
1102	1102
1103	1103	.nav-links {
1104	1104	display: none;
1105	1105	position: fixed;
1106	1106	top: 0;
1107	1107	left: 0;
1108	1108	right: 0;
1109	1109	bottom: 0;
1110	1110	background: var(--bg-primary);
	1111	+ opacity: 1;
1111	1112	flex-direction: column;
1112	1113	align-items: center;
1113		- justify-content: center;
1114		- gap: 1.8rem;
	1114	+ justify-content: flex-start;
	1115	+ gap: 1.5rem;
	1116	+ padding: 5rem 2rem 2rem;
1115	1117	z-index: 105;
	1118	+ overflow-y: auto;
	1119	+ -webkit-overflow-scrolling: touch;
1116	1120	}
1117	1121
1118	1122	.nav-links.open {
1119	1123	display: flex;
1120	1124	}
1121	1125
1122	1126	.nav-links > a,
1123	1127	.nav-dropdown-toggle {
1124	1128	font-size: 1.2rem;
	1129	+ color: var(--text-primary);
1125	1130	}
1126	1131
1127	1132	.nav-dropdown-menu {
1128	1133	position: static;
1129	1134	transform: none;
1130	1135	opacity: 1;
1131	1136	visibility: visible;
1132	1137	background: transparent;
1133	1138	border: none;
1134	1139	box-shadow: none;
		@@ -1139,38 +1144,45 @@ body {
1139	1144	}
1140	1145
1141	1146	.nav-dropdown.open .nav-dropdown-menu {
1142	1147	display: block;
1143	1148	transform: none;
1144	1149	}
1145	1150
1146	1151	.nav-dropdown-menu a {
1147	1152	padding: 0.4rem 0;
1148	1153	font-size: 1rem;
	1154	+ color: var(--text-secondary);
1149	1155	}
1150	1156
1151	1157	.search-container {
1152	1158	width: 100%;
1153	1159	justify-content: center;
1154	1160	}
1155	1161
1156	1162	.search-box {
1157	1163	position: fixed;
1158	1164	top: 4.5rem;
1159	1165	left: 1rem;
1160	1166	right: 1rem;
1161	1167	width: auto;
	1168	+ z-index: 110;
1162	1169	}
1163	1170
1164	1171	.search-results {
1165	1172	max-height: calc(100vh - 10rem);
1166	1173	}
	1174	+
	1175	+ .nav-rss,
	1176	+ #theme-toggle {
	1177	+ color: var(--text-primary);
	1178	+ }
1167	1179	}
1168	1180
1169	1181	@media (max-width: 640px) {
1170	1182	.nav-inner {
1171	1183	padding: 0.8rem 1rem;
1172	1184	}
1173	1185
1174	1186	.container {
1175	1187	padding: 1.5rem 1rem;
1176	1188	}