Vasanko/sanic
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Define sanic-background, sanic-text as top-level colors. Restructure color schemes to top of definition.

Browse Source
This commit is contained in:
SML 2023-02-09 06:13:00 +08:00
parent 51a9605668
commit 3587a4fe15
1 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
sanic/pages/styles/BasePage.css
View File

@ -1,8 +1,33 @@
/** BasePage **/ /** BasePage **/
:root {
--sanic: #ff0d68;
--sanic-blue: #0369a1;
--sanic-yellow: #FFE900;
--sanic-purple: #7e22ce;
--sanic-green: #4d7c0f;
--sanic-tab: #ffffff;
--sanic-background: #f1f5f9;
--sanic-text: #0f172a;
}
@media (prefers-color-scheme: dark) {
:root {
--sanic: #ef4444;
--sanic-blue: #38bdf8;
--sanic-yellow: #ffde41;
--sanic-purple: #b19bf8;
--sanic-green: #37d971;
--sanic-tab: #e8e3e3;
--sanic-background: #2b2f3b;
--sanic-text: #ccc;
}
}
html { html {
font: 16px sans-serif; font: 16px sans-serif;
background: #f1f5f9; background: var(--sanic-background);
color: #0f172a; color: var(--sanic-text);
scrollbar-gutter: stable; scrollbar-gutter: stable;
overflow: hidden auto; overflow: hidden auto;
} }
@ -11,20 +36,14 @@ body {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 125%; line-height: 125%;
--sanic: #ff0d68;
--sanic-blue: #0369a1;
--sanic-yellow: #FFE900;
--sanic-purple: #7e22ce;
--sanic-green: #4d7c0f;
--sanic-tab: #ffffff;
} }
body>* { body > * {
padding: 1rem 2vw; padding: 1rem 2vw;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
body>* { body > * {
padding: 0.5rem 1.5vw; padding: 0.5rem 1.5vw;
} }
@ -33,10 +52,12 @@ body>* {
font-size: calc(6px + 10 * 100vw / 1000); font-size: calc(6px + 10 * 100vw / 1000);
} }
} }
main { main {
min-height: 70vh; /* Make sure the footer is closer to bottom */ min-height: 70vh; /* Make sure the footer is closer to bottom */
padding: 1rem 2.5rem; /* Generous padding for readability */ padding: 1rem 2.5rem; /* Generous padding for readability */
} }
.smalltext { .smalltext {
font-size: 1.0rem; font-size: 1.0rem;
} }
@ -92,21 +113,6 @@ span.icon {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body {
--sanic: #ef4444;
--sanic-blue: #38bdf8;
--sanic-yellow: #ffde41;
--sanic-purple: #b19bf8;
--sanic-green: #37d971;
--sanic-tab: #e8e3e3;
}
html {
background: #2b2f3b;
color: #ccc;
}
#logo-simple path:last-child { #logo-simple path:last-child {
fill: #e1e1e1; fill: #e1e1e1;
} }