Skip to content

Commit 4988c1d

Browse files
kattnikattni
authored
Align title on larger screens when version number absent. (#26)
1 parent 02207bc commit 4988c1d

4 files changed

Lines changed: 80 additions & 76 deletions

File tree

‎docs/mkdocs.en.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
INHERIT: config.yml
2-
site_name: BeeWare Docs Tools
2+
site_name: BeeWare Docs
33
site_url: https://beeware-docs-tools.readthedocs.io/en/latest/
44
docs_dir: en
55

‎src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@
323323
}
324324

325325
/* Sidebar title and GitHub links font and color */
326-
.md-nav__title * {
326+
.md-nav__title {
327327
font-family: 'Cutive', serif;
328328
}
329329

@@ -333,36 +333,15 @@
333333

334334
/* Site name */
335335
.site-name {
336-
font-size: 20px;
337-
padding-bottom: 8px;
338-
}
339-
340-
.small .site-name {
341-
padding-bottom: 0;
342-
}
343-
344-
/* Sidebar title block */
345-
.sidebar-title-block {
346-
margin-bottom: 24px;
347-
}
348-
349-
.small .sidebar-title-block {
350-
height: fit-content;
351-
min-height: 60px;
352-
margin-bottom: 42px;
336+
font-size: 22px;
353337
}
354338

355339
/* Version number */
356340
.version-number {
357341
overflow-wrap: anywhere;
358342
font-size: 12px;
359343
font-weight: normal;
360-
}
361-
362-
.small .version-number {
363-
padding-top: 10px;
364-
justify-content: space-between;
365-
display: grid;
344+
margin-top: 0.2rem;
366345
}
367346

368347
/* GitHub sidebar links */
@@ -374,59 +353,89 @@
374353
color: light-dark(#084AFF, #526CFE);
375354
}
376355

377-
.small .github-link-block {
378-
margin-top: 16px;
356+
.github-link-block a:first-child .github-links {
357+
margin-top: 0.8rem;
358+
margin-bottom: 0.2rem;
379359
}
380360

381361
.github-link-block a:last-child .github-links {
382-
margin-top: 8px;
383-
margin-bottom: 16px;
362+
margin-bottom: 0.6rem;
363+
}
364+
365+
.small .github-link-block a:first-child .github-links {
366+
margin-top: 0.4rem;
367+
}
368+
369+
.small .github-link-block a:last-child .github-links {
370+
margin-bottom: 0.4rem;
384371
}
385372

386373
/* Shows the logo in the sidebar */
387374
.md-nav__title .md-nav__button {
388375
display: unset;
389376
}
390377

391-
.mobile-site-name {
378+
/* Style the sidebar title block on primary pages and in sidebar drawer */
379+
.small .sidebar-title-block {
380+
display: flex;
381+
flex-flow: nowrap row;
382+
align-items: center;
383+
}
384+
385+
.small .sidebar-title-block-name {
386+
align-items: start;
387+
}
388+
389+
.sidebar-logo {
390+
margin-bottom: 0.8em;
391+
margin-top: 0.8em;
392+
margin-right: 0.2rem;
393+
}
394+
395+
/* Embiggen homepage logo */
396+
.md-nav__title .md-nav__button.md-logo img {
397+
height: unset;
398+
}
399+
400+
/* Embiggen sidebar drawer logo and match sidebar */
401+
.md-nav__title.small .md-nav__button.md-logo img {
402+
height: unset;
403+
max-width: unset;
404+
width: 74px;
405+
}
406+
407+
/* The menu button for the sidebar drawer to display the sidebar on smaller displays */
408+
.mobile-drawer-button-site-name {
392409
font-family: Cutive, "serif";
393410
font-size: 16px;
394411
display: inline-block;
395412
vertical-align: middle;
396413
}
397414

398-
.mobile-version-number {
415+
.mobile-drawer-button-version-number {
399416
font-size: 12px;
400417
display: inline-block;
401418
vertical-align: middle;
402419
padding-top: 4px;
403420
padding-left: 4px;
404421
}
405422

406-
.mobile-sidebar-drawer {
423+
.mobile-sidebar-drawer-menu-bar {
407424
color: light-dark(#000000, #FFFFFF);
408425
background-color: light-dark(#F8F9FB, #4E4F52);
409426
}
410427

411428
/* Adjustments for larger displays */
412429
@media screen and (min-width: 1220px) {
413-
.md-nav__title .md-nav__button.md-logo img {
414-
height: unset;
415-
padding-bottom: 1rem;
416-
}
417-
418-
.md-nav__title.small .sidebar-logo img {
419-
height: 80px !important;
420-
float: left;
421-
padding-left: 4px;
422-
padding-right: 8px;
423-
padding-bottom: 0 !important;
424-
width: 74px;
425-
margin-bottom: 10px;
430+
/* Hide menu bar when not needed */
431+
.mobile-sidebar-drawer-menu-bar {
432+
display: none;
426433
}
427434

428-
.mobile-site-name, .mobile-version-number {
429-
display: none;
435+
.sidebar-title-block-name {
436+
display: flex;
437+
flex-flow: nowrap column;
438+
align-items: center;
430439
}
431440
}
432441

@@ -440,10 +449,6 @@
440449
background-color: light-dark(#F8F9FB, #4E4F52);
441450
}
442451

443-
.md-nav--primary .md-nav__title .md-nav__icon {
444-
position: relative;
445-
}
446-
447452
.md-nav--primary .md-nav__title {
448453
padding-top: 16px;
449454
}
@@ -453,29 +458,26 @@
453458
padding: 0;
454459
}
455460

456-
.md-nav__title .md-nav__button.md-logo img {
457-
padding-bottom: 10px;
458-
height: 60px;
459-
}
460-
461+
/* Position of left sidebar */
461462
.md-sidebar.md-sidebar--secondary {
462463
top: 66px !important;
463464
}
464465

466+
/* Sidebar drawer header styling */
465467
.sidebar-logo {
466-
height: 80px !important;
467-
float: left;
468-
padding-left: 4px;
469-
padding-right: 8px;
470-
padding-bottom: 0 !important;
471-
width: 74px;
472-
margin-bottom: 10px;
468+
margin-right: 0.2rem;
473469
}
474470

475471
.sidebar-title-block {
476-
height: fit-content;
477-
min-height: 60px;
478-
margin-bottom: 42px;
472+
display: flex;
473+
flex-flow: nowrap row;
474+
align-items: center;
475+
}
476+
477+
.md-nav__title .md-nav__button.md-logo img {
478+
height: unset;
479+
max-width: unset;
480+
width: 74px;
479481
}
480482
}
481483

‎src/beeware_docs_tools/overrides/partials/header.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,16 @@
5454
{% endif %}
5555
</div>
5656
</nav>
57-
<div class="mobile-sidebar-drawer">
57+
<div class="mobile-sidebar-drawer-menu-bar">
5858
<!-- Button to open drawer -->
5959
<label class="md-header__button md-icon" for="__drawer">
6060
{% set icon = config.theme.icon.menu or "material/menu" %}
6161
{% include ".icons/" ~ icon ~ ".svg" %}
6262
</label>
63-
<div class="mobile-site-name">
63+
<div class="mobile-drawer-button-site-name">
6464
{{ config.site_name }}
6565
</div>
66-
<div class="mobile-version-number">
66+
<div class="mobile-drawer-button-version-number">
6767
{{ config.extra.version }}
6868
</div>
6969
</div>

‎src/beeware_docs_tools/overrides/partials/nav.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,16 @@
4545
<div class="sidebar-logo">
4646
{% include "partials/logo.html" %}
4747
</div>
48-
<div class="site-name">
49-
{{ config.site_name }}
48+
<div class="sidebar-title-block-name">
49+
<div class="site-name">
50+
{{ config.site_name }}
51+
</div>
52+
{% if config.extra.version %}
53+
<div class="version-number">
54+
{{ config.extra.version }}
55+
</div>
56+
{% endif %}
5057
</div>
51-
{% if config.extra.version %}
52-
<div class="version-number">
53-
{{ config.extra.version }}
54-
</div>
55-
{% endif %}
5658
</div>
5759
</a>
5860
<span class="github-link-block">

0 commit comments

Comments
 (0)