From cbd920bfe4ca09e9365e711bc03a4b9cb715772c Mon Sep 17 00:00:00 2001 From: James Date: Sat, 14 Feb 2026 02:29:52 -0500 Subject: [PATCH] Typography cleanup: consistent weights, sizes, spacing --- index.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 030f4fe..0ca16fe 100644 --- a/index.html +++ b/index.html @@ -20,43 +20,43 @@ body { background: #0a0a0a; color: #e0ddd5; font-family: 'Sora', sans-serif; ove /* Clock */ #clock-wrap { position: relative; } canvas#clock { width: 180px; height: 180px; } -#digital-time { text-align: center; color: #c8b273; font-size: 22px; font-weight: 300; letter-spacing: 3px; margin-top: 6px; font-variant-numeric: tabular-nums; } -#digital-date { text-align: center; color: #666; font-size: 13px; font-weight: 300; letter-spacing: 1px; margin-top: 2px; } +#digital-time { text-align: center; color: #c8b273; font-size: 20px; font-weight: 300; letter-spacing: 2px; margin-top: 6px; font-variant-numeric: tabular-nums; } +#digital-date { text-align: center; color: #666; font-size: 11px; font-weight: 400; letter-spacing: 1px; margin-top: 2px; } /* Calendar */ #calendar { width: 100%; max-width: 280px; } #cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } -#cal-nav button { background: none; border: 1px solid #333; color: #c8b273; font-family: 'Sora'; font-size: 16px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } +#cal-nav button { background: none; border: 1px solid #333; color: #c8b273; font-family: 'Sora'; font-size: 14px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } #cal-nav button:hover { background: #1a1a1a; border-color: #c8b273; } -#cal-title { color: #c8b273; font-size: 15px; font-weight: 600; letter-spacing: 1px; } +#cal-title { color: #c8b273; font-size: 13px; font-weight: 600; letter-spacing: 1px; } #cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; } #cal-grid .day-name { color: #555; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 4px 0; } -#cal-grid .day { padding: 5px 0; font-size: 13px; font-weight: 300; color: #444; border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } +#cal-grid .day { padding: 5px 0; font-size: 12px; font-weight: 400; color: #444; border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } #cal-grid .day.current-month { color: #999; } -#cal-grid .day.today { background: #c8b273; color: #0a0a0a; font-weight: 700; } +#cal-grid .day.today { background: #c8b273; color: #0a0a0a; font-weight: 600; } #cal-grid .day.sunday { color: #664; } #cal-grid .day.current-month.sunday { color: #c8b273; opacity: 0.7; } #cal-grid .day.today.sunday { color: #0a0a0a; opacity: 1; } /* Alerts */ #alerts-section { flex: 1; overflow: hidden; display: flex; flex-direction: column; } -#alerts-header { color: #c8b273; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } +#alerts-header { color: #c8b273; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } #alerts-header .dot { width: 6px; height: 6px; border-radius: 50%; background: #c8b273; animation: pulse 3s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .2; } } #alert-list { flex: 1; overflow-y: auto; scrollbar-width: none; } #alert-list::-webkit-scrollbar { display: none; } -.alert-item { padding: 12px 40px 12px 16px; border-left: 2px solid #333; margin-bottom: 6px; background: #111; border-radius: 0 6px 6px 0; animation: slideIn .4s ease; position: relative; transition: all .3s; } +.alert-item { padding: 10px 36px 10px 14px; border-left: 2px solid #333; margin-bottom: 4px; background: #111; border-radius: 0 6px 6px 0; animation: slideIn .4s ease; position: relative; transition: all .3s; } .alert-item.info { border-left-color: #c8b273; } .alert-item.warning { border-left-color: #d4a050; } .alert-item.critical { border-left-color: #c45; } -.alert-msg { font-size: 16px; font-weight: 400; color: #ddd; line-height: 1.4; } -.alert-time { font-size: 11px; color: #888; margin-top: 4px; font-weight: 400; } +.alert-msg { font-size: 14px; font-weight: 400; color: #ddd; line-height: 1.45; } +.alert-time { font-size: 11px; color: #777; margin-top: 3px; font-weight: 400; } @keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .alert-item.critical .alert-msg { color: #e88; } -.alert-item.warning .alert-msg { color: #d4a050; } +.alert-item.warning .alert-msg { color: #dbc085; } -.alert-remove { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #333; font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1; font-family: 'Sora'; } +.alert-remove { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #333; font-size: 16px; cursor: pointer; padding: 4px 8px; line-height: 1; font-family: 'Sora'; } .alert-remove:hover { color: #c45; } .alert-item.done { opacity: 0.35; border-left-color: #2a2a2a !important; } .alert-item.done .alert-msg { text-decoration: line-through; }