142 lines
2.5 KiB
CSS
142 lines
2.5 KiB
CSS
/* Global link styles */
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Space+Grotesk:wght@300..700&display=swap");
|
|
|
|
:root {
|
|
--gap: 24px;
|
|
--content-gap: 20px;
|
|
--nav-width: 1024px;
|
|
--main-width: 720px;
|
|
--header-height: 60px;
|
|
--footer-height: 60px;
|
|
--radius: 8px;
|
|
--theme: rgb(255, 255, 255);
|
|
--entry: rgb(255, 255, 255);
|
|
--primary: #282828;
|
|
--secondary: #3c3836;
|
|
--tertiary: rgb(214, 214, 214);
|
|
--content: rgb(31, 31, 31);
|
|
--code-block-bg: rgb(28, 29, 33);
|
|
--code-bg: rgb(245, 245, 245);
|
|
--border: rgb(238, 238, 238);
|
|
color-scheme: light;
|
|
|
|
--red: #cc241d;
|
|
--redl: #fb4934;
|
|
|
|
--green: #98971a;
|
|
--greenl: #b8bb26;
|
|
|
|
--yellow: #d79921;
|
|
--yellowl: #fabd2f;
|
|
|
|
--blue: #458588;
|
|
--bluel: #83a598;
|
|
|
|
--purple: #b16286;
|
|
--purplel: #d3869b;
|
|
|
|
--aqua: #689d6a;
|
|
--aqual: #8ec07c;
|
|
|
|
--gray: #928374;
|
|
--grayl: #a89984;
|
|
|
|
--orange: #d65d0e;
|
|
--orangel: #fe8019;
|
|
|
|
--post-entry-bg: white; /* soft gruvbox light */
|
|
--post-entry-fg: #282828;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--theme: #181818;
|
|
--entry: rgb(46, 46, 51);
|
|
--primary: #fbf1c7;
|
|
--secondary: #ebdbb2;
|
|
--tertiary: rgb(65, 66, 68);
|
|
--content: rgb(196, 196, 197);
|
|
--code-block-bg: rgb(46, 46, 51);
|
|
--code-bg: rgb(55, 56, 62);
|
|
--border: rgb(151, 51, 51);
|
|
color-scheme: dark;
|
|
|
|
--post-entry-bg: #181818; /* bg1 */
|
|
--post-entry-fg: #ebdbb2;
|
|
}
|
|
|
|
body {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
}
|
|
|
|
nav #menu span {
|
|
padding: 0px 2px;
|
|
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-decoration-color: var(--green);
|
|
}
|
|
|
|
/* *
|
|
* NAV SECTION
|
|
* */
|
|
|
|
nav #menu span:hover {
|
|
background-color: var(--green);
|
|
color: white;
|
|
}
|
|
|
|
nav #menu .active {
|
|
border: 0px;
|
|
color: var(--green);
|
|
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-decoration-color: var(--green);
|
|
}
|
|
|
|
/* *
|
|
* MAIN SECTION
|
|
* */
|
|
main a {
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-decoration-color: var(--green);
|
|
}
|
|
|
|
main a:hover:not(.entry-link) {
|
|
background-color: var(--green);
|
|
color: white;
|
|
}
|
|
|
|
main h1 {
|
|
color: var(--green);
|
|
}
|
|
|
|
.share-buttons,
|
|
.toc,
|
|
.post-tags a {
|
|
border: 0px;
|
|
}
|
|
|
|
.anchor {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* main h1::before { */
|
|
/* content: "#"; */
|
|
/* color: var(--red); */
|
|
/* color: var(--green); */
|
|
/* margin-right: 0.5em; */
|
|
/* font-weight: bold; */
|
|
/* font-weight: bold; */
|
|
/* font-style: italic; */
|
|
/* } */
|
|
|
|
main .post-entry {
|
|
border: 0px;
|
|
background-color: var(--post-entry-bg);
|
|
color: var(--post-entry-fg);
|
|
border: 2px solid #383838;
|
|
}
|