vibelog/template/src/styles/global.css

Bring your own content with some vibes ✨

/**
 * The CSS is based off of Astro's default blog theme
 * https://github.com/withastro/astro/blob/8483502bb222858af96304a35f5d94b450d2e132/examples/blog/src/styles/global.css
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

/**
  * Colors: Solid
  * -------------------------------------------------------------------------- */

:root {
  --vibe-c-white: #fafafa;
  --vibe-c-black: #13151a;

  --vibe-c-neutral: var(--vibe-c-black);
  --vibe-c-neutral-inverse: var(--vibe-c-white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vibe-c-white: #13181f;
    --vibe-c-black: #f8fafc;

    --vibe-c-neutral: var(--vibe-c-white);
    --vibe-c-neutral-inverse: var(--vibe-c-black);
  }

  pre {
    background-color: rgba(255, 255, 255, 0.05);
  }

  blockquote {
    background-color: rgba(255, 255, 255, 0.05);
  }

  img:not([src*=".svg"]) {
    filter: grayscale(50%);
  }

  img[src*=".svg"] {
    filter: invert(100%);
  }
}

/**
  * Colors: Palette
  * -------------------------------------------------------------------------- */

:root {
  /* Gray Scale - 3 levels + soft */
  --vibe-c-gray-1: #606f9f; /* Secondary text */
  --vibe-c-gray-2: #e5e9f0; /* Light borders */
  --vibe-c-gray-3: #f5f6f8; /* Lightest bg */
  --vibe-c-gray-soft: rgba(96, 115, 159, 0.1);

  /* Blue Accent */
  --vibe-c-blue-1: #1e2bcc; /* Darker blue for text */
  --vibe-c-blue-2: #2337ff; /* Main accent */
  --vibe-c-blue-3: #4d5fff; /* Lighter for backgrounds */
  --vibe-c-blue-soft: rgba(35, 55, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vibe-c-gray-1: #dce0e7; /* Light text in dark mode */
    --vibe-c-gray-2: #9fb2dd; /* Medium gray */
    --vibe-c-gray-3: #222939; /* Dark bg */
    --vibe-c-gray-soft: rgba(159, 178, 221, 0.1);

    --vibe-c-blue-1: #8bb5ff; /* Light blue for text */
    --vibe-c-blue-2: #60a5fa; /* Main accent */
    --vibe-c-blue-3: #3b82f6; /* Darker for backgrounds */
    --vibe-c-blue-soft: rgba(96, 165, 250, 0.1);
  }
}

/**
  * Colors: Background
  * -------------------------------------------------------------------------- */

:root {
  --vibe-c-bg: var(--vibe-c-white);
  --vibe-c-bg-alt: var(--vibe-c-gray-3);
  --vibe-c-bg-elv: var(--vibe-c-white);
  --vibe-c-bg-soft: var(--vibe-c-gray-2);
}

/**
  * Colors: Borders
  * -------------------------------------------------------------------------- */

:root {
  --vibe-c-border: var(--vibe-c-gray-2);
  --vibe-c-divider: var(--vibe-c-gray-2);
  --vibe-c-gutter: var(--vibe-c-gray-2);
}

/**
  * Colors: Text
  * -------------------------------------------------------------------------- */

:root {
  --vibe-c-text-1: #222939; /* Primary text */
  --vibe-c-text-2: var(--vibe-c-gray-1); /* Secondary text */
  --vibe-c-text-3: var(--vibe-c-gray-1); /* Subtle text */
}

@media (prefers-color-scheme: dark) {
  :root {
    --vibe-c-text-1: #dce0e7;
  }
}

/**
  * Colors: Function
  * -------------------------------------------------------------------------- */

:root {
  --vibe-c-default-1: var(--vibe-c-gray-1);
  --vibe-c-default-2: var(--vibe-c-gray-2);
  --vibe-c-default-3: var(--vibe-c-gray-3);
  --vibe-c-default-soft: var(--vibe-c-gray-soft);

  --vibe-c-brand-1: var(--vibe-c-blue-1);
  --vibe-c-brand-2: var(--vibe-c-blue-2);
  --vibe-c-brand-3: var(--vibe-c-blue-3);
  --vibe-c-brand-soft: var(--vibe-c-blue-soft);

  /* Legacy support */
  --vibe-accent: var(--vibe-c-brand-2);
}

/**
  * Typography
  * -------------------------------------------------------------------------- */

:root {
  --vibe-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif;
  --vibe-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas",
    monospace;

  /* Font Scale */
  --vibe-font-size-root: 1.25rem;
  --vibe-font-size-xs: 0.8rem;
  --vibe-font-size-sm: 1rem;
  --vibe-font-size-md: 1.25rem;
  --vibe-font-size-lg: 1.563rem;
  --vibe-font-size-xl: 1.953rem;
  --vibe-font-size-2xl: 2.441rem;
  --vibe-font-size-3xl: 3.052rem;

  /* Line Heights */
  --vibe-line-height-tight: 1.2;
  --vibe-line-height-normal: 1.6;
  --vibe-line-height-relaxed: 1.75;
}

