diff --git a/assets/new.scss b/assets/new.scss index ca8601b..fedf5e6 100644 --- a/assets/new.scss +++ b/assets/new.scss @@ -2,40 +2,42 @@ --- :root { - --backgroundColor: #fdfdfd; - --textColor: #303030; - --secondaryTextColor: #404040; - --mutedTextColor: #707070; - --subtleBackgroundColor: #f5f5f5; - --heartedBackgroundColor: #ffe2e2; - --selectionBackgroundColor: #ffc; - --linkColor: #2357cd; - --borderColor: #ccc; - --hrColor: #888; - --activeColor: #74d274; - --langBackgroundColor: #eeeeee; + /* Light Mode */ + --backgroundColor: #EFF1F5; /* froth */ + --textColor: #4C4F69; /* text */ + --secondaryTextColor: #565A6E; /* overlay2 */ + --mutedTextColor: #727585; /* overlay1 */ + --subtleBackgroundColor: #E6E9EF; /* surface2 */ + --heartedBackgroundColor: #F5E0DC; /* peach */ + --selectionBackgroundColor: #A6E3A1; /* green */ + --linkColor: #89B4FA; /* blue */ + --borderColor: #D9E0EE; /* crust */ + --hrColor: #ABAEC6; /* mantle */ + --activeColor: #F28FAD; /* pink */ + --langBackgroundColor: #DCE0EA; /* surface1 */ --langShadowColor: transparent; - --logoColor: #cccccc; - --photoBackground: #f4f4f4; + --logoColor: #B8C0E0; /* lavender */ + --photoBackground: #E9ECF2; /* surface0 */ } @media (prefers-color-scheme: dark) { :root { - --backgroundColor: #151615; - --textColor: #dbdfdf; - --secondaryTextColor: #cfd5d5; - --mutedTextColor: #b4b6b8; - --subtleBackgroundColor: #3a3b3b; - --heartedBackgroundColor: #652222; - --selectionBackgroundColor: #19446b; - --linkColor: #6eb8ff; - --borderColor: #414141; - --hrColor: #888; - --activeColor: #74d274; - --langBackgroundColor: #2c2c2c; - --langShadowColor: #0b0c0b33; - --logoColor: #555555; - --photoBackground: #1a1a1a; + /* Dark Mode */ + --backgroundColor: #1E1E2E; /* base */ + --textColor: #CDD6F4; /* text */ + --secondaryTextColor: #A6ADC8; /* overlay2 */ + --mutedTextColor: #88909F; /* overlay1 */ + --subtleBackgroundColor: #313244; /* surface2 */ + --heartedBackgroundColor: #913C3C; /* red */ + --selectionBackgroundColor: #223249; /* blue darker */ + --linkColor: #89B4FA; /* blue */ + --borderColor: #414559; /* crust */ + --hrColor: #4C4F69; /* mantle */ + --activeColor: #ABE9B3; /* green */ + --langBackgroundColor: #2A2A3C; /* surface1 */ + --langShadowColor: #00000033; + --logoColor: #6E6C7E; /* lavender darker */ + --photoBackground: #24273A; /* surface0 */ } } @@ -45,7 +47,7 @@ body { line-height: 1.7em; padding: 0 2.5em; margin: 0; - font-size: 18px; + font-size: 1.1em; word-wrap: break-word; } @@ -255,7 +257,7 @@ hr { article { font-family: system-ui, sans-serif; - font-size: 16px; + font-size: 1em; } .smol {