113 lines
2.3 KiB
CSS
113 lines
2.3 KiB
CSS
@import url("gruvbox-material.css");
|
|
|
|
:root {
|
|
--background: var(--bg0);
|
|
--foreground: var(--fg0);
|
|
--accent: var(--green);
|
|
--faint_foreground: var(--grey0);
|
|
--code_background: var(--bg_dim);
|
|
--highlight_background: var(--bg3);
|
|
}
|
|
|
|
::selection, ::-moz-selection {
|
|
background: var(--highlight_background);
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
/* actually i don't like how transitions look */
|
|
/* transition: 0.3s; */
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--background) !important;
|
|
background-color: var(--accent) !important;
|
|
text-decoration-line: none;
|
|
}
|
|
|
|
.code-toolbar {
|
|
border: 1px solid var(--bg3);
|
|
}
|
|
|
|
code {
|
|
background: var(--code_background);
|
|
}
|
|
|
|
.post-meta {
|
|
color: var(--faint_foreground);
|
|
}
|
|
|
|
.footnotes {
|
|
color: var(--faint_foreground);
|
|
}
|
|
|
|
.footnotes hr {
|
|
background: var(--faint_foreground);
|
|
}
|
|
|
|
/* post divider */
|
|
.post:not(:last-of-type) {
|
|
border-bottom: 1px solid var(--bg_statusline1);
|
|
}
|
|
|
|
/* note: grey0 is actually fg0 with 0.5 opacity over bg0, so the below footer css has no effect. however, i've decided
|
|
* to write it this way because i prefer to not use opacity to create colours when possible, instead setting
|
|
* full-opacity explicit/unmodified colours. opacity is still used to create the dimmer hr in the footer.
|
|
* I would set the hr full opacity but there isn't really a "dim green" I can use. */
|
|
|
|
.footer {
|
|
opacity: 1 !important;
|
|
color: var(--faint_foreground);
|
|
}
|
|
|
|
.footer hr {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.socials-block {
|
|
/* centre content inside div: */
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 50px;
|
|
margin-top: 30px;
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
.socials-icon {
|
|
width: 50px;
|
|
margin-top: 0px;
|
|
/* https://codepen.io/sosuke/pen/Pjoqqp */
|
|
filter:
|
|
brightness(0)
|
|
saturate(100%)
|
|
invert(62%)
|
|
sepia(27%)
|
|
saturate(258%)
|
|
hue-rotate(356deg)
|
|
brightness(97%)
|
|
contrast(81%)
|
|
;
|
|
border: none;
|
|
}
|
|
|
|
.socials-icon:hover {
|
|
/* https://codepen.io/sosuke/pen/Pjoqqp */
|
|
filter:
|
|
brightness(0)
|
|
saturate(100%)
|
|
invert(6%)
|
|
sepia(2%)
|
|
saturate(156%)
|
|
hue-rotate(314deg)
|
|
brightness(108%)
|
|
contrast(80%)
|
|
;
|
|
}
|
|
|
|
/* required to clear the float */
|
|
.socials-block::after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|