website/src/styles/global.css

@import "https://unpkg.com/terminal.css@0.7.4/dist/terminal.min.css";

:root {
  /* Terminal Colors */
  --background-color: var(--base00, var(--background));
  --font-color: var(--base05, var(--foreground));
  --invert-font-color: var(--base01, var(--black));
  --primary-color: var(--base0C, var(--cyan));
  --secondary-color: var(--base0C, var(--cyan));
  --tertiary-color: var(--base0B, var(--green));
  --error-color: var(--base08, var(--red));
  --progress-bar-background: var(--base04, var(--blue));
  --progress-bar-fill: var(--base02, var(--cyan));
  --code-bg-color: var(--base00, var(--background));
  --global-font-color: var(--font-color);
  --page-width: 65em;
  /* Astro Config */
  --astro-code-color-text: var(--base05, --foreground);
  --astro-code-color-background: var(--base00, --background);
  --astro-code-token-constant: var(--base09, var(--orange, var(--cyan)));
  --astro-code-token-string: var(--base0B, --green);
  --astro-code-token-comment: var(--base03, --bright-black);
  --astro-code-token-keyword: var(--base0E, --magenta);
  --astro-code-token-parameter: var(--base08, --red);
  --astro-code-token-function: var(--base0D, --blue);
  --astro-code-token-string-expression: var(--base0B, --green);
  --astro-code-token-punctuation: var(--base05, --foreground);
  --astro-code-token-link: var(--base09, var(--orange, var(--cyan)));
  /*Fonts*/
  --mono-font-stack: monospace, sans-serif;
  --font-stack: var(--mono-font-stack);
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
  font-weight: normal;
  color: var(--base05, var(--foreground));
}

.hljs {
  color: var(--base01, var(--foreground));
  background: var(--base00, var(--background));
}

.hljs::selection,
.hljs ::selection {
  background-color: var(--base02, var(--cyan));
  color: var(--base05, var(--foreground));
}

/* purposely do not highlight these things */
.hljs-formula,
.hljs-params,
.hljs-property {}

/* base03 - var(--base03,) -  Comments, Invisibles, Line Highlighting */
.hljs-comment {
  background-color: var(--base00, var(--black));
  color: var(--base03, var(--bright-white));
}

/* base04 - var(--base04,) -  Dark Foreground (Used for status bars) */
.hljs-tag {
  color: var(--base04, var(--blue));
}

/* base05 - var(--base05,) -  Default Foreground, Caret, Delimiters, Operators */
.hljs-subst,
.hljs-punctuation,
.hljs-operator {
  color: var(--base05, var(--foreground));
}

.hljs-operator {
  opacity: 0.7;
}

/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
.hljs-bullet,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-tag,
.hljs-name,
.hljs-deletion {
  color: var(--base08, var(--red));
}

/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
.hljs-symbol,
.hljs-number,
.hljs-link,
.hljs-attr,
.hljs-variable.constant_,
.hljs-literal {
  color: var(--base09, var(--orange, var(--cyan)));
}

/* base0A - Classes, Markup Bold, Search Text Background */
.hljs-title,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: var(--base0A, var(--yellow));
}

.hljs-strong {
  font-weight: bold;
  color: var(--base0A, var(--yellow));
}

/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
.hljs-code,
.hljs-addition,
.hljs-title.class_.inherited__,
.hljs-string {
  color: var(--base0B, var(--green));
}

/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
.hljs-built_in,
.hljs-doctag,
/* guessing */
.hljs-quote,
.hljs-keyword.hljs-atrule,
.hljs-regexp {
  color: var(--base0C, var(--cyan));
}

/* base0D - Functions, Methods, Attribute IDs, Headings */
.hljs-function .hljs-title,
.hljs-attribute,
.ruby .hljs-property,
.hljs-title.function_,
.hljs-section {
  color: var(--base0D, var(--blue));
}

/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
.hljs-type,
/* .hljs-selector-id, */
/* .hljs-selector-class, */
/* .hljs-selector-attr, */
/* .hljs-selector-pseudo, */
.hljs-template-tag,
.diff .hljs-meta,
.hljs-keyword {
  color: var(--base0E, var(--magenta));
}

.hljs-emphasis {
  color: var(--base0E, var(--magenta));
  font-style: italic;
}

/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
.hljs-meta,
/*
  prevent top level .keyword and .string scopes
  from leaking into meta by accident
*/
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
  color: var(--base0F, var(--orange, var(--cyan)));
}

.hljs-meta .hljs-keyword,
/* for v10 compatible themes */
.hljs-meta-keyword {
  font-weight: bold;
}

code {
  background-color: var(--base03, var(--bright-black));
  color: var(--base07, var(--bright-white));
  font-weight: bold;
}

footer {
  padding-bottom: 1em;
}

.astro-code {
  background-color: unset;
  padding: 0.5rem;
}

main {
  min-height: 85vh;
}

li:has(.terminal-card)::after {
  content: unset;
}

.terminal-card:hover {
  color: var(--primary-color);
}

.terminal-card {
  padding: 1em;
}

.terminal-card header {
  margin: -1em -1em 1em -1em;
}

.button.button-microblog {
  background-color: var(--primary-color);
}

select {
  background-color: var(--background-color);
  color: var(--font-color);
  margin: 0 1ex;
  border-color: var(--primary-color);
}

ul li::before {
  content: none;
}

ol p {
  display: inline;
}

ol {
  list-style-type: decimal;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol ol ol ol {
  list-style-type: simp-chinese-informal;
}

ol ol ol ol ol {
  list-style-type: devanagari;
}

ol ol ol ol ol ol {
  list-style-type: katakana;
}

ol ol ol ol ol ol ol {
  list-style-type: lower-greek;
}

ol ol ol ol ol ol ol ol {
  list-style-type: cjk-earthly-branch;
}

ol ol ol ol ol ol ol ol ol {
  list-style-type: cjk-heavenly-stem;
}

ol ol ol ol ol ol ol ol ol ol {
  list-style-type: hebrew;
}

.terminal-nav {
  margin: 0 1em;
}

.marquee-button {
  width: 88px;
  height: 31px;
}