diff options
| author | bogdankol <68349689+bogdankol@users.noreply.github.com> | 2024-02-19 15:53:51 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-02-19 13:53:51 +0000 |
| commit | 54cb31c8e76515b3245bf90ffb3735ae31918b9e (patch) | |
| tree | 0fcfaa6251dd180f4e32a2a7379a3c6435ab2741 /docs/_static/css/headers.css | |
| parent | b84c9e0edaa470b97a1bad3478f4e4a2bb372614 (diff) | |
| download | vyos-documentation-54cb31c8e76515b3245bf90ffb3735ae31918b9e.tar.gz vyos-documentation-54cb31c8e76515b3245bf90ffb3735ae31918b9e.zip | |
Styles refactoring (#1278)
Diffstat (limited to 'docs/_static/css/headers.css')
| -rw-r--r-- | docs/_static/css/headers.css | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/docs/_static/css/headers.css b/docs/_static/css/headers.css new file mode 100644 index 00000000..48b78a41 --- /dev/null +++ b/docs/_static/css/headers.css @@ -0,0 +1,134 @@ +h1, +h2, +h3, +h4, +h5 { + font-family: 'Archivo', sans-serif !important; + font-weight: 700 !important; + letter-spacing: -0.02em !important; + display: flex; + color: #121010; + margin-bottom: 15px !important; +} + +h2, +h3, +h4, +h5 { + margin-top: 15px !important; +} + +h1:has(a) > a, +h2:has(a) > a, +h3:has(a) > a, +h4:has(a) > a, +h5:has(a) > a { + display: flex !important; + position: relative; + padding-left: 5px; +} + +@media screen and (max-width: 767px) { + h1 { + font-size: 28px !important; + } + + h2 { + font-size: 22px !important; + } + + h3 { + font-size: 20px !important; + } + + h4 { + font-size: 18px !important; + } + + h5 { + font-size: 16px !important; + } +} + +@media screen and (min-width: 768px) { + h1 { + font-size: 48px !important; + } + + h2 { + font-size: 34px !important; + } + + h3 { + font-size: 24px !important; + } + + h4 { + font-size: 22px !important; + } + + h5 { + font-size: 20px !important; + } +} + +@media screen and (max-width: 991px) { + h1 { + margin-top: 15px; + } + + a.headerlink { + opacity: 1 !important; + color: transparent; + } + + h1:has(a):hover > a::after, + h2:has(a):hover > a::after, + h3:has(a):hover > a::after, + h4:has(a):hover > a::after, + h5:has(a):hover > a::after { + content: none !important; + display: none !important; + } + + h1:has(a) > a::before, + h2:has(a) > a::before, + h3:has(a) > a::before, + h4:has(a) > a::before, + h5:has(a) > a::before { + content: url('../images/cmnd-link-icon.svg'); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 25%; + height: 100%; + width: 20px; + z-index: 2; + background-color: transparent; + } +} + +@media screen and (min-width: 992px) { + h1:has(a):hover > a::after, + h2:has(a):hover > a::after, + h3:has(a):hover > a::after, + h4:has(a):hover > a::after, + h5:has(a):hover > a::after { + content: url('../images/cmnd-link-icon.svg'); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + height: 100%; + width: 20px; + z-index: 2; + background-color: transparent; + } + + a.headerlink { + color: transparent; + } +} + |