From 2b131f2b1fa3c9dd4df62a455f7be038f8f4ca74 Mon Sep 17 00:00:00 2001 From: sefaria Date: Fri, 22 May 2026 22:00:08 +0200 Subject: [PATCH] Adding menu css, styling logo --- css/style.css | 202 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 18 ++--- 2 files changed, 207 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 10852c8..0281f64 100644 --- a/css/style.css +++ b/css/style.css @@ -346,7 +346,7 @@ a:visited { text-decoration-thickness: 0.175rem; } -button, .link-button { +button, .link-button, .logo { min-height: 44px; font-family: "MD IO", monospace; font-style: normal; @@ -361,20 +361,39 @@ button, .link-button { border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; } -button:hover, .link-button:hover { +.logo { + padding: 1rem; + aspect-ratio: 1/1; +} + +.logo svg { + height: 1.75em; + width: 1.75em; + flex: none; + display: block; +} + +.logo svg path { + fill: currentColor; +} + +button:hover, .link-button:hover, .logo:hover { background: var(--color-primary-button-hover); color: var(--color-text-button); } -button:active, .link-button:active { +button:active, .link-button:active, .logo:active { background: var(--color-primary-button-active); box-shadow: var(--shadow-button-active); color: var(--color-text-button-active); } -button:visited, .link-button:visited { +button:visited, .link-button:visited, .logo:visited { color: var(--color-text-button); text-decoration: none; } @@ -401,6 +420,181 @@ button:visited, .link-button:visited { background: var(--color-background-content-box); } +.site-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + background: rgb(255 255 255 / 0.88); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + z-index: 100; +} + +.desktop-nav ul, +.mobile-menu ul { + list-style: none; + margin: 0; + padding: 0; +} + +.desktop-nav ul { + display: flex; + gap: 1.25rem; +} + +.desktop-nav a, +.mobile-menu a { + color: inherit; + text-decoration: none; +} + +.menu-toggle, +.menu-close { + width: 44px; + height: 44px; + border: 1px solid var(--border); + border-radius: 0.75rem; + background: #fff; + color: inherit; + cursor: pointer; +} + +.menu-toggle { + display: none; + position: relative; +} + +.menu-toggle span { + position: absolute; + left: 50%; + width: 20px; + height: 2px; + background: currentColor; + border-radius: 999px; + transform-origin: center; + transition: transform 0.25s ease, opacity 0.25s ease; +} + +.menu-toggle span:nth-child(1) { + top: 14px; + transform: translateX(-50%); +} + +.menu-toggle span:nth-child(2) { + top: 21px; + transform: translateX(-50%); +} + +.menu-toggle span:nth-child(3) { + top: 28px; + transform: translateX(-50%); +} + +.menu-toggle.is-open span:nth-child(1) { + top: 21px; + transform: translateX(-50%) rotate(45deg); +} + +.menu-toggle.is-open span:nth-child(2) { + opacity: 0; +} + +.menu-toggle.is-open span:nth-child(3) { + top: 21px; + transform: translateX(-50%) rotate(-45deg); +} + +.menu-overlay { + position: fixed; + inset: 0; + background: var(--overlay); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + opacity: 0; + pointer-events: none; + transition: opacity 0.25s ease; + z-index: 200; +} + +.mobile-menu { + position: fixed; + inset: auto 1rem 1rem 1rem; + width: auto; + max-width: 24rem; + margin-inline: auto; + background: var(--panel); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgb(255 255 255 / 0.45); + border-radius: 1rem; + box-shadow: 0 20px 50px rgb(0 0 0 / 0.16); + padding: 1rem; + opacity: 0; + transform: translateY(1rem) scale(0.98); + pointer-events: none; + transition: opacity 0.25s ease, transform 0.25s ease; + z-index: 300; +} + +.mobile-menu__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; +} + +.mobile-menu ul { + display: grid; + gap: 0.5rem; +} + +.mobile-menu a { + display: block; + padding: 0.95rem 1rem; + border-radius: 0.75rem; + background: rgb(255 255 255 / 0.56); +} + +/* .page-content { + padding: 3rem 1.25rem; +} */ + +.menu-open .menu-overlay { + opacity: 1; + pointer-events: auto; +} + +.menu-open .mobile-menu { + opacity: 1; + transform: translateY(0) scale(1); + pointer-events: auto; +} + +@media (max-width: 679px) { + .desktop-nav { + display: none; + } + + .menu-toggle { + display: inline-block; + } +} + +@media (min-width: 680px) { + .menu-overlay, + .mobile-menu { + display: none; + } +} + + + + main, footer { max-width: 900px; border: none; diff --git a/index.html b/index.html index 7ad9b70..e9dde2c 100644 --- a/index.html +++ b/index.html @@ -30,14 +30,15 @@
- + @@ -73,10 +74,9 @@