Custom CSS
In case anyone is interested in the CSS I’m using here with the Mythos theme to make it look similar to the Beach theme on Pika here it is. I still need to tweak it more as the code syntax display isn’t right.
:root {
/* Text Colors */
--color-text: #283b43; /* Primary text */
--color-text-light: #283b43; /* Secondary text */
--color-text-muted: #AAAFAE; /* Muted text */
/* Background Colors */
--color-background: #fffcf5; /* Main background */
--color-background-alt: #f4f2eb; /* Alternate background */
/* Border Colors */
--color-border: #d5d5d2; /* Standard borders */
--color-border-light: #f4f2eb; /* Light borders */
/* Link Colors */
--color-link: #0586a2; /* Link color */
--color-link-hover: #0586a2; /* Link hover color */
/* Accent Color */
--color-accent: #0586a2; /* Focus outlines, highlights */
--font-serif: 'Source Serif 4', serif;
--font-sans: 'Source Sans 3', sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
/* Text Colors */
--color-text: #fffaf0; /* Primary text */
--color-text-light: #fffaf0; /* Secondary text */
--color-text-muted: #808788; /* Muted text */
/* Background Colors */
--color-background: #283b43; /* Main background */
--color-background-alt: #3e4f54; /* Alternate background */
/* Border Colors */
--color-border: #3e4f54; /* Standard borders */
--color-border-light: #fffaf0; /* Light borders */
/* Link Colors */
--color-link: #4fc9e4; /* Link color */
--color-link-hover: #4fc9e4; /* Link hover color */
/* Accent Color */
--color-accent: #4fc9e4; /* Focus outlines, highlights */
}
}
.title-avatar {
width: 4rem;
height: 4rem;
}
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600,700&display=swap');
.site-title,
.site-title a {
font-family: var(--font-sans) !important;
font-size: 2rem !important;
font-weight: 700 !important;
}
body {
font-family: var(--font-sans);
}