Skip to content

Commit e2c783a

Browse files
ator-devator-dev
committed
Nest theme selector with button, improve style
1 parent e4adbe5 commit e2c783a

File tree

4 files changed

+44
-43
lines changed

4 files changed

+44
-43
lines changed

‎files/projects/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ <h1 class="logo-title">Mark My Search</h1>
2525
<a href="#main">Skip navigation</a>
2626
<a href="/files/stores/">Add-on Stores</a>
2727
<a href="/files/projects/">Projects</a>
28-
<a href="#theme">Select a site theme</a>
29-
<fieldset class="theme-select">
30-
<legend>Select a site theme</legend>
31-
<label for="theme-light">Light</label>
32-
<label for="theme">Automatic</label>
33-
<label for="theme-dark">Dark</label>
34-
</fieldset>
28+
<div>
29+
<a href="#theme">Select a site theme</a>
30+
<fieldset class="theme-select">
31+
<legend>Select a site theme</legend>
32+
<label for="theme-light">Light</label>
33+
<label for="theme">Automatic</label>
34+
<label for="theme-dark">Dark</label>
35+
</fieldset>
36+
</div>
3537
</nav>
3638
</div>
3739
</header>

‎files/stores/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ <h1 class="logo-title">Mark My Search</h1>
2525
<a href="#main">Skip navigation</a>
2626
<a href="/files/stores/">Add-on Stores</a>
2727
<a href="/files/projects/">Projects</a>
28-
<a href="#theme">Select a site theme</a>
29-
<fieldset class="theme-select">
30-
<legend>Select a site theme</legend>
31-
<label for="theme-light">Light</label>
32-
<label for="theme">Automatic</label>
33-
<label for="theme-dark">Dark</label>
34-
</fieldset>
28+
<div>
29+
<a href="#theme">Select a site theme</a>
30+
<fieldset class="theme-select">
31+
<legend>Select a site theme</legend>
32+
<label for="theme-light">Light</label>
33+
<label for="theme">Automatic</label>
34+
<label for="theme-dark">Dark</label>
35+
</fieldset>
36+
</div>
3537
</nav>
3638
</div>
3739
</header>

‎index.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,18 @@ <h1 class="logo-title">Mark My Search</h1>
2222
</div>
2323
<div class="controls">
2424
<nav>
25-
<a href="#main">Skip navigation</a>
25+
<a href="#main" class="hidden">Skip navigation</a>
2626
<a href="/files/stores/">Add-on Stores</a>
2727
<a href="/files/projects/">Projects</a>
28-
<a href="#theme">Select a site theme</a>
29-
<fieldset class="theme-select">
30-
<legend>Select a site theme</legend>
31-
<label for="theme-light">Light</label>
32-
<label for="theme">Automatic</label>
33-
<label for="theme-dark">Dark</label>
34-
</fieldset>
28+
<div>
29+
<a href="#theme">Select a site theme</a>
30+
<fieldset class="theme-select">
31+
<legend>Select a site theme</legend>
32+
<label for="theme-light">Light</label>
33+
<label for="theme">Automatic</label>
34+
<label for="theme-dark">Dark</label>
35+
</fieldset>
36+
</div>
3537
</nav>
3638
</div>
3739
</header>

‎main.css

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,10 @@ body > * {
8080
display: none;
8181
}
8282

83-
:is(#theme, #theme-light, #theme-dark):is(:focus, :active) ~ * .theme-select {
83+
input[name="theme"]:is(:focus, :active) ~ * .theme-select {
8484
display: block;
8585
}
8686

87-
:is(#theme, #theme-light, #theme-dark):is(:focus, :active) ~ * [href="#theme"] {
88-
display: none;
89-
}
90-
9187
#theme-light:checked ~ * [for="theme-light"],
9288
#theme-dark:checked ~ * [for="theme-dark"],
9389
#theme:checked ~ * [for="theme"] {
@@ -138,7 +134,7 @@ header > *, article > * {
138134

139135
#header {
140136
display: flex;
141-
overflow-x: auto; /* In case of overflow, overflow the header instead of the page */
137+
overflow-y: visible; /* Ensure that dropdowns can drop below the header. */
142138
background: var(--bg-header);
143139
border-bottom: 2px solid var(--border-header);
144140
position: sticky;
@@ -183,27 +179,26 @@ header > *, article > * {
183179
border-color: var(--bg-header);
184180
}
185181

186-
#header nav a[href^="#"] {
182+
#header nav a.hidden {
187183
position: absolute;
188-
opacity: 0;
189-
pointer-events: none;
190184
padding: 8px;
191185
}
192186

193-
#header nav a[href^="#"]:focus {
194-
opacity: revert;
195-
pointer-events: revert;
187+
#header nav a.hidden:not(:focus) {
188+
opacity: 0;
189+
pointer-events: none;
196190
}
197191

198-
#header nav a:not([href^="#"]) ~ a[href^="#"] {
199-
position: revert;
200-
opacity: revert;
201-
pointer-events: revert;
192+
#header nav fieldset {
193+
position: absolute;
194+
width: 100%;
195+
box-sizing: border-box;
196+
background: #fff;
202197
}
203198

204-
/*#header nav a:not([href^="#"]) ~ a[href^="#"] {
205-
right: 0;
206-
}*/
199+
#header nav fieldset label {
200+
display: block;
201+
}
207202

208203
#header .logo-icon {
209204
width: 38px;
@@ -224,14 +219,14 @@ header > *, article > * {
224219
}
225220

226221
#header > * {
227-
overflow-x: auto; /* Now the header is a stack of items, each child should absorb its own overflow */
222+
/*overflow-x: auto; Now the header is a stack of items, each child should absorb its own overflow*/
228223
}
229224

230225
#header nav {
231226
margin-inline: 0;
232227
padding-block: 4px;
233228
gap: 10px;
234-
overflow-x: auto;
229+
/*overflow-x: auto;*/
235230
}
236231

237232
#header nav a {

0 commit comments

Comments
 (0)