From 13f0aa7dc06b3a4e70a14a2656ab5d7ed68cc9fc Mon Sep 17 00:00:00 2001 From: Chrissy LeMaire Date: Mon, 9 Dec 2024 07:09:06 +0100 Subject: [PATCH] added logo to readme --- README.md | 6 +- css/components/auth.css | 185 ++++++++------------------------------- css/components/media.css | 1 - 3 files changed, 41 insertions(+), 151 deletions(-) diff --git a/README.md b/README.md index ab0709a..4dd7e5d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # Mutesky - Bulk manage Bluesky mutes with pre-populated keyword lists -Mutesky gives you control over what appears in your Bluesky feed through curated keyword collections. It works directly with Bluesky's native mute system to filter out content you'd rather not see. +Mutesky Logo Mutesky is a web app that gives you granular control over what appears in your Bluesky feed through curated keyword collections. Working directly with Bluesky's native mute system, it provides an intuitive interface to filter out content you'd rather not see. With over 1,400 pre-populated keywords organized into 20+ smart categories, Mutesky makes content filtering both easy and effective. + +  ## Key Features @@ -46,4 +48,4 @@ Check out [US Politician Labeler](https://bsky.app/profile/did:plc:bxnuth7kms5l5 ## Coming Soon -AI-powered dynamic keyword updates: An optional service that automatically identifies and updates mute keywords hourly based on emerging trends and topics. \ No newline at end of file +AI-powered dynamic keyword updates: An optional service that automatically identifies and updates mute keywords hourly based on emerging trends and topics. diff --git a/css/components/auth.css b/css/components/auth.css index 5150f67..84bf048 100644 --- a/css/components/auth.css +++ b/css/components/auth.css @@ -1,12 +1,11 @@ /* Auth Container */ .bsky-connect { - background: var(--background); - border-radius: 16px; + background: var(--surface); + border-radius: 20px; padding: 24px; - margin-top: 24px; border: 1px solid var(--border); position: relative; - overflow: hidden; + overflow: visible; } .bsky-connect::before { @@ -15,195 +14,85 @@ inset: 0; background: var(--surface-gradient); opacity: 0; - transition: opacity 0.3s ease; + transition: opacity 0.2s ease-in-out; + border-radius: inherit; } .bsky-connect:hover::before { opacity: 1; } +/* Sign In Header */ .sign-in-title { - font-size: 22px; + font-size: 20px; font-weight: 800; - color: var(--text); - margin: 0 0 4px 0; - letter-spacing: -0.02em; - position: relative; + margin: 0; + letter-spacing: -0.01em; + line-height: 1.3; } +/* Auth Container Layout */ .bsky-auth-container { display: flex; flex-direction: column; - gap: 16px; - position: relative; - margin-top: 12px; -} - -.auth-section { - width: 100%; -} - -/* Input Styling */ -.input-wrapper { - position: relative; - width: 100%; - margin-top: 16px; -} - -.input-wrapper::before { - content: '@'; - position: absolute; - left: 16px; - top: 50%; - transform: translateY(-50%); - color: var(--text-secondary); - font-size: 15px; - z-index: 1; - opacity: 0.7; - pointer-events: none; -} - -.bsky-handle-input { - width: 100%; - padding: 12px 16px 12px 36px; - font-size: 15px; - border: 1px solid var(--border); - border-radius: 12px; - background: var(--surface); - color: var(--text); - transition: var(--transition); -} - -.bsky-handle-input:hover:not(:disabled) { - border-color: var(--text-secondary); - background: var(--background); -} - -.bsky-handle-input:focus:not(:disabled) { - outline: none; - border-color: var(--primary); - background: var(--background); - box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); -} - -.bsky-handle-input.error { - border-color: var(--error); - background: rgba(var(--error-rgb), 0.05); -} - -.bsky-handle-input.error:focus { - box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.15); -} - -.bsky-handle-input:disabled { - opacity: 0.6; - cursor: not-allowed; - background: var(--surface); - border-color: var(--border); + margin-top: 24px; + gap: 24px; } -.bsky-handle-input::placeholder { +/* Explanatory Text */ +.bsky-auth-message { color: var(--text-secondary); - opacity: 0.7; + line-height: 1.5; + margin-bottom: 16px; } -/* Auth Button */ +/* Input & Button Overrides */ +.bsky-handle-input, .btn-auth { - width: 100%; - padding: 12px 16px; - font-size: 15px; - font-weight: 700; - color: #ffffff; - background: var(--primary); - border: none; + min-height: 48px; + height: auto; + padding: 14px 16px; + line-height: 1.3; border-radius: 12px; - cursor: pointer; - transition: var(--transition); - position: relative; - overflow: hidden; -} - -.btn-auth::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(90deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(255, 255, 255, 0) 100%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.btn-auth:hover:not(:disabled) { - background: var(--primary-hover); - transform: translateY(-1px); -} - -.btn-auth:hover:not(:disabled)::before { - opacity: 1; } -.btn-auth:active:not(:disabled) { - transform: translateY(0); -} - -.btn-auth:disabled { - opacity: 0.6; - cursor: not-allowed; - background: var(--primary); -} - -/* Auth Message */ -.bsky-auth-message { - margin-top: 4px; - font-size: 14px; - color: var(--text-secondary); - padding: 0 4px; - transition: all 0.3s ease; +.bsky-handle-input { + background: var(--background); + padding-left: 36px; } +/* Error States */ .bsky-auth-message.error { color: var(--error); background: rgba(var(--error-rgb), 0.1); - border-radius: 8px; + border-radius: 12px; padding: 12px; margin: 8px 0; } -.auth-error { - font-weight: 500; - line-height: 1.5; - padding: 4px 0; -} - @media (max-width: 768px) { .bsky-connect { - margin-top: 20px; padding: 20px; + border-radius: 16px; } - .sign-in-title { - font-size: 20px; + .bsky-auth-container { + gap: 20px; } } @media (max-width: 480px) { .bsky-connect { padding: 16px; - margin-top: 16px; - } - - .sign-in-title { - font-size: 18px; + border-radius: 12px; } - .bsky-handle-input, - .btn-auth { - padding: 10px 14px 10px 32px; + .bsky-auth-container { + gap: 16px; + margin-top: 20px; } - .input-wrapper::before { - left: 14px; + .bsky-auth-message { + font-size: 14px; } } diff --git a/css/components/media.css b/css/components/media.css index f494dce..57d03ca 100644 --- a/css/components/media.css +++ b/css/components/media.css @@ -19,7 +19,6 @@ .bsky-connect { flex-direction: column; width: 100%; - padding: 0 var(--spacing-md); } .bsky-auth-container {