css: make colors simpler

needs more work

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>
This commit is contained in:
2023-04-16 00:02:33 +05:30
parent b2c9d4fdbd
commit 9851b69c6a
2 changed files with 22 additions and 35 deletions

View File

@@ -92,37 +92,24 @@
} }
:root { :root {
--yellow: #b58900; --yellow: #fcdb03;
--orange: #cb4b16; --orange: #fc9403;
--red: #dc322f; --red: #ff2600;
--magenta: #d33682; --magenta: #d33682;
--violet: #6c71c4; --violet: #6c71c4;
--blue: #268bd2; --blue: #3e8ef0;
--cyan: #2aa198; --cyan: #2aa198;
--green: #859900; --green: #327841;
--fg0: #93a1a1; --fg0: #9c9c9c;
--fg1: #839496; --fg1: #828181;
--fg2: #657b83; --fg2: #5e5e5e;
--fg3: #586e75; --fg3: #403f3f;
--fg4: #073642; --fg4: #262626;
--fg5: #002b36; --fg5: #000000;
--bg0: #fdf6e3 ; --bg0: #ffffff ;
--bg1: #eee8d5; --bg1: #e6e6e6;
--dark: #002b36; --dark: #000000;
--light: #fdf6e3; --light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg0: #073642;
--bg1: #002b36;
--fg5: #fdf6e3 ;
--fg4: #eee8d5;
--fg3: #93a1a1;
--fg2: #839496;
--fg1: #657b83;
--fg0: #586e75;
}
} }
html { html {
@@ -188,7 +175,7 @@ nav a {
nav a:hover { nav a:hover {
background: var(--cyan); background: var(--cyan);
color: var(--dark); color: var(--bg0);
} }
footer { footer {
@@ -228,16 +215,16 @@ article .post-header {
color: var(--fg0); color: var(--fg0);
} }
.logo { .nattopages {
text-align: center; text-align: center;
margin: 1rem auto 3rem; margin: 1rem auto 3rem;
} }
.logo a { .nattopages a {
font-weight: bold; font-weight: bold;
font-family: "Monoid"; font-family: "Monoid";
font-size: 3rem; font-size: 3rem;
color: var(--green); color: var(--fg3);
text-decoration: none; text-decoration: none;
} }
@@ -270,8 +257,8 @@ pre {
.toc { .toc {
background: var(--bg1); background: var(--bg1);
border-radius: 1rem; border-radius: 1rem;
float: right; float: none;
max-width: 40%; width: max-content;
} }
img, video { img, video {

View File

@@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<header> <header>
<div class="logo"> <div class="nattopages">
<a href="/">nattopages</a> <a href="/">nattopages</a>
</div> </div>
<nav> <nav>