diff --git a/src/components/GlossaryHomeAside.astro b/src/components/GlossaryHomeAside.astro index 3521b9c..0b94416 100644 --- a/src/components/GlossaryHomeAside.astro +++ b/src/components/GlossaryHomeAside.astro @@ -192,120 +192,47 @@ const { word-break: break-word; } - @media (max-width: 860px){ - .glossary-home-aside{ - gap: 10px; - } - - .glossary-home-aside__block{ - border-radius: 14px; - } - - .glossary-home-aside__block--intro{ - padding: 12px; - } - - .glossary-home-aside__title{ - font-size: 19px; - line-height: 1.18; - } - - .glossary-home-aside__meta{ - margin-top: 6px; - font-size: 12px; - line-height: 1.32; - } - - .glossary-home-aside__pills{ - gap: 6px; - margin-top: 9px; - } - - .glossary-home-aside__pill{ - padding: 4px 9px; - font-size: 12px; - line-height: 1.28; - } - - .glossary-home-aside__summary{ - padding: 12px; - } - - .glossary-home-aside__heading{ - font-size: 17px; - line-height: 1.2; - } - - .glossary-home-aside__panel{ - padding: 0 12px 12px; - } - - .glossary-home-aside__list li{ - margin: 5px 0; - } - - .glossary-home-aside__list a{ - font-size: 14px; - line-height: 1.34; - } - - .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{ - display: none; - } - } - - @media (max-width: 860px){ - .glossary-home-aside__disclosure{ - background: rgba(127,127,127,0.045); - } - - .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{ - border-bottom: 1px solid rgba(127,127,127,0.12); - } - } - - @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){ + @media (max-width: 980px){ .glossary-home-aside{ gap: 8px; + margin-bottom: 12px; } .glossary-home-aside__block{ - border-radius: 12px; + border-radius: 13px; } .glossary-home-aside__block--intro{ - padding: 10px 11px; + padding: 10px 12px; } .glossary-home-aside__title{ - font-size: 16px; - line-height: 1.14; + font-size: 15px; + line-height: 1.15; } .glossary-home-aside__meta{ - font-size: 11px; - line-height: 1.26; - margin-top: 5px; + display: none; } .glossary-home-aside__pills{ gap: 5px; - margin-top: 8px; + margin-top: 7px; } .glossary-home-aside__pill{ padding: 3px 8px; font-size: 11px; - line-height: 1.2; + line-height: 1.18; } .glossary-home-aside__summary{ - padding: 10px 11px; + padding: 9px 11px; } .glossary-home-aside__heading{ - font-size: 15px; - line-height: 1.16; + font-size: 14px; + line-height: 1.15; } .glossary-home-aside__panel{ @@ -320,9 +247,80 @@ const { font-size: 13px; line-height: 1.28; } + + .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{ + display: none; + } } - @media (min-width: 861px){ + @media (max-width: 980px){ + .glossary-home-aside__disclosure{ + background: rgba(127,127,127,0.045); + } + + .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{ + border-bottom: 1px solid rgba(127,127,127,0.12); + } + } + + @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){ + .glossary-home-aside{ + gap: 7px; + margin-bottom: 10px; + } + + .glossary-home-aside__block{ + border-radius: 12px; + } + + .glossary-home-aside__block--intro{ + padding: 9px 10px; + } + + .glossary-home-aside__title{ + font-size: 14px; + line-height: 1.12; + } + + .glossary-home-aside__meta{ + display: none; + } + + .glossary-home-aside__pills{ + gap: 4px; + margin-top: 6px; + } + + .glossary-home-aside__pill{ + padding: 2px 7px; + font-size: 10.5px; + line-height: 1.16; + } + + .glossary-home-aside__summary{ + padding: 8px 10px; + } + + .glossary-home-aside__heading{ + font-size: 13px; + line-height: 1.12; + } + + .glossary-home-aside__panel{ + padding: 0 10px 9px; + } + + .glossary-home-aside__list li{ + margin: 3px 0; + } + + .glossary-home-aside__list a{ + font-size: 12px; + line-height: 1.22; + } + } + + @media (min-width: 981px){ .glossary-home-aside__summary{ cursor: default; } @@ -346,28 +344,32 @@ const {