/**
  * Spacing
  * -------------------------------------------------------------------------- */

:root {
  --vibe-space-1: 0.5rem;
  --vibe-space-2: 1rem;
  --vibe-space-3: 2rem;
  --vibe-space-4: 3rem;
  --vibe-space-5: 6rem;
}

/**
 * Border Radius
 * -------------------------------------------------------------------------- */

:root {
  --vibe-border-radius-sm: 2px;
  --vibe-border-radius-md: 8px;
  --vibe-border-radius-lg: 12px;
}

/**
 * Border Width
 * -------------------------------------------------------------------------- */

:root {
  --vibe-border-width-thin: 1px;
  --vibe-border-width-thick: 4px;
}

/**
  * Shadows
  * -------------------------------------------------------------------------- */

:root {
  --vibe-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1);
  --vibe-shadow-2: 0 2px 6px rgba(96, 115, 159, 0.25),
    0 8px 24px rgba(96, 115, 159, 0.33), 0 16px 32px rgba(96, 115, 159, 0.33);
  --vibe-shadow-3: 0 16px 32px rgba(96, 115, 159, 0.33);
}

/**
  * Transitions
  * -------------------------------------------------------------------------- */

:root {
  --vibe-transition-timing: 0.2s ease;
  --vibe-transition-timing-slow: 0.3s ease;
}

/**
  * Layout
  * -------------------------------------------------------------------------- */

:root {
  --vibe-layout-max-width: 720px;
  --vibe-layout-content-width: calc(100% - 2em);
}

/**
  * Component: Header
  * -------------------------------------------------------------------------- */

:root {
  --vibe-header-height: 64px;
  --vibe-header-bg: var(--vibe-c-bg);
  --vibe-header-shadow: 0 2px 8px rgba(34, 41, 57, 0.05);
  --vibe-header-nav-link-color: var(--vibe-c-text-1);
  --vibe-header-nav-link-hover-color: var(--vibe-c-brand-2);
  --vibe-header-nav-link-active-border: var(--vibe-c-brand-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vibe-header-shadow: 0 2px 8px rgba(220, 224, 231, 0.05);
  }
}

/**
  * Component: Code
  * -------------------------------------------------------------------------- */

:root {
  --vibe-code-font-size: 0.875em;
  --vibe-code-color: var(--vibe-c-text-1);
  --vibe-code-bg: var(--vibe-c-default-soft);
  --vibe-code-block-bg: var(--vibe-c-bg-alt);
  --vibe-code-block-border-radius: 8px;
}

/**
  * Component: Blog
  * -------------------------------------------------------------------------- */

:root {
  --vibe-blog-item-title-color: var(--vibe-c-text-1);
  --vibe-blog-item-date-color: var(--vibe-c-text-2);
  --vibe-blog-item-hover-color: var(--vibe-c-brand-2);
}

/**
  * Component: Image
  * -------------------------------------------------------------------------- */

:root {
  --vibe-image-border-radius: 8px;
  --vibe-image-shadow: var(--vibe-shadow-2);
}

/**
  * Component: Blockquote
  * -------------------------------------------------------------------------- */

:root {
  --vibe-blockquote-bg: var(--vibe-c-default-soft);
  --vibe-blockquote-border-color: var(--vibe-c-brand-2);
  --vibe-blockquote-border-width: 4px;
}

/**
  * Component: Scrollbar
  * -------------------------------------------------------------------------- */

:root {
  --vibe-scrollbar-width: 8px;
  --vibe-scrollbar-track-bg: var(--vibe-c-default-soft);
  --vibe-scrollbar-thumb-bg: var(--vibe-c-brand-2);
  --vibe-scrollbar-border-radius: 4px;
}

