diff --git a/src/index.html b/src/index.html index 3f1a118..016b3fc 100644 --- a/src/index.html +++ b/src/index.html @@ -84,17 +84,6 @@ font-weight: 500; border-radius: 4px; transition: background-color 0.3s, color 0.3s; } .main-nav a:hover { background-color: var(--theme-hover); color: var(--accent-color); } - .main-nav .dropdown > a::after { content: "▼"; font-size: 0.7em; margin-left: 0.5em; } - .main-nav .dropdown-content { - display: none; position: absolute; top: 100%; left: 0; background-color: var(--theme-bg); - min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); z-index: 1000; - border-radius: 4px; padding: 0.5rem 0; margin-top: 0.25rem; - } - .main-nav .dropdown:hover .dropdown-content { display: block; } - .main-nav .dropdown-content a { - padding: 0.5rem 1rem; display: block; white-space: nowrap; border-radius: 0; - } - .nav-story-tbd { opacity: 0.6; } .theme-switch { position: fixed; top: 20px; right: 20px; z-index: 1000; } .theme-switch button { background: var(--theme-bg); border: 1px solid var(--border-color); font-size: 1.5em; @@ -175,7 +164,6 @@ body { padding: 10px; } h1 { font-size: 1.75em; } .main-nav ul { flex-direction: column; gap: 0.5rem; } .main-nav a { text-align: center; } - .main-nav .dropdown-content { position: static; box-shadow: none; } .controls { flex-direction: column; } .code-tabs { flex-wrap: wrap; } } @@ -322,46 +310,9 @@ diff --git a/src/tools.html b/src/tools.html index 4629527..a6ef7f4 100644 --- a/src/tools.html +++ b/src/tools.html @@ -24,10 +24,6 @@ .main-nav li { margin: 0; padding: 0; position: relative; } .main-nav a { display: block; padding: 0.5rem 1rem; text-decoration: none; color: var(--text-color); font-weight: 500; border-radius: 4px; transition: background-color 0.3s, color 0.3s; } .main-nav a:hover { background-color: var(--theme-hover); color: var(--accent-color); } - .main-nav .dropdown > a::after { content: "\25BC"; font-size: 0.7em; margin-left: 0.5em; } - .main-nav .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background-color: var(--theme-bg); min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); z-index: 1000; border-radius: 4px; padding: 0.5rem 0; margin-top: 0.25rem; } - .main-nav .dropdown:hover .dropdown-content { display: block; } - .main-nav .dropdown-content a { padding: 0.5rem 1rem; display: block; white-space: nowrap; border-radius: 0; } .theme-switch { position: fixed; top: 20px; right: 20px; z-index: 1000; } .theme-switch button { background: var(--theme-bg); border: 1px solid var(--border-color); font-size: 1.5em; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background-color 0.3s; } .theme-switch button:hover { background-color: var(--theme-hover); } @@ -87,7 +83,7 @@ .modal-content .cta-button { display: block; width: 100%; padding: 0.75rem 1.5rem; background: var(--accent-color); color: white; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background 0.2s; font-family: 'Montserrat', sans-serif; } .modal-content .cta-button:hover { background: var(--hover-color); } .modal-content .cta-button:disabled { opacity: 0.6; cursor: not-allowed; } - @media (max-width: 600px) { body { padding: 10px; } h1 { font-size: 1.75em; } .main-nav ul { flex-direction: column; gap: 0.5rem; } .main-nav a { text-align: center; } .main-nav .dropdown-content { position: static; box-shadow: none; } .controls { flex-direction: column; } } + @media (max-width: 600px) { body { padding: 10px; } h1 { font-size: 1.75em; } .main-nav ul { flex-direction: column; gap: 0.5rem; } .main-nav a { text-align: center; } .controls { flex-direction: column; } } @media (max-width: 480px) { .modal-content { padding: 1.5rem; } }