diff --git a/assets/css/content/general.css b/assets/css/content/general.css index 5f727446a..9561f48b7 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -39,7 +39,8 @@ .content-inner h2 { font-size: 1.6em; - margin: 1em 0 0.5em; + padding-top: 1em; + margin-bottom: 0.5em; font-weight: 700; } @@ -154,6 +155,11 @@ display: grid; grid-template: 1fr / 1fr; } +@media screen and (max-width: 768px) { + .content-inner .section-heading { + --icon-spacing: 2px; + } +} .content-inner .section-heading > :is(.hover-link, .text) { grid-row: 1; @@ -166,34 +172,21 @@ .content-inner .section-heading i { font-size: var(--icon-size); + color: var(--mainLight); margin-top: 0.1em; margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing))); - padding-right: var(--icon-spacing); /* Avoids gap in hover area */ + padding-right: var(--icon-spacing); opacity: 0; } -@media screen and (max-width: 768px) { - .content-inner .section-heading i { - margin-left: calc(-1 * (var(--icon-size))); - } -} - .content-inner :is(blockquote, section.admonition) .section-heading i { display: none; } -.content-inner .section-heading .hover-link:is(:hover, :focus) i { +.content-inner .section-heading:is(:hover, :focus, :target) i { opacity: 1; } -/* Allow section link to be hovered and used “through” text */ -.content-inner .section-heading .text { - pointer-events: none; -} -.content-inner .section-heading .text a { - pointer-events: all; -} - .content-inner .app-vsn { display: none !important; font-size: 0.6em;