/**
  * Base Styles
  * -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  font-family: var(--vibe-font-family-base);
  padding: 0;
  font-size: var(--vibe-font-size-root);
  line-height: var(--vibe-line-height-normal);
  color: var(--vibe-c-text-1);
  background-color: var(--vibe-c-bg);
  transition: background-color var(--vibe-transition-timing),
    color var(--vibe-transition-timing);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main {
  width: var(--vibe-layout-max-width);
  max-width: var(--vibe-layout-content-width);
  margin: auto;
  padding: var(--vibe-space-4) var(--vibe-space-2);
}

/**
  * Typography
  * -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--vibe-c-text-1);
  line-height: var(--vibe-line-height-tight);
  margin-bottom: var(--vibe-space-1);
}

h1 {
  font-size: var(--vibe-font-size-3xl);
}
h2 {
  font-size: var(--vibe-font-size-2xl);
}
h3 {
  font-size: var(--vibe-font-size-xl);
}
h4 {
  font-size: var(--vibe-font-size-lg);
}
h5 {
  font-size: var(--vibe-font-size-md);
}

strong,
b {
  font-weight: 700;
}

a {
  color: var(--vibe-c-brand-2);
  text-decoration: none;
}

a:hover {
  color: var(--vibe-c-brand-1);
}

p {
  margin-bottom: var(--vibe-space-2);
}

textarea {
  width: 100%;
  font-size: inherit;
}

input {
  font-size: inherit;
}

table {
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--vibe-image-border-radius);
  box-shadow: var(--vibe-image-shadow);
}

svg {
  stroke: currentColor;
}

code {
  font-family: var(--vibe-font-family-mono);
  font-size: var(--vibe-code-font-size);
  color: var(--vibe-code-color);
  background-color: var(--vibe-code-bg);
  padding: 0.25rem 0.5rem;
  border-radius: var(--vibe-border-radius-sm);
}

pre {
  background-color: var(--vibe-code-block-bg);
  padding: 1.5rem;
  border-radius: var(--vibe-code-block-border-radius);

  & > code {
    all: unset;
  }
}

blockquote {
  background-color: var(--vibe-blockquote-bg);
  border-left: var(--vibe-blockquote-border-width) solid
    var(--vibe-blockquote-border-color);
  padding: 0 0 0 1em;
  font-size: var(--vibe-font-size-md);
  font-style: italic;
}

hr {
  border: none;
  border-top: var(--vibe-border-width-thin) solid var(--vibe-c-divider);
}

::-webkit-scrollbar {
  width: var(--vibe-scrollbar-width);
  height: var(--vibe-scrollbar-width);
}

::-webkit-scrollbar-track {
  background-color: var(--vibe-scrollbar-track-bg);
  border-radius: var(--vibe-scrollbar-border-radius);
}

::-webkit-scrollbar-thumb {
  background-color: var(--vibe-scrollbar-thumb-bg);
  border-radius: var(--vibe-scrollbar-border-radius);
}

/**
  * Header Component
  * -------------------------------------------------------------------------- */

.site-header {
  padding-inline: 1em;
  background-color: var(--vibe-header-bg);
  box-shadow: var(--vibe-header-shadow);

  & h2 {
    font-size: var(--vibe-font-size-root);
  }

  & nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.site-nav-links {
  display: flex;
  gap: var(--vibe-space-2);

  & a {
    padding: var(--vibe-space-2) var(--vibe-space-1);
    color: var(--vibe-header-nav-link-color);
    border-bottom: 4px solid transparent;
    transition: all var(--vibe-transition-timing);

    &.active {
      border-bottom-color: var(--vibe-header-nav-link-active-border);
    }

    &:hover {
      color: var(--vibe-header-nav-link-hover-color);
      border-bottom-color: var(--vibe-header-nav-link-active-border);
    }
  }
}

/**
  * Footer Component
  * -------------------------------------------------------------------------- */

footer {
  padding: var(--vibe-space-2) var(--vibe-space-1) var(--vibe-space-5)
    var(--vibe-space-1);
  background-color: var(--vibe-c-bg);
  color: var(--vibe-c-text-2);
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--vibe-space-2);
  margin-top: var(--vibe-space-2);

  & a {
    color: var(--vibe-c-text-2);
    transition: color var(--vibe-transition-timing);

    &:hover {
      color: var(--vibe-c-text-1);
    }
  }
}

/**
  * Blog List Component
  * -------------------------------------------------------------------------- */

.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--vibe-space-3);
  list-style-type: none;
  padding: 0;
}

.blog-list-item {
  width: 100%;
}

.blog-item-link {
  display: block;
  text-decoration: none;
  transition: all var(--vibe-transition-timing);

  &:hover {
    & .blog-item-title,
    & .blog-item-date {
      color: var(--vibe-blog-item-hover-color);
    }
  }
}

.blog-item-title {
  color: var(--vibe-blog-item-title-color);
  line-height: 1;
}

.blog-item-date {
  color: var(--vibe-blog-item-date-color);
}

/**
  * Blog Post Component
  * -------------------------------------------------------------------------- */

.blog-post {
  width: 100%;
}

.blog-post-hero {
  width: 100%;
  margin-bottom: var(--vibe-space-3);

  & img {
    display: block;
    margin: 0 auto;
    border-radius: var(--vibe-border-radius-lg);
    box-shadow: var(--vibe-image-shadow);
  }
}

.blog-post-content {
  width: var(--vibe-layout-max-width);
  max-width: var(--vibe-layout-content-width);
  margin: auto;
  padding: var(--vibe-space-2);
  color: var(--vibe-c-text-1);
}

.blog-post-header {
  padding: var(--vibe-space-2) 0;
  text-align: center;
  line-height: 1;
}

.blog-post-title {
  margin-bottom: var(--vibe-space-1);
}

.blog-post-date {
  margin-bottom: var(--vibe-space-1);
  color: var(--vibe-c-text-2);
}

.blog-post-update {
  font-style: italic;
  color: var(--vibe-c-text-2);
}

/**
  * Content Elements
  * -------------------------------------------------------------------------- */

.prose p {
  margin-bottom: var(--vibe-space-3);
}

/**
  * Utilities
  * -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/**
  * Responsive Styles
  * -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  body {
    font-size: 18px;
  }

  main {
    padding: var(--vibe-space-2);
  }

  .blog-list {
    gap: var(--vibe-space-1);
  }

  .blog-list-item {
    text-align: center;
  }

  .social-links {
    display: none;
  }
}