jae-blog/static/style.css

175 lines
2.6 KiB
CSS
Raw Normal View History

2024-08-17 18:44:59 +03:00
/* colors from catppuccin https://github.com/catppuccin/catppuccin
licensed under the MIT license, available in the source tree */
2024-04-18 04:05:38 +03:00
:root {
--base: #1e1e2e;
--text: #cdd6f4;
--crust: #11111b;
--surface0: #313244;
--subtext0: #a6adc8;
--subtext1: #bac2de;
--pink: #f5c2e7;
--rosewater: #f5e0dc;
--blue: #89b4fa;
--mauve: #cba6f7;
}
@media (prefers-color-scheme: light) {
:root {
--base: #eff1f5;
--text: #4c4f69;
--crust: #dce0e8;
--surface0: #ccd0da;
--subtext0: #6c6f85;
--subtext1: #5c5f77;
--pink: #ea76cb;
--rosewater: #dc8a78;
--blue: #1e66f5;
--mauve: #8839ef;
}
}
2024-04-19 16:46:26 +03:00
:root,
code {
2024-04-18 04:05:38 +03:00
/* please have one at least one good monospace font */
2024-05-01 23:12:52 +03:00
font-family: "Hack", "Hack Nerd Font", "JetBrains Mono", "JetBrainsMono Nerd Font", "Ubuntu Mono", monospace, sans-serif;
2024-04-19 16:46:26 +03:00
}
2024-04-18 04:05:38 +03:00
2024-04-19 16:46:26 +03:00
:root {
2024-04-18 04:05:38 +03:00
background-color: var(--base);
color: var(--text);
}
a {
color: var(--pink);
}
a:hover {
color: var(--rosewater);
}
a:active {
color: var(--blue);
}
a:visited {
color: var(--mauve);
}
code {
padding: 0.15em 0.4em;
background-color: var(--surface0);
color: var(--subtext0);
}
.tooltipped {
border-bottom: 1px dotted var(--text);
}
hr {
color: var(--subtext1);
}
footer {
text-align: end;
font-size: small;
2024-04-19 22:51:20 +03:00
color: var(--subtext0);
2024-04-18 04:05:38 +03:00
}
.post-author {
font-size: smaller;
opacity: 0.65;
}
2024-05-01 23:12:52 +03:00
div.post {
margin-bottom: 1em;
}
.table {
display: grid;
/*grid-template-columns: auto auto auto;
grid-template-rows: auto auto;*/
width: max-content;
}
.table > :not(.value)::after {
content: ":";
}
.table > .value {
margin-left: 1em;
grid-column: 2;
}
.table > .created {
grid-row: 1;
}
.table > .modified {
grid-row: 2;
}
.table > .tags {
grid-row: 3;
}
2024-08-01 00:25:42 +03:00
#sort {
display: inline-block;
margin-bottom: 1rem;
}
2024-04-18 04:05:38 +03:00
/* BEGIN cool effect everyone liked */
body {
margin: 0;
padding: 0;
background-color: var(--base);
}
main {
padding: 1em;
background-color: var(--base);
}
body > main > h1:first-child {
margin-top: 0;
}
@media (min-width: 956px) {
:root {
--target-ratio: 0.7; /* 669px - 1344x */
--width: min(100% * var(--target-ratio), 1920px * var(--target-ratio));
--padding: 4em;
--padded-width: calc(var(--width) - var(--padding) * 2);
}
body {
padding: 4em 0;
min-height: calc(100vh - 8em);
background: var(--crust);
background: linear-gradient(
90deg,
var(--base) 0%,
var(--crust) calc((100% - var(--width)) / 2),
var(--crust) calc(50% + var(--width) / 2),
var(--base) 100%
);
}
body > * {
margin: auto;
padding: var(--padding);
width: var(--padded-width);
}
body > footer {
padding: initial;
width: var(--width);
}
}
/* END cool effect everyone liked */