gil.ink/scss/_theme.scss

@use "sass:color";
@use "font";

/*
Themes
*/

$white: #fff;
$swhite: #f8f8f8;
$lgray: #ddd;
$gray: #888;
$dgray: #555;
$sblack: #111;
$black: #000;
$red: #b22;
$orange: #b72;
$yellow: #db3;
$green: #594;
$teal: #39a;
$blue: #36c;
$purple: #75c;

$font-sans: "Inter", sans-serif;
$font-disp: "Poppins", sans-serif;
$font-mono: "Hack", monospace;

:root,
[data-selected-theme="grayscalelight"] {
  --color-bg: #{$white};
  --color-bg-2: #{$swhite};
  --color-ui: #{$lgray};
  --color-ui-2: #{$gray};
  --color-ui-3: #{$dgray};
  --color-tx: #{$sblack};
  --color-link: #{$blue};
  --color-hover: #{color.scale($blue, $lightness: -50%)};
  --color-active: #{color.scale($blue, $lightness: +50%)};
  --font-sans: #{$font-sans};
  --font-disp: #{$font-disp};
  --font-mono: #{$font-mono};
}

/*
[data-selected-theme="light"] {
  --color-background: #aabf7e; //aabf7e
  --text-normal: #191b19; //191b19
  --text-invert: #fff;
  --text-subtle: #595959; //595959
  --color-primary: #344f1f; //344f1f
  --color-secondary: #60941a; //60941a
  --color-link: #309bae; //309bae
  --color-paper: #e8efd7; //e8efd7
}
*/

/*
Themed elements
*/
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-disp);
}

pre, code, .monospace {
  font-family: var(--font-mono);
  font-size: 95%;
}

a {
  color: var(--color-link);
  text-decoration: dotted underline;
  &:hover {
    color: var(--color-hover);
    text-decoration: solid underline;
  }
  &:active {
    color: var(--color-active);
  }
}

h1 {
  color: var(--color-primary);
}
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-secondary);
}

hr {
  background-color: var(--text-normal);
  border: none;
}

.muted {
  color: var(--text-subtle); // Muted color
}

.site {
  color: var(--color-tx);
}

.idcard {
  margin: auto;
  background: #{color.scale($orange, $lightness: +95%)};
  background: linear-gradient(
    120deg,
    #{color.scale($orange, $lightness: +95%)} 79%,
    #{$teal} 79%,
    #{$teal} 80%,
    #{color.scale($orange, $lightness: +95%)} 80%,
    #{color.scale($orange, $lightness: +95%)} 81%,
    #{$teal} 81%,
    #{$green} 84%,
    #{color.scale($orange, $lightness: +95%)} 84%,
    #{color.scale($orange, $lightness: +95%)} 85%,
    #{$green} 78%
  );
  border: solid var(--color-bg-2) 2px;
  border-radius: 15px;
  &__header {
    padding: 15px;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #{$green};
    text-transform: uppercase;
    font-weight: bold;
    h3 {
      margin-top: 0px;
      text-align: center;
      color: #{color.scale($orange, $lightness: +95%)};
    }
  }

  &__picture {
    max-width: 200px;
    margin: auto;
    margin-top: 20px;
  }

  &__bio {
    padding: 15px;
    width: max-content;
    p {
      margin-top: 5px;
    }
  }

  &__label {
    font-weight: bold;
    font-size: 85%;
    color: #{$blue};
  }
}

.box {
  border-radius: 15px;
  border: dashed 1px var(--color-ui);
  background-color: var(--color-bg-2);
}

.pad {
  padding: 15px;
  padding-top: 0;
}

.gap {
  gap: 15px;
}

code,
pre {
  border: solid var(--color-ui-2) 1px;
  border-radius: 3px;
  background-color: var(--color-ui);
  padding: 0 2px;
}

.category {
  border-radius: 15px;
  background-color: var(--color-link);
  color: var(--color-bg);
  padding: 0 5px;
}